.planning-kostenkaart{max-width:540px}
  /* ---------- projecttijdlijn: een uitvoerbare vooruitblik ---------- */
  .projecttijdlijn{display:grid;gap:var(--pagina-ruimte);min-width:0;padding:0 0 var(--ruimte-groep)}
  .projecttijdlijn-inleiding{display:flex;align-items:end;justify-content:space-between;gap:var(--ruimte-component)}
  .projecttijdlijn-instructie{min-width:0}.projecttijdlijn-instructie summary{display:none}
  .projecttijdlijn-inleiding p{margin:0;color:var(--tekst-dim);font-size:13px;line-height:1.45}
  .projecttijdlijn-inleiding-acties{display:flex;align-items:end;gap:var(--ruimte-inline)}
  .projecttijdlijn-inleiding label{display:grid;flex:0 0 auto;gap:var(--ruimte-micro);color:var(--tekst-dim);font-size:12px;font-weight:600}
  .projecttijdlijn-inleiding select{min-height:var(--knop-hoogte);font:inherit;color:var(--tekst);background:var(--papier);border:1px solid var(--rand-sterk);border-radius:var(--knop-ronding);padding:7px 28px 7px 10px}
  .projecttijdlijn-basisacties{display:flex;gap:var(--ruimte-inline);white-space:nowrap}
  .planninggezondheid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;overflow:hidden;background:var(--rand);border:1px solid var(--rand);border-radius:var(--radius)}
  .planninggezondheid > div{display:grid;gap:2px;min-height:88px;padding:var(--ruimte-compact);background:var(--paneel)}
  .planninggezondheid small,.planninggezondheid span{color:var(--tekst-dim);font-size:11px;line-height:1.35}.planninggezondheid b{font-size:15px;font-variant-numeric:tabular-nums}.planninggezondheid--signaal{box-shadow:inset 0 3px var(--oker)}
  .planninggezondheid--leeg{grid-template-columns:1fr;background:var(--warm)}.planninggezondheid--leeg > div{min-height:0}.planninggezondheid--leeg b{font-family:var(--titel)}
  .projecttijdlijn-gezondheid > summary{display:none}
  .projecttijdlijn-navigatie{display:none}
  .projecttijdlijn-kader{border:1px solid var(--rand);border-radius:var(--radius);background:var(--paneel);overflow:clip;min-width:0}
  .projecttijdlijn-kopscroll{position:sticky;top:0;z-index:5;overflow:hidden;border-radius:var(--radius) var(--radius) 0 0}
  .projecttijdlijn-scroll{min-width:0;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .projecttijdlijn-raster{display:grid;grid-template-columns:repeat(var(--vooruitblik-kolommen),minmax(var(--projecttijdlijn-week-breedte),1fr));min-width:calc(var(--vooruitblik-kolommen) * var(--projecttijdlijn-week-breedte))}
  .projecttijdlijn-koprij,.projecttijdlijn-fase{--projecttijdlijn-fase-breedte:180px;--projecttijdlijn-week-breedte:164px;width:calc(var(--projecttijdlijn-fase-breedte) + (var(--vooruitblik-kolommen) * var(--projecttijdlijn-week-breedte)));min-width:100%;display:grid;grid-template-columns:var(--projecttijdlijn-fase-breedte) minmax(0,1fr)}
  .projecttijdlijn-koprij{background:var(--warm);border-bottom:1px solid var(--rand)}
  .projecttijdlijn-fasekop{position:sticky;left:0;z-index:6;display:flex;align-items:center;padding:var(--ruimte-inline) var(--ruimte-compact);color:var(--tekst-dim);background:var(--warm);border-right:1px solid var(--rand);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
  .projecttijdlijn-koppen{position:static;z-index:auto;background:transparent;border-bottom:0}
  .projecttijdlijn-weekkop{display:grid;gap:2px;min-height:52px;padding:var(--ruimte-inline) var(--ruimte-compact);border-right:1px solid var(--rand);color:var(--tekst-dim);font-size:11px}
  .projecttijdlijn-weekkop:last-child{border-right:0}.projecttijdlijn-weekkop b{color:var(--tekst);font-size:12.5px;font-weight:600}.projecttijdlijn-weekkop.vandaag{background:rgba(var(--accentmist),.09);box-shadow:inset 0 -3px var(--accent)}
  .projecttijdlijn-fase{border-bottom:1px solid var(--rand)}
  .projecttijdlijn-fase:last-child{border-bottom:0}.projecttijdlijn-fase > header{position:sticky;left:0;z-index:4;display:flex;align-items:flex-start;gap:var(--ruimte-inline);padding:var(--ruimte-component) var(--ruimte-compact);background:var(--warm);border-right:1px solid var(--rand)}
  .projecttijdlijn-leegstaat{margin:0;padding:var(--ruimte-groep);color:var(--tekst-dim);text-align:center}
  .projecttijdlijn-fase h2,.projecttijdlijn-ongepland h2{margin:0;font-family:var(--titel);font-size:14px;font-weight:600}.projecttijdlijn-fase p,.projecttijdlijn-ongepland p{margin:var(--ruimte-micro) 0 0;color:var(--tekst-dim);font-size:11px;line-height:1.35}
  .projecttijdlijn-fasestip{width:8px;height:8px;flex:0 0 8px;margin-top:5px;border-radius:50%}
  .projecttijdlijn-week{display:flex;flex-direction:column;align-items:stretch;gap:var(--ruimte-inline);min-height:112px;padding:var(--ruimte-inline);border-right:1px solid var(--rand);transition:background .12s,box-shadow .12s}
  .projecttijdlijn-week:last-child{border-right:0}.projecttijdlijn-week.vandaag{background:rgba(var(--accentmist),.045)}.projecttijdlijn-week.over{background:rgba(var(--accentmist),.13);box-shadow:inset 0 0 0 2px var(--accent)}.projecttijdlijn-leeg{color:var(--tekst-zacht);font-size:13px;text-align:center}
  .projecttijdlijn-faseraster{position:relative;grid-template-rows:repeat(var(--taakrijen,1),minmax(112px,auto));align-items:stretch}
  .projecttijdlijn-faseraster > .projecttijdlijn-week{grid-column:var(--weekkolom);grid-row:1 / span var(--taakrijen);position:relative;z-index:0;display:block}
  .projecttijdlijn-nieuwe-taakhint{position:absolute;z-index:1;top:50%;left:50%;display:grid;place-items:center;width:36px;height:36px;padding:0;opacity:0;transform:translate(-50%,-50%) scale(.9);color:var(--accent);background:var(--paneel-dicht);border:1px solid var(--rand-sterk);border-radius:50%;box-shadow:0 2px 8px -5px var(--schaduw);cursor:pointer;transition:opacity .14s ease,transform .14s ease}.projecttijdlijn-week:hover .projecttijdlijn-nieuwe-taakhint,.projecttijdlijn-nieuwe-taakhint:focus-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.projecttijdlijn-nieuwe-taakhint:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.projecttijdlijn--verplaatsen .projecttijdlijn-nieuwe-taakhint{pointer-events:none}
  .projecttijdlijn-faseraster > .projecttijdlijn-taak{grid-column:var(--taakstart) / span var(--taakspan);grid-row:var(--taakrij);z-index:1;width:auto;align-self:stretch;margin:var(--ruimte-inline)}
  .projecttijdlijn-taak{position:relative;display:grid;width:100%;min-height:var(--knop-hoogte);overflow:hidden;color:var(--tekst);background:var(--vlak);border:1px solid var(--rand);border-left:3px solid var(--taakkleur,var(--accent));border-radius:var(--knop-ronding);box-shadow:0 3px 10px -10px var(--schaduw)}.projecttijdlijn-taak[data-projecttijdlijn-sleepbaar]{cursor:grab}.projecttijdlijn-taak[data-projecttijdlijn-sleepbaar].dragging{cursor:grabbing}
  .projecttijdlijn-taak:hover,.projecttijdlijn-taak:focus-within{border-color:var(--accent)}.projecttijdlijn-taakopen{display:grid;gap:3px;min-width:0;min-height:var(--knop-hoogte);padding:var(--ruimte-inline) 44px 29px 8px;overflow:hidden;color:inherit;font:inherit;text-align:left;background:none;border:0;cursor:pointer}.projecttijdlijn-taakopen:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.projecttijdlijn-taak b{overflow:hidden;font-size:12px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.projecttijdlijn-taak span{overflow:hidden;color:var(--tekst-dim);font-size:10.5px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}.projecttijdlijn-taak em{justify-self:start;padding:2px 5px;color:var(--oker);background:var(--warm);border-radius:999px;font-size:10px;font-style:normal}
  .projecttijdlijn-datums{position:absolute;z-index:2;left:8px;bottom:6px;display:flex;align-items:center;gap:3px;max-width:calc(100% - 42px);overflow:hidden;color:var(--tekst-dim);font-size:10.5px;line-height:1.3;white-space:nowrap}.projecttijdlijn-datum{min-width:0;padding:0;color:inherit;font:inherit;text-decoration:underline dotted transparent;text-underline-offset:2px;background:transparent;border:0;cursor:pointer}.projecttijdlijn-datum:hover,.projecttijdlijn-datum:focus-visible{color:var(--accent);text-decoration-color:currentColor;outline:0}.projecttijdlijn-datuminvoer{position:absolute;z-index:4;bottom:4px;left:5px;max-width:calc(100% - 42px);min-height:22px;padding:1px 3px;color:var(--tekst);font:inherit;background:var(--vlak);border:1px solid var(--accent);border-radius:4px}
  .projecttijdlijn-avatar{position:absolute;right:6px;bottom:6px;z-index:2;display:grid;place-items:center;width:22px;height:22px;overflow:hidden;color:var(--opAccent);background:var(--accent);border:1px solid var(--paneel);border-radius:50%;box-shadow:0 0 0 1px var(--rand);font:700 8px/1 var(--letter)}.projecttijdlijn-avatar img{width:100%;height:100%;object-fit:cover}
  /* Meerdere verantwoordelijken als overlappende munten op de tijdlijnkaart. */
  .projecttijdlijn-avatars{position:absolute;right:6px;bottom:6px;z-index:2;display:flex}
  .projecttijdlijn-avatars .projecttijdlijn-avatar{position:static;right:auto;bottom:auto}
  .projecttijdlijn-avatars .projecttijdlijn-avatar:not(:first-child){margin-left:-9px}
  .projecttijdlijn-rand{position:absolute;z-index:3;top:0;bottom:25px;width:18px;padding:0;opacity:0;color:transparent;background:transparent;border:0;cursor:ew-resize;touch-action:none}.projecttijdlijn-rand--start{left:0}.projecttijdlijn-rand--eind{right:0}.projecttijdlijn-rand:focus-visible{opacity:1;color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,transparent);outline:2px solid var(--accent);outline-offset:-2px}.projecttijdlijn--rekken{user-select:none}.projecttijdlijn-taak.dragging,.projecttijdlijn-taak:has(.dragging){opacity:.45;pointer-events:none}
  .projecttijdlijn.compact .projecttijdlijn-faseraster{grid-template-rows:repeat(var(--taakrijen,1),minmax(64px,auto))}.projecttijdlijn.compact .projecttijdlijn-week{min-height:64px}.projecttijdlijn.compact .projecttijdlijn-taak{min-height:60px;padding:0}.projecttijdlijn.compact .projecttijdlijn-taakopen{min-height:60px;padding:6px 44px 27px 8px}.projecttijdlijn.compact .projecttijdlijn-taak b{display:-webkit-box;overflow:hidden;line-height:1.3;text-overflow:clip;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}.projecttijdlijn.compact .projecttijdlijn-taak span,.projecttijdlijn.compact .projecttijdlijn-taak em{display:none}
  .projecttijdlijn--rand-kiezen .projecttijdlijn-week{cursor:copy;background:rgba(var(--accentmist),.08);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 36%,transparent)}.projecttijdlijn--rand-kiezen .projecttijdlijn-week:hover{background:rgba(var(--accentmist),.16);box-shadow:inset 0 0 0 2px var(--accent)}.projecttijdlijn-rand[aria-pressed="true"]{opacity:1;background:color-mix(in srgb,var(--accent) 18%,transparent);outline:2px solid var(--accent);outline-offset:-2px}
  /* Alleen het vak onder de kaart krijgt `.over` van de gedeelde sleephelper. Alle weken
     tegelijk markeren verliest het ruimtelijke anker dat nodig is om gericht te plannen. */
  .projecttijdlijn--verplaatsen .projecttijdlijn-week{cursor:copy}
  .projecttijdlijn-taak[data-projecttijdlijn-sleepbaar="true"]{cursor:grab}.projecttijdlijn-taak[data-projecttijdlijn-sleepbaar="true"]:active{cursor:grabbing}
  .projecttijdlijn-ongepland{display:grid;gap:var(--ruimte-component);padding:var(--ruimte-component);background:var(--warm);border:1px solid var(--rand);border-radius:var(--radius)}
  .projecttijdlijn-ongepland > div{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--ruimte-inline)}.projecttijdlijn-taakopen[draggable=true]{cursor:grab}.projecttijdlijn-taak.dragging{cursor:grabbing}
  .mobiele-agenda{display:none}
  @media (max-width:620px), (max-width:860px) and (pointer:coarse){
    .projecttijdlijn{gap:var(--pagina-ruimte);width:100%;max-width:100%}.projecttijdlijn > *{box-sizing:border-box;min-width:0;max-width:100%}
    .projecttijdlijn-inleiding,.projecttijdlijn-navigatie,.projecttijdlijn-gezondheid,.projecttijdlijn-kader,.projecttijdlijn-ongepland{display:none}
    /* Outlook-achtige mobiele kalender (Agenda/Dag/Week/Maand). Vervangt de losse mobiele Tijdlijn. */
    .projecttijdlijn > .bedieningsinhoud{display:none}
    .mobiele-agenda{display:flex;flex-direction:column;position:relative;height:calc(100svh - 128px - env(safe-area-inset-bottom));min-height:480px;background:var(--vlak);border:1px solid var(--rand);border-radius:var(--radius);overflow:hidden}
    .ma-kop{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 10px 9px 14px;background:var(--vlak);border-bottom:1px solid var(--rand);flex:0 0 auto}
    .ma-titel{display:flex;flex-direction:column;gap:1px;min-width:0}
    .ma-eyebrow{font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
    .ma-maandknop{display:flex;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer;color:var(--tekst);max-width:100%}
    .ma-maandnaam{font-family:var(--titel);font-size:17px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize}
    .ma-caret{width:15px;height:15px;flex:0 0 auto;color:var(--tekst-dim);transition:transform .28s}
    .mobiele-agenda[data-ma-open="true"] .ma-caret{transform:rotate(180deg)}
    .mobiele-agenda:not([data-ma-modus="agenda"]) .ma-caret{display:none}
    .ma-acties{display:flex;gap:2px;flex:0 0 auto}
    .ma-ico{width:42px;height:42px;border-radius:50%;border:0;background:transparent;color:var(--tekst-dim);display:grid;place-items:center;cursor:pointer}
    .ma-ico svg{width:21px;height:21px}
    .ma-ico:active{background:rgba(var(--accentmist),.14);color:var(--accent)}
    .ma-menu{position:absolute;top:56px;right:8px;z-index:20;background:var(--vlak);border:1px solid var(--rand);border-radius:14px;box-shadow:0 20px 44px -14px var(--schaduw);overflow:hidden;min-width:196px}
    .ma-menu button{display:flex;align-items:center;gap:12px;width:100%;border:0;background:transparent;padding:13px 15px;font:inherit;font-size:14.5px;color:var(--tekst);cursor:pointer;text-align:left}
    .ma-menu button+button{border-top:1px solid var(--rand)}
    .ma-menu button svg{width:19px;height:19px;color:var(--tekst-dim);flex:0 0 auto}
    .ma-menu button .ma-vink{margin-left:auto;width:17px;height:17px;color:var(--accent);opacity:0}
    .ma-menu button[aria-current="true"]{color:var(--accent);font-weight:600}
    .ma-menu button[aria-current="true"] svg,.ma-menu button[aria-current="true"] .ma-vink{color:var(--accent);opacity:1}
    .ma-viewport{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;overflow-x:clip}
    .ma-maandvak,.ma-agenda,.ma-maand,.ma-week-rooster,.ma-dagvak{touch-action:pan-y;will-change:transform}
    .ma-weekdagen{display:grid;grid-template-columns:repeat(7,1fr);padding:4px 4px 1px;background:var(--vlak)}
    .ma-weekdagen span{text-align:center;font-size:11px;font-weight:600;color:var(--tekst-zacht)}
    .ma-weekdagen span.we{color:var(--tekst-dim)}
    .ma-maandvak{background:var(--vlak);padding:0 6px;flex:0 0 auto;box-shadow:0 1px 0 var(--rand)}
    .ma-rooster{overflow:hidden;transition:height .30s cubic-bezier(.4,0,.2,1);touch-action:none}
    .ma-week{display:grid;grid-template-columns:repeat(7,1fr)}
    .mobiele-agenda[data-ma-open="true"] .ma-week:not(.ma-actiefweek){background:var(--warm)}
    .ma-dag{position:relative;aspect-ratio:1/0.86;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:0;background:transparent;cursor:pointer;padding:0;color:var(--tekst);border-radius:11px;font:inherit}
    .ma-dag .ma-maandlabel{position:absolute;top:4px;font-size:9px;font-weight:700;color:var(--accent)}
    .ma-dag .ma-num{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;font-size:13.5px;font-weight:500}
    .ma-dag.buiten .ma-num{color:var(--tekst-zacht)}
    .ma-dag.vandaag .ma-num{color:var(--accent);font-weight:700}
    .ma-dag.gekozen .ma-num{background:var(--accent);color:var(--opAccent);font-weight:600}
    .ma-stippen{display:flex;gap:3px;height:4px;align-items:center;margin-top:0}
    .ma-stippen i{width:4px;height:4px;border-radius:50%}
    .ma-dag.gekozen .ma-stippen i{box-shadow:0 0 0 1.5px var(--vlak)}
    .ma-greep{display:flex;justify-content:center;align-items:center;padding:6px 0 8px;background:var(--vlak);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
    .ma-greep:active{cursor:grabbing}
    .ma-greep i{width:36px;height:5px;border-radius:3px;background:var(--rand-sterk);transition:width .2s,background .2s}
    .mobiele-agenda[data-ma-open="false"] .ma-greep i{width:52px;background:var(--accent)}
    .ma-agenda{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--bg);padding:2px 0 12px}
    .ma-dagkop{position:sticky;top:0;z-index:2;background:var(--bg);display:flex;align-items:baseline;gap:9px;padding:9px 14px 6px}
    .ma-dagkop b{font-family:var(--titel);font-size:14px;font-weight:600;text-transform:capitalize}
    .ma-dagkop .ma-telling{font-size:12px;color:var(--tekst-dim)}
    .ma-dagkop .ma-nuchip{margin-left:auto;font-size:10px;font-weight:700;color:var(--accent);background:rgba(var(--accentmist),.14);padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}
    .ma-daggroep{display:block}
    .ma-daggroep.ma-nu > .ma-dagkop b{color:var(--accent)}
    .ma-lijst{display:flex;flex-direction:column;gap:7px;padding:2px 12px 10px}
    .ma-kaart{position:relative;display:block;width:100%;text-align:left;background:var(--paneel);border:1px solid var(--rand);border-radius:10px;padding:8px 12px 8px 14px;overflow:hidden;cursor:pointer;color:var(--tekst);font:inherit}
    .ma-kaart::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--fase,var(--rand-sterk))}
    .ma-kaart:active{transform:scale(.985)}
    .ma-kaart>b{display:block;font-size:13.5px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
    /* Ruimte voor het absoluut geplaatste "Loopt door"-label rechtsboven, zodat een lange titel er niet onder doorloopt. */
    .ma-kaart--doorloop>b{padding-right:74px}
    .ma-kaart .ma-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px}
    .ma-faseband{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--tekst-dim)}
    .ma-faseband .ma-punt{width:9px;height:9px;border-radius:50%;background:var(--fase)}
    .ma-kaart .ma-duur{font-size:11px;color:var(--tekst-zacht)}
    .ma-persoon{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:11px;color:var(--tekst-dim)}
    .ma-avatar{width:20px;height:20px;border-radius:50%;overflow:hidden;background:var(--accent);color:var(--opAccent);display:grid;place-items:center;font-size:9px;font-weight:700;flex:0 0 20px}
    .ma-avatar img{width:100%;height:100%;object-fit:cover}
    .ma-doorloop{position:absolute;right:11px;top:11px;font-size:9.5px;font-weight:700;color:var(--tekst-zacht);text-transform:uppercase}
    .ma-leeg{display:flex;flex-direction:column;align-items:center;gap:8px;padding:44px 30px;text-align:center;color:var(--tekst-zacht)}
    .ma-leeg svg{width:42px;height:42px;color:var(--rand-sterk)}
    .ma-leeg p{margin:0;font-size:13px;line-height:1.5}
    .ma-maand{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--vlak)}
    .ma-weekdagen--vast{flex:0 0 auto}
    .ma-mrooster{flex:1;min-height:0;display:grid;grid-auto-rows:1fr}
    .ma-mweek{display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid var(--rand);min-height:0}
    .ma-mdag{position:relative;border-right:1px solid var(--rand);padding:3px 3px 2px;overflow:hidden;display:flex;flex-direction:column;gap:2px;cursor:pointer;background:var(--vlak);min-width:0;text-align:center;font:inherit;color:var(--tekst)}
    .ma-mdag:nth-child(7n){border-right:0}
    .ma-mdag.buiten,.ma-mdag.we{background:var(--warm)}
    .ma-mnum{align-self:center;width:23px;height:23px;display:grid;place-items:center;border-radius:50%;font-size:12px;font-weight:600;color:var(--tekst)}
    .ma-mdag.buiten .ma-mnum{color:var(--tekst-zacht);font-weight:500}
    .ma-mdag.vandaag .ma-mnum{background:var(--accent);color:var(--opAccent)}
    .ma-mdag.gekozen:not(.vandaag) .ma-mnum{box-shadow:0 0 0 1.6px var(--accent);color:var(--accent)}
    .ma-mmaandlabel{font-size:8px;font-weight:700;color:var(--accent)}
    .ma-mchip{font-size:9px;font-weight:600;line-height:1.25;color:var(--tekst);background:color-mix(in srgb,var(--fase) 13%,var(--paneel));border-radius:4px;padding:1px 3px 1px 5px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
    .ma-mchip::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:3px;border-radius:2px;background:var(--fase)}
    .ma-mmeer{font-size:9px;font-weight:700;color:var(--accent)}
    /* Dag: kaartlijst voor de gekozen dag (geen leeg uurraster; taken zijn hele dagen). */
    .ma-dagvak{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--bg)}
    .ma-daglijst{display:flex;flex-direction:column;gap:7px;padding:6px 12px 16px}
    /* Week: zeven hele-dag-kolommen met doorlopende balken per baan. */
    .ma-week-vak{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--vlak)}
    .ma-week-rooster{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:min-content;gap:4px 3px;align-content:start;padding:0 7px 16px}
    .ma-wk-kop{grid-row:1;position:sticky;top:0;z-index:3;background:var(--vlak);display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 7px;border-bottom:1px solid var(--rand);min-width:0}
    .ma-wk-kop .wd{font-size:10px;font-weight:600;color:var(--tekst-zacht);text-transform:uppercase;letter-spacing:.03em}
    .ma-wk-kop.we .wd{color:var(--tekst-dim)}
    .ma-wk-kop .dn{font-family:var(--titel);font-size:15px;font-weight:600;color:var(--tekst);width:26px;height:26px;display:grid;place-items:center;border-radius:50%}
    .ma-wk-kop.vandaag .dn{background:var(--accent);color:var(--opAccent)}
    .ma-wk-balk{align-self:start;min-width:0;display:block;font:inherit;font-size:11px;font-weight:600;line-height:1.25;color:var(--opAccent);background:var(--fase,var(--rand-sterk));border:0;border-radius:6px;padding:4px 7px;cursor:pointer;text-align:left;overflow:hidden}
    .ma-wk-balk>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .ma-wk-balk.door-voor{border-top-left-radius:0;border-bottom-left-radius:0}
    .ma-wk-balk.door-na{border-top-right-radius:0;border-bottom-right-radius:0}
    .ma-wk-balk:active{filter:brightness(.94)}
    .ma-week-leeg{align-self:start;display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 24px;text-align:center;color:var(--tekst-zacht)}
    .ma-week-leeg svg{width:40px;height:40px;color:var(--rand-sterk)}
    .ma-week-leeg p{margin:0;font-size:13px;line-height:1.5}
    .ma-fab{position:absolute;right:16px;bottom:16px;width:54px;height:54px;border-radius:50%;border:0;background:var(--accent);color:var(--opAccent);display:grid;place-items:center;cursor:pointer;box-shadow:0 12px 26px -8px rgba(var(--accentmist),.5),0 6px 14px -6px var(--schaduw);z-index:9}
    .ma-fab svg{width:25px;height:25px}
    .ma-fab:active{background:var(--accent-diep)}
    .projecttijdlijn-inleiding{align-items:stretch;flex-direction:column;gap:var(--ruimte-inline)}
    .projecttijdlijn-instructie{border:1px solid var(--rand);border-radius:var(--knop-ronding);background:var(--warm)}
    .projecttijdlijn-instructie summary{display:flex;align-items:center;min-height:44px;padding:0 var(--ruimte-compact);color:var(--tekst-dim);font-size:12px;font-weight:600;cursor:pointer}
    .projecttijdlijn-instructie p{padding:0 var(--ruimte-compact) var(--ruimte-compact)}
    .projecttijdlijn-inleiding-acties{align-items:end;flex-direction:row;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding-bottom:2px}
    .projecttijdlijn-inleiding-acties > *{flex:0 0 auto}.projecttijdlijn-inleiding label{width:auto}.projecttijdlijn-inleiding select{width:168px;font-size:16px}.projecttijdlijn-inleiding-acties label[for="projecttijdlijn-weken"]{display:none}.projecttijdlijn-basisacties{overflow:visible;padding-bottom:0}
    .projecttijdlijn-navigatie{display:none}
    .projecttijdlijn-navigatiekop{display:grid;grid-template-columns:44px minmax(0,1fr) 44px auto;gap:var(--ruimte-micro);align-items:center}
    .projecttijdlijn-navigatiekop .knop{min-width:44px;padding:6px}.projecttijdlijn-navigatiekop output{min-width:0;overflow:hidden;color:var(--tekst);font-size:11px;font-weight:600;text-align:center;text-overflow:ellipsis;white-space:nowrap}
    .projecttijdlijn-weekoverzicht{display:grid;grid-template-columns:repeat(auto-fit,minmax(44px,1fr));gap:var(--ruimte-micro)}
    .projecttijdlijn-overzichtweek{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:1px;min-width:44px;min-height:54px;padding:5px 4px;color:var(--tekst);font:inherit;text-align:left;background:var(--paneel);border:1px solid var(--rand);border-radius:var(--knop-ronding);cursor:pointer}
    .projecttijdlijn-overzichtweek[aria-current="true"]{color:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.projecttijdlijn-overzichtweek.vandaag{background:rgba(var(--accentmist),.08)}
    .projecttijdlijn-overzichtweek span{grid-column:1;color:var(--tekst-dim);font-size:9px;font-weight:600}.projecttijdlijn-overzichtweek b{grid-column:1;font-size:10px;line-height:1.2;white-space:nowrap}.projecttijdlijn-overzichtweek small{grid-column:2;grid-row:1 / span 2;align-self:center;color:var(--tekst-dim);font-size:10px;font-variant-numeric:tabular-nums}
    .projecttijdlijn-overzichtweek i{display:flex;grid-column:1 / span 2;gap:2px;min-height:3px}.projecttijdlijn-overzichtweek i:empty::before{width:100%;height:3px;background:var(--rand);border-radius:99px;content:""}.projecttijdlijn-overzichtweek i em{display:block;flex:1 1 0;height:3px;border-radius:99px}
    .projecttijdlijn-verplaatsstatus{margin:0;color:var(--tekst-dim);font-size:11px;line-height:1.35}.projecttijdlijn--verplaatsen .projecttijdlijn-verplaatsstatus{color:var(--accent);font-weight:600}
    .projecttijdlijn-gezondheid{overflow:hidden;background:var(--warm);border:1px solid var(--rand);border-radius:var(--radius)}.projecttijdlijn-gezondheid > summary{display:flex;align-items:center;min-height:44px;padding:0 var(--ruimte-compact);font-size:12px;font-weight:600;cursor:pointer}.projecttijdlijn-gezondheid:not([open]) .planninggezondheid{display:none}.projecttijdlijn-gezondheid .planninggezondheid{border:0;border-top:1px solid var(--rand);border-radius:0}.planninggezondheid{grid-template-columns:repeat(2,minmax(0,1fr))}.planninggezondheid > div{min-height:82px}
    /* Op telefoon geeft de fasekop context boven het raster; zo blijven twee weken naast
       elkaar zichtbaar in plaats van één week naast een brede vaste linkerkolom. */
    .projecttijdlijn-kopscroll{position:static;overflow:visible}.projecttijdlijn-koprij{display:none}.projecttijdlijn-fase{--projecttijdlijn-week-breedte:184px;display:block;width:calc(var(--vooruitblik-kolommen) * var(--projecttijdlijn-week-breedte));min-width:calc(var(--vooruitblik-kolommen) * var(--projecttijdlijn-week-breedte))}.projecttijdlijn-fase > header{position:sticky;left:0;z-index:2;width:min(100vw,100%);box-sizing:border-box;padding:var(--ruimte-compact) var(--ruimte-inline);border-right:0;border-bottom:1px solid var(--rand)}.projecttijdlijn-fase h2{font-size:12px}.projecttijdlijn-week{min-height:104px}
    .projecttijdlijn.compact .projecttijdlijn-faseraster{grid-template-rows:repeat(var(--taakrijen,1),minmax(64px,auto))}.projecttijdlijn.compact .projecttijdlijn-week{min-height:64px}.projecttijdlijn.compact .projecttijdlijn-taakopen{min-height:60px;padding:6px 34px 27px 12px}.projecttijdlijn-rand{width:44px}.projecttijdlijn-taakopen{padding-left:12px;padding-right:34px}
  }
  /* ---------- meldingsbalk ---------- */
  .melding{
    position:sticky;top:0;z-index:40;display:flex;flex-wrap:wrap;gap:10px;align-items:center;
    padding:11px clamp(14px,2.4vw,34px);font-size:13px;line-height:1.5;
    background:var(--bezig-vel);color:var(--tekst);border-bottom:1px solid var(--bezig-rand);
  }
  .melding[hidden]{display:none}
  .melding.fout{background:var(--fout-vel);border-bottom-color:var(--fout-rand)}
  .melding.conflict{background:var(--klaar-vel);border-bottom-color:var(--klaar-rand)}
  .melding-knoppen{display:flex;gap:8px;margin-left:auto}
  .melding-sluit{margin-left:auto;border:0;background:transparent;color:var(--tekst-dim);font-size:20px;line-height:1;cursor:pointer;padding:0 4px}
  .melding-sluit:hover{color:var(--tekst)}
  .melding-knoppen button{
    font-family:inherit;font-size:12.5px;font-weight:500;background:var(--accent);color:var(--opAccent);
    border:1px solid var(--accent);padding:6px 12px;border-radius:5px;cursor:pointer;
  }
  .melding-knoppen button + button{background:transparent;color:var(--tekst);border-color:var(--rand-sterk)}

  /* ---------- weergaveschakelaar en subnavigatie ---------- */
  .weergave{display:inline-flex;gap:3px;margin:20px 0 0;padding:3px;background:var(--paneel);
    border:1px solid var(--rand-sterk);border-radius:100px}
  .weergave .segmentknop{font-size:13px;padding:7px 18px;border-radius:100px}
  .weergave button:hover{color:var(--tekst)}

  /* ---------- gedeelde knoprollen ---------- */
  .knop{
    display:inline-flex;align-items:center;justify-content:center;gap:var(--ruimte-inline);font-family:inherit;font-size:13px;font-weight:500;
    min-height:var(--knop-hoogte);border:1px solid var(--rand-sterk);border-radius:var(--knop-ronding);padding:7px 13px;background:var(--vlak);color:var(--tekst);cursor:pointer;transition:.15s;
  }
  .knop:disabled{opacity:.55;cursor:default}
  .knop:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
  .knop--primair{background:var(--accent);border-color:var(--accent);color:var(--opAccent);font-weight:600}
  .knop--secundair{background:var(--vlak);border-color:var(--rand-sterk);color:var(--tekst)}
  .knop--ghost{background:transparent;border-color:transparent;color:var(--tekst-dim)}
  .knop--ghost:hover:not(:disabled),.knop--ghost:focus-visible{background:var(--warm);border-color:var(--rand-sterk);color:var(--tekst)}
  .knop--primair:hover:not(:disabled){background:var(--accent-diep);border-color:var(--accent-diep);color:var(--opAccent)}
  .knop--gevaar{background:var(--alarm);border-color:var(--alarm);color:var(--opAccent);font-weight:600}
  .knop--gevaar:hover:not(:disabled){filter:brightness(.92);color:var(--opAccent)}
  .knop--zacht{background:var(--warm);border-color:var(--rand);color:var(--tekst)}
  .knop--compact{min-height:32px;padding:5px 8px;font-size:12px}
  .knop--compact.knop--icoon{--knop-icoon:32px}.knop--compact.knop--icoon svg{width:18px;height:18px}
  .knop--icoon-tekst svg{width:18px;height:18px;flex:0 0 auto}
  .knop--sluiten{font-size:20px;line-height:1}

  /* Rijcontainers mogen nooit de knoprol herschrijven: zij bepalen uitsluitend de positie. */
  .tknoppen button:not(.knop),.rijknoppen button:not(.knop){display:inline-flex;align-items:center;justify-content:center;min-height:var(--knop-hoogte);padding:7px 13px;font:inherit;font-size:13px;font-weight:500;color:var(--tekst);background:var(--vlak);border:1px solid var(--rand-sterk);border-radius:var(--knop-ronding);cursor:pointer}
  .tknoppen button:not(.knop):disabled,.rijknoppen button:not(.knop):disabled{opacity:.4;cursor:default}

  .notulerooster{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:var(--ruimte-component);margin-top:var(--ruimte-component)}
  .notulekaart{
    background:var(--paneel);border:1px solid var(--rand);border-left:3px solid var(--accent);
    border-radius:var(--radius);padding:15px 16px;cursor:pointer;transition:box-shadow .15s,border-color .15s;
    box-shadow:0 1px 2px rgba(var(--inkt),.05);
  }
  .notulekaart:hover{box-shadow:0 4px 14px var(--schaduw-zacht)}
  .notulekop{display:flex;align-items:center;justify-content:space-between;gap:var(--ruimte-compact);margin-bottom:var(--ruimte-inline)}
  .notuledatum{font-size:11.5px;font-weight:500;color:var(--tekst-dim)}
  .notulekaart h3{margin:0 0 var(--ruimte-inline);font-size:15px;font-weight:600;line-height:1.3}
  .notuleaanwezig{margin:0 0 var(--ruimte-inline);font-size:12px;color:var(--accent)}
  .notulefragment{margin:0;font-size:12.5px;line-height:1.55;color:var(--tekst-dim)}
  .notulevoet{margin:var(--ruimte-compact) 0 0;padding-top:var(--ruimte-inline);border-top:1px solid rgba(var(--inkt),.10);font-size:11.5px;color:var(--tekst-zacht)}

  .notule-editor{background:var(--paneel);border:1px solid var(--rand);border-radius:var(--radius);padding:var(--ruimte-component);margin-top:var(--ruimte-component)}
  .e-titel{
    width:100%;font-family:var(--titel);font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--tekst);
    background:transparent;border:0;border-bottom:1px solid var(--rand);padding:6px 2px 10px;
  }
  .e-titel:focus{outline:none;border-bottom-color:var(--accent)}
  .e-velden{display:flex;flex-wrap:wrap;gap:var(--ruimte-component);margin:var(--ruimte-component) 0}
  .e-velden label{display:flex;flex-direction:column;gap:var(--ruimte-inline);font-size:12px;font-weight:500;color:var(--tekst-dim);flex:1 1 200px}
  .e-velden input{
    font-family:inherit;font-size:13.5px;color:var(--tekst);background:var(--papier);
    border:1px solid var(--rand-sterk);border-radius:4px;padding:8px 10px;
  }
  .e-velden input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accentmist),.14)}
  .e-werkbalk{display:flex;flex-wrap:wrap;gap:5px;padding:8px;background:var(--warm);border:1px solid var(--rand);border-bottom:0;border-radius:5px 5px 0 0}
  .e-werkbalk button{
    min-width:32px;height:30px;padding:0 9px;font-family:inherit;font-size:12.5px;color:var(--tekst);
    background:var(--papier);border:1px solid var(--rand-sterk);border-radius:4px;cursor:pointer;transition:.14s;
  }
  .e-vel{
    min-height:340px;padding:16px 18px;font-size:14.5px;line-height:1.65;color:var(--tekst);
    background:var(--papier);border:1px solid var(--rand);border-radius:0 0 5px 5px;overflow-y:auto;
  }
  .e-vel:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring)}
  .e-vel h3{font-family:var(--titel);font-size:16px;margin:18px 0 6px}
  .e-vel h3:first-child{margin-top:0}
  .e-vel ul,.e-vel ol{margin:8px 0;padding-left:22px}
  .e-vel li{margin-bottom:4px}
  .e-vel blockquote{margin:10px 0;padding-left:12px;border-left:3px solid var(--accent);color:var(--tekst-dim)}
  .e-vel a{color:var(--accent)}
  .e-vel img{max-width:100%;height:auto;border-radius:5px;margin:10px 0;display:block;border:1px solid var(--rand)}
  .notulefragment img{display:none}
  .e-vel:empty::before{content:'Typ hier mee met het gesprek…';color:var(--tekst-zacht)}
  .e-voet{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
  .e-knoppen{display:flex;gap:9px;margin-left:auto}
  .notule-bijlagen{margin-top:var(--ruimte-component);padding-top:var(--ruimte-component);border-top:1px solid var(--rand)}
  .notule-bijlagenkop{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--ruimte-compact)}
  .notule-bijlagenkop h3{margin:0;font-size:14px}
  .notule-bijlagenkop p,.notule-bijlagen .hint{margin:4px 0 0;font-size:12px;line-height:1.45;color:var(--tekst-dim)}
  .notule-bijlagenlijst{display:grid;gap:var(--ruimte-inline);margin-top:var(--ruimte-compact)}
  .notule-bijlage{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(230px,1.4fr) auto;align-items:end;gap:var(--ruimte-compact);padding:var(--ruimte-compact);border:1px solid var(--rand);border-radius:6px;background:var(--vlak)}
  .notule-bijlagebestand{align-self:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--accent);font-size:12.5px;font-weight:500}
  .notule-bijlagebestand svg{width:14px;height:14px;vertical-align:-2px}
  .notule-bijlagevelden{display:grid;grid-template-columns:1fr 1fr;gap:var(--ruimte-inline)}
  .notule-bijlagevelden label{display:grid;gap:var(--ruimte-micro);font-size:11px;font-weight:500;color:var(--tekst-dim)}
  .notule-bijlagevelden input{min-width:0;width:100%;font:inherit;font-size:12.5px;color:var(--tekst);background:var(--papier);border:1px solid var(--rand-sterk);border-radius:4px;padding:6px 8px}
  .notule-bijlagevelden input:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring)}
  .notule-bijlageacties{align-self:center}

  /* ---------- kaartvenster ---------- */
  .venster{
    position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:var(--ruimte-groep);
    background:rgba(var(--inkt),.45);backdrop-filter:blur(3px);
  }
  .vensterkaart{
    width:100%;max-width:860px;max-height:calc(100vh - var(--ruimte-hero));display:flex;flex-direction:column;
    background:var(--vlak);border:1px solid var(--rand-sterk);border-left:5px solid var(--niet-streep);
    border-radius:10px;box-shadow:0 26px 60px -24px var(--schaduw);overflow:hidden;
  }
  .vensterkaart.s-bezig{border-left-color:var(--bezig-streep)}
  .vensterkaart.s-pauze{border-left-color:var(--pauze-streep)}
  .vensterkaart.s-klaar{border-left-color:var(--klaar-streep)}

  /* Zoeken blijft een compact gedeeld venster; bestaande pagina's en vensters
     zijn de enige plek waar inhoud wordt gewijzigd. */
  .zoekvenster{align-items:flex-start;padding-top:clamp(72px,16vh,180px);z-index:105}
  .zoekkaart{width:min(720px,100%);max-height:calc(100dvh - 96px);display:flex;flex-direction:column;gap:var(--ruimte-component);padding:var(--ruimte-component);overflow:hidden;background:var(--vlak);border:1px solid var(--rand-sterk);border-radius:var(--radius);box-shadow:0 28px 72px -26px var(--schaduw)}
  .zoekkop{display:flex;align-items:center;justify-content:space-between;gap:var(--ruimte-component)}.zoekkop p,.zoekkop h2{margin:0}.zoekkop p{color:var(--tekst-dim);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.zoekkop h2{margin-top:2px;font-family:var(--titel);font-size:20px;font-weight:600;letter-spacing:-.02em}.zoekkop .knop{flex:0 0 auto}
  .zoekinvoer{display:flex;align-items:center;gap:var(--ruimte-compact);min-height:48px;padding:0 var(--ruimte-compact);background:var(--papier);border:1px solid var(--rand-sterk);border-radius:var(--knop-ronding)}
  .zoekinvoer > span{display:grid;place-items:center;width:24px;height:24px;color:var(--accent)}
  .zoekinvoer svg{width:21px;height:21px}.zoekinvoer input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--tekst);font:500 16px/1.4 var(--letter)}
  .zoekwissen[hidden]{display:none}
  .zoekinvoer .zoekwissen{--knop-icoon:36px;flex:0 0 36px}
  .zoekinvoer kbd,.zoekvoet kbd{padding:2px 6px;color:var(--tekst-dim);background:var(--vlak);border:1px solid var(--rand-sterk);border-radius:4px;font:11px/1.2 var(--letter)}
  .zoekhint,.zoekvoet,.zoekleeg{margin:0;color:var(--tekst-dim);font-size:12px;line-height:1.45}.zoekresultaten{display:grid;gap:var(--ruimte-micro);min-height:0;overflow-y:auto;padding-right:var(--ruimte-micro)}
  .zoekresultaat{display:grid;grid-template-columns:86px minmax(0,1fr);align-items:center;gap:var(--ruimte-compact);width:100%;min-height:54px;padding:var(--ruimte-inline) var(--ruimte-compact);color:var(--tekst);text-align:left;background:transparent;border:1px solid transparent;border-radius:var(--knop-ronding);cursor:pointer}
  .zoekresultaat:hover,.zoekresultaat.aan{background:var(--warm);border-color:var(--rand-sterk)}.zoekresultaat:focus-visible{outline:3px solid rgba(var(--accentmist),.25);outline-offset:1px}
  .zoekresultaat > span:last-child{display:grid;gap:2px;min-width:0}.zoekresultaat b,.zoekresultaat small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zoekresultaat small{color:var(--tekst-dim);font-size:12px}.zoeksoort{justify-self:start;padding:3px 7px;color:var(--accent-donker);background:rgba(var(--accentmist),.13);border-radius:999px;font-size:11px;font-weight:600}.zoekvoet{display:flex;gap:var(--ruimte-inline);align-items:center;padding-top:var(--ruimte-inline);border-top:1px solid var(--rand)}

  .vensterkop{display:flex;align-items:center;gap:var(--ruimte-compact);padding:var(--ruimte-compact) var(--ruimte-component);border-bottom:1px solid var(--rand);background:var(--warm)}
  .vensterhint{font-size:12.5px;color:var(--tekst-dim);margin-right:auto}

  .venstertitel{padding:var(--ruimte-component) var(--ruimte-groep);border-bottom:1px solid var(--rand)}
  .venstertitel input{
    width:100%;font-family:var(--titel);font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--tekst);
    background:transparent;border:0;border-bottom:1px solid transparent;padding:2px 0 8px;
  }
  .venstertitel input:hover{border-bottom-color:var(--rand)}
  .venstertitel input:focus{outline:none;border-bottom-color:var(--accent)}
  .titelrij{display:flex;flex-wrap:wrap;gap:var(--ruimte-inline);margin-top:var(--ruimte-compact)}
  .titel-icoonrij{align-items:center}.titel-icoonvoorbeeld{display:grid;flex:0 0 40px;width:40px;height:40px;place-items:center;overflow:hidden;border:1px solid var(--rand-sterk);border-radius:var(--knop-ronding);background:var(--warm)}.titel-icoonvoorbeeld svg,.titel-icoonafbeelding{width:40px;height:40px;object-fit:contain}.titel-icoonacties{display:flex;flex:1 1 260px;flex-wrap:wrap;align-items:center;gap:var(--ruimte-inline)}.titel-icoonacties small{flex:1 1 190px;min-width:0;color:var(--tekst-dim);font-size:11px;line-height:1.4}
  .kopselect{
    font-family:inherit;font-size:12.5px;font-weight:500;color:var(--tekst);background:var(--papier);
    border:1px solid var(--rand-sterk);border-radius:100px;padding:6px 30px 6px 13px;cursor:pointer;appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,var(--tekst-dim) 50%),linear-gradient(135deg,var(--tekst-dim) 50%,transparent 50%);
    background-position:calc(100% - 16px) 14px,calc(100% - 11px) 14px;background-size:5px 5px;background-repeat:no-repeat;
  }
  .kopselect:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accentmist),.14)}
  .venstersluit{width:var(--knop-icoon);height:var(--knop-icoon)}

  .vensterlijf{
    padding:var(--ruimte-micro) var(--ruimte-groep) var(--ruimte-groep);overflow-y:auto;
    display:grid;grid-template-columns:1fr 1fr;gap:0 var(--ruimte-groep);align-content:start;
  }
  .vsectie{padding:var(--ruimte-component) 0;border-bottom:1px solid var(--rand);min-width:0}
  .vsectie.breed{grid-column:1 / -1}
  .vensterlijf > .vsectie:last-child{border-bottom:0}
  @media (max-width:760px){ .vensterlijf{grid-template-columns:1fr} }
  .vsectie h4{
    margin:0 0 var(--ruimte-compact);font-family:var(--titel);font-size:12px;font-weight:600;letter-spacing:.06em;
    text-transform:uppercase;color:var(--tekst-dim);
  }
  .activiteitenlijst{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--rand)}
  .activiteit{display:flex;gap:var(--ruimte-inline);padding:var(--ruimte-inline) var(--ruimte-micro);border-bottom:1px solid var(--rand);font-size:12.5px;line-height:1.45}
  .activiteitstip{width:7px;height:7px;flex:0 0 7px;border-radius:50%;margin-top:5px;background:var(--accent)}
  .activiteit b,.activiteit small{display:block}
  .activiteit b{font-weight:500;color:var(--tekst)}
  .activiteit small{margin-top:2px;color:var(--tekst-dim);font-size:11.5px}
  .vgroep{margin-bottom:var(--ruimte-compact)}
  .vgroep:last-child{margin-bottom:0}
  .vgroep > label{display:block;font-size:12px;font-weight:500;color:var(--tekst-dim);margin-bottom:var(--ruimte-micro)}
  .vgroep input[type=text],.vgroep input[type=number],.vgroep input[type=date],.vgroep textarea,.vgroep select{
    width:100%;font-family:inherit;font-size:13.5px;color:var(--tekst);background:var(--papier);
    border:1px solid var(--rand-sterk);border-radius:5px;padding:9px 11px;resize:vertical;
  }
  .vgroep select{appearance:none;cursor:pointer;
    background-image:linear-gradient(45deg,transparent 50%,var(--tekst-dim) 50%),linear-gradient(135deg,var(--tekst-dim) 50%,transparent 50%);
    background-position:calc(100% - 15px) 17px,calc(100% - 10px) 17px;background-size:5px 5px;background-repeat:no-repeat}
  .vgroep input:focus,.vgroep textarea:focus,.vgroep select:focus{
    outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accentmist),.14)}
  .vpaar{display:flex;flex-wrap:wrap;gap:var(--ruimte-compact)}
  .vpaar > .vgroep{flex:1 1 150px;min-width:0}
  .vtijd{--datumveld-breedte:172px;display:grid;grid-template-columns:repeat(2,minmax(0,var(--datumveld-breedte)));max-width:calc(var(--datumveld-breedte) * 2 + var(--ruimte-compact))}
  .vtijd > .vgroep{min-width:0}
  .vtijd input[type=date]{min-width:0;width:100%;box-sizing:border-box}
  @media (max-width:620px){.vtijd{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}}
  /* Uitgegrijsd zodra de subtaken de start, einddatum en doorlooptijd bepalen. */
  .vgroep input.afgeleid,.vgroep input:disabled{opacity:.55;cursor:default;background:var(--warm)}
  .vduo{display:flex;gap:var(--ruimte-inline)}
  .vduo input{min-width:0}
  .vafgeleid{margin:var(--ruimte-compact) 0 0;font-size:12.5px;line-height:1.5;color:var(--tekst-dim);padding-left:var(--ruimte-compact);border-left:2px dashed var(--rand-sterk)}

  .venstervoet{
    display:flex;flex-wrap:wrap;align-items:center;gap:var(--ruimte-compact);padding:var(--ruimte-compact) var(--ruimte-component);
    border-top:1px solid var(--rand);background:var(--warm);
  }
  .vknoppen{display:flex;gap:var(--ruimte-inline);margin-left:auto}

  /* Het taakvenster is een werkformulier: naam en status blijven herkenbaar,
     terwijl dossierwerk pas na de kern van de taak volgt. */
  .taakvensterkaart{max-width:980px;max-height:calc(100dvh - var(--ruimte-hero));border:1px solid var(--rand-sterk);border-radius:14px}
  .taakvensterkaart .vensterkop{padding:var(--ruimte-component) var(--ruimte-groep) var(--ruimte-inline);border-bottom:0;background:var(--vlak)}
  .taakvensterkaart .vensterkop h2{flex:1;min-width:0;margin:0;font-family:var(--titel);font-size:22px;font-weight:650;line-height:1.2;letter-spacing:-.02em}
  .taakvensterkaart .venstertitel{padding:var(--ruimte-inline) var(--ruimte-groep) var(--ruimte-component);background:var(--vlak)}
  .taakvensterkaart .venstertitel > label,.taakvenster-kopveld label{display:block;margin-bottom:var(--ruimte-micro);font-size:12px;font-weight:650;color:var(--tekst-dim)}
  .taakvensterkaart .venstertitel input{min-height:48px;padding:var(--ruimte-inline) var(--ruimte-compact);border:1px solid var(--rand-sterk);border-radius:8px;background:var(--papier);font-size:18px;line-height:1.35}
  .taakvensterkaart .venstertitel input:hover{border-color:var(--accent)}
  .taakvensterkaart .venstertitel input:focus{border-color:var(--accent);box-shadow:var(--focus-ring)}
  .taakvensterkaart .titelrij{display:grid;grid-column:1 / -1;grid-row:1;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ruimte-compact);margin:0;padding:var(--ruimte-component) 0 var(--ruimte-groep);border-bottom:1px solid var(--rand)}
  .taakvenster-kopveld{min-width:0}
  .taakvensterkaart .kopselect{width:100%;min-height:44px;padding:9px 32px 9px 12px;border-color:var(--rand-sterk);border-radius:8px;font-size:14px;background-position:calc(100% - 17px) 19px,calc(100% - 12px) 19px}
  .taakvensterkaart #v-status{border-color:var(--taakstatus)}
  .taakvensterkaart .vensterlijf{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--ruimte-groep);padding:0 var(--ruimte-groep) var(--ruimte-groep)}
  .taakvensterkaart .vsectie{padding:var(--ruimte-groep) 0}
  .taakvensterkaart .vsectie h3{margin:0 0 var(--ruimte-component);font-family:var(--titel);font-size:16px;font-weight:650;line-height:1.3;letter-spacing:-.01em;color:var(--tekst)}
  .taakvenster-beschrijving{grid-column:1;grid-row:2}
  .taakvenster-planning{grid-column:1;grid-row:3}
  .taakvenster-betrokkenen{grid-column:2;grid-row:2}
  .taakvenster-wachten{grid-column:2;grid-row:3}
  .taakvenster-budget{grid-column:1 / -1;grid-row:4}
  .taakvensterkaart .vgroep > label{font-size:12.5px;font-weight:600}
  .taakvensterkaart .vgroep input,.taakvensterkaart .vgroep select,.taakvensterkaart .vgroep textarea{min-height:44px;border-radius:8px;font-size:14px}
  .taakvensterkaart .chipkiezer{margin-bottom:var(--ruimte-component)}
  .taakvensterkaart .chipkiezer .kieschip{min-height:40px}
  .taakvensterkaart .vvink{min-height:44px;margin:0 0 var(--ruimte-component)}
  .taakvenster-vervolg{grid-column:1 / -1;grid-row:5;min-width:0;border-top:1px solid var(--rand)}
  .taakvenster-vervolg > summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ruimte-inline);min-height:60px;padding:var(--ruimte-inline) 0;cursor:pointer;color:var(--tekst)}
  .taakvenster-vervolg > summary span{font-family:var(--titel);font-size:16px;font-weight:650}
  .taakvenster-vervolg > summary small{color:var(--tekst-dim);font-size:12px}
  .taakvenster-vervolg > summary::marker{color:var(--accent)}
  .taakvenster-vervolg > summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
  .taakvenster-vervolg > .vsectie{border-top:1px solid var(--rand);border-bottom:0}
  .taakvensterkaart .taakkoppelingen-acties[hidden]{display:none}
  .taakvensterkaart .venstervoet{background:var(--vlak);box-shadow:0 -8px 24px -20px var(--schaduw)}
  .taakvensterkaart .venstervoet .knop{min-height:44px}

  /* ---------- Vraag Bouwmaat — chat (experiment, opt-in) ---------- */
  body.vraag-open{overflow:hidden}
  body.vraag-open #paneel{visibility:hidden}
  #vraagvenster .vraag-verstuur{transform:none}
  #vraagvenster{right:0;z-index:35;padding:var(--ruimte-component);background:var(--vlak);backdrop-filter:none}
  #vraagvenster .vraagvenster{height:100%;max-height:100%;min-height:0}
  #vraagvenster .vraag-strook,#vraagvenster .vraag-chips,#vraagvenster .vraag-composer{flex-shrink:0}
  #vraagvenster #vraag-invoer{min-width:0;font-size:16px}
  #vraagvenster .vraag-chip{min-height:44px}
  .vraagvenster{
    max-width:460px;padding:0;overflow:hidden;
    display:flex;flex-direction:column;
    max-height:min(760px, calc(100vh - var(--ruimte-hero)));
  }
  /* Bouwie-avatar als ronde foto. object-fit:cover vult de cirkel; positie iets omhoog voor de kop. */
  .vraag-avatar{position:relative;display:block;width:40px;height:40px;border-radius:50%;overflow:hidden;flex:0 0 auto;
    background:var(--accent-diep);box-shadow:0 1px 3px rgba(0,0,0,.28)}
  .vraag-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block}
  .vraag-avatar.klein{width:28px;height:28px}

  .vraag-strook{display:flex;align-items:center;gap:8px;margin:0;
    padding:8px var(--ruimte-component);background:var(--warm);border-bottom:1px solid var(--rand);
    font-size:11.5px;line-height:1.4;color:var(--tekst-dim)}
  .vraag-strook svg{width:15px;height:15px;flex:0 0 auto;color:var(--accent)}

  .vraag-thread{flex:1;min-height:0;overflow-y:auto;
    padding:var(--ruimte-component) var(--ruimte-compact) var(--ruimte-inline);
    display:flex;flex-direction:column;gap:3px;background:var(--vlak)}
  .vraag-regel{display:flex;align-items:flex-end;gap:8px;max-width:100%}
  .vraag-regel.in{justify-content:flex-start}
  .vraag-regel.uit{justify-content:flex-end}
  .vraag-bubbel{max-width:80%;padding:9px 13px;font-size:14px;line-height:1.45;border-radius:18px;word-wrap:break-word;box-shadow:0 1px 1.5px rgba(0,0,0,.05)}
  .vraag-regel.in .vraag-bubbel{background:var(--warm);color:var(--tekst);border:1px solid var(--rand);border-bottom-left-radius:6px}
  .vraag-regel.uit .vraag-bubbel{background:linear-gradient(160deg,var(--accent),var(--accent-diep));color:#F7FBFA;border-bottom-right-radius:6px}
  .vraag-bubbel b{font-weight:600}
  .vraag-bubbel p{margin:0 0 7px}
  .vraag-bubbel p:last-child{margin-bottom:0}
  .vraag-bubbel .vraag-kop{margin:11px 0 4px;font-size:13.5px}
  .vraag-bubbel .vraag-kop:first-child{margin-top:0}
  .vraag-bubbel ul{margin:4px 0 7px;padding-left:18px;display:flex;flex-direction:column;gap:4px}
  .vraag-bubbel ul:last-child{margin-bottom:0}
  .vraag-bubbel li{padding-left:2px}

  .vraag-typen .vraag-bubbel{display:flex;gap:5px;align-items:center;padding:12px 15px}
  .vraag-punt{width:8px;height:8px;border-radius:50%;background:var(--tekst-dim);opacity:.5;animation:vraagwip 1.2s infinite ease-in-out}
  .vraag-punt:nth-child(2){animation-delay:.15s}
  .vraag-punt:nth-child(3){animation-delay:.3s}
  @keyframes vraagwip{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:.9}}

  .vraag-chips{display:flex;gap:8px;overflow-x:auto;padding:8px var(--ruimte-component) 10px;
    border-top:1px solid var(--rand);background:var(--vlak)}
  .vraag-chip{flex:0 0 auto;white-space:nowrap;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:500;
    color:var(--accent);background:var(--warm);border:1px solid var(--rand-sterk);
    padding:9px 14px;min-height:40px;border-radius:999px;transition:.15s}
  .vraag-chip:hover{background:var(--hover);border-color:var(--accent)}
  .vraag-chip:focus-visible{background:var(--hover);border-color:var(--accent);outline:2px solid var(--accent);outline-offset:2px}

  .vraag-composer{display:flex;align-items:flex-end;gap:8px;
    padding:10px var(--ruimte-compact);background:var(--vlak);border-top:1px solid var(--rand)}
  .vraag-invoerwikkel{flex:1;display:flex;align-items:center;
    background:var(--warm);border:1px solid var(--rand-sterk);border-radius:22px;padding:2px 6px 2px 14px}
  .vraag-invoerwikkel:focus-within{border-color:var(--accent)}
  #vraag-invoer{flex:1;border:0;background:transparent;resize:none;font-family:inherit;font-size:14px;color:var(--tekst);
    padding:9px 0;max-height:96px;line-height:1.4}
  #vraag-invoer:focus{outline:none}
  #vraag-invoer::placeholder{color:var(--tekst-dim)}
  .vraag-verstuur{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
    background:var(--rand-sterk);color:#fff;transition:.16s;transform:scale(.92)}
  .vraag-verstuur.actief{background:linear-gradient(155deg,var(--oker-rand),var(--oker));color:#3A2A08;transform:scale(1)}
  .vraag-verstuur:disabled{cursor:default}
  .vraag-verstuur svg{width:20px;height:20px}

  /* ---------- Kennisbank ---------- */
  .kennisbank{display:grid;gap:var(--ruimte-groep);max-width:920px}
  .kennisbank-intro{display:flex;align-items:center;justify-content:space-between;gap:var(--ruimte-component);padding:var(--ruimte-component);background:var(--paneel);border:1px solid var(--rand);border-radius:var(--radius);box-shadow:var(--kaart-schaduw)}
  .kennisbank-intro p{max-width:650px;margin:0;color:var(--tekst-dim);line-height:1.55}
  .kennisbank-intro .vraag-avatar{width:28px;height:28px}
  .kennisbank-zoeken{display:grid;gap:var(--ruimte-inline)}
  .kennisbank-zoeken label{font-size:13px;font-weight:600}
  .kennisbank-zoeken input{width:100%;min-height:48px;padding:10px 14px;font:inherit;font-size:16px;color:var(--tekst);background:var(--paneel);border:1px solid var(--rand-sterk);border-radius:var(--radius)}
  .kennisbank-zoekveld{display:flex;align-items:center;gap:var(--ruimte-inline)}
  .kennisbank-zoekveld input{min-width:0}
  .kennisbank-zoeken input:focus{outline:3px solid color-mix(in srgb,var(--accent) 24%,transparent);border-color:var(--accent)}
  .kennisbank-categorieen{display:flex;gap:var(--ruimte-inline);overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
  .kennisbank-categorieen .kieschip{flex:0 0 auto;min-height:40px;white-space:nowrap}
  .kennisbank-categorieen .kieschip[aria-pressed="true"]{color:var(--opAccent);background:var(--accent);border-color:var(--accent)}
  .kennisbank-status{margin:calc(-1 * var(--ruimte-compact)) 0 0;color:var(--tekst-dim);font-size:13px}
  .kennisbank-lijst{display:grid;gap:var(--ruimte-compact)}
  .kennisbank-artikel{overflow:hidden;background:var(--paneel);border:1px solid var(--rand);border-radius:var(--radius);box-shadow:var(--kaart-schaduw)}
  .kennisbank-artikel summary{display:flex;align-items:center;justify-content:space-between;gap:var(--ruimte-component);min-height:56px;padding:var(--ruimte-compact) var(--ruimte-component);cursor:pointer;font-weight:600;list-style:none}
  .kennisbank-artikel summary::-webkit-details-marker{display:none}
  .kennisbank-artikel summary span{display:grid;gap:3px}
  .kennisbank-artikel summary small{color:var(--accent);font-size:10.5px;font-weight:700;letter-spacing:.055em;text-transform:uppercase}
  .kennisbank-artikel[open] summary{border-bottom:1px solid var(--rand)}
  .kennisbank-antwoord{display:grid;gap:var(--ruimte-compact);padding:var(--ruimte-component);line-height:1.55}
  .kennisbank-antwoord p,.kennisbank-antwoord ol{margin:0}
  .kennisbank-antwoord ol{display:grid;gap:var(--ruimte-inline);padding-left:22px}
  .kennisbank-antwoord .knop{justify-self:start}

  /* Vraag Bouwmaat: zwevende badge rechtsonder op elk scherm. Bouwie met headset-overlay. Staat
     boven het chatpaneel zodat dezelfde knop het gesprek kan afsluiten. */
  .vraag-zweef{
    position:fixed;z-index:70;padding:0;border:0;cursor:pointer;
    right:calc(env(safe-area-inset-right,0px) + 18px);
    bottom:calc(env(safe-area-inset-bottom,0px) + 18px);
    width:60px;height:60px;border-radius:50%;
    background:radial-gradient(125% 125% at 30% 18%,#2C837C,#103F3C);
    box-shadow:0 12px 26px -8px rgba(18,73,70,.6),0 2px 6px rgba(0,0,0,.2);
    transition:transform .16s ease, box-shadow .16s ease;
  }
  .vraag-zweef:hover{transform:translateY(-2px);box-shadow:0 16px 32px -8px rgba(18,73,70,.7),0 2px 6px rgba(0,0,0,.22)}
  .vraag-zweef:focus-visible{outline:none;box-shadow:0 0 0 3px var(--vlak),0 0 0 6px var(--accent)}
  .vraag-zweef-foto{position:absolute;inset:0;border-radius:50%;overflow:hidden}
  .vraag-zweef-foto img{width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block}
  .vraag-zweef-headset{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
  /* Uit de weg tijdens slepen (dan staat er tijdelijk een statusbalk onderin). */
  body.sorteert .vraag-zweef{opacity:0;pointer-events:none}

  .experimentchip{
    display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
    padding:1px 7px;border-radius:999px;background:var(--warm);color:var(--tekst-dim);border:1px solid var(--rand-sterk);
    vertical-align:middle;
  }
  @media (prefers-reduced-motion: reduce){ .vraag-punt{animation:none} }

  /* ---------- bevestiging ---------- */
  .bevestigkaart{
    width:100%;max-width:420px;background:var(--vlak);border:1px solid var(--rand-sterk);
    border-top:4px solid var(--accent);border-radius:10px;padding:var(--ruimte-groep);
    box-shadow:0 26px 60px -24px var(--schaduw);
  }
  .bevestigkaart.gevaar{border-top-color:var(--alarm)}
  .bevestigkaart h3{margin:0 0 var(--ruimte-compact);font-family:var(--titel);font-size:17px;font-weight:600}
  .bevestigkaart p{margin:0;font-size:13.5px;line-height:1.6;color:var(--tekst)}
  .bevestiggevolg{
    margin-top:var(--ruimte-compact) !important;padding:var(--ruimte-compact) var(--ruimte-component);border-radius:5px;font-size:12.5px !important;
    color:var(--tekst-dim) !important;background:var(--warm);border-left:3px solid var(--rand-sterk);
  }
  .bevestigkaart.gevaar .bevestiggevolg{border-left-color:var(--alarm)}
  .bevestigknoppen{display:flex;gap:var(--ruimte-inline);justify-content:flex-end;margin-top:var(--ruimte-groep)}
  .infokaart{
    width:min(100%,390px);position:relative;text-align:center;background:var(--vlak);border:1px solid var(--rand-sterk);
    border-top:5px solid var(--accent);border-radius:10px;padding:var(--ruimte-groep);box-shadow:0 26px 60px -24px var(--schaduw);
  }
  .infokaart .venstersluit{position:absolute;top:10px;right:10px}
  .infologo{width:58px;height:58px;margin:0 auto var(--ruimte-component);border-radius:16px;background:var(--zij-bg);display:grid;place-items:center}
  .infologo svg,.infologo-afbeelding{width:42px;height:42px;object-fit:contain}
  .infokaart .eyebrow{margin:0 0 4px;color:var(--tekst-dim)}
  .infokaart h2{margin:0;font-family:var(--titel);font-size:22px;font-weight:600;letter-spacing:-.02em}
  .info-subtitel{margin:var(--ruimte-inline) 0 0;color:var(--tekst-dim);font-size:14px;line-height:1.45}
  .info-release{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:var(--ruimte-groep) 0;background:var(--rand);border:1px solid var(--rand);border-radius:7px;overflow:hidden;text-align:left}
  .info-release div{padding:10px 12px;background:var(--paneel)}
  .info-release dt{font-size:11px;color:var(--tekst-dim)}
  .info-release dd{margin:3px 0 0;font-size:13px;font-weight:600}
  .info-acties{display:flex;justify-content:center;gap:var(--ruimte-inline)}
  .infokaart .info-acties .knop{min-width:132px}
  #agendavenster .infokaart{width:min(100%,460px);text-align:left}
  #agendavenster .eyebrow,#agendavenster h2,#agendavenster .info-subtitel{text-align:left}
  .agenda-abonnement{margin:var(--ruimte-groep) 0 0;text-align:left;display:grid;gap:var(--ruimte-component)}
  .agenda-veld{display:grid;gap:var(--ruimte-micro);font-size:12px;color:var(--tekst-dim)}
  .agenda-veld input{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--rand);border-radius:6px;background:var(--paneel);color:var(--tekst);font-size:13px;font-family:ui-monospace,monospace}
  .agenda-acties{display:flex;flex-wrap:wrap;gap:var(--ruimte-inline)}
  .agenda-acties .knop{flex:1 1 auto;text-align:center}
  .agenda-hulp{font-size:12.5px;color:var(--tekst-dim)}
  .agenda-hulp summary{cursor:pointer;font-weight:600;color:var(--tekst)}
  .agenda-hulp p{margin:var(--ruimte-inline) 0 0;line-height:1.5}
  .agenda-let-op{margin:0;font-size:12px;color:var(--tekst-dim);line-height:1.5}
  .infokaart--notities{width:min(100%,620px);max-height:calc(100dvh - var(--ruimte-sectie));display:flex;flex-direction:column;text-align:left}
  .infokaart--notities .eyebrow,.infokaart--notities h2,.infokaart--notities .info-subtitel{text-align:center}
  .release-notities-lijst{display:grid;gap:var(--ruimte-component);overflow:auto;margin:var(--ruimte-groep) calc(var(--ruimte-micro) * -1);padding:0 var(--ruimte-micro)}
  .release-notitie{padding:var(--ruimte-component);background:var(--paneel);border:1px solid var(--rand);border-radius:7px}
  .release-notitie h3{display:flex;justify-content:space-between;gap:var(--ruimte-inline);margin:0;font-family:var(--titel);font-size:15px}
  .release-notitie time{font-family:var(--font);font-size:12px;font-weight:400;color:var(--tekst-dim)}
  .release-notitie ul{display:grid;gap:var(--ruimte-inline);margin:var(--ruimte-compact) 0 0;padding-left:var(--ruimte-component);font-size:13px;line-height:1.45}
  .release-notitie p,.release-notities-lijst .lijstleeg{margin:0;color:var(--tekst-dim);font-size:13px}
  .gebruikerskaart{max-width:760px}
  .gebruikerskaart .venstertitel h2{margin:0;font-family:var(--titel);font-size:20px}
  .gebruikerskaart .venstertitel p{margin:6px 0 0;color:var(--tekst-dim);font-size:13.5px;line-height:1.45}
  .gebruikerslijf{display:grid;grid-template-columns:minmax(230px,.8fr) minmax(280px,1.2fr);gap:var(--ruimte-groep);padding:var(--ruimte-groep);overflow:auto}
  .gebruikerslijf h3{margin:0 0 var(--ruimte-compact);font-family:var(--titel);font-size:15px}
  .gebruikersformulier{padding:var(--ruimte-component);background:var(--paneel);border:1px solid var(--rand);border-radius:7px}
  .gebruikersformulier label{display:block;margin:var(--ruimte-compact) 0 0;font-size:12px;font-weight:500;color:var(--tekst-dim)}
  .gebruikersformulier input,.gebruikersformulier select,.gebruiker-rij select{width:100%;margin-top:5px;font:inherit;color:var(--tekst);background:var(--papier);border:1px solid var(--rand-sterk);border-radius:5px;padding:8px 10px}
  .gebruikersformulier .knop{margin-top:14px;width:100%}
  .veld-hint{margin:10px 0 0;font-size:11.5px;line-height:1.45;color:var(--tekst-dim)}
  .gebruikersfeedback{margin:12px 0 -2px;padding:9px 10px;border-left:2px solid var(--bezig-rand);border-radius:4px;background:var(--bezig-vel);font-size:12px;line-height:1.45}
  .gebruikersfeedback.waarschuwing{color:var(--alarm);border-left-color:var(--alarm);background:var(--fout-vel)}
  .gebruikersfeedback.goed{color:var(--klaar-streep);border-left-color:var(--klaar-rand);background:var(--klaar-vel)}
  .gebruiker-rij{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--rand)}
  .gebruiker-rij span{min-width:0;flex:1}.gebruiker-rij b,.gebruiker-rij small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gebruiker-rij b{font-size:13.5px}.gebruiker-rij small{margin-top:2px;font-size:11.5px;color:var(--tekst-dim)}
  .gebruiker-acties{display:flex;align-items:center;gap:7px;flex:0 0 auto}
  .gebruiker-rij select{width:110px;flex:0 0 110px;margin:0;font-size:12.5px}
  .gebruiker-verwijderen{min-height:34px;padding:6px 9px;font-size:12px}
  @media (max-width:620px){.gebruikerslijf{grid-template-columns:1fr;padding:16px}.gebruikerskaart .venstertitel{padding:14px 18px}.gebruiker-rij{gap:9px}.gebruiker-acties{gap:5px}.gebruiker-verwijderen{padding:6px 7px;font-size:11.5px}}
  /* ---------- subtaken op het kaartje ---------- */
  .subs{list-style:none;margin:10px 0 0;padding:0}
  .subs li{display:flex;align-items:baseline;gap:8px;font-size:12.5px;line-height:1.5;padding:2px 0}
  .subs li.af .subnaam{color:var(--tekst-dim);text-decoration:line-through}
  .subbol{
    width:13px;height:13px;flex:0 0 13px;padding:0;border-radius:50%;cursor:pointer;
    border:1.5px solid var(--rand-sterk);background:transparent;transition:.14s;position:relative;top:2px;
  }
  .subbol:hover{border-color:var(--klaar-streep)}
  .subs li.af .subbol,.subbol.af{background:var(--klaar-streep);border-color:var(--klaar-streep)}
  .subnaam{flex:1 1 auto;min-width:0;font-size:11px}
  .subdatum{font-size:11px;color:var(--tekst-dim);white-space:nowrap}
  .subs .subnieuw button{background:none;border:0;padding:0;font:inherit;font-size:12px;cursor:pointer;color:var(--tekst-zacht)}
  .subs .subnieuw button:hover{color:var(--accent)}

  /* ---------- actoren als chips in het venster ---------- */
  .chipkiezer{display:flex;flex-wrap:wrap;gap:var(--ruimte-inline)}
  .kieschip{
    font-family:inherit;font-size:12.5px;color:var(--tekst-dim);background:var(--papier);
    border:1px solid var(--rand-sterk);padding:6px 13px;border-radius:100px;cursor:pointer;transition:.14s;
  }
  .taakkoppelingen{display:grid;gap:var(--ruimte-compact)}
  .taakkoppelingen .fhulp{margin:0}
  .taakkoppelingen-lijst{display:flex;flex-wrap:wrap;gap:var(--ruimte-inline);min-height:32px}
  .taakkoppeling{display:inline-flex;align-items:center;gap:7px;max-width:100%;min-height:34px;padding:5px 7px 5px 10px;border:1px solid var(--rand-sterk);border-radius:var(--radius);background:var(--warm);font-size:12.5px;color:var(--tekst)}
  .taakkoppeling a,.taakkoppeling > span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit;text-decoration:none}
  .taakkoppeling a:hover{text-decoration:underline;color:var(--accent)}
  .taakkoppeling-soort{flex:0 0 auto;color:var(--tekst-dim);font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
  .taakkoppeling button{display:grid;place-items:center;flex:0 0 24px;min-width:24px;min-height:24px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--tekst-dim);font:inherit;font-size:17px;cursor:pointer}
  .taakkoppeling button:hover{background:var(--gevaar-zacht);color:var(--gevaar)}
  .taakkoppeling--besluit{cursor:pointer;text-align:left}
  .taakkoppelingen-acties{display:flex;flex-wrap:wrap;gap:var(--ruimte-inline)}
  .taakbronkaart{max-width:680px}.taakbronkaart .venstertitel p{margin:var(--ruimte-inline) 0 0;color:var(--tekst-dim);font-size:13px;line-height:1.45}.taakbronlijf{padding:var(--ruimte-component) var(--ruimte-groep);overflow-y:auto}.taakbronkeuzes{display:flex;flex-wrap:wrap;gap:var(--ruimte-inline)}.taakbronkeuzes .kieschip{min-height:44px;text-align:left}
  /* ---------- subtaken in het venster ---------- */
  .subtabel{display:flex;flex-direction:column;gap:var(--ruimte-inline);margin-bottom:var(--ruimte-compact)}
  .subrij{display:grid;grid-template-columns:auto 1fr 152px 72px auto;align-items:center;gap:8px}
  @media (max-width:620px){ .subrij{grid-template-columns:auto 1fr auto;gap:6px}
    .subrij .substart{grid-column:2}
    .subrij .subeind{grid-column:3} }
  .subrij.mis .substart,.subrij.mis .subeind{border-color:var(--alarm)}
  .subnaamveld{min-width:0}
  .subnaamveld.af{color:var(--tekst-dim);text-decoration:line-through}
  .subeind{text-align:center}
  .subrij input{font-family:inherit;font-size:13px;color:var(--tekst);background:var(--papier);
    border:1px solid var(--rand-sterk);border-radius:4px;padding:7px 9px}
  .subrij input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accentmist),.14)}
  .subrij .subwis{flex:0 0 auto;color:var(--gevaar)}
  .subrij .subwis:hover{background:var(--gevaar-zacht);border-color:var(--gevaar);color:var(--gevaar)}
  .vvink{display:flex;align-items:center;gap:9px;font-size:13.5px;cursor:pointer;margin:4px 0 12px}
  .vvink input{width:17px;height:17px;accent-color:var(--accent);cursor:pointer}
  .vverborgen{display:none}
  .vafgeleid.mis{color:var(--alarm);border-left-color:var(--alarm)}
  .rij.sleept{opacity:.45}
  .beheer .rij[draggable=true]{cursor:grab}
  /* Touch-slepen (Pointer Events): opgepakt item licht op, en tijdens het slepen geen
     tekstselectie of concurrerend scrollgedrag op dat ene element. */
  body.sorteert{cursor:grabbing}
  body.sorteert .dragging{opacity:.6;position:relative;z-index:30;touch-action:none;user-select:none;-webkit-user-select:none}

  /* ---------- profiel ---------- */
  .avatar.klein{width:34px;height:34px;flex:0 0 34px;font-size:12.5px}
  .avatar.mini{width:22px;height:22px;flex:0 0 22px;font-size:10px;font-weight:600}
  .avatar.groot{width:96px;height:96px;flex:0 0 96px;font-size:30px}
  .menukop{
    display:flex;align-items:center;gap:var(--ruimte-compact);width:100%;text-align:left;font:inherit;color:var(--tekst);
    background:none;border:0;border-bottom:1px solid var(--rand);padding:var(--ruimte-inline) var(--ruimte-compact) var(--ruimte-compact);margin-bottom:var(--ruimte-micro);
    border-radius:5px 5px 0 0;cursor:pointer;
  }
  .menukop:hover{background:var(--warm)}
  .menukop span span{display:block;font-size:11.5px;color:var(--tekst-dim);margin-top:2px}
  .profielkaart{
    background:var(--paneel);border:1px solid var(--rand);border-radius:var(--radius);
    padding:var(--ruimte-groep);margin-top:var(--ruimte-component);max-width:560px;
  }
  .profielfoto{display:flex;align-items:center;gap:var(--ruimte-component);margin-bottom:var(--ruimte-groep)}
  .profielknoppen{display:flex;flex-wrap:wrap;gap:var(--ruimte-inline);align-items:center}
  .profielknoppen small{flex:1 1 100%;font-size:11.5px;color:var(--tekst-dim);line-height:1.4}
  .vgroep input:disabled{opacity:.6;cursor:not-allowed}

  /* ---------- gallerij ---------- */
  .fotoleeg{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;padding:12px;
    font-size:12px;color:var(--tekst-dim);text-align:center}
  .fotoraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--ruimte-component);margin:var(--ruimte-component) 0 var(--ruimte-groep)}
  .fototegel{
    position:relative;margin:0;background:var(--vlak);border:1px solid var(--rand);
    border-radius:12px;overflow:hidden;box-shadow:0 1px 2px var(--schaduw-zacht);
    transition:box-shadow .16s ease,transform .16s ease;
  }
  .fototegel:hover{box-shadow:0 8px 22px var(--schaduw-zacht);transform:translateY(-1px)}
  .fotoknop{display:block;width:100%;padding:0;border:0;background:var(--warm);cursor:zoom-in}
  .fotoknop img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
  .fototegel figcaption{
    padding:9px 11px;font-size:12.5px;line-height:1.35;color:var(--tekst);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .fototegel figcaption b,.fototegel figcaption small{display:block;overflow:hidden;text-overflow:ellipsis}
  .fototegel figcaption small{margin-top:2px;font-size:11px;color:var(--tekst-dim)}
  .fototegelacties{top:7px;right:7px}
  /* Fotoselectie (multiselect): vinkje op de tegel, gekozen-staat en de sticky selectiebalk. */
  .fototegel--kies .fotoknop{cursor:pointer}
  .fototegel--kies .fotoknop img{transition:filter .12s ease}
  .fotokiesvink{position:absolute;top:8px;left:8px;z-index:2;display:grid;place-items:center;width:26px;height:26px;color:transparent;background:var(--paneel);border:2px solid var(--rand-sterk);border-radius:50%;box-shadow:0 1px 3px rgba(var(--inkt),.35)}
  .fotokiesvink svg{width:15px;height:15px}
  .fototegel--gekozen{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
  .fototegel--gekozen .fotokiesvink{color:var(--opAccent);background:var(--accent);border-color:var(--accent)}
  .fototegel--gekozen .fotoknop img{filter:brightness(.94)}
  .mapselecteer[aria-pressed="true"]{color:var(--accent);border-color:var(--accent);background:var(--warm)}
  .fotokiesbalk{position:sticky;bottom:calc(var(--ruimte-component) + env(safe-area-inset-bottom,0px));z-index:20;display:flex;align-items:center;justify-content:space-between;gap:var(--ruimte-component);flex-wrap:wrap;margin:0 0 var(--ruimte-groep);padding:var(--ruimte-inline) var(--ruimte-component);background:var(--paneel-dicht);border:1px solid var(--rand-sterk);border-radius:var(--radius);box-shadow:0 12px 30px -16px var(--schaduw)}
  .fotokiesbalk__telling{font-size:13px;font-weight:600;color:var(--tekst)}
  .fotokiesbalk__acties{display:flex;align-items:center;gap:var(--ruimte-inline);flex-wrap:wrap}
  .knop--overlay{border:0!important;border-radius:50%!important;opacity:1}.knop--overlay--donker{background:rgba(var(--inkt),.58)!important;color:var(--opAccent)!important}.knop--overlay--licht{background:var(--paneel)!important;color:var(--tekst)!important}.knop--overlay:hover,.knop--overlay:focus-visible{background:var(--accent)!important;color:var(--opAccent)!important}
  .fotoprullenbak{margin:var(--ruimte-component) 0 var(--ruimte-groep);border:1px dashed var(--rand-sterk);border-radius:var(--radius);background:var(--paneel-dicht);overflow:hidden}
  .fotoprullenbakkop{display:flex;align-items:center;padding:var(--ruimte-compact) var(--ruimte-component);background:var(--warm)}
  .fotoprullenbakkop b,.fotoprullenbakkop small{display:block}
  .fotoprullenbakkop small,.fotoprullenbak .fhulp{font-size:11.5px;color:var(--tekst-dim);margin:var(--ruimte-micro) var(--ruimte-component) var(--ruimte-compact)}
  .fotoprullenbakrij{display:flex;align-items:center;justify-content:space-between;gap:var(--ruimte-compact);padding:var(--ruimte-inline) var(--ruimte-component);border-top:1px solid var(--rand)}
  .fotoprullenbakrij b,.fotoprullenbakrij small{display:block}
  .fotoprullenbakrij b{font-size:12.5px}.fotoprullenbakrij small{font-size:11px;color:var(--tekst-dim);margin-top:2px}
  .fotoprullenbakrij > span:last-child{display:flex;gap:var(--ruimte-inline);flex:0 0 auto}
  .fotoprullenbakrij button{min-height:32px;font-size:11.5px;padding:4px 8px}

  /* ===== Herbruikbare componenten (Foto's nu; later ook Taken/Kanban) ===== */
  /* Actiebalk: één horizontale knoppenrij (Filteren, Sorteren, toggles, primaire actie). */
  .actiebalk{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ruimte-compact)}
  .actiebalk > .knop,.actiebalk__rechts > .knop{white-space:nowrap}
  .actiebalk .knop[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--opAccent)}
  .actiebalk__rechts{margin-left:auto;display:flex;align-items:center;gap:var(--ruimte-compact)}
  .actiebalk-zoek{margin:var(--ruimte-compact) 0 0}
  .actiebalk-zoek input{width:100%;max-width:420px;min-height:40px;padding:8px 12px;font:inherit;font-size:13px;color:var(--tekst);background:var(--vlak);border:1px solid var(--rand-sterk);border-radius:var(--knop-ronding)}
  .actiebalk-zoek input:focus-visible{border-color:var(--accent);outline:0;box-shadow:var(--focus-ring)}

  /* Mediakaart: kaart met cover, kop en actievoet — voor map- en collectiekaarten. */
  .mediakaart{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--vlak);border:1px solid var(--rand);border-radius:14px;box-shadow:0 1px 2px var(--schaduw-zacht);overflow:hidden;transition:box-shadow .16s ease,transform .16s ease}
  .mediakaart:hover{box-shadow:0 10px 26px var(--schaduw-zacht);transform:translateY(-1px)}
  .mediakaart__cover{position:relative;aspect-ratio:16/10;background:var(--warm);overflow:hidden}
  .mediakaart__cover img{width:100%;height:100%;object-fit:cover;display:block}
  .mediakaart__mini{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px}
  .mediakaart__mini img{width:100%;height:100%;object-fit:cover;display:block}
  .mediakaart__kop{display:flex;align-items:center;gap:var(--ruimte-inline);padding:12px 14px}
  .mediakaart__titel{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:14.5px;color:var(--tekst)}
  .mediakaart__aantal{color:var(--tekst-dim);font-weight:400}
  .mediakaart__kop .mediakaart__menu{margin-left:auto;flex:0 0 auto}
  .mediakaart__voet{display:flex;align-items:center;gap:var(--ruimte-inline);padding:0 14px 12px;flex-wrap:wrap}
  .mediakaart__meta{display:flex;align-items:center;gap:var(--ruimte-inline);padding:0 14px 12px;color:var(--tekst-dim);font-size:12.5px}
  .mediakaart--leeg{align-items:center;justify-content:center;min-height:150px;border-style:dashed;color:var(--accent);cursor:pointer;text-align:center;font-weight:600}
  .mediakaart--leeg:hover{border-color:var(--accent);background:var(--warm)}
  /* Sectiekop per adres/hoofdgroep boven een kaartraster. */
  .mediasectie{margin-top:var(--ruimte-groep)}
  .mediasectie__kop{display:flex;align-items:center;gap:var(--ruimte-inline);margin-bottom:var(--ruimte-component)}
  .mediasectie__titel{font-family:var(--titel);font-size:18px;font-weight:600;color:var(--tekst);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mediaraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--ruimte-component)}
  /* 2x2-preview onder een ingeklapte fotocollectie: vier vierkante thumbnails; de laatste draagt
     een "+N"-overlay met het restaantal. Elke tegel opent één foto; de "+N"-tegel het hele raster. */
  .mapkop__preview{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;width:100%;max-width:260px;margin:0 0 var(--ruimte-inline);padding:0;border:1px solid var(--rand);border-radius:12px;overflow:hidden;background:var(--warm)}
  .mapkop__preview-tegel{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border:0;padding:0;margin:0;background:var(--warm);cursor:pointer}
  .mapkop__preview-tegel img,.mapkop__preview-leeg{width:100%;height:100%;object-fit:cover;display:block;background:var(--warm)}
  .mapkop__preview-tegel:hover img{filter:brightness(.94)}
  .mapkop__preview-tegel:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .mapkop__preview-meer{position:absolute;inset:0;display:grid;place-items:center;background:rgba(20,26,30,.52);color:#fff;font-family:var(--letter);font-weight:700;font-size:18px}
  .mapkop__preview-submap{margin-left:calc(var(--mapdiepte,0) * 18px)}
  /* "Alle N foto's openen" — opent het schermvullende raster (map uitklappen). */
  .mapkop__voet{display:inline-flex;align-items:center;gap:6px;margin:0 0 var(--ruimte-component);padding:6px 2px;border:0;background:none;color:var(--accent);font:600 12.5px var(--letter);cursor:pointer}
  .mapkop__voet-submap{margin-left:calc(var(--mapdiepte,0) * 18px)}
  .mapkop__voet-pijl{width:14px;height:14px;flex:0 0 14px}
  .mapkop__voet:hover span,.mapkop__voet:focus-visible span{text-decoration:underline}
  .mapkop__voet:focus-visible{outline:0}
  /* De kaart is standaard een onzichtbare wikkel; op mobiel wordt het een echte kaart (responsief.css).
     De inspringing van een submap verhuist naar de kaart zelf, zodat kop, preview en voet erin uitlijnen. */
  .mapkaart{display:block}
  .mapkaart-submap{margin-left:calc(var(--mapdiepte,0) * 18px)}
  .mapkaart .mapkop-submap,.mapkaart .mapkop__preview-submap{margin-left:0}

  /* Pull-to-refresh: verschijnt bovenaan als je op een aanraakscherm de pagina naar beneden trekt.
     De balk hangt boven de viewport en wordt via --trek onthuld; min(0px,…) pint hem aan de top
     zodra hij volledig zichtbaar is (geen gat erboven). De vernieuwknop in de kopbalk doet hetzelfde. */
  .pull-ververs{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:8px 14px;padding-top:calc(8px + env(safe-area-inset-top,0px));background:var(--vlak);border-bottom:1px solid var(--rand);color:var(--tekst-dim);font-family:var(--letter);font-size:12.5px;font-weight:600;box-shadow:0 8px 16px -12px var(--schaduw);transform:translateY(min(0px,calc(var(--trek,0px) - 100%)));pointer-events:none}
  .pull-ververs:not(.pull-ververs--zichtbaar):not(.pull-ververs--bezig){visibility:hidden}
  .pull-ververs--animeer{transition:transform .22s ease}
  .pull-ververs__pijl{width:20px;height:20px;color:var(--accent);transition:transform .18s ease}
  .pull-ververs--klaar .pull-ververs__pijl{transform:rotate(180deg)}
  .pull-ververs--klaar .pull-ververs__tekst{color:var(--accent)}
  .pull-ververs__kring{display:none;width:20px;height:20px;border-radius:50%;border:2.5px solid var(--rand-sterk);border-top-color:var(--accent)}
  .pull-ververs--bezig .pull-ververs__kring{display:block;animation:pull-draai .7s linear infinite}
  .pull-ververs--bezig .pull-ververs__pijl{display:none}
  .pull-ververs--bezig .pull-ververs__tekst{color:var(--accent)}
  @keyframes pull-draai{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){.pull-ververs--animeer{transition:none}.pull-ververs--bezig .pull-ververs__kring{animation-duration:1.4s}}
  @media (min-width:861px){.pull-ververs{display:none}}
  .fotovenster{background:rgba(var(--inkt),.82);align-items:center;gap:10px}
  .fotogroot{margin:0;max-width:min(1100px,92vw);max-height:88vh;display:flex;flex-direction:column;align-items:center}
  .fotogroot img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:6px;background:var(--vlak)}
  .fotogroot figcaption{margin-top:10px;color:var(--opAccent);font-size:13.5px;text-align:center}
  .fotogroot figcaption span{display:block;font-size:11.5px;opacity:.7;margin-top:3px}
  .fotosluit{position:absolute;top:14px;right:16px;color:var(--opAccent);font-size:26px}
  .fotosluit:hover{background:color-mix(in srgb,var(--opAccent) 15%,transparent);color:var(--opAccent)}
  .fotopijl{
    position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid color-mix(in srgb,var(--opAccent) 30%,transparent);
    display:grid;place-items:center;background:var(--schaduw-zacht);color:var(--opAccent);cursor:pointer;
  }
  .fotopijl:hover{background:var(--schaduw)}
  .fotopijl.links{left:16px}.fotopijl.rechts{right:16px}

  /* ---------- werkbalk en interactieve visuals ---------- */
  .paginatitel--met-weergave{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--ruimte-micro) var(--ruimte-inline)}
  .paginatitel--met-weergave .paginatitel-tekst{grid-column:1;grid-row:1}
  .paginatitel-toelichting{grid-column:1/-1;grid-row:2;margin:0;padding-left:calc(var(--ruimte-compact) + 2px);color:var(--tekst-dim);font-size:13.5px;line-height:1.45}
  .weergavekeuze{position:relative;grid-column:2;grid-row:1;justify-self:end;font-size:13px}
  .weergavekeuze summary{display:flex;align-items:center;justify-content:center;gap:var(--ruimte-micro);min-height:44px;padding:0 var(--ruimte-compact);border:1px solid var(--rand-sterk);border-radius:var(--knop-ronding);background:var(--paneel);color:var(--tekst);cursor:pointer;white-space:nowrap;list-style:none}
  .weergavekeuze summary::-webkit-details-marker{display:none}
  .weergavekeuze summary:hover,.weergavekeuze[open] summary{border-color:var(--accent);color:var(--accent)}
  .weergavekeuze summary:focus-visible,.weergavekeuze-opties button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .weergavekeuze-opties{position:absolute;z-index:20;top:calc(100% + var(--ruimte-micro));right:0;display:grid;gap:var(--ruimte-micro);min-width:100%;padding:var(--ruimte-micro);border:1px solid var(--rand-sterk);border-radius:var(--knop-ronding);background:var(--paneel-dicht);box-shadow:var(--schaduw)}
  .weergavekeuze-opties button{justify-content:flex-start;min-height:44px;white-space:nowrap}
  .weergavekeuze-opties button.aan{border-color:var(--accent);background:var(--accent);color:var(--opAccent)}
  .werkbalk .paginabalk-links{flex:1 1 auto;min-width:0;width:100%}
  /* De werkbalk groepeert primaire acties, weergave en persoonlijke filters naar taak. */
  .werkbalk-groep{display:flex;flex:0 0 auto;align-items:center;gap:var(--ruimte-inline);min-width:max-content;padding:var(--ruimte-micro);border:1px solid var(--rand);border-radius:999px;background:var(--paneel)}
  .werkbalk-groep + .werkbalk-groep{margin-left:var(--ruimte-micro)}
  .werkbalk-groep--hoofd,.werkbalk-groep--filters{padding:0;border:0;border-radius:0;background:transparent}
  .werkbalk-groep--hoofd{min-height:48px}
  .werkbalk-groep--hoofd .werkbalk-tekstknop{min-height:48px;padding:0 var(--ruimte-compact);font-size:13px}
  .werkbalk-tekstknop{min-height:44px;white-space:nowrap}
  .werkbalk-tekstknop svg{flex:0 0 auto;width:18px;height:18px}
  .werkbalk #f-meer{position:relative}
  .werkbalk #f-meer .knop-telbadge{position:static;flex:0 0 auto;min-width:18px;height:18px}
  .werkbalk #f-meer[aria-expanded="true"]{border-color:var(--accent);background:var(--warm)}
  .werkbalk-groep--filters .werkbalk-tekstknop:disabled{display:none}
  .werkbalk .filterstatus[hidden]{display:none}
  .werkbalk-groep--filters button{box-sizing:border-box;min-height:44px;font-size:13px}
  .werkbalk-groep--filters .kieschip{padding:0 var(--ruimte-compact)}
  .werkbalk-icoon{--knop-icoon:36px;border-radius:50%!important;box-shadow:none}
  .werkbalk-icoon:not(.knop--primair,.knop--gevaar):hover:not(:disabled),.werkbalk-icoon:not(.knop--primair,.knop--gevaar):focus-visible{border-color:var(--accent);color:var(--accent);background:var(--paneel)}
  .werkbalk .snelle-filtergroep{display:flex;flex:0 0 auto;gap:var(--ruimte-inline)}
  /* Bouwmaat verschijnt alleen als bestaande hulp bewust wordt opgevraagd. De pop-up staat
     buiten elke scrollcontainer, zodat hij nooit wordt afgeknipt en centraal te onderhouden blijft. */
  .bouwmaat-tooltip{position:fixed;z-index:90;display:flex;align-items:flex-start;gap:var(--ruimte-inline);width:min(300px,calc(100vw - 2 * var(--ruimte-component)));padding:var(--ruimte-compact);border:1px solid var(--rand-sterk);border-radius:var(--radius);background:var(--paneel-dicht);box-shadow:var(--schaduw);color:var(--tekst);font-size:12.5px;line-height:1.45;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .2s ease,transform .2s ease}.bouwmaat-tooltip.zichtbaar{opacity:1;transform:translateY(0)}.bouwmaat-tooltip[hidden]{display:none}.bouwmaat-tooltip::before{content:'';position:absolute;top:-6px;left:18px;width:11px;height:11px;border-top:1px solid var(--rand-sterk);border-left:1px solid var(--rand-sterk);background:var(--paneel-dicht);transform:rotate(45deg)}.bouwmaat-tooltip[data-richting="boven"]::before{top:auto;bottom:-6px;border-top:0;border-left:0;border-right:1px solid var(--rand-sterk);border-bottom:1px solid var(--rand-sterk)}.bouwmaat-tooltip > img{position:relative;z-index:1;flex:0 0 46px;width:46px;height:46px;border-radius:50%;object-fit:cover}.bouwmaat-tooltip > span{display:grid;gap:var(--ruimte-micro);min-width:0}.bouwmaat-tooltip b{font-size:12px}.bouwmaat-tooltip-tekst{overflow-wrap:anywhere}
  /* Alleen de hoofdstrip schuift op middelbrede schermen; op mobiel krijgen de filters een eigen rij. */
  .actierij--volledig-scrollbaar{flex-wrap:nowrap;gap:var(--ruimte-compact);max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .actierij--volledig-scrollbaar .actierij-scrollstrip{display:flex;flex:0 0 auto;flex-wrap:nowrap;align-items:center;gap:var(--ruimte-compact);min-width:max-content}
  .werkbalk{margin-top:0;padding:4px 0}
  .werkbalk .paginabalk-links{flex-wrap:wrap;gap:var(--ruimte-inline);overflow:visible}
  .werkbalk-groep--filters{flex-basis:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
  .bedieningsinhoud{display:flex;flex-direction:column;gap:var(--ruimte-compact);min-width:0}
  .werkbalk .opgeslagen-weergaven{flex:0 0 auto;max-width:none;margin:0;padding:0;overflow:visible}
  .viz-vlak{display:flex;flex:1 1 0;flex-direction:column;align-items:center;justify-content:center;min-height:0;width:100%;margin:auto 0}
  .viz-vulling{transition:stroke-dashoffset .7s cubic-bezier(.22,.61,.36,1)}
  .viz-part{transition:opacity .15s,filter .15s;cursor:pointer}
  .viz-part:hover{filter:brightness(1.12)}
  .viz-part.dof{opacity:.28}
  .viz-knop{
    display:flex;align-items:center;gap:6px;font-family:inherit;font-size:11.5px;color:var(--tekst-dim);
    background:none;border:1px solid transparent;border-radius:100px;padding:3px 8px;cursor:pointer;
  }
  .viz-knop:hover{border-color:var(--rand-sterk);color:var(--tekst)}
  .viz-knop.aan{border-color:var(--accent);color:var(--accent);background:rgba(var(--accentmist),.10)}
  .viz-knop i{width:9px;height:9px;border-radius:50%;display:inline-block}
  .viz-knop b{font-weight:600;color:var(--tekst)}
  .viz-staaf{display:flex;width:100%;height:26px;border-radius:5px;overflow:hidden;margin:6px 0 12px;background:rgba(var(--inkt),.10)}
  .viz-stuk{cursor:pointer;transition:filter .15s}
  .viz-stuk:hover{filter:brightness(1.15)}
  .viz-stuk.leeg{background:rgba(var(--inkt),.10);cursor:default}
  .viz-alert.klikbaar{cursor:pointer}
  .viztip{
    position:fixed;z-index:120;transform:translate(-50%,-100%);pointer-events:none;
    background:var(--vlak);color:var(--tekst);border:1px solid var(--rand-sterk);border-radius:6px;
    padding:8px 11px;font-size:12px;line-height:1.45;box-shadow:0 8px 24px -10px var(--schaduw);white-space:nowrap;
  }
  .viztip small{color:var(--tekst-dim)}
  .viztip[hidden]{display:none}

  /* ---------- opmerkingen ---------- */
  .opmlijst{display:flex;flex-direction:column;gap:9px;margin-bottom:12px}
  .opm{background:var(--warm);border:1px solid var(--rand);border-radius:6px;padding:10px 12px}
  .opmkop{display:flex;align-items:center;gap:8px;margin-bottom:5px}
  .opmkop b{font-size:12.5px}
  .opmkop span{font-size:11px;color:var(--tekst-dim)}
  .opmkop .opmwis{margin-left:auto;color:var(--gevaar)}
  .opmkop .opmwis:hover{background:var(--gevaar-zacht);border-color:var(--gevaar);color:var(--gevaar)}
  .opm p{margin:0;font-size:13px;line-height:1.55}
  .opmnieuw{display:flex;gap:9px;align-items:flex-start}
  .opm-invoer{position:relative;flex:1;min-width:0}
  .opmnieuw textarea{
    flex:1;font-family:inherit;font-size:13.5px;color:var(--tekst);background:var(--papier);
    border:1px solid var(--rand-sterk);border-radius:5px;padding:9px 11px;resize:vertical;
  }
  .opmnieuw textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accentmist),.14)}
  .opmpil{background:rgba(var(--inkt),.06)}

  .achtervoorbeeld{
    width:74px;height:48px;flex:0 0 74px;border-radius:5px;border:1px solid var(--rand-sterk);
    background-size:cover;background-position:center;
  }
  .achtergrondgalerij{display:grid;gap:var(--ruimte-component);margin-top:var(--ruimte-groep);padding-top:var(--ruimte-groep);border-top:1px solid var(--rand)}
  .achtergrondgalerij-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ruimte-component)}
  .achtergrondgalerij-kop h2{margin:0;font:600 16px/1.25 var(--titel)}
  .achtergrondgalerij-kop p,.achtergrondgalerij-leeg{margin:var(--ruimte-inline) 0 0;color:var(--tekst-dim);font-size:13px;line-height:1.5}
  .achtergrondgalerij-kop .knop{flex:0 0 auto}
  .achtergrondgalerij-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--ruimte-component)}
  .achtergrondgalerij-item{position:relative;min-width:0;background:var(--vlak);border:1px solid var(--rand);border-radius:var(--radius);overflow:hidden}
  .achtergrondgalerij-item.aan{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accentmist),.14)}
  .achtergrondgalerij-keuze{display:grid;gap:var(--ruimte-inline);width:100%;padding:var(--ruimte-inline);font:500 13px/1.35 var(--letter);text-align:left;color:var(--tekst);background:transparent;border:0;cursor:pointer}
  .achtergrondgalerij-keuze:hover:not(:disabled),.achtergrondgalerij-keuze:focus-visible{background:var(--warm);outline:none}
  .achtergrondgalerij-keuze:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
  .achtergrondgalerij-keuze img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:calc(var(--radius) - 4px);background:var(--warm)}
  .achtergrondgalerij-item.is-verwijderd{opacity:.72}
  .achtergrondgalerij-item.is-verwijderd::after{content:'Uit galerij gehaald';position:absolute;top:var(--ruimte-inline);left:var(--ruimte-inline);padding:3px 6px;border-radius:999px;background:var(--tekst);color:var(--opTekst);font-size:11px;font-weight:600;pointer-events:none}
  .achtergrondgalerij-acties{display:flex;justify-content:flex-end;gap:var(--ruimte-inline);padding:0 var(--ruimte-inline) var(--ruimte-inline)}
  @media (max-width:760px){
    .achtergrondgalerij{margin-top:var(--ruimte-component);padding-top:var(--ruimte-component)}
    .achtergrondgalerij-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ruimte-compact)}
    .achtergrondgalerij-keuze{font-size:12px}
  }
  /* ---------- subtaken in het venster ---------- */
  .subrij{grid-template-columns:auto auto minmax(128px,1fr) 128px 128px 128px auto !important}
  .subgreep{color:var(--tekst-zacht);cursor:grab;font-size:11px;letter-spacing:-1px;user-select:none}
  .subgreep svg{display:block;width:16px;height:16px}
  .subrij.sleept{opacity:.45}
  .subactor{font-family:inherit;font-size:12.5px;color:var(--tekst);background:var(--papier);
    border:1px solid var(--rand-sterk);border-radius:4px;padding:6px 8px;min-width:0}
  .subactornaam{font-size:11px;color:var(--accent);white-space:nowrap}
  .subrij .substart,.subrij .subeind{min-width:0;width:128px;box-sizing:border-box}
  @media (max-width:760px){ .subrij{grid-template-columns:auto auto 1fr auto !important}
    .subrij .substart,.subrij .subeind{width:min(100%,150px);min-width:0}
    .subrij .subactor,.subrij .substart,.subrij .subeind{grid-column:3} }

  /* ---------- opmerkingen ---------- */
  .opmveld{
    flex:1;min-height:62px;font-family:inherit;font-size:13.5px;line-height:1.55;color:var(--tekst);
    background:var(--papier);border:1px solid var(--rand-sterk);border-radius:5px;padding:9px 11px;
  }
  .opmveld:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accentmist),.14)}
  .opmveld:empty::before{content:attr(data-leeg);color:var(--tekst-zacht)}
  .opmvermeldingen{position:absolute;z-index:4;right:0;bottom:calc(100% + 5px);left:0;display:grid;max-height:192px;overflow-y:auto;background:var(--vlak);border:1px solid var(--rand-sterk);border-radius:var(--knop-ronding);box-shadow:0 10px 24px -14px var(--schaduw)}
  .opmvermeldingen[hidden]{display:none}
  .opmvermeldingen button{display:flex;align-items:center;gap:var(--ruimte-inline);width:100%;min-height:38px;padding:7px 9px;color:var(--tekst);font:inherit;text-align:left;background:transparent;border:0;cursor:pointer}
  .opmvermeldingen button:hover,.opmvermeldingen button:focus-visible{background:var(--warm);outline:0}
  .opmvermeldingen b{display:block;font-size:12px}.opmvermeldingen small{display:block;margin-top:1px;color:var(--tekst-dim);font-size:10.5px}
  .opmtekst{font-size:13px;line-height:1.55}
  .opmtekst a{color:var(--accent)}
  .opmtekst.bewerkt{outline:none;border-bottom:1px solid var(--accent);padding-bottom:3px}
  .opmkop .opmbewerk{color:var(--tekst-dim);margin-left:auto}
  .opmkop .opmwis{margin-left:0}

  /* ---------- planning: datums in de tabel ---------- */
  .g-datums{
    flex:0 0 auto;display:flex;align-items:center;gap:5px;padding:6px 10px;
    min-width:0;overflow:hidden;border-right:1px solid var(--rand);background:var(--vast);position:sticky;z-index:2;
  }
  .g-datums.kop{background:var(--warm);font-size:11px;color:var(--tekst-dim);gap:5px;justify-content:flex-start;font-weight:500}
  .g-datums.kop span{flex:1;min-width:0;padding-left:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .g-invoer{
    font-family:inherit;font-size:11.5px;color:var(--tekst);background:var(--papier);
    border:1px solid transparent;border-radius:4px;padding:4px 5px;min-width:0;width:0;flex:1 1 0;
  }
  .g-invoer.smal{flex:0 0 46px;text-align:center}
  .g-invoer:hover{border-color:var(--rand)}
  .g-invoer:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(var(--accentmist),.16)}
  .g-invoer:disabled{opacity:.55;background:transparent}

  /* ---------- mappen in gallerij en bestanden ---------- */
  .mapkop{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--ruimte-inline);margin-top:var(--ruimte-inline);padding-bottom:var(--ruimte-inline);border-bottom:1px solid var(--rand)}
  .mapkop-hoofdmap{margin-top:var(--ruimte-groep)}
  .mapkop-submap{margin-left:calc(var(--mapdiepte,0) * 18px)}
  .mapsubmap-pijl{display:inline-flex;align-items:center;justify-content:center;flex:0 0 16px;width:16px;color:var(--tekst-dim);font-size:17px;line-height:1}
  .mapuitklap-pijl{display:grid;place-items:center;flex:0 0 14px;width:14px;color:var(--tekst-dim);font-size:17px;line-height:1}
  .mapknop{
    display:flex;align-items:center;gap:10px;min-width:0;font-family:inherit;font-size:15px;font-weight:600;
    color:var(--tekst);background:none;border:0;padding:4px 0;cursor:pointer;text-align:left;
  }
  .mapnaam{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mapacties{display:flex;align-items:center;justify-content:flex-end;gap:var(--ruimte-inline);min-width:0}
  .mapknop svg{width:20px;height:20px;color:var(--accent)}
  .mapaantal{font-size:11.5px;font-weight:400;color:var(--tekst-dim);background:var(--warm);
    border-radius:100px;padding:2px 9px}
  .mapsamenvatting{overflow:hidden;color:var(--tekst-dim);font-size:11.5px;font-weight:400;text-overflow:ellipsis;white-space:nowrap}
  .mapvoeg,.mapweg:not(.knop){
    min-height:32px;font-family:inherit;font-size:12px;color:var(--tekst-zacht);background:none;
    border:1px solid transparent;border-radius:100px;padding:5px 11px;cursor:pointer;
  }
  .mapvoeg{display:inline-flex;align-items:center;gap:6px}
  .mapvoeg svg{width:18px;height:18px}
  .mapdocumenttype{min-height:32px;max-width:116px;padding:4px 22px 4px 8px;color:var(--tekst-dim);background:var(--papier);border:1px solid var(--rand-sterk);border-radius:var(--knop-ronding);font:inherit;font-size:12px}
  .mapsubmap svg,.mapverplaats svg,.maphernoem svg{width:20px;height:20px}
  .mapvoeg:hover,.mapsubmap:hover,.mapverplaats:hover,.maphernoem:hover{color:var(--accent);border-color:var(--accent)}
  .mapweg:not(.knop):hover{color:var(--alarm);border-color:var(--alarm)}
  /* Overloopmenu op een mapkaart: de beheeracties samengevouwen achter een "meer"-knop.
     Het menu staat position:fixed (in JS geplaatst) zodat de scrollbare actiebalk het niet afknipt. */
  .mapmeer-hoek{position:relative;flex:0 0 auto}
  .mapmeer-menu{position:fixed;z-index:80;min-width:196px;padding:6px;background:var(--vlak);border:1px solid var(--rand-sterk);border-radius:10px;box-shadow:0 16px 38px -20px var(--schaduw)}
  .mapmeer-menu[hidden]{display:none}
  .mapmeer-menu .mapmeer-item{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;font-family:inherit;font-size:13.5px;font-weight:400;color:var(--tekst);background:none;border:0;border-radius:7px;padding:8px 10px;cursor:pointer;text-align:left}
  .mapmeer-menu .mapmeer-item svg{width:18px;height:18px;flex:0 0 18px;color:var(--tekst-dim)}
  .mapmeer-menu .mapmeer-item:hover,.mapmeer-menu .mapmeer-item:focus-visible{background:var(--warm);color:var(--accent);outline:0}
  .mapmeer-menu .mapmeer-item:hover svg,.mapmeer-menu .mapmeer-item:focus-visible svg{color:var(--accent)}
  .mapmeer-menu .mapmeer-gevaar{color:var(--alarm)}
  .mapmeer-menu .mapmeer-gevaar svg{color:var(--alarm)}
  .mapmeer-menu .mapmeer-gevaar:hover,.mapmeer-menu .mapmeer-gevaar:focus-visible{background:color-mix(in srgb,var(--alarm) 12%,transparent);color:var(--alarm)}
  .mapmeer-menu .mapmeer-gevaar:hover svg{color:var(--alarm)}
  .mapverplaatsvenster{max-width:440px}.mapverplaatsvenster label{display:grid;gap:var(--ruimte-micro);margin:var(--ruimte-component) 0;color:var(--tekst-dim);font-size:12px;font-weight:600}.mapverplaatsvenster select{width:100%;min-height:var(--knop-hoogte);padding:7px 10px;color:var(--tekst);background:var(--papier);border:1px solid var(--rand-sterk);border-radius:var(--knop-ronding);font:inherit;font-size:14px}
  .bestandsoort{
    flex:0 0 42px;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-align:center;
    color:var(--accent);background:rgba(var(--accentmist),.12);border-radius:4px;padding:5px 0;
  }
  .openknop,.downloadknop{text-decoration:none}

  /* Tegelweergave van bestanden: een raster met een grote type-badge of een beeld. */
  .bestandraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--ruimte-component);margin:var(--ruimte-component) 0 var(--ruimte-groep)}
  .bestandtegel{
    margin:0;position:relative;background:var(--vlak);border:1px solid var(--rand);
    border-radius:8px;overflow:hidden;
  }
  .bestandtegel:hover{box-shadow:0 4px 16px var(--schaduw-zacht)}
  .bestandtegelknop{
    display:flex;align-items:center;justify-content:center;height:112px;background:var(--warm);
    text-decoration:none;overflow:hidden;
  }
  .bestandsoort.groot{flex:none;font-size:15px;letter-spacing:.08em;padding:12px 16px}
  .bestandtegel figcaption{display:grid;gap:2px;padding:8px 10px;font-size:12.5px;color:var(--tekst);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bestandtegel .documenttype{color:var(--tekst-dim);font-size:10.5px}
  .bestandtegelacties{top:6px;right:6px}.bestandtegel .knop--overlay--donker{background:var(--schaduw)!important}
  .documenteigenschappen{max-width:440px}.documenteigenschappen label{display:grid;gap:var(--ruimte-micro);margin:var(--ruimte-component) 0;color:var(--tekst-dim);font-size:12px;font-weight:600}.documenteigenschappen select{width:100%;min-height:var(--knop-hoogte);padding:7px 10px;color:var(--tekst);background:var(--papier);border:1px solid var(--rand-sterk);border-radius:var(--knop-ronding);font:inherit;font-size:14px}

  /* Invoerveld in het naam-venster. */
  .vn-invoer{width:100%;box-sizing:border-box;margin:12px 0 16px;padding:10px 12px;font:inherit;font-size:14px;
    color:var(--tekst);background:var(--vlak);border:1px solid var(--rand-sterk);border-radius:7px}
  .vn-invoer:focus{outline:2px solid var(--accent);outline-offset:1px}

  /* ---------- actoren ---------- */
  .beheer.actoren .rij input[type=text],.beheer.actoren .rij select{min-width:0}
  .beheer.actoren .accountkoppel{font:inherit;font-size:12.5px;color:var(--tekst);background:var(--papier);border:1px solid var(--rand-sterk);border-radius:4px;padding:6px 8px}
  .beheer.actoren .accountkoppel:disabled{opacity:.62;cursor:wait}
  .beheer.actoren .actoropm{min-width:145px;font-style:italic}
  .actorlogo{
    width:34px;height:34px;flex:0 0 34px;border-radius:50%;overflow:hidden;cursor:pointer;
    border:1px solid var(--rand-sterk);background:var(--warm);color:var(--tekst-dim);
    font-size:11.5px;font-weight:600;display:flex;align-items:center;justify-content:center;
  }
  .vastgoedfoto img,.vastgoedkaart--kadastraal img,.vastgoedfoto-voorbeeld img,.avatar img,.bestandtegelknop img,.actorlogo img{width:100%;height:100%;object-fit:cover;display:block}
  .vastgoedkaart--kadastraal img{object-position:center}
  .avatar img{border-radius:50%}
  /* Popup bij de actor-avatar: uploaden of verwijderen. */
  .avatarmenu{position:fixed;z-index:80;min-width:176px;background:var(--vlak);border:1px solid var(--rand-sterk);
    border-radius:8px;box-shadow:0 10px 30px var(--schaduw-zacht);padding:6px;display:flex;flex-direction:column;gap:2px}
  .avatarmenu button{width:100%;text-align:left;font:inherit;font-size:13px;background:none;border:0;
    border-radius:5px;padding:8px 10px;cursor:pointer;color:var(--tekst)}
  .avatarmenu button:hover:not(:disabled){background:var(--warm)}
  .avatarmenu button:disabled{opacity:.4;cursor:default}
  .contactkaart{
    position:fixed;z-index:130;min-width:210px;max-width:280px;display:flex;flex-direction:column;gap:6px;
    background:var(--vlak);border:1px solid var(--rand-sterk);border-radius:8px;padding:12px 14px;
    box-shadow:0 12px 30px -14px var(--schaduw);font-size:12.5px;
  }
  .contactkop{display:flex;align-items:center;gap:10px;margin-bottom:2px}
  .contactkop b{display:block;font-size:13.5px}
  .contactkop small{display:block;font-size:11.5px;color:var(--tekst-dim)}
  .ck-opmerking{display:block;font-size:12px;font-style:italic;color:var(--tekst-dim);margin:1px 0 3px;line-height:1.4}
  .contactkaart a{color:var(--accent);text-decoration:none;word-break:break-all}
  .contactkaart a:hover{text-decoration:underline}
  .ck-regel{display:flex;align-items:center;gap:8px;min-width:0}
  .ck-regel svg{width:15px;height:15px;flex:0 0 15px;color:var(--tekst-zacht)}
  .contactleeg{color:var(--tekst-dim)}

  .themalijst{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--ruimte-component);margin-top:var(--ruimte-component)}
  .themakaart{
    display:block;text-align:left;font-family:inherit;color:var(--tekst);cursor:pointer;
    background:var(--vlak);border:1px solid var(--rand);border-radius:var(--radius);padding:16px;transition:.15s;
  }
  .themakaart:hover{border-color:var(--accent)}
  .themakaart.aan{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accentmist),.14)}
  .themavoorbeeld{display:flex;gap:var(--ruimte-inline);align-items:center;padding:var(--ruimte-compact);border-radius:5px;border:1px solid;margin-bottom:var(--ruimte-compact)}
  .themavoorbeeld span{width:26px;height:26px;border-radius:4px;border-left:4px solid}
  .themakaart b{display:block;font-size:14.5px;margin-bottom:4px}
  .themakaart small{display:block;font-size:12.5px;line-height:1.5;color:var(--tekst-dim)}
  .themavink{display:inline-block;margin-top:12px;font-size:12px;font-weight:500;color:var(--accent)}
  .subnav{display:flex;flex-wrap:wrap;gap:var(--ruimte-inline);margin-top:var(--ruimte-component)}
  .subnav .knop--subnav{min-height:var(--knop-hoogte);padding:7px 12px;background:var(--paneel);border:1px solid var(--rand-sterk);color:var(--tekst-dim);text-shadow:none}
  .account:hover,.opgeslagen-weergaven button:hover,.opgeslagen-weergaven button:focus-visible,.filterbalk button:not(.kieschip):hover,.filterweergaveknoppen button:hover:not(:disabled),button.act:hover,.kieschip:hover,.actorlogo:hover,.subnav .knop--subnav:hover:not(:disabled),.taakkoppeling--besluit:hover{border-color:var(--accent);color:var(--accent)}
  .mijlpaal-kop .mijlpaal-kolom--label{flex:1}
  .mijlpaal-kop .mijlpaal-kolom--datum{flex:0 0 190px}
  .mijlpaal-kop .mijlpaal-kolom--actie{flex:0 0 48px}
  .subnav button{
    font-family:inherit;font-size:13px;font-weight:500;background:var(--paneel);color:var(--tekst-dim);
    border:1px solid var(--rand-sterk);padding:7px 15px;border-radius:100px;cursor:pointer;transition:.15s;
  }
  .subnav button:hover{color:var(--tekst);border-color:var(--tekst-dim)}
  .focusfilters button.aan,.fknoppen button.primair,.vastgoedkaart-open:hover,.vastgoedkaart-open:focus-visible,.g-open:hover,.weergave button.aan,.e-werkbalk button:hover,.kieschip.aan,.openknop:hover,.downloadknop:hover,.subnav .knop--subnav.aan,.subnav button.aan{background:var(--accent);border-color:var(--accent);color:var(--opAccent)}
  .subnav .knop--subnav.aan,.subnav button.aan{box-shadow:none;text-shadow:none}
  /* Een gekozen chip houdt zijn contrastrijke actieve staat bij hover en focus. Zonder deze
     expliciete combinatie kan een algemene hoverregel de witte tekst van instellingenwissen. */
  .kieschip.aan,.kieschip.aan:hover,.kieschip.aan:focus-visible,.subnav .knop--subnav.aan:hover,.subnav .knop--subnav.aan:focus-visible{color:var(--opAccent);background:var(--accent);border-color:var(--accent)}
  .subnav .aantal{margin-left:6px;color:inherit;opacity:.7}
  .subnav-terug,.subnav .knop--terug{margin-left:auto}   /* op dezelfde hoogte als de subnav-knoppen, rechts */

  /* ---------- Audit trail: filters en wijzigingstabel ---------- */
  /* De balk volgt bewust de gedeelde .filterbalk (zoals Taken/Tijdlijn): één rustige rij met
     zoekveld, datums, gebruiker en acties, verticaal uitgelijnd. */
  .auditfilter{gap:var(--ruimte-inline) var(--ruimte-compact)}
  .auditfilter input[type=search]{flex:1 1 200px;min-width:0;font-family:inherit;font-size:13.5px;color:var(--tekst);background:var(--papier);border:1px solid var(--rand-sterk);border-radius:4px;padding:8px 10px}
  .auditfilter input[type=search]:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring)}
  .auditveld{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--tekst-dim);white-space:nowrap}
  .auditfilter input[type=date]{font-family:inherit;font-size:13px;color:var(--tekst);background:var(--papier);border:1px solid var(--rand-sterk);border-radius:4px;padding:7px 8px}
  .auditfilter input[type=date]:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring)}
  .audit-zoekknop{display:inline-flex;align-items:center;gap:6px}
  .audit-zoekknop svg{width:16px;height:16px}
  .auditfilter .filterinfo{margin-left:auto;align-self:center;font-size:12.5px;font-weight:500;color:var(--tekst-dim);white-space:nowrap}
  .audit-hint{margin-top:var(--ruimte-component);padding:26px var(--ruimte-component);color:var(--tekst-dim);text-align:center;border:1px dashed var(--rand-sterk);border-radius:var(--radius);background:var(--paneel)}
  .audit-hint b{color:var(--tekst)}
  .audittabelhouder{overflow-x:auto;margin-top:var(--ruimte-component);border:1px solid var(--rand);border-radius:var(--radius);background:var(--paneel)}
  .audittabel{width:100%;min-width:860px;border-collapse:collapse;font-size:13px}
  .audittabel th,.audittabel td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--rand);vertical-align:top;line-height:1.4}
  .audittabel thead th{position:sticky;top:0;z-index:1;background:var(--warm);font-size:11.5px;font-weight:650;white-space:nowrap;color:var(--tekst-dim)}
  .audittabel tbody tr:last-child td{border-bottom:0}
  .audittabel tbody tr:hover{background:var(--stapel)}
  .audittabel .audit-wanneer{white-space:nowrap;color:var(--tekst-dim);font-variant-numeric:tabular-nums}
  .audittabel .audit-toelichting{color:var(--tekst-dim);max-width:280px}
  .audittabel .audit-waarde{display:inline-block;max-width:220px;overflow-wrap:anywhere}
  .audit-leeg{color:var(--tekst-dim)}
  .audit-tag{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:600;color:var(--opAccent);background:var(--accent);white-space:nowrap}
  .audit-tag[data-entiteit="Besluit"]{background:var(--oker, #b8873a)}
  .audit-tag[data-entiteit="Mijlpaal"]{background:#4A7C59}
  .audit-tag[data-entiteit="Contact"]{background:#2C5F8A}
  .audit-tag[data-entiteit="Verslag"]{background:#7A5AA0}
  .audit-meer{margin:var(--ruimte-compact) var(--ruimte-component);font-size:12px;color:var(--tekst-dim)}

  /* ---------- tabellen: lijst, checklist, prullenbak ---------- */
  .tabel{background:var(--paneel);border:1px solid var(--rand);border-radius:var(--radius);margin-top:var(--ruimte-component);overflow:hidden}
  .tgroep{display:flex;align-items:baseline;gap:var(--ruimte-inline);padding:var(--ruimte-compact) var(--ruimte-component);background:var(--warm);
    border-top:1px solid var(--rand);border-bottom:1px solid var(--rand);font-size:12.5px;font-weight:600}
  .tabel > .tgroep:first-child{border-top:0}
  .tgroep .telling{margin-left:auto;font-weight:400;color:var(--tekst-dim)}
  .trij{display:flex;align-items:center;gap:var(--ruimte-component);padding:var(--ruimte-compact) var(--ruimte-component);border-bottom:1px solid var(--rand);font-size:13px}
  .trij:last-child{border-bottom:0}
  .trij:hover{background:var(--stapel)}
  .trij.klaar .thoofd b{color:var(--tekst-dim)}
  .tstip{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
  .thoofd{flex:1 1 auto;min-width:0}
  .thoofd b{display:block;font-weight:600;line-height:1.35}
  .thoofd small{display:block;color:var(--tekst-dim);font-size:11.5px;margin-top:3px;line-height:1.4}
  .tkolom{flex:0 0 auto;font-size:12px;color:var(--tekst-dim);white-space:nowrap}
  .tkolom.breed{flex:0 0 128px}
  .tkolom.bedrag{flex:0 0 84px;text-align:right;font-variant-numeric:tabular-nums}
  .tknoppen{display:flex;gap:5px;flex:0 0 auto}
  .tknoppen .knop{font-size:12px}
  .tknoppen .knop--icoon{color:var(--tekst-dim)}
  .tknoppen .knop--primair,.rijknoppen .knop--primair{color:var(--opAccent)}
  .tknoppen button:not(.knop--primair,.knop--gevaar):hover:not(:disabled){background:var(--accent);color:var(--opAccent);border-color:var(--accent)}
  .tknoppen .knop--gevaar,.rijknoppen .knop--gevaar{color:var(--opAccent)}.tknoppen .knop--gevaar:hover:not(:disabled),.rijknoppen .knop--gevaar:hover:not(:disabled){background:var(--alarm);border-color:var(--alarm);color:var(--opAccent)}
  .tknoppen button:disabled{opacity:.55;cursor:default}
  /* Een uitgeschakelde vernietigende actie blijft als gevaar herkenbaar, maar verliest de gevulde actiestaat. */
  .knop--gevaar:disabled{opacity:1;color:var(--alarm);background:color-mix(in srgb,var(--alarm) 12%,var(--vlak));border-color:color-mix(in srgb,var(--alarm) 45%,var(--rand-sterk));cursor:default}

  .knoppenoverzicht{display:grid;gap:var(--ruimte-component);max-width:760px}.knoppenoverzicht-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ruimte-component)}.knoppenoverzicht-raster section{display:grid;gap:var(--ruimte-inline);padding:var(--ruimte-component);background:var(--warm);border:1px solid var(--rand);border-radius:var(--radius)}.knoppenoverzicht-raster h3{margin:0;font-size:13px;font-weight:650}.knoppenoverzicht-raster section>div{display:flex;flex-wrap:wrap;gap:var(--ruimte-inline);align-items:center}
  .tlaat{color:var(--alarm);font-weight:500}
  .tbinnenkort{color:var(--oker);font-weight:500}
  .vinkje{width:18px;height:18px;flex:0 0 18px;accent-color:var(--klaar-streep);cursor:pointer}

  /* ---------- subtaken op het kaartje ---------- */
  .subregel{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--tekst-dim);margin-top:10px}
  .sublijst{margin:8px 0 0;padding:0;list-style:none}
  .sublijst li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.45;padding:3px 0}
  .sublijst li.af span{color:var(--tekst-dim);text-decoration:line-through}
  .sublijst input{margin-top:2px;accent-color:var(--klaar-streep);cursor:pointer;flex:0 0 auto}
  .subwis{margin-left:auto;border:0;background:none;color:var(--tekst-zacht);cursor:pointer;font-size:13px;line-height:1;padding:0 2px}
  .subwis:hover{color:var(--alarm)}
  .subtoevoegen{display:flex;gap:6px;margin-top:8px}
  .subtoevoegen input{flex:1;min-width:0;font-family:inherit;font-size:12.5px;padding:6px 8px;border:1px solid var(--rand-sterk);border-radius:4px;background:var(--papier);color:var(--tekst)}
  .subtoevoegen button:not(.knop){font-family:inherit;font-size:12.5px;padding:6px 11px;border:1px solid var(--accent);background:var(--accent);color:var(--opAccent);border-radius:4px;cursor:pointer}
  .waarschuwing.zacht{color:var(--oker);border-left-color:var(--oker-rand)}

  /* ---------- uitleg ---------- */
  .uitleg{background:var(--paneel);border:1px solid var(--rand-sterk);border-radius:var(--radius);
    padding:var(--ruimte-component) var(--ruimte-groep);margin-top:var(--ruimte-component);box-shadow:0 3px 14px rgba(var(--inkt),.08);position:relative}
  .uitleg h2{margin:0 0 4px;font-family:var(--titel);font-size:17px;font-weight:600}
  .uitleg p.lead{margin:0 0 16px;font-size:13.5px;line-height:1.6;color:var(--tekst-dim);max-width:70ch}
  .uitleg dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:9px 16px;font-size:13px;line-height:1.55;max-width:78ch}
  .uitleg dt{font-weight:600;white-space:nowrap}
  .uitleg dd{margin:0;color:var(--tekst-dim)}
  .uitleg .sluit{position:absolute;top:12px;right:14px;border:0;background:none;font-size:20px;line-height:1;color:var(--tekst-dim);cursor:pointer}
  .uitleg .sluit:hover{color:var(--tekst)}
  .uitleg .klaar{
    margin-top:18px;font-family:inherit;font-size:13px;font-weight:500;background:var(--accent);color:var(--opAccent);
    border:1px solid var(--accent);padding:9px 18px;border-radius:100px;cursor:pointer;
  }
  .uitleg .klaar:hover{background:var(--accent-diep)}
  .tabs button.hulp{margin-left:2px;padding:8px 13px;font-weight:600}

  /* ---------- aanmelden ---------- */
  #inlog[hidden],.wrap[hidden]{display:none !important}
  #inlog{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:24px;
    background:linear-gradient(var(--waas),var(--waas))}
  .inlogkaart{width:100%;max-width:380px;background:var(--paneel-dicht);border:1px solid var(--rand-sterk);
    border-radius:10px;padding:28px 26px 26px;box-shadow:0 18px 44px -22px var(--schaduw)}
  .inlogkaart h1{font-family:var(--titel);font-size:26px;font-weight:600;margin:0 0 6px;letter-spacing:-.015em}
  .inlogkaart .eyebrow{margin:0 0 8px}
  .inloguitleg{margin:0 0 20px;font-size:13.5px;line-height:1.55;color:var(--tekst-dim)}
  .inlogkaart label{display:block;font-size:12px;font-weight:500;color:var(--tekst-dim);margin:0 0 5px}
  .inlogkaart input{width:100%;font-family:inherit;font-size:16px;color:var(--tekst);background:var(--papier);
    border:1px solid var(--rand-sterk);border-radius:5px;padding:10px 11px;margin-bottom:14px}
  .inlogkaart input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accentmist),.14)}
  .inlogkaart input[aria-invalid="true"]{border-color:var(--alarm)}
  .inlog-veldfout{display:block;margin:-8px 0 14px;color:var(--alarm);font-size:12.5px;line-height:1.4}
  .inlog-veldfout[hidden]{display:none}
  .veldfout{margin:var(--ruimte-micro) 0 var(--ruimte-inline);color:var(--alarm);font-size:12.5px;line-height:1.4}
  :is(.vensterkaart,.formulier) :is(input,select,textarea)[aria-invalid="true"]{border-color:var(--alarm)}
  .inlog-wachtwoord{display:flex;align-items:flex-start;gap:var(--ruimte-inline)}
  .inlog-wachtwoord input{min-width:0;flex:1}
  .inlog-wachtwoord .knop{flex:0 0 auto;min-height:44px}
  .inlogfout{margin:0 0 14px;font-size:12.5px;line-height:1.5;color:var(--alarm)}
  .inloggoed{margin:0 0 14px;font-size:12.5px;line-height:1.5;color:var(--klaar-streep)}
  .inlogmfa{margin:2px 0 14px;padding:12px;border:1px solid var(--rand-sterk);border-radius:6px;background:var(--warm)}
  .inlogmfa p{margin:0 0 10px;font-size:12.5px;line-height:1.5;color:var(--tekst-dim)}
  .inlogmfa .inloghint{margin:-5px 0 2px;font-size:11.5px}
  .inloglink{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin-top:12px;background:none;border:0;font-family:inherit;font-size:12.5px;
    color:var(--tekst-dim);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
  .inloglink:hover{color:var(--accent)}
  .inlogknop{width:100%;font-family:inherit;font-size:14px;font-weight:500;background:var(--accent);color:var(--opAccent);
    border:1px solid var(--accent);min-height:44px;padding:11px;border-radius:5px;cursor:pointer}
  .inlogknop:hover:not(:disabled){background:var(--accent-diep)}
  .inlogknop:disabled{opacity:.6;cursor:default}
  .inlogknop[aria-busy="true"]::after{content:'';display:inline-block;width:12px;height:12px;margin-left:var(--ruimte-inline);border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-2px;animation:inlog-draai .7s linear infinite}
  @keyframes inlog-draai{to{transform:rotate(360deg)}}
  .inlogzacht{width:100%;min-height:44px;margin-top:10px;font-family:inherit;font-size:12.5px;background:transparent;color:var(--tekst-dim);
    border:1px solid var(--rand-sterk);padding:9px;border-radius:5px;cursor:pointer}
  .inlogzacht:hover{color:var(--tekst);border-color:var(--tekst-dim)}

  :focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ===================== Kasstromen ===================== */
.kasstroom-leeg{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ruimte-component);background:var(--vlak);border:1px solid var(--rand);border-radius:var(--radius);padding:var(--ruimte-groep);margin-top:var(--ruimte-component);color:var(--tekst-dim)}
.kasstroom-leeg p{margin:0}
/* Lege staten staan gecentreerd met een leesbare maximale breedte, zodat de pagina op brede
   schermen niet links-zwaar oogt; op smalle schermen vult de maximale breedte vanzelf het scherm. */
