/* Breon Logo-animatie: drie logo's schuiven samen → "onderwijsgroep" en "Breon" schuiven vanuit het midden uit elkaar (loop, 8s) */
.breon-merge{position:relative;width:100%;max-width:var(--bm-max,520px);margin-left:auto;aspect-ratio:4/3;justify-self:end;--T:var(--bm-t,8s);--e:cubic-bezier(.65,0,.35,1);--o:cubic-bezier(.16,1,.3,1)}
.bm-lg{position:absolute;left:50%;top:50%;width:30%;height:20%;margin:-10% 0 0 -15%;background:#fff;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(47,43,82,.08);opacity:0;animation:bmLogo var(--T) var(--e) infinite;animation-delay:var(--dl)}
.bm-lg img{max-width:none!important;margin:0!important;position:absolute;left:14px;top:12px;width:calc(100% - 28px);height:calc(100% - 24px);object-fit:contain}
.breon-merge .m1{--x:-108%;--dl:0s}.breon-merge .m2{--x:0%;--dl:.08s}.breon-merge .m3{--x:108%;--dl:.16s}
.bm-logo{position:absolute;left:6%;top:50%;width:88%;height:auto;transform:translateY(-50%);overflow:visible}
.bm-og{opacity:0;animation:bmOg var(--T) var(--o) infinite}
.bm-br{opacity:0;animation:bmBr var(--T) var(--o) infinite}
@keyframes bmLogo{
0%{transform:translate(var(--x),10px);opacity:0}
7%,22%{transform:translate(var(--x),0);opacity:1}
31%{transform:translate(0,0) scale(.9);opacity:0}
100%{transform:translate(0,0);opacity:0}}
@keyframes bmOg{0%,29%{opacity:0;transform:translateX(120px)}48%,86%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes bmBr{0%,29%{opacity:0;transform:translateX(-140px)}48%,86%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@media (prefers-reduced-motion:reduce){.bm-lg{display:none}.bm-og,.bm-br{animation:none;opacity:1}}
.breon-merge.align-left{margin-left:0;margin-right:auto}
.breon-merge.align-center{margin-left:auto;margin-right:auto}
.breon-merge *{box-sizing:border-box}
@media (max-width:1024px){.breon-merge{margin:0 auto;max-width:min(var(--bm-max,520px),420px)}}
.bm-name{position:absolute;inset:0;display:grid;place-items:center;padding:0 10px;font-size:13px;line-height:1.2;text-align:center;color:#2F2B52}
