.locations-contents bui-divider {
    display: none;
}

:root {
    --brand: #eecd28; /*yellow*/
    --shape: #1c325e; /*blue*/
    --shape-hover: #eecd28; /*yellow*/
    --text: #ffffff;
}

/* Grund-styles til kortets shapes */
svg [data-location],
svg [data-island] {
    cursor: pointer;
    outline: none;
}

    svg [data-location]:hover,
    svg [data-island]:hover {
        fill: var(--brand);
    }

/* Hvis paths bruger .st0, får de default farver */
.st0 {
    fill: var(--shape);
    stroke: var(--brand);
    stroke-width: 1;
}

path.st1 {
    fill: #c6c6c6;
}

rect.st2 {
    fill: none;
}

/* Hover/aktiv-tilstande (scriptet toggler .hovering/.active) */
.hovering {
    fill: var(--shape-hover) !important;
}

    .hovering text {
        fill: var(--shape-hover);
    }

.active {
    fill: var(--brand) !important;
}

/* Labels hvis du tilføjer g[data-text] med <text> inde i */
g[data-text] text {
    fill: var(--text);
    font: 40px/45px 'Mukta Regular',sans-serif;
    font-weight: 400;
}

g[data-text].hovering text {
    fill: var(--shape);
}

g[data-text].active text {
    fill: var(--shape);
}

/* Fokusmarkering (WCAG) for tastaturbrugere */
[data-location]:focus-visible,
[data-island]:focus-visible {
    outline: 3px solid #000; /* høj kontrast */
    outline-offset: 2px;
}

/* Layout omkring kortet + indhold */
.map-wrap {
    max-width: 1100px;
    margin: 24px auto;
}

.locations-contents {
    margin-top: 20px;
    display: grid;
    gap: 12px;
}

.location-content {
    display: none;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
}

    .location-content.active {
        display: block;
    }

    .location-content span.big-bold-text {
        color: var(--shape);
        font-size: 24px;
        line-height: 24px;
        font-family: 'Mukta Bold', sans-serif;
    }