/* Monteur-uitleg (De Vries). Kleuren en letter van de site; ronde hoeken 16/10 px zoals afgesproken. */
.mu{position:fixed;inset:0;z-index:99990;font-family:'Archivo','Segoe UI',Arial,sans-serif;color:#1F3A55}
.mu[hidden]{display:none}
.mu__waas{position:absolute;inset:0;background:rgba(16,30,45,.30);opacity:0;transition:opacity .25s}
.mu.is-open .mu__waas{opacity:1}
.mu__plek{position:absolute;right:28px;bottom:0;display:flex;align-items:flex-end;max-width:min(760px,calc(100vw - 32px))}
.mu__monteur{width:auto;height:min(46vh,420px);transform:translateY(110%);transition:transform .45s cubic-bezier(.2,.9,.25,1.12);filter:drop-shadow(0 18px 24px rgba(22,41,60,.25));flex:none}
.mu.is-open .mu__monteur{transform:translateY(6%)}
.mu__ballon{position:relative;margin:0 0 min(30vh,250px) -16px;background:#fff;border-radius:16px;padding:22px 24px 18px;max-width:460px;max-height:70vh;overflow:auto;box-shadow:0 20px 44px rgba(22,41,60,.25);opacity:0;transform:translateY(16px) scale(.96);transform-origin:left bottom;transition:opacity .25s .22s,transform .35s .22s}
.mu.is-open .mu__ballon{opacity:1;transform:none}
.mu__ballon::before{content:'';position:absolute;left:-10px;bottom:34px;width:22px;height:22px;background:#fff;transform:rotate(45deg);border-radius:4px}
.mu__wie{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#406992;font-weight:800;margin:0 36px 6px 0}
.mu__tekst{font-size:18px;line-height:1.5;font-weight:500}
.mu__tekst svg{display:block;max-width:100%;height:auto;margin-top:10px}
.mu__w{opacity:0;transition:opacity .2s}
.mu.is-open .mu__w{opacity:1}
.mu__w.is-nu{background:#FFF1C9;border-radius:4px;box-shadow:0 0 0 2px #FFF1C9}
.mu__knoppen{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.mu__knop{font:inherit;font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase;border-radius:10px;padding:12px 16px;border:0;cursor:pointer}
.mu__knop--geel{background:#F7B500;color:#1F3A55}
.mu__knop--licht{background:#EEF3F8;color:#1F3A55}
.mu__knop:focus-visible,.mu__dicht:focus-visible{outline:3px solid #F7B500;outline-offset:2px}
.mu__dicht{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:0;background:#EEF3F8;color:#1F3A55;font-size:20px;line-height:1;cursor:pointer}
.mu__video{display:none;margin-top:14px;width:100%;border-radius:12px;background:#000}
.mu__video.is-zien{display:block}
/* i-knopje dat de laag zelf toevoegt (toesteltegels en plekken zonder i) */
.mu-i{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-left:8px;border-radius:50%;border:2px solid #406992;color:#406992;font:700 13px/1 'Archivo',sans-serif;cursor:pointer;vertical-align:2px;background:#fff}
.mu-i::before{content:'i'}
.mu-i:hover,.mu-i:focus-visible{background:#F7B500;border-color:#B87D00;color:#1F3A55;outline:none}
.mu-i--tegel{position:absolute;top:8px;right:8px;margin:0}
.dvb-tegel{position:relative}
@media (max-width:640px){
  .mu__plek{left:12px;right:12px;flex-direction:column;align-items:stretch}
  .mu__monteur{height:150px;align-self:flex-start;margin-left:6px;order:2;transform:translateY(120%)}
  .mu.is-open .mu__monteur{transform:translateY(0)}
  .mu__ballon{order:1;margin:0 0 -6px;max-width:none;max-height:60vh}
  .mu__ballon::before{left:40px;bottom:-10px}
}
@media (prefers-reduced-motion:reduce){.mu__monteur,.mu__ballon,.mu__waas,.mu__w{transition:none}}
/* Uitlegvideo's op de sitepagina's (videos.js versie 2, 12-10-2026): klein kaartje bij het onderwerp, video in een venster */
.mu-vrij{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.mu-vkaart{display:flex;align-items:center;gap:14px;text-align:left;font:inherit;background:#fff;border:1.5px solid #DDE4EB;border-radius:16px;padding:8px 18px 8px 8px;cursor:pointer;box-shadow:0 6px 16px rgba(22,41,60,.08);transition:box-shadow .2s,border-color .2s,transform .2s;max-width:100%}
.mu-vkaart:hover,.mu-vkaart:focus-visible{border-color:#F7B500;box-shadow:0 10px 24px rgba(22,41,60,.14);transform:translateY(-1px)}
.mu-vkaart__beeld{position:relative;flex:none;width:112px;border-radius:10px;overflow:hidden;background:#16293C}
.mu-vkaart__beeld img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.mu-vkaart__speel{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:#F7B500;box-shadow:0 4px 10px rgba(0,0,0,.25)}
.mu-vkaart__speel::after{content:'';position:absolute;left:13px;top:10px;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent #16293C}
.mu-vkaart__tekst{display:flex;flex-direction:column;line-height:1.25;color:#1F3A55;font-family:'Archivo','Segoe UI',Arial,sans-serif}
.mu-vkaart__tekst small{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#406992}
.mu-vkaart__tekst strong{font-size:16.5px}
.mu-vkaart__tekst span{font-size:14px;color:#55697C}
.oc-sectie--donker .mu-vkaart{border-color:rgba(255,255,255,.2)}
.mu-vlicht{position:fixed;inset:0;z-index:99995;display:flex;align-items:center;justify-content:center;padding:16px}
.mu-vlicht[hidden]{display:none}
.mu-vlicht__waas{position:absolute;inset:0;background:rgba(10,20,32,.72);opacity:0;transition:opacity .25s}
.mu-vlicht__doos{position:relative;width:min(1000px,100%);border-radius:16px;overflow:hidden;background:#16293C;box-shadow:0 30px 70px rgba(0,0,0,.45);opacity:0;transform:scale(.96);transition:opacity .25s,transform .25s}
.mu-vlicht.is-open .mu-vlicht__waas,.mu-vlicht.is-open .mu-vlicht__doos{opacity:1;transform:none}
.mu-vlicht__doos video{display:block;width:100%;aspect-ratio:16/9;background:#16293C}
.mu-vlicht__dicht{position:absolute;right:10px;top:10px;z-index:1;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#16293C;font-size:26px;line-height:1;cursor:pointer}
@media (prefers-reduced-motion:reduce){.mu-vkaart,.mu-vlicht__waas,.mu-vlicht__doos{transition:none}}