.leegstaat{max-width:560px;margin-inline:auto;text-align:center;align-items:center}

/* boekkiezer */
.kasstroom-boekkiezer{display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--ruimte-compact);margin-top:var(--ruimte-component)}
.kasstroom-boekkiezer-kop{align-self:center;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--tekst-dim);font-weight:700;margin-right:var(--ruimte-micro)}
.kasstroom-boek{display:flex;align-items:center;gap:var(--ruimte-compact);min-height:56px;padding:10px var(--ruimte-compact);background:var(--vlak);border:1.5px solid var(--rand-sterk);border-radius:10px;cursor:pointer;text-align:left;color:var(--tekst);transition:border-color .12s,box-shadow .12s,background .12s}
.kasstroom-boek:hover{border-color:var(--accent);background:var(--hover)}
.kasstroom-boek.aan{border-color:var(--accent);box-shadow:0 0 0 1.5px var(--accent);background:rgba(var(--accentmist),.08)}
.kasstroom-boek-ic{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;color:#fff}
.kasstroom-boek-ic svg{width:19px;height:19px}
.kasstroom-boek-tekst{display:flex;flex-direction:column;gap:3px;min-width:0}
.kasstroom-boek-naam{font-weight:700;line-height:1.1}
.kasstroom-boek-meta{display:flex;align-items:center;gap:var(--ruimte-inline);font-size:12px}
.kasstroom-boek-saldo{color:var(--tekst-dim)}
.kasstroom-boek-saldo.positief{color:var(--klaar-streep)}
.kasstroom-boek-saldo.negatief{color:var(--alarm)}
.kasstroom-boek-pil{font-size:10.5px;font-weight:600;color:var(--tekst-dim);background:var(--warm);border:1px solid var(--rand);border-radius:999px;padding:1px 8px;line-height:1.5}
.kasstroom-boek--nieuw{color:var(--tekst-dim);border-style:dashed;font-weight:600;gap:var(--ruimte-inline)}
.kasstroom-boek--nieuw svg{width:18px;height:18px}
.kasstroom-boek--nieuw:hover{color:var(--accent)}

/* Gedeeld patroon: subnav als zachte segmentbalk (app-breed herbruikbaar via .subnav--segment).
   Container krijgt een vlak + rand; knoppen worden randloze segmenten met een gevuld actief segment.
   Werkt voor weinig items (als segmentbalk) én veel items (ze lopen door binnen de balk). */
.subnav--segment{gap:4px;background:var(--warm);border:1px solid var(--rand);border-radius:10px;padding:4px}
.subnav--segment .knop,.subnav--segment .knop--subnav{justify-content:center;min-height:40px;border:0;border-radius:7px;background:transparent;color:var(--tekst-dim);font-weight:600;text-shadow:none}
.subnav--segment .knop:hover,.subnav--segment .knop--subnav:hover:not(:disabled){background:var(--hover);color:var(--tekst);border-color:transparent}
.subnav--segment .knop.aan,.subnav--segment .knop--subnav.aan,.subnav--segment .knop--subnav.aan:hover{background:var(--accent);color:var(--opAccent);border-color:transparent;box-shadow:0 1px 2px var(--schaduw-zacht,rgba(0,0,0,.12))}
/* Kasstromen: drie gelijke segmenten over de volle breedte. */
.kasstroom-subnav .knop{flex:1 1 0}
/* Op desktop blijft de segmentbalk een compacte, links uitgelijnde keuzeschakelaar i.p.v. vol
   uit te rekken; op smalle schermen (<520px) heeft de max-breedte vanzelf geen effect. */
.kasstroom-subnav{max-width:520px}

/* jaarkeuze als dropdown in de witte tabelkop */
.kasstroom-tabel-titelrij{display:flex;align-items:center;gap:var(--ruimte-compact);flex-wrap:wrap}
.kasstroom-tabel-titelrij h2{margin:0}
.kasstroom-jaar-select{min-height:34px;padding:4px 30px 4px 11px;font:inherit;font-size:14px;font-weight:600;color:var(--tekst);background:var(--vlak);border:1px solid var(--rand-sterk);border-radius:var(--knop-ronding);cursor:pointer}
.kasstroom-jaar-select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* KPI-flow: Start → Inkomsten − Uitgaven = Verschil → Eindpositie; één hero (Eindpositie). */
.kasstroom-flow{margin-top:var(--ruimte-component)}
.kasstroom-flow-strip{display:flex;align-items:stretch;gap:var(--ruimte-component);flex-wrap:wrap;background:var(--warm);border:1px solid var(--rand);border-radius:var(--radius);padding:var(--ruimte-component)}
.kasstroom-flow-start,.kasstroom-flow-eenh,.kasstroom-flow-hero{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0}
.kasstroom-flow-label{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tekst-dim)}
.kasstroom-flow-waarde{font-family:var(--titel,inherit);font-size:19px;font-weight:650;letter-spacing:-.01em}
.kasstroom-flow-waarde.positief{color:var(--klaar-streep)}
.kasstroom-flow-waarde.negatief{color:var(--alarm)}
.kasstroom-flow-detail{font-size:11px;color:var(--tekst-dim)}
.kasstroom-flow-op{display:flex;align-items:center;color:var(--tekst-dim);font-size:18px;flex:none}
.kasstroom-flow-eq{display:flex;align-items:center;gap:var(--ruimte-component);padding-inline:var(--ruimte-component);border-left:1px solid var(--rand-sterk);border-right:1px solid var(--rand-sterk)}
.kasstroom-flow-hero{margin-left:auto;background:var(--accent-diep);color:var(--opAccent);border-radius:10px;padding:8px 15px}
.kasstroom-flow-hero.negatief{background:var(--alarm)}
.kasstroom-flow-hero .kasstroom-flow-label{color:var(--opAccent);opacity:.85}
.kasstroom-flow-hero .kasstroom-flow-waarde{color:var(--opAccent);font-size:22px;font-weight:750}
.kasstroom-flow-hero .kasstroom-flow-detail{color:var(--opAccent);opacity:.82}
.kasstroom-flow-bij{margin:var(--ruimte-inline) 0 0;font-size:13px;color:var(--tekst-dim)}
.kasstroom-flow-bij b{color:var(--tekst);font-weight:650}
/* bewerkbare startpositie (hergebruikt in de flow-strip) */
.kasstroom-flow-start .kasstroom-tegel-waarde{font-family:var(--titel,inherit);font-size:19px;font-weight:650;letter-spacing:-.01em}
.kasstroom-tegel--bewerk{cursor:pointer;border-radius:8px;margin:-4px -8px;padding:4px 8px}
.kasstroom-tegel--bewerk:hover{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.kasstroom-tegel--bewerk:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.kasstroom-startinvoer{width:100%;max-width:160px;min-height:40px;text-align:left;font-family:var(--titel,inherit);font-size:18px}
.kasstroom-startmaand{font:inherit;font-size:12px;color:var(--tekst);background:var(--vlak);border:1px solid var(--rand-sterk);border-radius:var(--knop-ronding);padding:2px 22px 2px 6px;margin-left:2px;cursor:pointer;max-width:150px;vertical-align:baseline}
.kasstroom-startmaand:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.kasstroom-tabel .kasstroom-leeg{color:var(--tekst-dim);opacity:.5}
/* Import-venster (maandbedragen uit CSV) + maandbedragen-bewerkvenster */
.kasstroom-importlijf{display:flex;flex-direction:column;gap:var(--ruimte-component)}
.kasstroom-import-bestand{position:relative;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:8px 12px;border:1px dashed var(--rand-sterk);border-radius:var(--knop-ronding);cursor:pointer;color:var(--tekst);background:var(--vlak)}
.kasstroom-import-bestand span{display:inline-flex;align-items:center;gap:8px}
.kasstroom-import-bestand input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.kasstroom-import-tekst{width:100%;box-sizing:border-box;font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;border:1px solid var(--rand-sterk);border-radius:var(--knop-ronding);padding:8px;background:var(--vlak);color:var(--tekst);resize:vertical}
.kasstroom-import-tekst:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.kasstroom-import-voorbeeld{font-size:13.5px}
.kasstroom-import-voorbeeld p{margin:4px 0}
.kasstroom-import-fout{color:var(--gevaar)}
.kasstroom-import-nieuw{color:var(--tekst-dim)}
.kasstroom-import-let{color:var(--tekst-dim);font-size:12.5px}
.kasstroom-import-stat b{color:var(--tekst)}
.kasstroom-mb-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kasstroom-mb-veld{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--tekst-dim);min-width:0}
.kasstroom-mb-veld input{font:inherit;font-size:15px;color:var(--tekst);background:var(--vlak);border:1px solid var(--rand-sterk);border-radius:var(--knop-ronding);padding:6px 8px;width:100%;box-sizing:border-box}
.kasstroom-mb-veld input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media (max-width:620px){.kasstroom-mb-raster{grid-template-columns:repeat(2,1fr)}}
/* Mobiel (<620px): flow stapelt — Start boven, de stroom als rijtje, Eind als hero onderaan. */
@media (max-width:620px){
  .kasstroom-flow-strip{flex-direction:column;align-items:stretch;gap:10px}
  .kasstroom-flow-op{display:none}
  .kasstroom-flow-start{flex-direction:row;align-items:baseline;justify-content:space-between;gap:6px 10px;flex-wrap:wrap}
  .kasstroom-flow-start .kasstroom-flow-detail{flex-basis:100%;order:3}
  .kasstroom-flow-eq{flex-direction:column;align-items:stretch;gap:8px;border:0;border-top:1px solid var(--rand-sterk);border-bottom:1px solid var(--rand-sterk);padding:10px 0}
  .kasstroom-flow-eenh{flex-direction:row;align-items:baseline;justify-content:space-between;gap:10px}
  .kasstroom-flow-hero{margin-left:0;flex-direction:row;align-items:baseline;justify-content:space-between;gap:6px 10px;flex-wrap:wrap}
  .kasstroom-flow-hero .kasstroom-flow-detail{flex-basis:100%;order:3}
}

