/* Leerlus iconen */
.lli{--c:#2F7FA8;--bg:rgba(47,127,168,.10);--ring:rgba(47,127,168,.28);
  display:inline-grid;place-items:center;flex:none;width:56px;height:56px;border-radius:16px;background:var(--bg);color:var(--c);
  box-shadow:inset 0 0 0 1.5px var(--ring);margin-bottom:6px;transition:transform .25s ease}
.lli svg{width:30px;height:30px;display:block;overflow:visible}
.lli-dark{--c:#E8A33D;--bg:rgba(232,163,61,.12);--ring:rgba(232,163,61,.38)}
.lli-sm{width:40px;height:40px;border-radius:12px;margin:0}
.lli-sm svg{width:22px;height:22px}

/* Accentstipje in de hoek, in de kleuren van de leerlus */
.lli::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:#E93C9C;transform:translate(19px,-19px);box-shadow:0 0 0 3px #fff;opacity:.9}
.lli{position:relative}
.lli-dark::after{background:#E8A33D;box-shadow:0 0 0 3px #0F3D34}
.lli-sm::after{width:7px;height:7px;transform:translate(14px,-14px)}
.lli-steps::after,.lli-phase-host .lli::after{display:none}

/* Stappen van de aanpak: icoon rechts in de rij */
.lli-step{position:relative;padding-right:64px!important}
.lli.lli-steps{position:absolute;right:0;top:50%;margin:-24px 0 0;width:48px;height:48px;border-radius:14px}
.lli.lli-steps svg{width:26px;height:26px}

/* Fases pilotjaar: icoon i.p.v. het stipje */
.lli-phase-host::before{display:none!important}
.lli-phase-host .lli{margin-bottom:10px}

/* Hover: klein wiebeltje */
@keyframes lli-wiggle{0%,100%{transform:rotate(0)}30%{transform:rotate(-8deg) scale(1.06)}60%{transform:rotate(6deg) scale(1.06)}}
.e-con:hover>.lli svg,li:hover>.lli svg,.card:hover>.lli svg,.lvl:hover>.lli svg{animation:lli-wiggle .6s ease}

/* Intekenen zodra in beeld */
.lli.lli-wait{opacity:0;transform:scale(.7)}
.lli.lli-anim{animation:lli-pop .5s cubic-bezier(.2,.9,.3,1.3) var(--d,0ms) both}
.lli.lli-anim svg *{stroke-dasharray:1;stroke-dashoffset:1;animation:lli-draw .9s ease calc(var(--d,0ms) + 150ms) forwards}
@keyframes lli-pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes lli-draw{to{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){
  .lli.lli-wait{opacity:1;transform:none}
  .lli.lli-anim,.lli.lli-anim svg *{animation:none;stroke-dashoffset:0}
  .lli svg{animation:none!important}
}