.map {
    position: relative;
}
::-webkit-scrollbar {
width: 0;
background: #000;
}
#interface {
    width: 100%;
}
svg path {
    fill:#333;
    transition: 0.3s;
}
svg path.active {
    fill:#9C1C1E!important;
}
button.clicked {
    background-color: #FF0004;
    border-radius: 20px;
    padding: 6px 10px;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: bold;
    position: absolute;
    z-index: 2;
    border:none;
    transition: 0.3s;
    display: flex;
    flex-direction: row;
    align-items: center;
}
svg path.clicked {
    cursor: pointer;
    fill:#222;
}
svg path:hover {
    fill:#444;
    transition: 0.3s;
}
#map{
    width: 600px;
}
.btn {
    background-color: #FF0004;
    border-radius: 20px;
    padding: 6px 10px;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: bold;
    position: absolute;
    z-index: 0;
    border:none;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    flex-direction: row;
    align-items: center;
    pointer-events: none
}
.btn:hover {
    background-color: #B50003;
}
input[type=text] {
    padding: 0.8rem;
    border-radius: 2rem;
    width: 50%;
    border: solid 1px #687b84;
    outline: solid 0 #687b84;
    transition: 0.3s;
    transition-timing-function: ease;
    background-image: url("../img/icons/search.svg");
    background-repeat: no-repeat;
    background-position: calc(100% - 12px) center;
    display: none;
}
input[type=text]:after{
    content: url("../img/icons/search.svg");
    width: 200px;
    height: 200px;
    display:block; 
}
input[type=text]:focus,
input[type=text]:hover {
    border-radius: 0.2rem;
    background-position: calc(100% + 30px) center;
}
.search {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.maphh {
    margin-top: 103px;
    margin-left: 265px;
    position: absolute;
}
#locbtnlist img{
    width: 20px;
    pointer-events: none;
}
.mapmv {
    margin-top: 116px;
    margin-left: 400px;
}
.mapns {
    margin-top: 215px;
    margin-left: 235px;
}
.mapbe {
    margin-top: 213px;
    margin-left: 474px;
    position: absolute;
} 
.mapnw {
    margin-top: 350px;
    margin-left: 92px;
}
.mapsan {
    margin-top: 298px;
    margin-left: 354px;
}
.mapsa {
    margin-top: 391px;
    margin-left: 457px;
}
.mapth {
    margin-top: 412px;
    margin-left: 316px;
}
 .mapba{
    margin-top: 609px;
    margin-left: 359px;
}
.mapbw{
    margin-top: 645px;
    margin-left: 186px;
}
.mapmv:hover .mv {
    fill:#1a1a1a;
}
ul#loclist {
    display: flex;
    flex-direction: column;
    height: 750px;
    overflow-y: auto;
    scrollbar-width: none;
}
ul#loclist li{
    padding: 1rem;
    color: #FFFFFF;
}
ul#loclist li ul.location{
    list-style: none;
}
ul#loclist li ul.location li{
    background-color: rgba(255,255,255,0.00);
    border-radius: 1rem;
    border: solid 1px #D3D3D3;
    transition: 0.3s;
    padding: 1rem;
    backdrop-filter: blur(6px);
    color: #687b84;
}
ul#loclist li ul.location li:hover {
    background-color: rgba(235,235,235,0.70);
}
.listheading {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    color: #687b84;
    margin: 1rem 0;
}
.anzahl {
    padding: 5px 10px;
    background-color: #FF0004;
    color: #fff;
    border-radius: 20px;
}
#mapui{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap:3rem;
}
.filterDiv {
    display: none;
}
.land {
    font-size: 1.2rem;
    font-weight: bold;
}
.show {
    display: block;
    animation-name: slidein;
    animation-duration: 0.3s;
}
.locitem {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    margin-bottom: 1rem;
}
.locitem a {
    width: 250px;
    height: fit-content;
}
.locitem .imglink{
    height: 72px;
    width: 250px;
    margin: auto 0;
}
.locitem .imglink img{
    max-height: 72px;
    max-width: 250px;
}
.locitem .limain {
    font-weight: bold;
    font-size: 1.4rem;
}
div.liinfo {
    display: flex;
    flex-direction: column;
}
.locitem a {
}
li.locitem ul li {
    padding: 0!important;
    margin: 0;
}
@keyframes slidein {
  from {
    margin-top: -20px;
    opacity: 0;
  }
  to {
    margin-top: 0;
    opacity: 100;
  }
}
@media screen and (max-width: 1500px) {
    .locitem a {width: 100%}
}
@media screen and (max-width: 1300px) {
        #mapui{
        flex-direction: column;
        align-items: center;
    }
    ul#loclist {
        height: 100%;
        overflow-y: auto;
    }
        article.locations {
        background-image: none;
    }
}
@media screen and (max-width: 640px) {
    
    .locitem{flex-direction: column-reverse;align-items: flex-start;gap:1rem;}
    
    .locitem img{margin: auto; width: 210px;}
    
    #map{display: none}
    
    .search{flex-direction: column}
    
    .locitem a.imglink{display: flex; width: 100%; height: auto;}
    
    input[type=text]{margin: 0.4rem 0; width: 90%;display: block;}
}
@media screen and (min-width: 2000px) {
    article{border-radius: 25px;}
}