.singlecar {
    flex:0 1 calc(33.333% - 40px);
    max-width:calc(33.333% - 40px);
    margin:20px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.36);
    background:var(--bs-white);
    padding:30px;
    position:relative;
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

.singlecar.onlytwo {
    flex:0 1 calc(50% - 40px);
    max-width:calc(50% - 40px);
    margin-top:60px;
}

.singlecar.lightgradient {
    box-shadow:none;
    background: rgb(255,255,255);
    background: -moz-linear-gradient(-90deg, rgba(255,255,255,1) 0%, rgba(139,126,130,0.15029761904761907) 100%);
    background: -webkit-linear-gradient(-90deg, rgba(255,255,255,1) 0%, rgba(139,126,130,0.15029761904761907) 100%);
    background: linear-gradient(-90deg, rgba(255,255,255,1) 0%, rgba(139,126,130,0.15029761904761907) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#8b7e82",GradientType=1);
}

.singlecar.active {
    order:1;
    opacity:1;
}

.singlecar.inactive {
    opacity: 0.3; /* Oder andere visuelle Darstellung für inaktive Fahrzeuge */
    pointer-events: none; /* Verhindert, dass auf inaktive Fahrzeuge geklickt werden kann */
    order:2;
}

.singlecar img {
    width:100%;
    height:auto;
}

.singlecar h3 {
    margin-bottom:0;
}

.singlecar h3 a {
    color:var(--bs-secondary);
    text-decoration:none;
    transition:all 0.3s ease-in-out;
}

.singlecar h3 a:hover {
    color:var(--bs-primary);
}

label.edition {
    position:absolute;
    top:15px;
    left:0;
    font-size:14px;
    line-height:1;
    letter-spacing:3px;
    color:var(--bs-white);
    text-transform:uppercase;
    padding:10px 12px 10px 30px;
    z-index:3;
}

label.construction {
    font-size:14px;
    font-family: 'Roboto', Arial, sans-serif;
    letter-spacing:1px;
    color:var(--bs-secondary);
    display:block;
    text-transform:uppercase;
}

.carimagewrap {
    position:relative;
    width:calc(100% + 60px);
    left:-30px;
    top:-30px;
}
.outside {
    position:relative;
    z-index:2;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}
.inside {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.carimagewrap:hover .outside {
    opacity: 0;
}

.carimagewrap:hover .inside {
    opacity: 1;
}

.outside:hover {
    opacity:0;
}

.carheader {
    margin-bottom:25px;
}

.carheader label.lightbg {
    font-size:13px;
    background:var(--bs-light);
    color:var(--bs-secondary);
    font-family: 'Roboto', Arial, sans-serif;
    padding:10px;
}

.cardata {
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
}

.singledata {
    flex:0 1 calc(50% - 40px);
    max-width:calc(50% - 40px);
}


.singledata span {
    font-size:24px;
    color:var(--bs-secondary);
    font-family: 'Roboto', Arial, sans-serif;
    font-weight:700;
    display:block;
    line-height:1.4;
}

.singledata label {
    font-size:13px;
    color:var(--bs-secondary);
    display:block;
    line-height:1.3;
}

.carfooter {
    display:flex;
    flex-wrap:wrap;
    margin-top:20px;
    justify-content:space-between;
    align-items:center;
}

.carbase {
    display:flex;
}

.carprice {
    display:flex;
    flex-wrap:wrap;
}



.carprice .priceinfo.active path {
    fill:var(--bs-primary);
}

.carprice .priceinfo:hover {
    transform:scale(1.05);
    cursor:pointer;
}

.carprice label {
    font-size:13px;
    color:var(--bs-secondary);
    display:block;
    width:100%;
}

.carprice span {
    font-size:24px;
    color:var(--bs-secondary);
    font-family: 'Roboto', Arial, sans-serif;
    font-weight:700;
    line-height:1.2;
    display:block;
}

.carbuttons {
    margin-top:25px;
}

.carbuttons .btn-default {
    margin-bottom:5px;
}

.carfilter {
    display:block;
    width:100%;
    margin:60px -20px 10px -20px;
}

.carfilter button {
    border:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    padding:0;
    display:inline-block;
    margin:0 20px;
    box-shadow:none;
    /*outline:none;*/
    color:var(--bs-secondary);
    letter-spacing:2px;
    font-size:14px;
    font-family: 'Roboto', Arial, sans-serif;
    font-weight:400;
    position:relative;
    text-transform:uppercase;
    background:none;
}

.carfilter span {
    display:inline-block;
}

.carfilter button.active {
    font-weight:700;
}

.carfilter button.active:after {
    content:"";
    width:100%;
    height:4px;
    background:var(--bs-primary);
    position:absolute;
    bottom:-3px;
    left:0;
    display:block;
}





@media screen and (max-width: 960px) {
    .section-wohnmobile {
        margin-top:20px;
    }
    .singlecar, .singlecar.onlytwo {
        flex:0 1 100%;
        max-width:100%;
        margin:10px 20px;
    }
    .carfilter button {
        display: block;
        margin: 10px 0;
        padding:10px 0;
        border-bottom:1px solid var(--bs-light);
        width:100%;
        text-align:left;
    }
    .carfilter span {
        display:none;
    }
    .singlecar {
        flex: 0 1 100%;
        max-width: 100%;
        margin: 10px 0;
        padding:20px;
    }
    .carimagewrap {
        position: relative;
        width: calc(100% + 40px);
        left: -20px;
        top: -20px;
        padding-top:20px;
    }
}