/* grafiek */
.kasstroom-grafiek{background:var(--vlak);border:1px solid var(--rand);border-radius:var(--radius);padding:var(--ruimte-component);margin-top:var(--ruimte-component)}
.kasstroom-grafiek-legenda{display:flex;flex-wrap:wrap;gap:var(--ruimte-component);font-size:12.5px;color:var(--tekst-dim);margin-bottom:var(--ruimte-inline)}
.kasstroom-grafiek-legenda span{display:inline-flex;align-items:center;gap:6px}
.kasstroom-grafiek-legenda i{width:14px;height:3px;border-radius:2px;display:inline-block}
.kasstroom-grafiek-legenda i.kasstroom-streep{height:0;border-top:2px dashed var(--alarm)}
.kasstroom-grafiek-legenda i.kasstroom-dik{height:4px}
.kasstroom-grafiek-vlak{position:relative;max-width:880px;margin-inline:auto}
.kasstroom-grafiek svg{width:100%;height:auto;display:block}
.kasstroom-aslijn{stroke:var(--rand);stroke-width:1}
.kasstroom-asmerk{fill:var(--tekst-dim);font-size:10.5px;font-family:var(--font,inherit)}
.kasstroom-eindlabel{font-size:11px;font-weight:700;font-family:var(--font,inherit)}
.kasstroom-tooltip{position:absolute;top:8px;left:0;min-width:150px;max-width:180px;background:var(--vlak);border:1px solid var(--rand-sterk);border-radius:var(--radius);box-shadow:var(--schaduw-zacht,0 2px 8px rgba(0,0,0,.15));padding:var(--ruimte-inline);font-size:12px;pointer-events:none;opacity:0;transition:opacity .12s}
.kasstroom-tooltip b{display:block}
.kasstroom-tt-r{display:flex;justify-content:space-between;gap:var(--ruimte-inline);margin-top:3px}
.kasstroom-tt-r span{display:inline-flex;align-items:center;gap:5px;color:var(--tekst-dim)}
.kasstroom-tt-r i{width:9px;height:9px;border-radius:2px;display:inline-block}
.kasstroom-grafiekraster{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--ruimte-groep);align-items:start}
.kasstroom-grafiekpaneel{min-width:0}
.kasstroom-grafiekkop{margin:0 0 var(--ruimte-inline);font-family:var(--titel);font-size:14px;font-weight:650;letter-spacing:-.01em;color:var(--tekst)}
.kasstroom-donutrij{display:flex;align-items:center;gap:var(--ruimte-component)}
.kasstroom-donutvlak{flex:0 0 auto;width:180px;max-width:50%;margin:0}
.kasstroom-donut-waarde{fill:var(--tekst);font-weight:700;font-size:20px;font-family:var(--titel)}
.kasstroom-donut-sub{fill:var(--tekst-dim);font-size:10px}
.kasstroom-donutlegenda{list-style:none;margin:0;padding:0;flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ruimte-inline)}
.kasstroom-donutlegenda li{display:flex;align-items:center;gap:var(--ruimte-inline);font-size:13px}
.kasstroom-legenda-stip{width:12px;height:12px;flex:none;border-radius:3px}
.kasstroom-legenda-naam{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tekst)}
.kasstroom-legenda-bedrag{flex:none;font-weight:600;color:var(--tekst)}
.kasstroom-legenda-bedrag small{margin-left:6px;font-weight:500;color:var(--tekst-dim)}
.kasstroom-legenda-leeg{color:var(--tekst-dim);font-style:italic}
.kasstroom-saldovlak{max-width:540px}
.kasstroom-nullijn{stroke:var(--rand-sterk);stroke-width:1;stroke-dasharray:3 3}
.kasstroom-saldolabel{font-size:12px;font-weight:700;font-family:var(--titel)}
.kasstroom-saldo-samenvatting{margin:var(--ruimte-inline) 0 0;font-size:13px;color:var(--tekst-dim)}
.kasstroom-saldo-samenvatting .positief{color:var(--klaar-streep)}
.kasstroom-saldo-samenvatting .negatief{color:var(--alarm)}
@media (max-width:760px){.kasstroom-grafiekraster{grid-template-columns:1fr}}
@media (max-width:460px){.kasstroom-donutrij{flex-direction:column}.kasstroom-donutvlak{width:200px;max-width:100%;margin-inline:auto}}

