/*
|--------------------------------------------------------------------------
| Grundlayout
|--------------------------------------------------------------------------
*/


#map {

    width:100%;

    height:500px;

    border:1px solid #dcdcdc;

    border-radius:8px;

    margin-bottom:50px;

    box-shadow:
    0 2px 10px rgba(0,0,0,0.2);

}





/*
|--------------------------------------------------------------------------
| Suchleiste
|--------------------------------------------------------------------------
*/


#filterContainer {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    position:relative;

    width:100%;

    margin:0 auto 15px auto;

    z-index:10;

    background:transparent;

    padding:10px 0;

}





/*
|--------------------------------------------------------------------------
| PLZ Eingabe
|--------------------------------------------------------------------------
*/


#plzFilter {


    height:42px;


    padding:.4em 1em;


    width:30%;


    text-align:center;


    box-sizing:border-box;


    border:3px solid #5f849e;


    border-radius:12px;


    font-size:14px;
	
	margin-top:16px;


    outline:none;


}





#plzFilter:focus {


    border-color:#496b82;


}





/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/


#filterContainer button {


    background-color:#5f849e;


    color:white;


    border:2px solid white;


    padding:.4em 2em;


    border-radius:12px;


    cursor:pointer;


    font-weight:bold;


    white-space:nowrap;


    transition:
    background-color .2s ease,
    transform .2s ease;


}





#filterContainer button:hover {


    background-color:#496b82;


    transform:
    translateY(-1px);


}





/*
|--------------------------------------------------------------------------
| Mobile Ansicht
|--------------------------------------------------------------------------
*/


@media(max-width:600px){



    #filterContainer {


        width:
        calc(100% - 20px);


        flex-wrap:wrap;


        justify-content:center;


    }





    #plzFilter {


        width:100%;


    }





    #filterContainer button {


        flex:1;


    }


}





/*
|--------------------------------------------------------------------------
| MarkerCluster eigene Farbe
|--------------------------------------------------------------------------
*/


.marker-cluster {


    background:
    rgba(95,132,158,0.35)
    !important;


}





.marker-cluster div {


    background:
    #5f849e
    !important;


    color:white
    !important;


    border-radius:50%
    !important;


}





.marker-cluster span {


    color:white
    !important;


    font-weight:bold;


}






/*
|--------------------------------------------------------------------------
| Leaflet Zoom Buttons korrigieren
|--------------------------------------------------------------------------
*/


.leaflet-control-zoom a {


    background-image:none !important;


    text-decoration:none !important;


    font-family:Arial,sans-serif !important;


    font-size:22px !important;


    line-height:30px !important;


    color:#5f849e !important;


}






.leaflet-control-zoom a:hover {


    background-color:#f4f4f4 !important;


    color:#5f849e !important;


}






/*
|--------------------------------------------------------------------------
| Theme Icons entfernen
|--------------------------------------------------------------------------
*/


.leaflet-control-zoom a::before,

.leaflet-control-zoom a::after {


    content:none !important;


    display:none !important;


}






/*
|--------------------------------------------------------------------------
| Zoom Container
|--------------------------------------------------------------------------
*/


.leaflet-control-zoom {


    border-radius:8px !important;


    overflow:hidden;


}






.leaflet-control-zoom a:first-child {


    border-radius:
    8px 8px 0 0
    !important;


}






.leaflet-control-zoom a:last-child {


    border-radius:
    0 0 8px 8px
    !important;


}