/* 
=======================================================================
Part of >> maps-old-behaviour << ######################################
=======================================================================
*/

/* MAPS

GENERAL
SVG MAPS
_FULL SCREEN VIEW
_PLACEHOLDER

*/

/* -----------------------------------------------------------------------
    GENERAL
/* ---------------------------------------------------------------------*/

.node--type-wfbb-howtofindus #main-wrapper,
.node--type-wfbb-howtofindus-overview #main-wrapper {
    margin-top: var(--header-height);
}

/* -----------------------------------------------------------------------
	SVG MAPS
/* ---------------------------------------------------------------------*/

#node-eep-map {
    display: grid;
    grid-template-columns: var(--grid-columns);
    grid-column-gap: var(--grid-gap);
    position: relative;
}

/* LEGENDE */

#node-eep-map .legend {
    grid-column: span 5;
    position: relative;
    box-shadow: 0 0 20px rgb(0 0 0 / 10%);
}

#node-eep-map .legend-wrapper {
    padding-left: var(--section-inner-side-padding);
    margin-top: calc(var(--section-inner-side-padding) / 1.5);
}

.node--type-eep-map {
    margin-top: 2rem;
    background: #f8f8f9;
    border-radius: var(--border-radius-extendet);
    overflow: hidden;
}

#node-eep-map #bg-layer {
    fill: transparent;
}

#node-eep-map .eep-map-wrapper {
    grid-column: 6/13;
    position: relative;
}

#node-eep-map .svg-eep-map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#node-eep-map circle {
    r: 5;
    transition: all ease-in-out .3s;
}

#node-eep-map circle:hover {
    r: 7;
}

#node-eep-map .legend-layers {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: 1.5rem;
}

#node-eep-map .legend-layers .legend-layer:before {
    display: inline-block;
    content: '';
    width: 14px;
    height: 14px;
    background: #cdcdcd;
    border-radius: 50%;
}

#node-eep-map .legend-layers .legend-layer {
    display: flex;
    align-items: center;
    gap: .75rem;
}

/* Map marker colors */

#node-eep-map .legend-layers .legend-layer.category-197:before,
#node-eep-map .legend-layers .legend-layer.category-200:before {
    background-color: var(--color-blue);
}

#node-eep-map circle.category-197,
#node-eep-map circle.category-200 {
    fill: var(--color-blue);
}

#node-eep-map .legend-layers .legend-layer.category-198:before,
#node-eep-map .legend-layers .legend-layer.category-201:before {
    background-color: var(--color-orange);
}

#node-eep-map circle.category-198,
#node-eep-map circle.category-201 {
    fill: var(--color-orange);
}

#node-eep-map .legend-layers .legend-layer.category-199:before,
#node-eep-map .legend-layers .legend-layer.category-202:before {
    background-color: var(--color-green-light);
}

#node-eep-map circle.category-199,
#node-eep-map circle.category-202 {
    fill: var(--color-green-light);
}



@media (max-width: 767px) {
    #node-eep-map .legend {
        position: absolute;
        top: 1rem;
        left: 1rem;
        z-index: 1;
        box-shadow: none;
        grid-column: unset;
    }

    #node-eep-map .legend-wrapper {
        padding: 0;
        margin: 0;
    }

    #node-eep-map .eep-map-wrapper {
        grid-column: span 12;
    }

    .legend-header {
        background-color: var(--color-primary);
        color: #fff;
        display: inline-block;
        border-radius: 6px;
    }

    .legend-header h3 {
        font-size: .75rem;
        line-height: 1;
        padding: .5rem 1.5rem .5rem .5rem;
        margin: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32.87' height='32.87' viewBox='0 0 32.87 32.87'%3E%3Cg id='Gruppe_365' data-name='Gruppe 365' transform='translate(7296.435 6938.435)'%3E%3Cline id='Linie_150' data-name='Linie 150' x2='19' y2='19' transform='translate(-7293.435 -6922) rotate(-45)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='4'/%3E%3Cline id='Linie_151' data-name='Linie 151' x2='19' y2='19' transform='translate(-7280 -6935.435) rotate(45)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='4'/%3E%3C/g%3E%3C/svg%3E%0A");
        background-size: .75rem;
        background-repeat: no-repeat;
        background-position: center right 0.5rem;
    }

    #node-eep-map .legend-wrapper.legend-open .legend-header h3 {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.87' height='34.87' viewBox='0 0 34.87 34.87'%3E%3Cline id='Linie_150' data-name='Linie 150' x2='19' y2='19' transform='translate(4 17.435) rotate(-45)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='4'/%3E%3C/svg%3E%0A");
    }

    #node-eep-map .legend-layers {
        background-color: #fff;
        padding: .75rem;
        border-radius: 6px;
        box-shadow: 0 5px 10px rgba(0,0,0,.15);
        margin-top: 4px;
    }

    #node-eep-map .legend-wrapper .legend-layers {
        display: none;
    }

    #node-eep-map .legend-wrapper.legend-open .legend-layers {
        display: block;
    }
}