/* tabel — in een eigen kaart, als primaire detailbron */
.kasstroom-tabelkader{margin-top:var(--ruimte-component);background:var(--vlak);border:1px solid var(--rand);border-radius:var(--radius);padding:var(--ruimte-groep)}
.kasstroom-tabel-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ruimte-component);margin-bottom:var(--ruimte-component)}
.kasstroom-tabel-koptekst{min-width:0}
.kasstroom-tabel-kop h2{margin:0 0 var(--ruimte-micro)}
.kasstroom-klapalles{flex:none;white-space:nowrap}
@media (max-width:620px){.kasstroom-tabel-kop{flex-wrap:wrap}}
.kasstroom-klapalles{flex:none}
.kasstroom-tabel-acties{display:flex;align-items:center;gap:var(--ruimte-inline);flex:none;flex-wrap:wrap;justify-content:flex-end}
.kasstroom-tabel-acties .knop{white-space:nowrap}
.kasstroom-config{flex:none}
.kasstroom-toevoeg{flex:none}
@media (max-width:620px){.kasstroom-tabel-acties{width:100%;justify-content:flex-start}}
/* Uitschuifvenster 'Kasstroom toevoegen' (#4): kaart rechts, volle hoogte, schuift in. */
.venster--uitschuif{justify-content:flex-end;padding:0}
.vensterkaart--zijkant{position:fixed;top:0;right:0;bottom:0;width:min(520px,100%);max-width:none;height:100%;max-height:100%;border-radius:0;border-left:1px solid var(--rand-sterk);animation:kasstroom-zijin .18s ease-out}
.vensterkaart--zijkant .vensterlijf{flex:1 1 auto}
@keyframes kasstroom-zijin{from{transform:translateX(24px);opacity:.55}to{transform:translateX(0);opacity:1}}
/* Breed configuratievenster (tandwiel, #11). */
.vensterkaart--breed{max-width:720px}
.kasstroom-configlijf{display:flex;flex-direction:column;gap:var(--ruimte-groep)}
.kasstroom-catkleur{width:30px;height:30px;flex:none;padding:0;border:1px solid var(--rand-sterk);border-radius:6px;background:none;cursor:pointer}
.kasstroom-catkleur::-webkit-color-swatch{border:none;border-radius:4px}
.kasstroom-catkleur::-webkit-color-swatch-wrapper{padding:2px}
/* Compactere maatvoering in de kasstroom-vensters (toevoegen + configuratie): kleinere koppen en
   velden zodat de pagina meer rust krijgt. Touch-maten blijven op mobiel (<620) behouden. */
