#google-maps-dealer {
    height: 430px;
    width: 100%;
}

.google-maps-wrapper {
    margin: 2rem 0;
    background:url(frankia-haendlersuche-preview.png) no-repeat;
    background-size:cover;
    position:relative;
}

.google-maps-hint {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:60%;
    height:60%;
    background:rgba(255,255,255,0.9);
    padding:30px;
}

.google-maps-hint * {
    flex:0 1 100%;
    max-width:100%;
}

#reset-dealer-fitler {
    border: none;
    padding: 8px 10px;
    text-decoration: underline;
}
#reset-dealer-fitler:hover,
#reset-dealer-fitler:active {
    background: #c8c8c8;
}

.frankia-dealer-search {
    .dealer.card-group-element-item {
        scroll-margin-top: 90px;
    }
    .dealer.card-group-element-item:not(.expanded) {
        .extended-middle,
        .extended-right {
            display: none;
        }
    }
    .dealer.card-group-element-item.expanded {
        width: 100%;

        .card-body {
            display: flex;
        }

        .extended-left,
        .extended-middle,
        .extended-right {
            width: 33%;
        }


    }
}

.dealer-filter {
    display: flex;
    flex-wrap: wrap;
    background: #f2f2f2;

    .filter-wrap.zip-city {
        position: relative;

        label span {
            position: absolute;
            top: 16px;
            left: 15px;
            transition: all 0.2s ease-out;
            pointer-events: none;
        }
        label:focus-within span,
        input[type="text"]:not(:placeholder-shown) ~ span {
            top: 5px;
            left: 10px;
            font-size: 12px;
            color: #333;
        }

    }

    h2 {
        width: 100%;
    }
    .filter-wrap {
        width: 100%;
        @media (min-width: 760px) {
            width: calc(33% - 50px);
            margin-right: 10px;
            margin-bottom: 30px;
        }

        label {width: 100%;}
        input {
            display: block;
            padding: 15px 10px;
            width: 100%;
        }
    }
    .filter-wrap.show-map {
        @media (min-width: 760px) {
            width: 110px;
        }
    }
    .filter-wrap.service {
        @media (min-width: 760px) {
            width: calc(100% - 230px);
        }
    }
    .filter-wrap:last-child {
        @media (min-width: 760px) {
            width: 210px;
        }
    }

    button.btn-drop-down,
    button.btn-filter {
        background: white;
        border: none;
    }

    button.btn-drop-down {
        width: 100%;
        display: block;
        padding: 5px 10px;
    }
    button.btn-drop-down:hover,
    button.btn-drop-down:active,
    button.btn-filter:hover,
    button.btn-filter:active {
        background: #c8c8c8;
    }
    button.btn-filter {
        margin-right: 35px;
        padding: 15px 35px;
        position: relative;
        transition: all .3s ease-in-out;
        min-width: 210px;
    }
    button.btn-filter span {
        position: relative;
        z-index: 1;
    }
    button.btn-filter::before {
        position: absolute;
        left: 0;
        top: calc(50% - 13px);
        display: block;
        width: 26px;
        height: 26px;
        content: ' ';
        background-color: var(--bs-primary);
        transition: all .3s ease-in-out;
    }
    li.filter-item.selected button.btn-filter {
        color: white;
    }
    li.filter-item.selected button::before {
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
    }


    ul.filter.dropdown {
        padding: 0;
        margin: 0;

        li.filter-item {
            /*display: none;*/
            cursor: pointer;
            max-height: 0;
            visibility: hidden;
            overflow: hidden;
            transition: all 0.3s ease-in-out;
            &.selected {
                /*display: block;*/
                max-height: 55px;
                visibility: visible;
            }
        }

        &.expanded {
            li.filter-item {
                /*display: block;*/
                max-height: 55px;
                visibility: visible;
            }
        }
    }

    .filter-wrap.service {

        ul.filter {
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            padding: 0;
            margin: 0;
        }
    }
}

.card {
    padding: 25px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.16);
    border-radius: 0;
    border:none;
    .card-body {
        padding:0;
        p {
            line-height:22px;
            margin-bottom:0;
        }
        .morelink {
            font-size:14px;
            font-weight:700;
        }
    }
}


.dealer .labelcat {
    &:first-of-type {
        margin-top:12px;
    }
    font-size:14px;
    display:block;
    position:relative;
    &:before {
        content:"◼";
        color:var(--bs-primary);
        display:inline-block;
        margin-right:6px;
        font-size:14px;
    }
}

.dealer h4 {
    line-height:1.2;
    margin-bottom:12px;
}


.btn-drop-down {
    min-height:55px;
}
.btn-drop-down svg {
    width:15px;
    height:15px;
    margin-left:5px;
}
.google-needed-hint {
    padding:0 20px;
}
.google-needed-hint p {
    margin-bottom:0;
    line-height:1.3;
}

@media screen and (max-width: 960px) {
    .extended-left, .extended-middle, .extended-right {
        flex:0 1 100%;
        max-width:100%;
        width:100%;
    }
    .google-needed-hint p {
        margin-bottom:15px;
    }
    .extended-middle {
        margin-top:20px;
    }
    .card-body {
        display: flex;
        flex-wrap: wrap;
    }
    .dealer-filter {
        padding:20px;
    }
    .google-needed-hint {
        padding: 20px 0 0 0;
    }
    .btn.list {
        width: 100%;
        margin-bottom: 20px;
    }
    ul.filter {
        width:100%;
    }
    .service ul.filter .filter-item {
        flex:0 1 100%;
        margin-bottom:10px;
    }
    button.btn-filter {
        width:100%;
    }
    .google-maps-hint {
        width:90%;
        height:auto;
    }
    .card-group-element {
        padding:0 20px;
    }
}

@media (min-width: 760px) {
    .frankia-dealer-search {
        width:90%;
        max-width:1320px;
        padding:0 20px;
        margin:0 auto;
    }
    .frankia-dealer-search .dealer-filter {padding:20px;}
}