/* Doelpad: src/platform/css/sens-iconen.css
   SENS iconen (set Petalen, Stijn 29/10). Gegenereerd uit de mockup; zie docs/concepten/iconen/ICONEN_OVERDRACHT.md.
   Vijf logokleuren als tokens (t=teal, g=groen, r=rood, v=paars, o=oranje, w=wit). Enkel hier, nergens anders.
   Keuze van de school (huisstijl.icoonkleur): data-icoonkleur="logo" (standaard) of "een" (tinten van de schoolkleur)
   op <html>; ook op een container (voorbeeld in de huisstijl-stap), want de tokens erven.

   Aangepast bij de inbouw (29/10, ICONEN_BESLISSINGEN 5-10):
   - de kleurklassen (.ft, .st …) gelden enkel binnen .sens-ico: korte namen als .sr, .sw en .st bestaan al
     elders in SENS (enkel voor schermlezers, kleurbolletjes in de Cluster Manager, een animatie in het foutscherm);
   - de schoolkleur is --sens-merk (sens-tokens.css), niet --sens-blue;
   - "Minder beweging" van de gebruiker is body.uiv-rust (sens_ui_voorkeuren.php), niet html[data-minder-beweging]. */
:root, [data-icoonkleur="logo"] { --ic-t: #3DB5BD; --ic-g: #50B48C; --ic-r: #E93B4A; --ic-v: #62369B; --ic-o: #FAA22A; --ic-w: #FFFFFF; }
[data-icoonkleur="een"] {
  --ic-r: var(--sens-merk, #0ea5e9);
  --ic-v: color-mix(in srgb, var(--sens-merk, #0ea5e9) 58%, #000);
  --ic-g: color-mix(in srgb, var(--sens-merk, #0ea5e9) 80%, #fff);
  --ic-t: color-mix(in srgb, var(--sens-merk, #0ea5e9) 64%, #fff);
  --ic-o: color-mix(in srgb, var(--sens-merk, #0ea5e9) 50%, #fff);
}
/* Donker (29/10, review licht/donker): het paars van het logo haalt op de donkere vlakken amper 1,8:1 (pijlen, sluiten,
   instellingen, waarschuwing zijn enkel paars). In donker een lichtere tint van hetzelfde paars (≥4,5:1 op --surface);
   bij "Eén kleur" de donkerste tint lichter in plaats van donkerder. De andere logokleuren halen in donker ≥3,6:1. */
@media screen {
  body.dark-theme, body.dark-theme [data-icoonkleur="logo"], [data-sg-donker] { --ic-v: #A585E0; }
  [data-icoonkleur="een"] body.dark-theme, body.dark-theme [data-icoonkleur="een"] {
    --ic-v: color-mix(in srgb, var(--sens-merk, #0ea5e9) 62%, #fff);
    --ic-r: color-mix(in srgb, var(--sens-merk, #0ea5e9) 85%, #fff);
  }
}
.sens-ico .ft { fill: var(--ic-t); } .sens-ico .fg { fill: var(--ic-g); } .sens-ico .fr { fill: var(--ic-r); } .sens-ico .fv { fill: var(--ic-v); } .sens-ico .fo { fill: var(--ic-o); } .sens-ico .fw { fill: var(--ic-w); }
.sens-ico .st { stroke: var(--ic-t); } .sens-ico .sg { stroke: var(--ic-g); } .sens-ico .sr { stroke: var(--ic-r); } .sens-ico .sv { stroke: var(--ic-v); } .sens-ico .so { stroke: var(--ic-o); } .sens-ico .sw { stroke: var(--ic-w); }

/* Basis (29/10, Davy en Stijn, ICONEN_BESLISSINGEN 11): in kleur. Inline zoals een lettertype-icoon, op de tekstlijn.
   1,1em met het venster 1.5 1.5 21 21 (SENS_ICOON_VIEWBOX): even groot als het Font Awesome-teken dat het vervangt
   (±0,9em), ook waar een scherm de breedte vastzet (review licht/donker 29/10: op 1em en 0 0 24 24 een kwart kleiner). */
.sens-ico { width: 1.1em; height: 1.1em; display: inline-block; vertical-align: -.2em; overflow: visible; fill: none; stroke: none;
  flex-shrink: 0; transition: filter .35s ease; }
.sens-ico * { transform-box: fill-box; transform-origin: 50% 50%; }
.sens-ico .a-dr { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* Grijs enkel in het menu (zijmenu, gsm-balk, ingeklapte sectieletters): grijs tot hover, focus of de geopende pagina. */
:is(.nav-link, .mob-nav-item, .section-letter) .sens-ico { filter: grayscale(1) opacity(.72); }
:is(.nav-link, .mob-nav-item, .section-letter):is([aria-current="page"], .active, :hover, :focus-visible) .sens-ico,
.sens-ico.sens-play, .sens-ico.sens-kleur { filter: none; }

/* Ook de bovenbalk en de secundaire knoppen grijs in rust (30/10, Davy, ICONEN_BESLISSINGEN 17): kleur bij hover, focus of
   als de knop aan/open staat. De bel kleurt zolang er een teller op staat. Een volle knop (wit icoon, regel hieronder), het
   titelicoon, btn-danger-ghost en statussen buiten een knop blijven in kleur. Een nieuwe secundaire knop: btn btn-ghost. */
:is(.sens-hdr-search, .sens-hulp-knop, #notifTrigger, #liveSessionIcon,
    .btn:is(.btn-ghost, .btn-tekst, .btn-secondary, .btn-back, .btn-icon, .btn-icoon, .btn-outline, .btn-outline-sm, .btn-gear, .btn-cancel, .btn-sq),
    .klas-tabs__tab:not([aria-current="page"]), .nav-btn) .sens-ico:not(.sens-kleur) { filter: grayscale(1) opacity(.72); }
:is(.sens-hdr-search, .sens-hulp-knop, #notifTrigger, #liveSessionIcon,
    .btn:is(.btn-ghost, .btn-tekst, .btn-secondary, .btn-back, .btn-icon, .btn-icoon, .btn-outline, .btn-outline-sm, .btn-gear, .btn-cancel, .btn-sq),
    .klas-tabs__tab, .nav-btn):is(:hover, :focus-visible, [aria-pressed="true"], [aria-expanded="true"], .active, .on, [aria-current="page"]) .sens-ico:not(.sens-kleur),
#notifTrigger:has(> span) .sens-ico:not(.sens-kleur), #liveSessionIcon.is-live-pulse .sens-ico:not(.sens-kleur) { filter: none; }

/* Menu's (30/10, Davy: "dit vind ik wat druk", ICONEN 20): de items van een uitklap- of actiemenu zoals het zijmenu, grijs in
   rust en kleur bij hover of toetsenbordfocus. Een gevaarlijke actie (Weghalen, Verwijderen) krijgt een icoon in haar
   tekstkleur, zodat icoon en woord hetzelfde zeggen. De vakkenlijst (vak-item) houdt de vakkleur. */
:is([role="menuitem"]:not(.vak-item), .dropdown-item, .tb-more-item, .kc-more-item, .class-menu-item) .sens-ico:not(.sens-kleur) { filter: grayscale(1) opacity(.72); }
:is([role="menuitem"]:not(.vak-item), .dropdown-item, .tb-more-item, .kc-more-item, .class-menu-item):is(:hover, :focus-visible, [aria-checked="true"], [aria-current="true"], .aan) .sens-ico:not(.sens-kleur) { filter: none; }
:is([role="menuitem"], .dropdown-item, .tb-more-item, .kc-more-item, .class-menu-item):is(.danger, .gevaar, [class*="--gevaar"], [class*="--danger"], .text-danger) .sens-ico:not(.sens-kleur) {
  --ic-t: currentColor; --ic-g: currentColor; --ic-r: currentColor; --ic-v: currentColor; --ic-o: currentColor; filter: none; }

/* Tekstkleur (ICONEN_BESLISSINGEN 3 en 12, "gemengd"): op een vol gekleurde knop en in een status neemt het icoon de
   tekstkleur over, in tonen; het wit wordt de achtergrond eronder (--ico-achter), zodat een vinkje een uitsparing blijft.
   Elders (lichte knoppen, tekst, lijsten, tegels) blijven de logokleuren. Zelf kiezen: sens_icoon_svg($k, ['tekst' => true]). */
.sens-ico.sens-ico--tekst,
:is(.btn-primary, .btn-gevaar, .btn-danger, .btn-success, .btn-warning, .btn-info, [class*="knop--primair"], [class*="knop--gevaar"], [class*="knop--vol"],
    .knop.donker, .btn-login, .btn-save, .btn-submit, .btn-submit-modal, .btn-sens-primary, .sens-btn-primary, .vb-btn-primair,
    .btn-primary-action, .btn-primary-sm, .fnk-btn-save, .sens-chip, .sens-vlag, .sens-melding, .sens-toast, .sens-tekstkleur,
    /* 29/10: witte tekst op een gekleurde achtergrond in de schermen (actieve tab, volle knop, icoontegel, toast) */
    #evd-toast.error, #feed-toast.err, #sens-toast, #toast, .ab-hic, .act-pay, .act-task, .actiebalk,
    .adhoc-tab-active, .ag-toast.fout, .ag-user-av, .ap-sub-btn.selected, .ap-tab.active, .aud-check, .author-av,
    .avatar-circle, .b-hoek-ic, .b-hoek-voorstel, .badge-notification, .banner-btn-dark, .ber-tegel.kindkleur,
    .beslis, .bl-btn--p, .bl-kpi__icoon, .bl-signaal__icoon, .bl-toast, .bpb, .bsv, .btn-action, .btn-add,
    .btn-add-goal, .btn-back-nt, .btn-batch-ai, .btn-create-branded, .btn-cta.amber, .btn-cta.green,
    .btn-cta.primary, .btn-dagdeel.primary, .btn-exit, .btn-good, .btn-inlever-action, .btn-join-live, .btn-launch,
    .btn-nakijk-action, .btn-nav-action.primary, .btn-p, .btn-process, .btn-publish, .btn-quiz-start,
    .btn-reload-err, .btn-restore, .btn-send, .btn-sens, .btn-sens-main, .btn-sm.primary, .btn-verstuur,
    .btn-wero-black, .btr-ic, .btr-k.vol, .bubble.user, .bulk-bar, .bv-kal__dag.gekozen, .bv-les__icoon,
    .bv-lp__icoon, .bw-hint-adopt, .c-badge, .ca-btn.primary, .cb-btn, .cf-av, .class-check.selected,
    .cmgr-toast-err, .cmgr-toast-ok, .cpr-avatar, .cv-btn.on, .dag-letters, .day-filter-btn.active, .day-num.vandaag,
    .day-tab.active, .db-banner, .dec-btn.on, .delete-zone, .det-badge, .dm-kind, .doel-tag, .done-badge,
    .dp-band-ic, .dtab.active, .dur-chip.active, .dw-tr.sel, .ep-ic.on, .ep-vakicon, .evd-btn-p, .evd-btnp,
    .evd-chip, .evd-join, .evd-meet-icon, .evd-wd.active, .f-chip.active, .fb-btn.has-fb, .feed-aud-btn.active,
    .fiche-ic, .filter-chip.active, .filter-chip.on, .filter-pill.active, .floating-save,
    .fm-niv[aria-pressed="true"], .fnk-banner, .fnk-btn-done, .fnk-flt.active, .fnk-mok, .fnk-tbtn.primary,
    .folder-item.active, .foto-werk__knop, .fp.on, .fs-brand, .ft-knop, .ftab.active, .gem-pill,
    .gz-dom[aria-pressed="true"], .hero-sens, .hk-ic, .hoek-bol, .hoek-emoji, .hoek-icon-big, .hoekkop,
    .icon-opt.active, .k-vink, .ka-av.vol, .kb-c, .kb-s, .kb2-hoek-ic, .kbb-blaas, .kbb-bw__klaar, .kbb-kies,
    .kbb-sn__kies, .kbb-sn__nu, .kbb-sn__vink, .kbs-chip.aan, .kbs-groep__ic, .kd-avatar, .kd-chipfilter.actief,
    .kgs__klaar, .kgs__t[aria-pressed="true"], .kind-pil__av, .klas-afwezig__n, .klas-chip.active,
    .klas-strook__knop, .klas-tab.active, .klas-tabs__tab[aria-current="page"], .kme-tab[aria-selected="true"],
    .kn-primair, .kok-pri, .koppel-btn, .koppel-logo, .kp-doel__t.active, .kp-slim__ic, .ks-gv, .kt-btn.primary,
    .kt-hoekbol, .kt-vink, .kv-foto-groot, .kv-fotobadge, .kv-fotobijschrift, .kv-fotonieuw, .kv-gv,
    .kv-ic[aria-pressed="true"], .kv-jd__pil--nu, .kv-kal__dag.gekozen, .kv-naar, .kv-obrb.is-aan, .kv-pen__n,
    .kv-pil__stand, .kv-stand[aria-pressed="true"], .kv-vl__ic, .kv-vl__nu, .kvs__knop, .kz-knop, .lb-like-btn.liked,
    .lbtn.a-all, .lfk-ic, .lg-btn, .lg-vak-pill.active, .lib-btn-insert, .live-deelnemen-btn, .lln-chip.nu,
    .lln-ns-label, .lln-spreek[aria-pressed=true], .lln-tab[aria-pressed=true], .lln-toast, .lln-vink, .lo-av-sym,
    .lo-av.heeft-sym, .lo-signaal__icoon, .log-gv, .logo-square, .m-chip.on, .m-ic, .mc-crumb.current, .md-btn--p,
    .md-kpi__icoon, .md-signaal__icoon, .method-btn.active, .mn-type__ico, .mp-tab.on, .mv-feedrij__ico,
    .mv-knopje.primair, .new-badge, .notif-badge, .np-link-btn, .oc-balk, .op-vink, .ou-kleurdot,
    .ou-sl[aria-pressed="true"], .ov-knop.primair, .pc-gezinnen__knop, .pc-save-btn, .pd-signaal__icoon,
    .pf-delete-btn, .pf-hartjes, .pf-lightbox-close, .pf-parent-badge, .pf-photo-remove, .pg-btn.cur, .pi-btn.on,
    .pill.active, .pipeline-step.active, .preview-dl-btn, .pt-chip, .pt-flt.on, .qr-scherm, .quiz-header-icon,
    .rl-klaar-ic, .rl-pri, .rl-toast, .rl-toastbtn, .ro-btn--p, .ro-kpi__icoon, .ro-signaal__icoon, .rust-logo,
    .s-avatar, .sa-btn, .scale-btn.selected, .sd-btn.good, .sd-btn.p, .sd-ti, .sd-toast, .search-tab.active,
    .selected-school-icon, .sens-badge-dot, .sens-bk__status--neutraal.sens-bk__status--knop, .sens-btn-danger,
    .sens-btn-p, .sens-hero, .sens-pay-hero, .sens-score-glass, .sens-status-pill, .sens-sv__knop, .sens-tab.active,
    .sev-chip.active, .sg-banner, .sg-klas-tab.active, .sleep-beeld, .sn-ib.aan, .snel-hero-icon, .snel-ic,
    .snel-klaar, .ssg-knop.gevaar, .staff-avatar, .status-opt.active[data-s="opgeborgen"], .step-num,
    .student-avatar, .taak-icon, .tab-btn.active, .tab-pill.active, .tbtab.active, .template-btn.primary, .thema-ic,
    .theme-icon-static, .toast, .total-badge, .tpl-badge, .tw-btn, .twofa-btn, .type-chip.active, .unpub-pill,
    .user-avatar-placeholder, .user-avatar-placeholder-large, .vak-banner, .vak-icon, .vak-icon-large, .vak-tag,
    .vb-badge-knop.vb-badge-neutraal, .vb-btn-groen, .vd-banner, .vs-done-badge, .vw-tab.active, .w-hs__knop,
    .w-hs__kop, .w-size-btn.active, .w-verloop__n, .ww-chip.aan, .zo-knop, .zone-chip.active, .zw-knop,
    /* 30/10 (planner en dagbord): momenttegel, momentkiezer, vakicoon, status op de weekplanning, doelenschaal-bolletje */
    .b-moment, .pi-icon, .ep-vakicon, .wk-st, .kd-bolletje:not(.s-nog_niet), button[style*="background:var(--sens-primary)"], .kv-wv__koppel, .kv-wv__chip) .sens-ico:not(.sens-kleur) {
  --ic-t: currentColor; --ic-g: currentColor; --ic-r: currentColor; --ic-v: currentColor; --ic-o: currentColor;
  --ic-w: var(--ico-achter, var(--surface, #fff)); filter: none;
}
:is(.sens-ico--tekst, :is(.btn-primary, .btn-gevaar, .btn-danger, .btn-success, .btn-warning, .btn-info, [class*="knop--primair"], [class*="knop--gevaar"], [class*="knop--vol"],
    .knop.donker, .btn-login, .btn-save, .btn-submit, .btn-submit-modal, .btn-sens-primary, .sens-btn-primary, .vb-btn-primair,
    .btn-primary-action, .btn-primary-sm, .fnk-btn-save, .sens-chip, .sens-vlag, .sens-melding, .sens-toast, .sens-tekstkleur,
    /* 29/10: witte tekst op een gekleurde achtergrond in de schermen (actieve tab, volle knop, icoontegel, toast) */
    #evd-toast.error, #feed-toast.err, #sens-toast, #toast, .ab-hic, .act-pay, .act-task, .actiebalk,
    .adhoc-tab-active, .ag-toast.fout, .ag-user-av, .ap-sub-btn.selected, .ap-tab.active, .aud-check, .author-av,
    .avatar-circle, .b-hoek-ic, .b-hoek-voorstel, .badge-notification, .banner-btn-dark, .ber-tegel.kindkleur,
    .beslis, .bl-btn--p, .bl-kpi__icoon, .bl-signaal__icoon, .bl-toast, .bpb, .bsv, .btn-action, .btn-add,
    .btn-add-goal, .btn-back-nt, .btn-batch-ai, .btn-create-branded, .btn-cta.amber, .btn-cta.green,
    .btn-cta.primary, .btn-dagdeel.primary, .btn-exit, .btn-good, .btn-inlever-action, .btn-join-live, .btn-launch,
    .btn-nakijk-action, .btn-nav-action.primary, .btn-p, .btn-process, .btn-publish, .btn-quiz-start,
    .btn-reload-err, .btn-restore, .btn-send, .btn-sens, .btn-sens-main, .btn-sm.primary, .btn-verstuur,
    .btn-wero-black, .btr-ic, .btr-k.vol, .bubble.user, .bulk-bar, .bv-kal__dag.gekozen, .bv-les__icoon,
    .bv-lp__icoon, .bw-hint-adopt, .c-badge, .ca-btn.primary, .cb-btn, .cf-av, .class-check.selected,
    .cmgr-toast-err, .cmgr-toast-ok, .cpr-avatar, .cv-btn.on, .dag-letters, .day-filter-btn.active, .day-num.vandaag,
    .day-tab.active, .db-banner, .dec-btn.on, .delete-zone, .det-badge, .dm-kind, .doel-tag, .done-badge,
    .dp-band-ic, .dtab.active, .dur-chip.active, .dw-tr.sel, .ep-ic.on, .ep-vakicon, .evd-btn-p, .evd-btnp,
    .evd-chip, .evd-join, .evd-meet-icon, .evd-wd.active, .f-chip.active, .fb-btn.has-fb, .feed-aud-btn.active,
    .fiche-ic, .filter-chip.active, .filter-chip.on, .filter-pill.active, .floating-save,
    .fm-niv[aria-pressed="true"], .fnk-banner, .fnk-btn-done, .fnk-flt.active, .fnk-mok, .fnk-tbtn.primary,
    .folder-item.active, .foto-werk__knop, .fp.on, .fs-brand, .ft-knop, .ftab.active, .gem-pill,
    .gz-dom[aria-pressed="true"], .hero-sens, .hk-ic, .hoek-bol, .hoek-emoji, .hoek-icon-big, .hoekkop,
    .icon-opt.active, .k-vink, .ka-av.vol, .kb-c, .kb-s, .kb2-hoek-ic, .kbb-blaas, .kbb-bw__klaar, .kbb-kies,
    .kbb-sn__kies, .kbb-sn__nu, .kbb-sn__vink, .kbs-chip.aan, .kbs-groep__ic, .kd-avatar, .kd-chipfilter.actief,
    .kgs__klaar, .kgs__t[aria-pressed="true"], .kind-pil__av, .klas-afwezig__n, .klas-chip.active,
    .klas-strook__knop, .klas-tab.active, .klas-tabs__tab[aria-current="page"], .kme-tab[aria-selected="true"],
    .kn-primair, .kok-pri, .koppel-btn, .koppel-logo, .kp-doel__t.active, .kp-slim__ic, .ks-gv, .kt-btn.primary,
    .kt-hoekbol, .kt-vink, .kv-foto-groot, .kv-fotobadge, .kv-fotobijschrift, .kv-fotonieuw, .kv-gv,
    .kv-ic[aria-pressed="true"], .kv-jd__pil--nu, .kv-kal__dag.gekozen, .kv-naar, .kv-obrb.is-aan, .kv-pen__n,
    .kv-pil__stand, .kv-stand[aria-pressed="true"], .kv-vl__ic, .kv-vl__nu, .kvs__knop, .kz-knop, .lb-like-btn.liked,
    .lbtn.a-all, .lfk-ic, .lg-btn, .lg-vak-pill.active, .lib-btn-insert, .live-deelnemen-btn, .lln-chip.nu,
    .lln-ns-label, .lln-spreek[aria-pressed=true], .lln-tab[aria-pressed=true], .lln-toast, .lln-vink, .lo-av-sym,
    .lo-av.heeft-sym, .lo-signaal__icoon, .log-gv, .logo-square, .m-chip.on, .m-ic, .mc-crumb.current, .md-btn--p,
    .md-kpi__icoon, .md-signaal__icoon, .method-btn.active, .mn-type__ico, .mp-tab.on, .mv-feedrij__ico,
    .mv-knopje.primair, .new-badge, .notif-badge, .np-link-btn, .oc-balk, .op-vink, .ou-kleurdot,
    .ou-sl[aria-pressed="true"], .ov-knop.primair, .pc-gezinnen__knop, .pc-save-btn, .pd-signaal__icoon,
    .pf-delete-btn, .pf-hartjes, .pf-lightbox-close, .pf-parent-badge, .pf-photo-remove, .pg-btn.cur, .pi-btn.on,
    .pill.active, .pipeline-step.active, .preview-dl-btn, .pt-chip, .pt-flt.on, .qr-scherm, .quiz-header-icon,
    .rl-klaar-ic, .rl-pri, .rl-toast, .rl-toastbtn, .ro-btn--p, .ro-kpi__icoon, .ro-signaal__icoon, .rust-logo,
    .s-avatar, .sa-btn, .scale-btn.selected, .sd-btn.good, .sd-btn.p, .sd-ti, .sd-toast, .search-tab.active,
    .selected-school-icon, .sens-badge-dot, .sens-bk__status--neutraal.sens-bk__status--knop, .sens-btn-danger,
    .sens-btn-p, .sens-hero, .sens-pay-hero, .sens-score-glass, .sens-status-pill, .sens-sv__knop, .sens-tab.active,
    .sev-chip.active, .sg-banner, .sg-klas-tab.active, .sleep-beeld, .sn-ib.aan, .snel-hero-icon, .snel-ic,
    .snel-klaar, .ssg-knop.gevaar, .staff-avatar, .status-opt.active[data-s="opgeborgen"], .step-num,
    .student-avatar, .taak-icon, .tab-btn.active, .tab-pill.active, .tbtab.active, .template-btn.primary, .thema-ic,
    .theme-icon-static, .toast, .total-badge, .tpl-badge, .tw-btn, .twofa-btn, .type-chip.active, .unpub-pill,
    .user-avatar-placeholder, .user-avatar-placeholder-large, .vak-banner, .vak-icon, .vak-icon-large, .vak-tag,
    .vb-badge-knop.vb-badge-neutraal, .vb-btn-groen, .vd-banner, .vs-done-badge, .vw-tab.active, .w-hs__knop,
    .w-hs__kop, .w-size-btn.active, .w-verloop__n, .ww-chip.aan, .zo-knop, .zone-chip.active, .zw-knop,
    /* 30/10 (planner en dagbord): momenttegel, momentkiezer, vakicoon, status op de weekplanning, doelenschaal-bolletje */
    .b-moment, .pi-icon, .ep-vakicon, .wk-st, .kd-bolletje:not(.s-nog_niet), button[style*="background:var(--sens-primary)"], .kv-wv__koppel, .kv-wv__chip) .sens-ico:not(.sens-kleur)) :is(.ft, .st) { fill-opacity: .55; stroke-opacity: .55; }
:is(.sens-ico--tekst, :is(.btn-primary, .btn-gevaar, .btn-danger, .btn-success, .btn-warning, .btn-info, [class*="knop--primair"], [class*="knop--gevaar"], [class*="knop--vol"],
    .knop.donker, .btn-login, .btn-save, .btn-submit, .btn-submit-modal, .btn-sens-primary, .sens-btn-primary, .vb-btn-primair,
    .btn-primary-action, .btn-primary-sm, .fnk-btn-save, .sens-chip, .sens-vlag, .sens-melding, .sens-toast, .sens-tekstkleur,
    /* 29/10: witte tekst op een gekleurde achtergrond in de schermen (actieve tab, volle knop, icoontegel, toast) */
    #evd-toast.error, #feed-toast.err, #sens-toast, #toast, .ab-hic, .act-pay, .act-task, .actiebalk,
    .adhoc-tab-active, .ag-toast.fout, .ag-user-av, .ap-sub-btn.selected, .ap-tab.active, .aud-check, .author-av,
    .avatar-circle, .b-hoek-ic, .b-hoek-voorstel, .badge-notification, .banner-btn-dark, .ber-tegel.kindkleur,
    .beslis, .bl-btn--p, .bl-kpi__icoon, .bl-signaal__icoon, .bl-toast, .bpb, .bsv, .btn-action, .btn-add,
    .btn-add-goal, .btn-back-nt, .btn-batch-ai, .btn-create-branded, .btn-cta.amber, .btn-cta.green,
    .btn-cta.primary, .btn-dagdeel.primary, .btn-exit, .btn-good, .btn-inlever-action, .btn-join-live, .btn-launch,
    .btn-nakijk-action, .btn-nav-action.primary, .btn-p, .btn-process, .btn-publish, .btn-quiz-start,
    .btn-reload-err, .btn-restore, .btn-send, .btn-sens, .btn-sens-main, .btn-sm.primary, .btn-verstuur,
    .btn-wero-black, .btr-ic, .btr-k.vol, .bubble.user, .bulk-bar, .bv-kal__dag.gekozen, .bv-les__icoon,
    .bv-lp__icoon, .bw-hint-adopt, .c-badge, .ca-btn.primary, .cb-btn, .cf-av, .class-check.selected,
    .cmgr-toast-err, .cmgr-toast-ok, .cpr-avatar, .cv-btn.on, .dag-letters, .day-filter-btn.active, .day-num.vandaag,
    .day-tab.active, .db-banner, .dec-btn.on, .delete-zone, .det-badge, .dm-kind, .doel-tag, .done-badge,
    .dp-band-ic, .dtab.active, .dur-chip.active, .dw-tr.sel, .ep-ic.on, .ep-vakicon, .evd-btn-p, .evd-btnp,
    .evd-chip, .evd-join, .evd-meet-icon, .evd-wd.active, .f-chip.active, .fb-btn.has-fb, .feed-aud-btn.active,
    .fiche-ic, .filter-chip.active, .filter-chip.on, .filter-pill.active, .floating-save,
    .fm-niv[aria-pressed="true"], .fnk-banner, .fnk-btn-done, .fnk-flt.active, .fnk-mok, .fnk-tbtn.primary,
    .folder-item.active, .foto-werk__knop, .fp.on, .fs-brand, .ft-knop, .ftab.active, .gem-pill,
    .gz-dom[aria-pressed="true"], .hero-sens, .hk-ic, .hoek-bol, .hoek-emoji, .hoek-icon-big, .hoekkop,
    .icon-opt.active, .k-vink, .ka-av.vol, .kb-c, .kb-s, .kb2-hoek-ic, .kbb-blaas, .kbb-bw__klaar, .kbb-kies,
    .kbb-sn__kies, .kbb-sn__nu, .kbb-sn__vink, .kbs-chip.aan, .kbs-groep__ic, .kd-avatar, .kd-chipfilter.actief,
    .kgs__klaar, .kgs__t[aria-pressed="true"], .kind-pil__av, .klas-afwezig__n, .klas-chip.active,
    .klas-strook__knop, .klas-tab.active, .klas-tabs__tab[aria-current="page"], .kme-tab[aria-selected="true"],
    .kn-primair, .kok-pri, .koppel-btn, .koppel-logo, .kp-doel__t.active, .kp-slim__ic, .ks-gv, .kt-btn.primary,
    .kt-hoekbol, .kt-vink, .kv-foto-groot, .kv-fotobadge, .kv-fotobijschrift, .kv-fotonieuw, .kv-gv,
    .kv-ic[aria-pressed="true"], .kv-jd__pil--nu, .kv-kal__dag.gekozen, .kv-naar, .kv-obrb.is-aan, .kv-pen__n,
    .kv-pil__stand, .kv-stand[aria-pressed="true"], .kv-vl__ic, .kv-vl__nu, .kvs__knop, .kz-knop, .lb-like-btn.liked,
    .lbtn.a-all, .lfk-ic, .lg-btn, .lg-vak-pill.active, .lib-btn-insert, .live-deelnemen-btn, .lln-chip.nu,
    .lln-ns-label, .lln-spreek[aria-pressed=true], .lln-tab[aria-pressed=true], .lln-toast, .lln-vink, .lo-av-sym,
    .lo-av.heeft-sym, .lo-signaal__icoon, .log-gv, .logo-square, .m-chip.on, .m-ic, .mc-crumb.current, .md-btn--p,
    .md-kpi__icoon, .md-signaal__icoon, .method-btn.active, .mn-type__ico, .mp-tab.on, .mv-feedrij__ico,
    .mv-knopje.primair, .new-badge, .notif-badge, .np-link-btn, .oc-balk, .op-vink, .ou-kleurdot,
    .ou-sl[aria-pressed="true"], .ov-knop.primair, .pc-gezinnen__knop, .pc-save-btn, .pd-signaal__icoon,
    .pf-delete-btn, .pf-hartjes, .pf-lightbox-close, .pf-parent-badge, .pf-photo-remove, .pg-btn.cur, .pi-btn.on,
    .pill.active, .pipeline-step.active, .preview-dl-btn, .pt-chip, .pt-flt.on, .qr-scherm, .quiz-header-icon,
    .rl-klaar-ic, .rl-pri, .rl-toast, .rl-toastbtn, .ro-btn--p, .ro-kpi__icoon, .ro-signaal__icoon, .rust-logo,
    .s-avatar, .sa-btn, .scale-btn.selected, .sd-btn.good, .sd-btn.p, .sd-ti, .sd-toast, .search-tab.active,
    .selected-school-icon, .sens-badge-dot, .sens-bk__status--neutraal.sens-bk__status--knop, .sens-btn-danger,
    .sens-btn-p, .sens-hero, .sens-pay-hero, .sens-score-glass, .sens-status-pill, .sens-sv__knop, .sens-tab.active,
    .sev-chip.active, .sg-banner, .sg-klas-tab.active, .sleep-beeld, .sn-ib.aan, .snel-hero-icon, .snel-ic,
    .snel-klaar, .ssg-knop.gevaar, .staff-avatar, .status-opt.active[data-s="opgeborgen"], .step-num,
    .student-avatar, .taak-icon, .tab-btn.active, .tab-pill.active, .tbtab.active, .template-btn.primary, .thema-ic,
    .theme-icon-static, .toast, .total-badge, .tpl-badge, .tw-btn, .twofa-btn, .type-chip.active, .unpub-pill,
    .user-avatar-placeholder, .user-avatar-placeholder-large, .vak-banner, .vak-icon, .vak-icon-large, .vak-tag,
    .vb-badge-knop.vb-badge-neutraal, .vb-btn-groen, .vd-banner, .vs-done-badge, .vw-tab.active, .w-hs__knop,
    .w-hs__kop, .w-size-btn.active, .w-verloop__n, .ww-chip.aan, .zo-knop, .zone-chip.active, .zw-knop,
    /* 30/10 (planner en dagbord): momenttegel, momentkiezer, vakicoon, status op de weekplanning, doelenschaal-bolletje */
    .b-moment, .pi-icon, .ep-vakicon, .wk-st, .kd-bolletje:not(.s-nog_niet), button[style*="background:var(--sens-primary)"], .kv-wv__koppel, .kv-wv__chip) .sens-ico:not(.sens-kleur)) :is(.fo, .so) { fill-opacity: .4; stroke-opacity: .4; }
/* De achtergrond onder het icoon, voor de uitsparingen (wit detail). */
:is(.btn-primary, [class*="knop--primair"], .btn-login, .btn-sens-primary, .sens-btn-primary) { --ico-achter: var(--sens-merk, #0ea5e9); }
:is(.btn-gevaar, .btn-danger) { --ico-achter: var(--bad-soft, #fde8e8); }
.sens-chip, .sens-vlag, .sens-melding { --ico-achter: var(--accent-zacht, var(--surface-2, #eef2f7)); }

/* Oudere Safari (< 16.2) kent color-mix() niet: dan geen "Eén kleur" maar de logokleuren (ICONEN_BESLISSINGEN 6). */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  [data-icoonkleur="een"] { --ic-t: #3DB5BD; --ic-g: #50B48C; --ic-r: #E93B4A; --ic-v: #62369B; --ic-o: #FAA22A; }
}

/* Beweging: één onderdeel, ongeveer een seconde, één keer */
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-bell-b,
.sens-ico.sens-play .a-bell-b { animation: sens-swing 1s ease-in-out both; transform-origin: 50% 0; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-bell-c,
.sens-ico.sens-play .a-bell-c { animation: sens-clap 1s ease-in-out both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-d,
.sens-ico.sens-play .a-d { animation: sens-dots .8s ease-in-out both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-d2,
.sens-ico.sens-play .a-d2 { animation-delay: .12s; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-d3,
.sens-ico.sens-play .a-d3 { animation-delay: .24s; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-k1,
.sens-ico.sens-play .a-k1 { animation: sens-slideR 1.1s cubic-bezier(.5,0,.2,1) both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-k2,
.sens-ico.sens-play .a-k2 { animation: sens-slideL 1.1s cubic-bezier(.5,0,.2,1) both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-dr1,
.sens-ico.sens-play .a-dr1 { animation: sens-draw .7s ease-out both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-dr2,
.sens-ico.sens-play .a-dr2 { animation: sens-draw .5s ease-out .35s both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-badge,
.sens-ico.sens-play .a-badge { animation: sens-pop .6s cubic-bezier(.3,1.4,.5,1) both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-q,
.sens-ico.sens-play .a-q { animation: sens-rock .9s ease-in-out both; transform-origin: 50% 100%; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-dot,
.sens-ico.sens-play .a-dot { animation: sens-hop .9s ease-in-out both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-w1,
.sens-ico.sens-play .a-w1 { animation: sens-wave 1.1s ease-in-out both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-w2,
.sens-ico.sens-play .a-w2 { animation: sens-wave 1.1s ease-in-out .25s both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-pulse,
.sens-ico.sens-play .a-pulse { animation: sens-pulse .9s ease-in-out both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-s1,
.sens-ico.sens-play .a-s1 { animation: sens-twinkle 1s ease-in-out both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-s2,
.sens-ico.sens-play .a-s2 { animation: sens-pulse .9s ease-in-out .2s both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-flame,
.sens-ico.sens-play .a-flame { animation: sens-flicker 1s ease-in-out both; transform-origin: 50% 100%; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-sun,
.sens-ico.sens-play .a-sun { animation: sens-rise .9s cubic-bezier(.3,1.3,.5,1) both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-bar1,
.sens-ico.sens-play .a-bar1 { animation: sens-grow .7s cubic-bezier(.3,1.3,.5,1) both; transform-origin: 50% 100%; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-bar2,
.sens-ico.sens-play .a-bar2 { animation: sens-grow .7s cubic-bezier(.3,1.3,.5,1) .12s both; transform-origin: 50% 100%; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-bar3,
.sens-ico.sens-play .a-bar3 { animation: sens-grow .7s cubic-bezier(.3,1.3,.5,1) .24s both; transform-origin: 50% 100%; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-hand-m,
.sens-ico.sens-play .a-hand-m { animation: sens-spin 1.1s cubic-bezier(.6,0,.3,1) both; transform-box: view-box; transform-origin: 12px 12px; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-hand-h,
.sens-ico.sens-play .a-hand-h { animation: sens-spin30 1.1s cubic-bezier(.6,0,.3,1) both; transform-box: view-box; transform-origin: 12px 12px; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-pt,
.sens-ico.sens-play .a-pt { animation: sens-bloom 1.1s ease-in-out both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-c1,
.sens-ico.sens-play .a-c1 { animation: sens-pop .5s cubic-bezier(.3,1.4,.5,1) both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-c2,
.sens-ico.sens-play .a-c2 { animation: sens-pop .5s cubic-bezier(.3,1.4,.5,1) .1s both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-c3,
.sens-ico.sens-play .a-c3 { animation: sens-pop .5s cubic-bezier(.3,1.4,.5,1) .2s both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-c4,
.sens-ico.sens-play .a-c4 { animation: sens-pop .5s cubic-bezier(.3,1.4,.5,1) .3s both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-arr,
.sens-ico.sens-play .a-arr { animation: sens-slideR .9s ease-in-out both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-door,
.sens-ico.sens-play .a-door { animation: sens-door .9s ease-in-out both; transform-origin: 0 50%; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-drop,
.sens-ico.sens-play .a-drop { animation: sens-bounce .8s cubic-bezier(.3,0,.5,1) both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-roof,
.sens-ico.sens-play .a-roof { animation: sens-roof .8s ease-in-out both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-rise,
.sens-ico.sens-play .a-rise { animation: sens-rise .9s cubic-bezier(.3,1.3,.5,1) both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-needle,
.sens-ico.sens-play .a-needle { animation: sens-needle 1.1s ease-in-out both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-wand,
.sens-ico.sens-play .a-wand { animation: sens-needle .9s ease-in-out both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-gear,
.sens-ico.sens-play .a-gear { animation: sens-spin60 1s cubic-bezier(.5,0,.2,1) both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-tap,
.sens-ico.sens-play .a-tap { animation: sens-tap .8s ease-in-out both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-fly,
.sens-ico.sens-play .a-fly { animation: sens-fly .9s ease-in-out both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-look,
.sens-ico.sens-play .a-look { animation: sens-look 1.1s ease-in-out both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-lift,
.sens-ico.sens-play .a-lift { animation: sens-lift .9s ease-in-out both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-lid,
.sens-ico.sens-play .a-lid { animation: sens-lift .9s ease-in-out both; transform-origin: 0 100%; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-sl,
.sens-ico.sens-play .a-sl { animation: sens-slideS 1s ease-in-out both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-dot2,
.sens-ico.sens-play .a-dot2 { animation: sens-hop .9s ease-in-out .15s both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-flip,
.sens-ico.sens-play .a-flip { animation: sens-door .9s ease-in-out both; transform-origin: 0 50%; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-hand-s,
.sens-ico.sens-play .a-hand-s { animation: sens-spin 1s cubic-bezier(.6,0,.3,1) both; transform-box: view-box; transform-origin: 17.5px 16.5px; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-tas,
.sens-ico.sens-play .a-tas { animation: sens-swing .9s ease-in-out both; transform-origin: 50% 0; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-rk,
.sens-ico.sens-play .a-rk { animation: sens-rock 1.1s ease-in-out both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-sway,
.sens-ico.sens-play .a-sway { animation: sens-rock 1s ease-in-out both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-sway2,
.sens-ico.sens-play .a-sway2 { animation: sens-rock 1s ease-in-out .15s both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-blink,
.sens-ico.sens-play .a-blink { animation: sens-blink 1s steps(1) both; }
:is([aria-current="page"], .sens-play, .sens-trigger:hover, .sens-trigger:focus-visible) .sens-ico .a-dr3,
.sens-ico.sens-play .a-dr3 { animation: sens-draw .5s ease-out .6s both; }

@keyframes sens-swing { 0%,100% { transform: rotate(0) } 15% { transform: rotate(-16deg) } 35% { transform: rotate(12deg) } 55% { transform: rotate(-7deg) } 75% { transform: rotate(3deg) } }
@keyframes sens-clap { 0%,100% { transform: translateX(0) } 20% { transform: translateX(1.4px) } 40% { transform: translateX(-1.4px) } 60% { transform: translateX(.9px) } 80% { transform: translateX(-.4px) } }
@keyframes sens-dots { 0%,100% { transform: translateY(0) } 30% { transform: translateY(-1.9px) } }
@keyframes sens-slideR { 0%,100% { transform: translateX(0) } 45% { transform: translateX(4.5px) } }
@keyframes sens-slideL { 0%,100% { transform: translateX(0) } 45% { transform: translateX(-4.5px) } }
@keyframes sens-draw { 0% { stroke-dashoffset: 1 } 100% { stroke-dashoffset: 0 } }
@keyframes sens-pop { 0% { transform: scale(.2) } 55% { transform: scale(1.22) } 100% { transform: scale(1) } }
@keyframes sens-rock { 0%,100% { transform: rotate(0) } 30% { transform: rotate(-9deg) } 60% { transform: rotate(6deg) } }
@keyframes sens-hop { 0%,100% { transform: translateY(0) } 35% { transform: translateY(-2.6px) } 60% { transform: translateY(0) } 78% { transform: translateY(-1px) } }
@keyframes sens-wave { 0%,100% { opacity: 1 } 25% { opacity: .15 } 60% { opacity: 1 } }
@keyframes sens-pulse { 0%,100% { transform: scale(1) } 40% { transform: scale(1.34) } }
@keyframes sens-twinkle { 0%,100% { transform: rotate(0) scale(1) } 40% { transform: rotate(40deg) scale(.7) } 70% { transform: rotate(60deg) scale(1.15) } }
@keyframes sens-flicker { 0%,100% { transform: scaleY(1) skewX(0) } 20% { transform: scaleY(1.25) skewX(-8deg) } 45% { transform: scaleY(.9) skewX(6deg) } 70% { transform: scaleY(1.15) skewX(-4deg) } }
@keyframes sens-rise { 0% { transform: translateY(3px) } 100% { transform: translateY(0) } }
@keyframes sens-grow { 0% { transform: scaleY(.25) } 60% { transform: scaleY(1.08) } 100% { transform: scaleY(1) } }
@keyframes sens-spin { 0% { transform: rotate(0) } 100% { transform: rotate(360deg) } }
@keyframes sens-spin30 { 0% { transform: rotate(0) } 100% { transform: rotate(30deg) } }
@keyframes sens-bloom { 0%,100% { transform: translate(0,0) } 45% { transform: translate(calc(var(--x) * 1px), calc(var(--y) * 1px)) } }
@keyframes sens-door { 0%,100% { transform: scaleX(1) } 45% { transform: scaleX(.25) } }
@keyframes sens-bounce { 0% { transform: translateY(-4px) } 40% { transform: translateY(0) } 60% { transform: translateY(-1.6px) } 100% { transform: translateY(0) } }
@keyframes sens-roof { 0%,100% { transform: translateY(0) } 40% { transform: translateY(-1.3px) } }
@keyframes sens-needle { 0%,100% { transform: rotate(0) } 30% { transform: rotate(-70deg) } 65% { transform: rotate(25deg) } }
@keyframes sens-spin60 { 0% { transform: rotate(0) } 100% { transform: rotate(60deg) } }
@keyframes sens-tap { 0%,100% { transform: translate(0,0) scale(1) } 40% { transform: translate(-1.8px,-1.8px) scale(.92) } 60% { transform: translate(-1.8px,-1.8px) scale(.92) } }
@keyframes sens-fly { 0%,100% { transform: translate(0,0) } 45% { transform: translate(2.8px,-2.8px) } }
@keyframes sens-look { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-2px) } 65% { transform: translateX(2px) } }
@keyframes sens-lift { 0%,100% { transform: translateY(0) } 45% { transform: translateY(-2.2px) } }
@keyframes sens-slideS { 0%,100% { transform: translateX(0) } 50% { transform: translateX(2.4px) } }
@keyframes sens-blink { 0%,100% { opacity: 1 } 20%,60% { opacity: 0 } 40%,80% { opacity: 1 } }

/* Minder beweging: kleur blijft, beweging en overgangen niet */
@media (prefers-reduced-motion: reduce) { .sens-ico, .sens-ico * { animation: none !important; transition: none !important; } }
body.uiv-rust .sens-ico, body.uiv-rust .sens-ico * { animation: none !important; transition: none !important; }
@media print { .sens-ico { filter: none !important; } }

/* De lader draait zolang hij getoond wordt (de enige doorlopende beweging); minder beweging: stil. */
.sens-ico[data-icoon="lader"] { animation: sens-spin 1s linear infinite; transform-origin: 50% 50%; transform-box: view-box; }
body.uiv-rust .sens-ico[data-icoon="lader"] { animation: none !important; }
/* Merken: eigen kleuren of de tekstkleur, nooit grijs of in de logokleuren.
   Uitzondering: de aanmeldknoppen van login.php (grijs in rust, kleur bij hover; 30/10). */
.sens-ico[data-icoon^="merk_"] { filter: none !important; }

/* Groottes en standen die de omzetting van Font Awesome meenam (fa-lg, fa-2x, fa-fw, fa-spin …). */
.sens-ico--2xs { font-size: .625em; } .sens-ico--xs { font-size: .75em; } .sens-ico--sm { font-size: .875em; }
.sens-ico--lg { font-size: 1.25em; vertical-align: -.28em; } .sens-ico--xl { font-size: 1.5em; vertical-align: -.32em; } .sens-ico--2xl { font-size: 2em; vertical-align: -.38em; }
.sens-ico--2x { font-size: 2em; } .sens-ico--3x { font-size: 3em; } .sens-ico--4x { font-size: 4em; } .sens-ico--5x { font-size: 5em; } .sens-ico--6x { font-size: 6em; }
.sens-ico--fw { width: 1.25em; }
.sens-ico--r90 { transform: rotate(90deg); } .sens-ico--r180 { transform: rotate(180deg); } .sens-ico--r270 { transform: rotate(270deg); }
.sens-ico--spiegel { transform: scaleX(-1); } .sens-ico--kantel { transform: scaleY(-1); }
.sens-draai { animation: sens-spin 1s linear infinite; }
.sens-ico--uit { filter: grayscale(1); opacity: .45; }   /* 29/10: 'uit' (vroeger de lege far-variant: hartje, ster) */
body.uiv-rust .sens-draai { animation: none !important; }

/* Tekens voor ::before/::after (29/10, ICONEN 13: vroeger een Font Awesome-glyph in content). Als masker: het teken neemt de
   tekstkleur (background: currentColor); als achtergrond in wit: op een gekleurd rondje (de -wit-varianten). */
:root {
  --sens-g-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sens-g-chevron_rechts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sens-g-vinkje: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sens-g-bewerken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16v4zM13.5 6.5l4 4' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sens-g-label: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12V4h8l10 10-8 8L3 12zM7.5 7.5h.01' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sens-g-antwoord: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7 4 12l5 5M4 12h10a6 6 0 0 1 6 6v1' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sens-g-vinkje-wit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sens-g-bewerken-wit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16v4zM13.5 6.5l4 4' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sens-g-chevron-grijs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Kindsymbool als prent (30/10, ICONEN 18): vult 86% van het rondje van het kind; de kindkleur van het rondje blijft er
   als rand omheen. De zachte tinten mengen met wit, ook in donker (de sticker is altijd wit). */
svg.sens-kindsymbool { width: 86%; height: 86%; display: block; flex: none; --pc-ondergrond: #fff; filter: none; }