.kasstroom-invoerkaart .venstertitel h2,.kasstroom-configkaart .venstertitel h2{font-size:18px}
.kasstroom-invoerkaart .venstertitel p,.kasstroom-configkaart .venstertitel p{font-size:12.5px}
.kasstroom-invoerkaart .kasstroom-veld label{font-size:11.5px}
.kasstroom-configkaart .kasstroom-inrichtkolom h3,.kasstroom-configkaart .kasstroom-boekbeheer h3{font-size:14px;margin:0}
.kasstroom-configkaart .kasstroom-catrij{font-size:13px}
.kasstroom-configkaart .kasstroom-boekrij-tekst b{font-size:13px}
@media (min-width:620px){
  .kasstroom-invoerkaart .vensterlijf{padding-top:var(--ruimte-micro)}
  .kasstroom-invoerkaart .kasstroom-formulier{gap:var(--ruimte-compact)}
  .kasstroom-invoerkaart .kasstroom-veldrij{gap:var(--ruimte-compact)}
  .kasstroom-invoerkaart .kasstroom-veld input,.kasstroom-invoerkaart .kasstroom-veld select,.kasstroom-invoerkaart .kasstroom-veld textarea{min-height:38px;font-size:13px;padding:6px 10px}
  .kasstroom-invoerkaart .venstervoet .knop{min-height:38px}
  .kasstroom-configkaart .kasstroom-catrij{padding:6px 0}
  .kasstroom-configkaart .kasstroom-cattoevoeg input[type=text]{min-height:38px;font-size:13px}
  .kasstroom-configkaart .kasstroom-cattoevoeg input[type=color]{min-height:38px}
  .kasstroom-configkaart .kasstroom-cattoevoeg .knop{min-height:38px}
  .kasstroom-configkaart .kasstroom-catkleur{width:26px;height:26px}
  .kasstroom-configkaart .kasstroom-boekrij{padding:8px 0}
}
.kasstroom-tabel-scroll{overflow-x:auto;border:1px solid var(--rand);border-radius:8px}
.kasstroom-tabel{border-collapse:collapse;width:100%;min-width:720px;font-size:13px}
.kasstroom-tabel th,.kasstroom-tabel td{padding:9px 11px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--rand)}
.kasstroom-tabel tbody tr:last-child td,.kasstroom-tabel tbody tr:last-child th{border-bottom:0}
.kasstroom-tabel thead th{position:sticky;top:0;background:var(--warm);color:var(--tekst-dim);font-weight:700;font-size:11px;letter-spacing:.03em;text-transform:uppercase;z-index:1}
.kasstroom-tabel .kasstroom-hier{text-align:left;position:sticky;left:0;background:var(--vlak);z-index:1;min-width:190px}
.kasstroom-tabel thead .kasstroom-hier{background:var(--warm);z-index:2}
/* Verloop-sparkline (links van de maanden) */
.kasstroom-verloop{width:110px;min-width:110px;text-align:left}
.kasstroom-spark{display:block;width:88px;height:22px}
/* Totaal + Gem./mnd staan vast rechts (Totaal uiterst rechts) zodat de samenvatting nooit uit beeld scrollt. */
.kasstroom-tabel .kasstroom-gem,.kasstroom-tabel .kasstroom-tot{position:sticky;box-sizing:border-box;background:var(--vlak)}
.kasstroom-tabel .kasstroom-tot{right:0;width:104px;min-width:104px;max-width:104px;font-weight:700;border-left:1px solid var(--rand);z-index:2;box-shadow:-10px 0 10px -10px rgba(20,40,38,.18)}
.kasstroom-tabel .kasstroom-gem{right:104px;width:94px;min-width:94px;max-width:94px;font-weight:600;font-size:12px;border-left:1px dashed var(--rand-sterk);z-index:2}
.kasstroom-tabel thead th.kasstroom-tot,.kasstroom-tabel thead th.kasstroom-gem{z-index:3}
.kasstroom-tabel thead th.kasstroom-gem{font-weight:700}
.kasstroom-rij-n1>th.kasstroom-hier{font-weight:700}
/* Kleurverloop: hoe hoger het niveau, hoe donkerder — ook op de sticky labelkolom (eigen opake
   tint zodat scrollende cijfers eronder verborgen blijven). Saldo is de grand total en het donkerst. */
