/* Gegenereerd uit icoon-data.js, 17 september 2026. Niet met de hand bijwerken.
   De brede hover-trigger uit de bron liet elk icoon binnen een link of lijstregel
   meebewegen bij aanwijzen. Die is hier vervangen door één gerichte: de klikbare
   kop van een overzichtskaart. Verder speelt een icoon alleen af bij binnenkomst
   in beeld, via de klasse i2m-zichtbaar uit js/hero.js. */
/* ============================================================
   ICT2MKB â geanimeerde duotone iconenset (v2)
   Elk icoon: viewBox 0 0 256 256, gevulde paden + optionele lijnpaden.
     .duo-vulling  vlak,  opacity .26   (tweetoon: accentkleur)
     .duo-bold     hoofdvorm, currentColor
     .duo-accent   bewegend deel (flap, naald, wijzers, kiesschijf)
     .duo-teken    lijnpad dat zich tekent  (pathLength="100")
     .duo-puls     lijnpad met meelopende streep (pathLength="100")
   Tweetoon: klasse .i2m-duo (of .i2m-icoon--duo) + --i2m-accent.
   Tempo:    --i2m-duur (1 = standaard, 1.4 = rustiger, .7 = sneller).
   Trigger:  hover/focus van a, button, summary, label, li of .i2m-hover,
             plus eenmalig .i2m-zichtbaar zodra het icoon in beeld komt.
   ============================================================ */
