/* Multilayer runtime voor legacy canvassen en flexibele objectlagen. */
.bgMultilayerElement{position:relative;isolation:isolate;min-height:100vh;background-position:center;background-repeat:no-repeat;background-size:cover}
.bgMultilayerElement .ml-surface{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:-1;visibility:hidden;background:#d9e4dc}
.bgMultilayerElement .ml-surface[data-fill="transparent"]{background:transparent}
.bgMultilayerElement.ml-ready{background-image:none!important}
.bgMultilayerElement.ml-ready .ml-surface{visibility:visible}

/* Beeldlagen */
.bgMultilayerElement .ml-layer{position:absolute;inset:auto;max-width:none;max-height:none;object-fit:fill;pointer-events:none;will-change:transform}
.bgMultilayerElement .ml-layer-legacy{width:100%;height:100%}
.bgMultilayerElement .ml-layer-background{transform-origin:center}
.bgMultilayerElement .ml-layer-object{transform-origin:center}
.bgMultilayerElement .ml-backdrop{position:absolute;inset:-1.5rem;width:calc(100% + 3rem);height:calc(100% + 3rem);max-width:none;max-height:none;object-fit:cover;filter:blur(1rem) brightness(.7);transform:scale(1.04);pointer-events:none}
.bgMultilayerElement .ml-backdrop[hidden]{display:none}

/* CMS-bediening */
.bgMultilayerElement .ml-edit{position:absolute;left:auto;top:auto;right:10px;bottom:10px;font-size:12px;z-index:999;max-width:calc(100% - 20px)}
.bgMultilayerElement .ml-edit-notice{position:absolute;right:10px;bottom:80px;z-index:999;max-width:calc(100% - 20px);padding:12px;background:#fff;color:#893d2b;border:1px solid #893d2b;border-radius:5px;font:14px/1.5 Arial,sans-serif}
.bgMultilayerElement[data-ml-admin]:not([data-ml-config]){background:#edf1f0;border:1px dashed #b9cbc7}

/* In de beheerpreview kunnen objectlagen worden geselecteerd en versleept. */
.bgMultilayerElement.ml-editor-preview .ml-surface{pointer-events:auto}
.bgMultilayerElement.ml-editor-preview .ml-layer-object{pointer-events:auto;cursor:grab}
.bgMultilayerElement.ml-editor-preview .ml-layer-object:active{cursor:grabbing}

@media(prefers-reduced-motion:reduce){.bgMultilayerElement .ml-layer{will-change:auto}}