.kasstroom-tabel .kasstroom-rij-n1 > th,.kasstroom-tabel .kasstroom-rij-n1 > td{background:var(--accent-diep);color:var(--opAccent)}
.kasstroom-tabel .kasstroom-rij-n2 > th,.kasstroom-tabel .kasstroom-rij-n2 > td{background:color-mix(in srgb,var(--kaskleur,var(--accent)) 18%,var(--vlak))}
.kasstroom-tabel .kasstroom-rij-n3 > th,.kasstroom-tabel .kasstroom-rij-n3 > td{background:var(--vlak)}
.kasstroom-rij-n1>td,.kasstroom-rij-n1>th{font-weight:700}
.kasstroom-rij-n2>th.kasstroom-hier{font-weight:600}
.kasstroom-rij-n3>th.kasstroom-hier{color:var(--tekst-dim);font-weight:400}
.kasstroom-rij-n3>td{color:var(--tekst-dim)}
.kasstroom-rij-n1,.kasstroom-rij-n2{cursor:pointer}
.kasstroom-rij-n2:hover>.kasstroom-hier{color:var(--accent)}
.kasstroom-rij-n1:hover>.kasstroom-hier{color:var(--opAccent)}
.kasstroom-driehoek{display:inline-block;width:0;height:0;border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;transform:rotate(0deg);transition:transform .12s;vertical-align:middle;opacity:.55}
.open>.kasstroom-hier .kasstroom-driehoek{transform:rotate(90deg)}
.kasstroom-verborgen{display:none}
.kasstroom-tabel td.positief{color:var(--klaar-streep)}
.kasstroom-tabel td.negatief{color:var(--alarm)}
.kasstroom-tabel .kasstroom-rij-saldo > th,.kasstroom-tabel .kasstroom-rij-saldo > td{background:color-mix(in srgb,var(--accent) 16%,var(--vlak))}
.kasstroom-rij-saldo>th,.kasstroom-rij-saldo>td{font-weight:700;border-top:2px solid var(--rand-sterk)}
.kasstroom-tabel .kasstroom-rij-lopend > th,.kasstroom-tabel .kasstroom-rij-lopend > td{background:color-mix(in srgb,var(--accent) 10%,var(--vlak))}
.kasstroom-rij-lopend>th,.kasstroom-rij-lopend>td{font-weight:700}
/* Vinkje per rij (what-if-filter) + uitgezette posten gedimd (vinkje blijft crisp om terug te zetten). */
.kasstroom-toggle{flex:0 0 auto;width:17px;height:17px;vertical-align:-3px;cursor:pointer;accent-color:var(--accent)}
.kasstroom-rij--uit > th.kasstroom-hier{color:var(--tekst-dim);text-decoration:line-through;text-decoration-color:var(--rand-sterk)}
.kasstroom-rij--uit > td{color:var(--tekst-dim);opacity:.55}
/* Filterbanner boven de tegels. */
.kasstroom-filterbanner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ruimte-compact);margin-top:var(--ruimte-component);padding:10px var(--ruimte-component);background:rgba(var(--accentmist),.10);border:1px solid var(--rand);border-radius:var(--radius);font-size:13px}
.kasstroom-filterbanner b{font-weight:700}