/* Regionalcenter */

.map-container {
    display: grid;
    grid-template-columns: var(--grid-columns);
    grid-column-gap: var(--grid-gap);
    position: relative;
    margin-top: 2rem;
    background: #f8f8f9;
    border-radius: var(--border-radius-extendet);
    overflow: hidden;
}

.map-container .legends {
    grid-column: span 5;
    position: relative;
    box-shadow: 0 0 20px rgb(0 0 0 / 10%);
    padding-left: var(--section-inner-side-padding);
    padding-top: calc(var(--section-inner-side-padding) / 1.5);
    padding-bottom: calc(var(--section-inner-side-padding) / 1.5);
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.map-wrapper {
    grid-column: 6/13;
    position: relative;
}


.legend-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25em .5em;
    border-radius: var(--border-radius);
}

.legend-item .legend-marker {
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--color-grey-dark);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.legend-header {
    padding-left: .5em;
}

.legend-items {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: .125em;
}

.legend-item:is(:hover, :focus, .active) {
    background-color: var(--color-grey-light);
}

.legend-item a:hover {
    text-decoration: none;
}


.legend-item#color-1 .legend-marker {
    background-color: #d9d9d9;
}

.legend-item#color-2 .legend-marker {
    background-color: #a0a0a0;
}

.legend-item#color-3 .legend-marker {
    background-color: #d66161;
}

.legend-item#color-4 .legend-marker {
    background-color: #c81524;
}

.legend-item#color-5 .legend-marker {
    background-color: #ef9a9a;
}

g#Brandenburg_BG g.active path {
    fill: #7b7b7b;
}

g#Marker_Kreisfreie_Staedte .active circle {
    fill: var(--color-primary);
}

g#Marker_Kreisfreie_Staedte text {
    font-family: "Netto W01", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 700;
    cursor: pointer;
}

div#svg-map-legend-links g[class^="color"] {
    cursor: pointer;
}

g#Label_Landkreise_Brandenburg {
    pointer-events: none;
}

.legend-label a {
    color: var(--color-text);
    word-break: unset;
}




@media (max-width: 767px) {
    #svg-map-legend-links .legends {
        position: absolute;
        top: 1rem;
        left: 1rem;
        z-index: 1;
        box-shadow: none;
        gap: .5em;
        padding: 0;
        grid-column: unset;
    }

    #svg-map-legend-links :is(.legend-numbers, .legend-links) {
        padding: 0;
        margin: 0;
    }

    #svg-map-legend-links .map-wrapper {
        grid-column: span 12;
    }

    #svg-map-legend-links .legend-header {
        background-color: var(--color-primary);
        color: #fff;
        display: inline-block;
        border-radius: 6px;
    }

    #svg-map-legend-links .legend-header h3 {
        font-size: .75rem;
        line-height: 1;
        padding: .5rem 1.5rem .5rem .5rem;
        margin: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32.87' height='32.87' viewBox='0 0 32.87 32.87'%3E%3Cg id='Gruppe_365' data-name='Gruppe 365' transform='translate(7296.435 6938.435)'%3E%3Cline id='Linie_150' data-name='Linie 150' x2='19' y2='19' transform='translate(-7293.435 -6922) rotate(-45)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='4'/%3E%3Cline id='Linie_151' data-name='Linie 151' x2='19' y2='19' transform='translate(-7280 -6935.435) rotate(45)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='4'/%3E%3C/g%3E%3C/svg%3E%0A");
        background-size: .75rem;
        background-repeat: no-repeat;
        background-position: center right 0.5rem;
    }

    #svg-map-legend-links .legend-open .legend-header h3 {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.87' height='34.87' viewBox='0 0 34.87 34.87'%3E%3Cline id='Linie_150' data-name='Linie 150' x2='19' y2='19' transform='translate(4 17.435) rotate(-45)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='4'/%3E%3C/svg%3E%0A");
    }

    #svg-map-legend-links  .legend-items {
        background-color: #fff;
        padding: .75rem;
        border-radius: 6px;
        box-shadow: 0 5px 10px rgba(0,0,0,.15);
        margin-top: 4px;
    }

    #svg-map-legend-links  .legend-items {
        display: none;
    }

    #svg-map-legend-links  .legend-open .legend-items {
        display: block;
    }
}


.legend-numbers .legend-item .legend-marker:before {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    background-color: transparent;
    font-size: .875em;
    height: 100%;
    width: 100%;
    font-weight: 700;
}

.legend-numbers .legend-item:nth-child(1) .legend-marker:before {
    content: '1';
}

.legend-numbers .legend-item:nth-child(2) .legend-marker:before {
    content: '2';
}

.legend-numbers .legend-item:nth-child(3) .legend-marker:before {
    content: '3';
}

.legend-numbers .legend-item:nth-child(4) .legend-marker:before {
    content: '4';
}

.legend-numbers .legend-item:nth-child(5) .legend-marker:before {
    content: '5';
}