/* Eén adreskaart in publieke thema’s en beheer; hoogte komt uit de gebruiksplek. */
.cms-google-map {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 0;
    border-radius: var(--adm-radius-md, var(--portal-radius-card, var(--panel-radius, 12px)));
    margin-block: var(--adm-space-3, var(--sp-3, 12px));
}

/* De meldingenkaart naast een lijst: Fixi en 112 (shared/js/meldingenkaart-paneel.js, C601). Op een breed scherm een
   kolom die meeloopt, op de telefoon een scherm achter een knop. Kleuren zet de pagina: --mk-lijn, --mk-vlak,
   --mk-vlak-zacht en --mk-tekst. */
.mk-frame { display: block; width: 100%; height: 100%; border: 0; }
.mk-pane { display: none; }
html.mk-scherm-open { overflow: hidden; }
@media (min-width: 1025px) {
    .mk-body.has-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 40%); gap: 20px; align-items: start; }
    .mk-body.has-map > .mk-pane { display: block; position: sticky; top: calc(var(--site-header-h, 72px) + 16px); }
    .mk-pane[hidden] { display: none !important; }
    .mk-pane .mk-slot {
        height: min(680px, calc(100dvh - var(--site-header-h, 72px) - 96px));
        min-height: 360px;
        overflow: hidden;
        border: 1px solid var(--mk-lijn, #d9dee4);
        border-radius: 12px;
        background: var(--mk-vlak-zacht, #eef1f4);
    }
}
@media (max-width: 1024px) {
    .mk-sheet { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--mk-vlak, #fff); color: var(--mk-tekst, inherit); }
    .mk-sheet[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
    .mk-sheet::backdrop { background: rgb(12 24 30 / .68); }
    .mk-sheet .mk-slot { min-height: 0; }
}