/* Mobiele accordeon: compacte vervanging van de 12-koloms tabel onder ~620px. Op desktop verborgen. */
.kasstroom-mobiellijst{display:none}
@media (max-width:620px){
  .kasstroom-tabelkader .kasstroom-tabel-scroll{display:none}
  .kasstroom-tabel-acties .kasstroom-klapalles{display:none}
  .kasstroom-mobiellijst{display:flex;flex-direction:column;gap:10px;margin-top:var(--ruimte-component)}
}
.kasstroom-mob-schakel{display:inline-flex;align-self:flex-start;border:1px solid var(--rand-sterk);border-radius:var(--knop-ronding);overflow:hidden;background:var(--vlak)}
.kasstroom-mob-chips{display:none;gap:6px;overflow-x:auto;padding:2px 0;-webkit-overflow-scrolling:touch}
.kasstroom-mobiellijst.maandmodus .kasstroom-mob-chips{display:flex}
.kasstroom-mob-chip{flex:none;border:1px solid var(--rand-sterk);background:var(--vlak);color:var(--tekst);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer}
.kasstroom-mob-chip.aan{background:var(--accent);border-color:var(--accent);color:var(--opAccent)}
.kasstroom-mob-band{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--accent-diep);color:var(--opAccent);border-radius:11px;padding:10px 12px}
.kasstroom-mob-band b{font-size:13px}
.kasstroom-mob-bandbedrag{flex:none;font-weight:750;font-size:14px;font-variant-numeric:tabular-nums}
.kasstroom-mob-cat{border:1px solid var(--rand);border-radius:11px;overflow:hidden;background:var(--vlak)}
.kasstroom-mob-catkop{display:flex;align-items:center;gap:10px;width:100%;border:0;text-align:left;font:inherit;color:var(--tekst);cursor:pointer;padding:11px 12px;background:color-mix(in srgb,var(--kaskleur,var(--accent)) 12%,var(--vlak))}
.kasstroom-mob-chev{flex:none;color:var(--tekst-dim);transition:transform .15s;display:inline-flex;align-items:center}
.kasstroom-mob-chev svg{width:14px;height:14px}
.kasstroom-mob-cat.open .kasstroom-mob-chev{transform:rotate(90deg)}
.kasstroom-mob-catnaam{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.kasstroom-mob-catnaam b{font-size:13.5px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kasstroom-mob-catnaam small{color:var(--tekst-dim);font-size:11px}
.kasstroom-mob-catbedrag{flex:none;text-align:right;font-variant-numeric:tabular-nums}
.kasstroom-mob-posten{display:none;flex-direction:column;border-top:1px solid var(--rand)}
.kasstroom-mob-cat.open .kasstroom-mob-posten{display:flex}
.kasstroom-mob-post{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 30px;border-top:1px solid var(--rand);background:var(--vlak)}
.kasstroom-mob-post:first-child{border-top:0}
.kasstroom-mob-post[data-regel]{cursor:pointer}
.kasstroom-mob-post[data-regel]:hover{background:var(--warm)}
.kasstroom-mob-post:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.kasstroom-mob-postnaam{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:7px;overflow:hidden}
.kasstroom-mob-posttitel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.kasstroom-mob-postbedrag{flex:none;text-align:right;min-width:72px;font-variant-numeric:tabular-nums}
.kasstroom-mob-pen{flex:none;color:var(--tekst-dim);width:22px;text-align:center;display:inline-flex;justify-content:center;align-items:center}
.kasstroom-mob-pen svg{width:15px;height:15px}
.kasstroom-mob-waarde{display:block;font-size:13.5px;font-weight:700}
.kasstroom-mob-catbedrag .kasstroom-mob-waarde{font-size:14.5px;font-weight:750}
.kasstroom-mob-bandbedrag .kasstroom-mob-waarde{font-size:14px;font-weight:750}
.kasstroom-mob-sub{display:block;font-size:10.5px;color:var(--tekst-dim);font-weight:400;margin-top:1px}
.kasstroom-mobiellijst.maandmodus .kasstroom-mob-sub{display:none}

/* invoeren */
.kasstroom-formulierkader,.kasstroom-recent,.kasstroom-inrichten,.kasstroom-boekbeheer{background:var(--vlak);border:1px solid var(--rand);border-radius:var(--radius);padding:var(--ruimte-groep);margin-top:var(--ruimte-component)}
.kasstroom-formulierkader h2,.kasstroom-recent h2,.kasstroom-inrichten h2,.kasstroom-boekbeheer h2{margin:0 0 var(--ruimte-micro)}
.kasstroom-onderschrift{margin:0 0 var(--ruimte-component);color:var(--tekst-dim);font-size:13px}
.kasstroom-formulier{display:flex;flex-direction:column;gap:var(--ruimte-component)}
.kasstroom-veldrij{display:grid;grid-template-columns:1fr 1fr;gap:var(--ruimte-component)}
.kasstroom-veld{display:flex;flex-direction:column;gap:var(--ruimte-micro)}
.kasstroom-veld label{font-size:12.5px;font-weight:600;color:var(--tekst-dim)}
.kasstroom-veld input,.kasstroom-veld select{min-height:44px;padding:0 var(--ruimte-compact);font-size:16px;border:1px solid var(--rand-sterk);border-radius:var(--knop-ronding);background:var(--vlak);color:var(--tekst)}
.kasstroom-veld textarea{width:100%;box-sizing:border-box;min-height:58px;padding:8px var(--ruimte-compact);font-size:16px;font-family:inherit;line-height:1.4;border:1px solid var(--rand-sterk);border-radius:var(--knop-ronding);background:var(--vlak);color:var(--tekst);resize:vertical}
.kasstroom-veld--breed{grid-column:1 / -1}
/* In-grid muteren: + op de richting (categorie toevoegen) en op de categorie (post toevoegen); de
   naam van elke rij groeit, de + staat rechts. Op de bewerkbare maandcel bewerk je het maandbedrag. */
.kasstroom-rij-n1>th.kasstroom-hier,.kasstroom-rij-n2>th.kasstroom-hier,.kasstroom-rij-n3>th.kasstroom-hier{display:flex;align-items:center;gap:var(--ruimte-inline)}
/* Vaste vinkkolom links (alle checkboxes uitgelijnd); de boom springt per niveau een kleine stap in met
   een vaste driehoek-sleuf. Het kleurbolletje van een categorie staat rechts, in een vaste sleuf naast de
   +/potlood-actie — zo duwt het bolletje het label niet weg en kan de inspringing klein blijven. */
.kasstroom-vinkcel{flex:none;display:inline-flex;align-items:center;justify-content:center;width:20px}
.kasstroom-boom{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:var(--ruimte-micro)}
.kasstroom-boom--n2{padding-left:14px}
.kasstroom-boom--n3{padding-left:28px}
.kasstroom-tak{flex:none;display:inline-flex;align-items:center;justify-content:center;width:12px}
.kasstroom-naam,.kasstroom-n1-naam,.kasstroom-n2-naam,.kasstroom-n3-naam{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kasstroom-bewerk,.kasstroom-cat-toevoeg,.kasstroom-post-toevoeg{flex:none;color:var(--tekst-dim)}
.kasstroom-aandeel{flex:none;margin-left:var(--ruimte-inline);padding:1px 6px;border-radius:999px;background:var(--warm);border:1px solid var(--rand);color:var(--tekst-dim);font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums}
.kasstroom-door{flex:none;margin-left:var(--ruimte-inline);padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--accent) 14%,var(--vlak));border:1px solid color-mix(in srgb,var(--accent) 35%,var(--rand));color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.02em;text-transform:lowercase}
.kasstroom-rij-n1 .kasstroom-toggle{accent-color:var(--opAccent)}
.kasstroom-rij-n1 .kasstroom-cat-toevoeg,.kasstroom-rij-n1 .kasstroom-cat-toevoeg:hover{color:var(--opAccent)}
.kasstroom-rij-n1:hover .kasstroom-cat-toevoeg,.kasstroom-rij-n2:hover .kasstroom-post-toevoeg,.kasstroom-rij-n3:hover .kasstroom-bewerk,.kasstroom-cat-toevoeg:focus-visible,.kasstroom-post-toevoeg:focus-visible,.kasstroom-bewerk:focus-visible{color:var(--accent)}
.kasstroom-info{color:var(--accent)}
.kasstroom-info:hover,.kasstroom-info:focus-visible{color:var(--accent-diep)}
.kasstroom-cel-bewerk{cursor:pointer}
.kasstroom-cel-bewerk:hover{background:var(--warm);box-shadow:inset 0 0 0 1px var(--rand-sterk)}
.kasstroom-cel-bewerk:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.kasstroom-cel-bezig{padding:0}
.kasstroom-celinvoer{width:100%;min-height:36px;box-sizing:border-box;padding:0 var(--ruimte-micro);font-size:16px;text-align:right;border:1px solid var(--accent);border-radius:var(--knop-ronding);background:var(--vlak);color:var(--tekst)}
.kasstroom-invoegrij>td{padding:0;background:var(--warm)}
.kasstroom-invoeg{position:sticky;left:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--ruimte-inline);padding:var(--ruimte-inline) var(--ruimte-compact);max-width:min(860px,calc(100vw - var(--ruimte-groep)));box-sizing:border-box}
.kasstroom-invoeg--cat{padding-left:var(--ruimte-groep)}
.kasstroom-invoeg--post{padding-left:calc(var(--ruimte-groep) + var(--ruimte-component))}
.kasstroom-invoeg-naam{flex:1 1 150px;min-width:0}
.kasstroom-invoeg-bedrag{flex:0 1 120px;min-width:0}
.kasstroom-invoeg input{min-height:44px;padding:0 var(--ruimte-compact);font-size:13px;border:1px solid var(--rand-sterk);border-radius:var(--knop-ronding);background:var(--vlak);color:var(--tekst)}
.kasstroom-invoeg-acties{display:flex;align-items:center;gap:var(--ruimte-inline);flex:0 0 auto}
.kasstroom-invoeg-acties .knop{min-height:44px}
@media (max-width:620px){.kasstroom-invoeg-naam,.kasstroom-invoeg-bedrag{flex:1 1 100%}.kasstroom-invoeg input{font-size:16px}}
.kasstroom-invoeg-schakels{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ruimte-inline)}
.kasstroom-segknop{display:inline-flex;border:1px solid var(--rand-sterk);border-radius:var(--knop-ronding);overflow:hidden;background:var(--vlak)}
.kasstroom-segknop[hidden]{display:none}
.kasstroom-seg{min-height:44px;padding:0 var(--ruimte-compact);border:0;background:transparent;color:var(--tekst-dim);font:inherit;font-size:13px;line-height:1;cursor:pointer;white-space:nowrap}
.kasstroom-seg+.kasstroom-seg{border-left:1px solid var(--rand-sterk)}
.kasstroom-seg.aan{background:var(--accent);color:var(--opAccent);font-weight:600}
.kasstroom-seg:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.kasstroom-invoeg-maand{flex:none;min-height:44px;padding:0 var(--ruimte-inline);font-size:13px;border:1px solid var(--rand-sterk);border-radius:var(--knop-ronding);background:var(--vlak);color:var(--tekst);cursor:pointer}
@media (max-width:620px){.kasstroom-invoeg-maand{font-size:16px}}
.kasstroom-regelkaart{max-width:620px;width:100%}
.kasstroom-schakel{flex-direction:row;align-items:center;gap:var(--ruimte-inline);font-size:14px;font-weight:500;color:var(--tekst)}
.kasstroom-schakel input{min-height:auto;width:20px;height:20px}
.kasstroom-preview{margin:0;font-size:13px;color:var(--accent-diep);min-height:1.2em}
.kasstroom-formulier-voet{display:flex;justify-content:flex-end}