.i2m-icoon{--i2m-accent:#1F7A8C;--i2m-duur:1;--i2m-vlak:.26;display:inline-block;vertical-align:middle;flex:none;color:inherit;overflow:visible}
.i2m-icoon path{transform-box:fill-box;will-change:transform,opacity}
.i2m-icoon .duo-vulling{fill:currentColor;opacity:var(--i2m-vlak)}
.i2m-icoon .duo-bold,.i2m-icoon .duo-accent{fill:currentColor}
.i2m-icoon .duo-teken,.i2m-icoon .duo-puls{fill:none;stroke:currentColor;stroke-width:24;stroke-linecap:round;stroke-linejoin:round}
.i2m-icoon .duo-teken{stroke-dasharray:100;stroke-dashoffset:0}
.i2m-icoon .duo-puls{stroke-dasharray:14 200;stroke-dashoffset:14}

/* tweetoon: zet .i2m-duo op de svg (of op een ouder) en stel --i2m-accent in */
.i2m-duo .duo-vulling,.i2m-icoon--duo .duo-vulling{--i2m-vlak:.3;fill:var(--i2m-accent);opacity:var(--i2m-vlak)}
.i2m-duo .duo-accent,.i2m-icoon--duo .duo-accent{fill:var(--i2m-accent)}
.i2m-duo .duo-teken,.i2m-duo .duo-puls,.i2m-icoon--duo .duo-teken,.i2m-icoon--duo .duo-puls{stroke:var(--i2m-accent)}

@keyframes i2m-bel{0%,100%{transform:rotate(0)}12%{transform:rotate(-6deg)}26%{transform:rotate(5deg)}40%{transform:rotate(-3deg)}54%{transform:rotate(4deg)}70%{transform:rotate(-2deg)}86%{transform:rotate(1deg)}}
@keyframes i2m-kies{0%{transform:rotate(0)}45%{transform:rotate(290deg)}55%{transform:rotate(290deg)}100%{transform:rotate(0)}}
@keyframes i2m-flap{0%{transform:perspective(420px) rotateX(0)}34%{transform:perspective(420px) rotateX(-166deg)}64%{transform:perspective(420px) rotateX(-166deg)}100%{transform:perspective(420px) rotateX(0)}}
@keyframes i2m-brief{0%{transform:translateY(0)}40%{transform:translateY(-16px)}70%{transform:translateY(-16px)}100%{transform:translateY(0)}}
@keyframes i2m-stempel{0%{transform:scale(1.16) rotate(-7deg)}55%{transform:scale(.97) rotate(2deg)}100%{transform:scale(1) rotate(0)}}
@keyframes i2m-teken{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}
@keyframes i2m-pop{0%{transform:scale(.84)}55%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes i2m-trillen-zacht{0%,100%{transform:rotate(0)}22%{transform:rotate(-4deg)}50%{transform:rotate(3.5deg)}74%{transform:rotate(-2deg)}}
@keyframes i2m-drijf{0%{transform:translateY(0)}45%{transform:translateY(-11px)}100%{transform:translateY(0)}}
@keyframes i2m-sync{0%{transform:translateY(0);opacity:1}30%{transform:translateY(-14px);opacity:.15}31%{transform:translateY(12px);opacity:.15}62%{transform:translateY(0);opacity:1}100%{transform:translateY(0);opacity:1}}
@keyframes i2m-puls{0%{transform:scale(1)}40%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes i2m-signaal{0%{transform:translate(0,0)}8%{transform:translate(0,0)}34%{transform:translate(-68px,140px)}44%{transform:translate(-68px,140px)}66%{transform:translate(66px,140px)}76%{transform:translate(66px,140px)}98%,100%{transform:translate(0,0)}}
@keyframes i2m-zwaai{0%{transform:rotate(0)}30%{transform:rotate(7deg)}66%{transform:rotate(-5deg)}100%{transform:rotate(0)}}
@keyframes i2m-hartje{0%{transform:scale(1)}30%{transform:scale(1.24)}55%{transform:scale(1)}72%{transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes i2m-tik{0%{transform:rotate(0)}26%{transform:rotate(8deg)}60%{transform:rotate(-5deg)}100%{transform:rotate(0)}}
@keyframes i2m-rijd{0%{transform:translateX(0)}22%{transform:translateX(-12px)}70%{transform:translateX(9px)}100%{transform:translateX(0)}}
@keyframes i2m-flikker{0%{opacity:var(--i2m-vlak)}18%{opacity:.85}34%{opacity:.35}52%{opacity:.95}68%{opacity:.4}84%{opacity:.7}100%{opacity:var(--i2m-vlak)}}
@keyframes i2m-draai{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes i2m-loop{0%{stroke-dashoffset:14}10%{stroke-dashoffset:14}100%{stroke-dashoffset:-116}}
@keyframes i2m-blip{0%{opacity:0;transform:scale(.3)}20%{opacity:0;transform:scale(.3)}60%{opacity:.5;transform:scale(1.28)}100%{opacity:var(--i2m-vlak);transform:scale(1)}}
@keyframes i2m-ronde{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes i2m-vullen{0%{opacity:.08}100%{opacity:var(--i2m-vlak)}}
@keyframes i2m-terugdraai{0%{transform:rotate(0)}100%{transform:rotate(-360deg)}}
@keyframes i2m-tikje{0%{transform:rotate(0)}40%{transform:rotate(-3deg)}100%{transform:rotate(0)}}
@keyframes i2m-veer{0%{transform:rotate(0)}100%{transform:rotate(72deg)}}
@keyframes i2m-zwiep{0%{transform:rotate(0)}38%{transform:rotate(108deg)}52%{transform:rotate(92deg)}64%{transform:rotate(104deg)}100%{transform:rotate(0)}}
@keyframes i2m-groei{0%{transform:scaleY(.06)}100%{transform:scaleY(1)}}
@keyframes i2m-opkomen{0%{transform:translateY(10px) scale(.94)}100%{transform:translateY(0) scale(1)}}

/* --- per icoon --- */
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--telefoon .duo-bold,
.i2m-icoon--telefoon:is(.i2m-speel,.i2m-zichtbaar) .duo-bold{transform-origin:50% 50%;animation:i2m-bel calc(520ms * var(--i2m-duur)) cubic-bezier(.36,.07,.19,.97) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--telefoon .duo-vulling,
.i2m-icoon--telefoon:is(.i2m-speel,.i2m-zichtbaar) .duo-vulling{transform-origin:50% 50%;animation:i2m-bel calc(520ms * var(--i2m-duur)) cubic-bezier(.36,.07,.19,.97) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--telefoon .duo-accent,
.i2m-icoon--telefoon:is(.i2m-speel,.i2m-zichtbaar) .duo-accent{transform-origin:50% 82%;animation:i2m-kies calc(900ms * var(--i2m-duur)) cubic-bezier(.22,1,.36,1) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--envelop .duo-accent,
.i2m-icoon--envelop:is(.i2m-speel,.i2m-zichtbaar) .duo-accent{transform-origin:50% 0%;animation:i2m-flap calc(900ms * var(--i2m-duur)) cubic-bezier(.4,0,.2,1) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--envelop .duo-vulling,
.i2m-icoon--envelop:is(.i2m-speel,.i2m-zichtbaar) .duo-vulling{transform-origin:50% 100%;animation:i2m-brief calc(900ms * var(--i2m-duur)) cubic-bezier(.4,0,.2,1) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--zegel-vink .duo-bold,
.i2m-icoon--zegel-vink:is(.i2m-speel,.i2m-zichtbaar) .duo-bold{transform-origin:50% 50%;animation:i2m-stempel calc(520ms * var(--i2m-duur)) cubic-bezier(.22,1,.36,1) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--zegel-vink .duo-vulling,
.i2m-icoon--zegel-vink:is(.i2m-speel,.i2m-zichtbaar) .duo-vulling{transform-origin:50% 50%;animation:i2m-stempel calc(520ms * var(--i2m-duur)) cubic-bezier(.22,1,.36,1) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--zegel-vink .duo-teken,
.i2m-icoon--zegel-vink:is(.i2m-speel,.i2m-zichtbaar) .duo-teken{transform-origin:50% 50%;animation:i2m-teken calc(620ms * var(--i2m-duur)) cubic-bezier(.4,0,.2,1) 1 both;animation-delay:calc(200ms * var(--i2m-duur))}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--zegel .duo-bold,
.i2m-icoon--zegel:is(.i2m-speel,.i2m-zichtbaar) .duo-bold{transform-origin:50% 50%;animation:i2m-stempel calc(520ms * var(--i2m-duur)) cubic-bezier(.22,1,.36,1) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--zegel .duo-vulling,
.i2m-icoon--zegel:is(.i2m-speel,.i2m-zichtbaar) .duo-vulling{transform-origin:50% 50%;animation:i2m-stempel calc(520ms * var(--i2m-duur)) cubic-bezier(.22,1,.36,1) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--schild-vink .duo-bold,
.i2m-icoon--schild-vink:is(.i2m-speel,.i2m-zichtbaar) .duo-bold{transform-origin:50% 12%;animation:i2m-pop calc(480ms * var(--i2m-duur)) cubic-bezier(.34,1.35,.64,1) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--schild-vink .duo-vulling,
.i2m-icoon--schild-vink:is(.i2m-speel,.i2m-zichtbaar) .duo-vulling{transform-origin:50% 12%;animation:i2m-pop calc(480ms * var(--i2m-duur)) cubic-bezier(.34,1.35,.64,1) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--schild-vink .duo-teken,
.i2m-icoon--schild-vink:is(.i2m-speel,.i2m-zichtbaar) .duo-teken{transform-origin:50% 50%;animation:i2m-teken calc(620ms * var(--i2m-duur)) cubic-bezier(.4,0,.2,1) 1 both;animation-delay:calc(180ms * var(--i2m-duur))}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--headset .duo-bold,
.i2m-icoon--headset:is(.i2m-speel,.i2m-zichtbaar) .duo-bold{transform-origin:50% 25%;animation:i2m-trillen-zacht calc(440ms * var(--i2m-duur)) cubic-bezier(.36,.07,.19,.97) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--headset .duo-vulling,
.i2m-icoon--headset:is(.i2m-speel,.i2m-zichtbaar) .duo-vulling{transform-origin:50% 25%;animation:i2m-trillen-zacht calc(440ms * var(--i2m-duur)) cubic-bezier(.36,.07,.19,.97) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--headset .duo-accent,
.i2m-icoon--headset:is(.i2m-speel,.i2m-zichtbaar) .duo-accent{transform-origin:90% 10%;animation:i2m-trillen-zacht calc(440ms * var(--i2m-duur)) cubic-bezier(.36,.07,.19,.97) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--wolk .duo-bold,
.i2m-icoon--wolk:is(.i2m-speel,.i2m-zichtbaar) .duo-bold{transform-origin:50% 50%;animation:i2m-drijf calc(700ms * var(--i2m-duur)) cubic-bezier(.4,0,.2,1) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--wolk .duo-vulling,
.i2m-icoon--wolk:is(.i2m-speel,.i2m-zichtbaar) .duo-vulling{transform-origin:50% 50%;animation:i2m-drijf calc(700ms * var(--i2m-duur)) cubic-bezier(.4,0,.2,1) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--wolk .duo-accent,
.i2m-icoon--wolk:is(.i2m-speel,.i2m-zichtbaar) .duo-accent{transform-origin:50% 100%;animation:i2m-sync calc(700ms * var(--i2m-duur)) cubic-bezier(.4,0,.2,1) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--netwerk .duo-bold,
.i2m-icoon--netwerk:is(.i2m-speel,.i2m-zichtbaar) .duo-bold{transform-origin:50% 50%;animation:i2m-puls calc(560ms * var(--i2m-duur)) cubic-bezier(.34,1.35,.64,1) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--netwerk .duo-accent,
.i2m-icoon--netwerk:is(.i2m-speel,.i2m-zichtbaar) .duo-accent{transform-origin:50% 50%;animation:i2m-signaal calc(900ms * var(--i2m-duur)) cubic-bezier(.4,0,.2,1) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--stethoscoop .duo-bold,
.i2m-icoon--stethoscoop:is(.i2m-speel,.i2m-zichtbaar) .duo-bold{transform-origin:25% 0%;animation:i2m-zwaai calc(560ms * var(--i2m-duur)) cubic-bezier(.4,0,.2,1) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--stethoscoop .duo-vulling,
.i2m-icoon--stethoscoop:is(.i2m-speel,.i2m-zichtbaar) .duo-vulling{transform-origin:25% 0%;animation:i2m-zwaai calc(560ms * var(--i2m-duur)) cubic-bezier(.4,0,.2,1) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--stethoscoop .duo-accent,
.i2m-icoon--stethoscoop:is(.i2m-speel,.i2m-zichtbaar) .duo-accent{transform-origin:50% 50%;animation:i2m-hartje calc(560ms * var(--i2m-duur)) cubic-bezier(.34,1.35,.64,1) 1 both;animation-delay:calc(120ms * var(--i2m-duur))}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--koffer .duo-bold,
.i2m-icoon--koffer:is(.i2m-speel,.i2m-zichtbaar) .duo-bold{transform-origin:50% 100%;animation:i2m-tik calc(420ms * var(--i2m-duur)) cubic-bezier(.36,.07,.19,.97) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--koffer .duo-vulling,
.i2m-icoon--koffer:is(.i2m-speel,.i2m-zichtbaar) .duo-vulling{transform-origin:50% 100%;animation:i2m-tik calc(420ms * var(--i2m-duur)) cubic-bezier(.36,.07,.19,.97) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--koffer .duo-accent,
.i2m-icoon--koffer:is(.i2m-speel,.i2m-zichtbaar) .duo-accent{transform-origin:50% 100%;animation:i2m-tik calc(420ms * var(--i2m-duur)) cubic-bezier(.36,.07,.19,.97) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--vrachtwagen .duo-bold,
.i2m-icoon--vrachtwagen:is(.i2m-speel,.i2m-zichtbaar) .duo-bold{transform-origin:50% 50%;animation:i2m-rijd calc(600ms * var(--i2m-duur)) cubic-bezier(.4,0,.2,1) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--vrachtwagen .duo-vulling,
.i2m-icoon--vrachtwagen:is(.i2m-speel,.i2m-zichtbaar) .duo-vulling{transform-origin:50% 50%;animation:i2m-rijd calc(600ms * var(--i2m-duur)) cubic-bezier(.4,0,.2,1) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--vrachtwagen .duo-accent,
.i2m-icoon--vrachtwagen:is(.i2m-speel,.i2m-zichtbaar) .duo-accent{transform-origin:50% 50%;animation:i2m-rijd calc(600ms * var(--i2m-duur)) cubic-bezier(.4,0,.2,1) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--chip .duo-accent,
.i2m-icoon--chip:is(.i2m-speel,.i2m-zichtbaar) .duo-accent{transform-origin:50% 50%;animation:i2m-flikker calc(900ms * var(--i2m-duur)) linear 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--chip .duo-vulling,
.i2m-icoon--chip:is(.i2m-speel,.i2m-zichtbaar) .duo-vulling{transform-origin:50% 50%;animation:i2m-flikker calc(900ms * var(--i2m-duur)) linear 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--stroom .duo-bold,
.i2m-icoon--stroom:is(.i2m-speel,.i2m-zichtbaar) .duo-bold{transform-origin:50% 50%;animation:i2m-draai calc(900ms * var(--i2m-duur)) cubic-bezier(.22,1,.36,1) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--stroom .duo-accent,
.i2m-icoon--stroom:is(.i2m-speel,.i2m-zichtbaar) .duo-accent{transform-origin:50% 50%;animation:i2m-draai calc(900ms * var(--i2m-duur)) cubic-bezier(.22,1,.36,1) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--hartslag .duo-puls,
.i2m-icoon--hartslag:is(.i2m-speel,.i2m-zichtbaar) .duo-puls{transform-origin:50% 50%;animation:i2m-loop calc(900ms * var(--i2m-duur)) cubic-bezier(.5,0,.5,1) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--hartslag .duo-vulling,
.i2m-icoon--hartslag:is(.i2m-speel,.i2m-zichtbaar) .duo-vulling{transform-origin:50% 50%;animation:i2m-blip calc(900ms * var(--i2m-duur)) cubic-bezier(.34,1.35,.64,1) 1 both;animation-delay:calc(300ms * var(--i2m-duur))}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--doel .duo-bold,
.i2m-icoon--doel:is(.i2m-speel,.i2m-zichtbaar) .duo-bold{transform-origin:50% 50%;animation:i2m-puls calc(520ms * var(--i2m-duur)) cubic-bezier(.34,1.35,.64,1) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--doel .duo-vulling,
.i2m-icoon--doel:is(.i2m-speel,.i2m-zichtbaar) .duo-vulling{transform-origin:50% 50%;animation:i2m-puls calc(520ms * var(--i2m-duur)) cubic-bezier(.34,1.35,.64,1) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--doel .duo-accent,
.i2m-icoon--doel:is(.i2m-speel,.i2m-zichtbaar) .duo-accent{transform-origin:50% 50%;animation:i2m-pop calc(520ms * var(--i2m-duur)) cubic-bezier(.34,1.35,.64,1) 1 both;animation-delay:calc(110ms * var(--i2m-duur))}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--timer .duo-accent,
.i2m-icoon--timer:is(.i2m-speel,.i2m-zichtbaar) .duo-accent{transform-origin:50% 83%;animation:i2m-ronde calc(900ms * var(--i2m-duur)) cubic-bezier(.22,1,.36,1) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--timer .duo-vulling,
.i2m-icoon--timer:is(.i2m-speel,.i2m-zichtbaar) .duo-vulling{transform-origin:50% 50%;animation:i2m-vullen calc(900ms * var(--i2m-duur)) linear 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--klok-terug .duo-accent,
.i2m-icoon--klok-terug:is(.i2m-speel,.i2m-zichtbaar) .duo-accent{transform-origin:21% 81%;animation:i2m-terugdraai calc(900ms * var(--i2m-duur)) cubic-bezier(.22,1,.36,1) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--klok-terug .duo-bold,
.i2m-icoon--klok-terug:is(.i2m-speel,.i2m-zichtbaar) .duo-bold{transform-origin:50% 50%;animation:i2m-tikje calc(900ms * var(--i2m-duur)) cubic-bezier(.4,0,.2,1) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--ster .duo-bold,
.i2m-icoon--ster:is(.i2m-speel,.i2m-zichtbaar) .duo-bold{transform-origin:50% 50%;animation:i2m-veer calc(640ms * var(--i2m-duur)) cubic-bezier(.22,1,.36,1) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--ster .duo-vulling,
.i2m-icoon--ster:is(.i2m-speel,.i2m-zichtbaar) .duo-vulling{transform-origin:50% 50%;animation:i2m-veer calc(640ms * var(--i2m-duur)) cubic-bezier(.22,1,.36,1) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--meter .duo-accent,
.i2m-icoon--meter:is(.i2m-speel,.i2m-zichtbaar) .duo-accent{transform-origin:83% 85%;animation:i2m-zwiep calc(900ms * var(--i2m-duur)) cubic-bezier(.22,1,.36,1) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--mensen .duo-bold,
.i2m-icoon--mensen:is(.i2m-speel,.i2m-zichtbaar) .duo-bold{transform-origin:50% 100%;animation:i2m-opkomen calc(480ms * var(--i2m-duur)) cubic-bezier(.34,1.35,.64,1) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--mensen .duo-vulling,
.i2m-icoon--mensen:is(.i2m-speel,.i2m-zichtbaar) .duo-vulling{transform-origin:50% 100%;animation:i2m-opkomen calc(480ms * var(--i2m-duur)) cubic-bezier(.34,1.35,.64,1) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--mensen .duo-accent,
.i2m-icoon--mensen:is(.i2m-speel,.i2m-zichtbaar) .duo-accent{transform-origin:50% 100%;animation:i2m-opkomen calc(480ms * var(--i2m-duur)) cubic-bezier(.34,1.35,.64,1) 1 both;animation-delay:calc(140ms * var(--i2m-duur))}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--grafiek .duo-bold,
.i2m-icoon--grafiek:is(.i2m-speel,.i2m-zichtbaar) .duo-bold{transform-origin:50% 100%;animation:i2m-groei calc(560ms * var(--i2m-duur)) cubic-bezier(.22,1,.36,1) 1 both}
a.i2m-kaart-overzicht__kop:is(:hover,:focus-visible) .i2m-icoon--grafiek .duo-accent,
.i2m-icoon--grafiek:is(.i2m-speel,.i2m-zichtbaar) .duo-accent{transform-origin:50% 100%;animation:i2m-groei calc(560ms * var(--i2m-duur)) cubic-bezier(.22,1,.36,1) 1 both;animation-delay:calc(180ms * var(--i2m-duur))}

/* meerkleurig: .i2m-kleur op een ouder (of .i2m-icoon--kleur op de svg).
   Elk icoon krijgt zijn eigen accent uit het palet; voeg .i2m-op-donker toe
   voor de lichtere tinten op #16293D.
   teal #1F7A8C / #4FB3C4 Â· amber #C2703D / #E39B6A Â· groen #3F7D4E / #74B98A Â· rood #B0413E / #E08A80 */
.i2m-kleur .duo-vulling,.i2m-icoon--kleur .duo-vulling{--i2m-vlak:.3;fill:var(--i2m-accent);opacity:var(--i2m-vlak)}
.i2m-kleur .duo-accent,.i2m-icoon--kleur .duo-accent{fill:var(--i2m-accent)}
.i2m-op-donker .duo-vulling{--i2m-vlak:.42}
.i2m-kleur .duo-teken,.i2m-kleur .duo-puls,.i2m-icoon--kleur .duo-teken,.i2m-icoon--kleur .duo-puls{stroke:var(--i2m-accent)}
.i2m-kleur .i2m-icoon--telefoon,.i2m-icoon--kleur.i2m-icoon--telefoon{--i2m-accent:#1F7A8C}
.i2m-kleur .i2m-icoon--envelop,.i2m-icoon--kleur.i2m-icoon--envelop{--i2m-accent:#1F7A8C}
.i2m-kleur .i2m-icoon--zegel-vink,.i2m-icoon--kleur.i2m-icoon--zegel-vink{--i2m-accent:#3F7D4E}
.i2m-kleur .i2m-icoon--zegel,.i2m-icoon--kleur.i2m-icoon--zegel{--i2m-accent:#3F7D4E}
.i2m-kleur .i2m-icoon--schild-vink,.i2m-icoon--kleur.i2m-icoon--schild-vink{--i2m-accent:#3F7D4E}
.i2m-kleur .i2m-icoon--headset,.i2m-icoon--kleur.i2m-icoon--headset{--i2m-accent:#1F7A8C}
.i2m-kleur .i2m-icoon--wolk,.i2m-icoon--kleur.i2m-icoon--wolk{--i2m-accent:#1F7A8C}
.i2m-kleur .i2m-icoon--netwerk,.i2m-icoon--kleur.i2m-icoon--netwerk{--i2m-accent:#1F7A8C}
.i2m-kleur .i2m-icoon--stethoscoop,.i2m-icoon--kleur.i2m-icoon--stethoscoop{--i2m-accent:#B0413E}
.i2m-kleur .i2m-icoon--koffer,.i2m-icoon--kleur.i2m-icoon--koffer{--i2m-accent:#C2703D}
.i2m-kleur .i2m-icoon--vrachtwagen,.i2m-icoon--kleur.i2m-icoon--vrachtwagen{--i2m-accent:#B0413E}
.i2m-kleur .i2m-icoon--chip,.i2m-icoon--kleur.i2m-icoon--chip{--i2m-accent:#C2703D}
.i2m-kleur .i2m-icoon--stroom,.i2m-icoon--kleur.i2m-icoon--stroom{--i2m-accent:#3F7D4E}
.i2m-kleur .i2m-icoon--hartslag,.i2m-icoon--kleur.i2m-icoon--hartslag{--i2m-accent:#B0413E}
.i2m-kleur .i2m-icoon--doel,.i2m-icoon--kleur.i2m-icoon--doel{--i2m-accent:#B0413E}
.i2m-kleur .i2m-icoon--timer,.i2m-icoon--kleur.i2m-icoon--timer{--i2m-accent:#C2703D}
.i2m-kleur .i2m-icoon--klok-terug,.i2m-icoon--kleur.i2m-icoon--klok-terug{--i2m-accent:#C2703D}
.i2m-kleur .i2m-icoon--ster,.i2m-icoon--kleur.i2m-icoon--ster{--i2m-accent:#C2703D}
.i2m-kleur .i2m-icoon--meter,.i2m-icoon--kleur.i2m-icoon--meter{--i2m-accent:#C2703D}
.i2m-kleur .i2m-icoon--mensen,.i2m-icoon--kleur.i2m-icoon--mensen{--i2m-accent:#3F7D4E}
.i2m-kleur .i2m-icoon--grafiek,.i2m-icoon--kleur.i2m-icoon--grafiek{--i2m-accent:#1F7A8C}
.i2m-kleur.i2m-op-donker .i2m-icoon--telefoon,.i2m-icoon--kleur.i2m-op-donker.i2m-icoon--telefoon{--i2m-accent:#4FB3C4}
.i2m-kleur.i2m-op-donker .i2m-icoon--envelop,.i2m-icoon--kleur.i2m-op-donker.i2m-icoon--envelop{--i2m-accent:#4FB3C4}
.i2m-kleur.i2m-op-donker .i2m-icoon--zegel-vink,.i2m-icoon--kleur.i2m-op-donker.i2m-icoon--zegel-vink{--i2m-accent:#74B98A}
.i2m-kleur.i2m-op-donker .i2m-icoon--zegel,.i2m-icoon--kleur.i2m-op-donker.i2m-icoon--zegel{--i2m-accent:#74B98A}
.i2m-kleur.i2m-op-donker .i2m-icoon--schild-vink,.i2m-icoon--kleur.i2m-op-donker.i2m-icoon--schild-vink{--i2m-accent:#74B98A}
.i2m-kleur.i2m-op-donker .i2m-icoon--headset,.i2m-icoon--kleur.i2m-op-donker.i2m-icoon--headset{--i2m-accent:#4FB3C4}
.i2m-kleur.i2m-op-donker .i2m-icoon--wolk,.i2m-icoon--kleur.i2m-op-donker.i2m-icoon--wolk{--i2m-accent:#4FB3C4}
.i2m-kleur.i2m-op-donker .i2m-icoon--netwerk,.i2m-icoon--kleur.i2m-op-donker.i2m-icoon--netwerk{--i2m-accent:#4FB3C4}
.i2m-kleur.i2m-op-donker .i2m-icoon--stethoscoop,.i2m-icoon--kleur.i2m-op-donker.i2m-icoon--stethoscoop{--i2m-accent:#E08A80}
.i2m-kleur.i2m-op-donker .i2m-icoon--koffer,.i2m-icoon--kleur.i2m-op-donker.i2m-icoon--koffer{--i2m-accent:#E39B6A}
.i2m-kleur.i2m-op-donker .i2m-icoon--vrachtwagen,.i2m-icoon--kleur.i2m-op-donker.i2m-icoon--vrachtwagen{--i2m-accent:#E08A80}
.i2m-kleur.i2m-op-donker .i2m-icoon--chip,.i2m-icoon--kleur.i2m-op-donker.i2m-icoon--chip{--i2m-accent:#E39B6A}
.i2m-kleur.i2m-op-donker .i2m-icoon--stroom,.i2m-icoon--kleur.i2m-op-donker.i2m-icoon--stroom{--i2m-accent:#74B98A}
.i2m-kleur.i2m-op-donker .i2m-icoon--hartslag,.i2m-icoon--kleur.i2m-op-donker.i2m-icoon--hartslag{--i2m-accent:#E08A80}
.i2m-kleur.i2m-op-donker .i2m-icoon--doel,.i2m-icoon--kleur.i2m-op-donker.i2m-icoon--doel{--i2m-accent:#E08A80}
.i2m-kleur.i2m-op-donker .i2m-icoon--timer,.i2m-icoon--kleur.i2m-op-donker.i2m-icoon--timer{--i2m-accent:#E39B6A}
.i2m-kleur.i2m-op-donker .i2m-icoon--klok-terug,.i2m-icoon--kleur.i2m-op-donker.i2m-icoon--klok-terug{--i2m-accent:#E39B6A}
.i2m-kleur.i2m-op-donker .i2m-icoon--ster,.i2m-icoon--kleur.i2m-op-donker.i2m-icoon--ster{--i2m-accent:#E39B6A}
.i2m-kleur.i2m-op-donker .i2m-icoon--meter,.i2m-icoon--kleur.i2m-op-donker.i2m-icoon--meter{--i2m-accent:#E39B6A}
.i2m-kleur.i2m-op-donker .i2m-icoon--mensen,.i2m-icoon--kleur.i2m-op-donker.i2m-icoon--mensen{--i2m-accent:#74B98A}
.i2m-kleur.i2m-op-donker .i2m-icoon--grafiek,.i2m-icoon--kleur.i2m-op-donker.i2m-icoon--grafiek{--i2m-accent:#4FB3C4}

@media (prefers-reduced-motion:reduce){
  .i2m-icoon path{animation:none!important;transform:none!important}
  .i2m-icoon .duo-vulling{opacity:var(--i2m-vlak)}
  .i2m-icoon .duo-teken{stroke-dashoffset:0}
  .i2m-icoon .duo-puls{stroke-dashoffset:14}
}