/* regellijst */
.kasstroom-recentlijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.kasstroom-recentrij{display:flex;align-items:center;gap:var(--ruimte-compact);padding:var(--ruimte-inline) 0;border-bottom:1px solid var(--rand)}
.kasstroom-recentrij:last-child{border-bottom:0}
.kasstroom-recent-kleur{width:12px;height:12px;border-radius:3px;flex:0 0 auto}
.kasstroom-recent-tekst{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.kasstroom-recent-tekst b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kasstroom-recent-tekst span{font-size:12px;color:var(--tekst-dim)}
.kasstroom-recent-bedrag{font-weight:700;flex:0 0 auto}
.kasstroom-recent-bedrag.positief{color:var(--klaar-streep)}
.kasstroom-recent-bedrag.negatief{color:var(--alarm)}

/* inrichten */
.kasstroom-inrichtkolommen{display:grid;grid-template-columns:1fr 1fr;gap:var(--ruimte-groep)}
.kasstroom-inrichtkolom h3{margin:0}
.kasstroom-telling{margin:0 0 var(--ruimte-inline);font-size:12px;color:var(--tekst-dim)}
.kasstroom-catlijst{display:flex;flex-direction:column}
.kasstroom-catrij{display:flex;align-items:center;gap:var(--ruimte-inline);padding:var(--ruimte-inline) 0;border-bottom:1px solid var(--rand)}
.kasstroom-kleurstip{width:12px;height:12px;border-radius:3px;flex:0 0 auto}
.kasstroom-catnaam{flex:1 1 auto;min-width:0}
.kasstroom-sub{color:var(--tekst-dim);font-size:12px;font-weight:400}
.kasstroom-cattoevoeg{display:flex;gap:var(--ruimte-inline);align-items:center;margin-top:var(--ruimte-component);flex-wrap:wrap}
.kasstroom-cattoevoeg input[type=text]{flex:1 1 140px;min-height:44px;padding:0 var(--ruimte-compact);font-size:16px;border:1px solid var(--rand-sterk);border-radius:var(--knop-ronding);background:var(--vlak);color:var(--tekst)}
.kasstroom-cattoevoeg input[type=color]{min-height:44px;width:48px;border:1px solid var(--rand-sterk);border-radius:var(--knop-ronding);background:var(--vlak);padding:3px}

/* boeken beheren */
.kasstroom-boeklijst{display:flex;flex-direction:column}
.kasstroom-boekrij{display:flex;align-items:center;gap:var(--ruimte-compact);padding:var(--ruimte-compact) 0;border-bottom:1px solid var(--rand)}
.kasstroom-boekrij:last-child{border-bottom:0}
.kasstroom-boekrij.actief{background:rgba(var(--accentmist),.08);border-radius:var(--radius);padding-inline:var(--ruimte-compact)}
.kasstroom-boekrij-tekst{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.kasstroom-boekrij-tekst span{font-size:12px;color:var(--tekst-dim)}
.kasstroom-actieflabel{color:var(--accent);font-weight:700;font-size:11px}
.kasstroom-boekrij-saldo{font-weight:700;flex:0 0 auto}
.kasstroom-boekrij-saldo.positief{color:var(--klaar-streep)}
.kasstroom-boekrij-saldo.negatief{color:var(--alarm)}

/* ===================== Opfrissing: kaartdiepte ===================== */
/* Subtiele, thema-afhankelijke schaduw op de hoofdkaarten, zodat vlakken minder vlak ogen.
   De rand komt uit het (iets steviger) --rand-token; hover-/selectiestaten mogen deze schaduw
   overschrijven. */
.dashboard-tile,.vastgoedkaart,.notulekaart,.paspoortkaart,.instellingstegel,
.kasstroom-grafiek,.kasstroom-tabelkader,.kasstroom-formulierkader,.kasstroom-recent,
.kasstroom-inrichten,.kasstroom-boekbeheer,.kasstroom-tegel{box-shadow:var(--kaart-schaduw)}

/* ===================== Opfrissing iteratie 2: elevatie + hover ===================== */
/* Eén elevatiesysteem: rustschaduw op kaartvlakken, een iets sterkere schaduw bij hover op
   klikbare tegels (consistent met de dashboardtegels), en een prominente schaduw op zwevende
   vensters. --kaart-schaduw(-hover) zijn thema-afhankelijke tokens. */
.fototegel,.bestandtegel{box-shadow:var(--kaart-schaduw)}
.vensterkaart{box-shadow:var(--kaart-schaduw-hover)}
.fototegel,.bestandtegel,.instellingstegel,.paspoortkaart{transition:box-shadow .16s ease,transform .16s ease,border-color .12s ease}
.fototegel:hover,.bestandtegel:hover,.instellingstegel:hover,.paspoortkaart:hover{box-shadow:var(--kaart-schaduw-hover);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){
  .fototegel:hover,.bestandtegel:hover,.instellingstegel:hover,.paspoortkaart:hover{transform:none}
}