body {
}
.ah-buehne {
    background-image: linear-gradient(to bottom,rgba(0, 0,0, 0.7),rgba(0, 0,0, 0.3)),url('/img/hotdeals/hotdeals-header.webp');
 height:300px!important; 
 background-position:bottom;
}


    .vehicles {
        position: relative;
       /* max-width: 1920px;*/
    }

    .hotdeals-badge {
        position: absolute;
        z-index: 7;
        top: -130px;
        right: 40px;
    }

        .hotdeals-badge img {
            width: 200px;
        }



.hotdeals-badge-bottom {
}
    .hotdeals-badge-bottom img {
        width: 200px;
    }

    .hotdeals-container {
        margin-bottom: 100px;
        padding-top: 80px;
/*        max-width: 1920px;*/
    }


    .hotdeals-text {
        position: relative;
/*        max-width: 1920px;*/
        margin: 0 auto;
        margin-bottom: 4rem;
    }

        .hotdeals-text p {
            margin-bottom: 1rem;
            line-height: 1.6;
        }



    .views {
        padding: 3px;
        background-color: #efefef;
        font-family: BMWregular;
        font-size: 10px;
        font-weight: 400;
        line-height: 16px;
        letter-spacing: 0.1em;
        text-align: center;
        padding: 4px 10px 4px 10px;
        border-radius: 4px !important;
    }



    .vehicle-card {
        display: flex;
        width: 100%;
      /*  max-width: 1920px;*/
        min-height: 210px;
        margin: 0 auto 18px auto;
        background: white;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    }
    /* Bild */

    .vehicle-image {
        flex: 0 0 30%;
        min-height: 210px;
        position: relative;
    }

        .vehicle-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

    .vehicle-badge {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 10;
        width: 130px;
        height: 52px;
    }
    /* rechter Bereich */

    .vehicle-content {
        position: relative;
        flex: 1;
        padding: 14px 20px 12px 22px;
    }
    /* Titel */

    .vehicle-title {
        font-size: 18px;
        color: #222;
    }

    .vehicle-availability {
        font-weight: 600;
    }
    /* Beschreibung */

    .vehicle-description {
        margin-top: 3px;
        font-size: 16px;
        line-height: 1.4;
        color: #444;
    }
    /* Preise */

    .vehicle-price-row {
        display: flex;
        justify-content: space-between;
        /*  align-items: center;*/
        margin-top: 14px;
        padding-top: 20px;
        border-top: 1px solid #ddd;
    }

    .vehicle-price {
        font-size: 14px;
    }

        .vehicle-price strong {
            font-size: 18px;
            margin-left: 4px;
        }

    .vehicle-discount, .vehicle-leasing-highlight {
        display: inline-block;
        margin-top: 3px;
        padding: 2px 5px;
        background: #fff200;
        font-size: 18px;
    }
    /* Leasing */

    .vehicle-leasing {
        text-align: left;
    }

        .vehicle-leasing small {
            display: block;
            font-size: 14px;
            color: #555;
        }

        .vehicle-leasing strong {
            /* display: block;*/
            font-size: 20px;
        }
    /* UVP */

    .vehicle-uvp {
        margin-top: 5px;
        font-size: 14px;
        color: #444;
    }



    .vehicle-bottom-line {
        padding-top: 20px;
        margin-top: 10px;
        border-top: 1px solid #ddd;
    }
    /* Verbrauch */

    .vehicle-consumption {
        /*  margin-top: 10px;
    padding-top: 14px;*/
        /*    border-top: 1px solid #ddd;*/
        font-size: 14px;
        /*    line-height: 2;*/
        color: #555;
    }
    /* Button */

    .vehicle-action {
        right: 20px;
    }

.vehicle-button, .vehicle-button:visited {
    display: inline-block;
    padding: 15px 25px;
    border-radius: 4px;
    background: #080050;
    color: white;
    font-size: 12px;
    font-weight: 400;
    text-decoration: none;
    text-align: center;
    width: 100%;
    white-space: nowrap;
}

        .vehicle-button:hover {
            background: #120080;
            color: white;
        }

    .vehicle-info-sticky {
        position: sticky;
        top: 0;
    }

    @media (max-width: 991px) {
        .vehicle-info-sticky {
            position: static;
        }
    }

    .more-deals {
        padding: 50px;
        background-image: linear-gradient(to bottom,rgba(0, 0,0, 0.7),rgba(0, 0,0, 0.0)),url('/img/hotdeals/more-deals.webp');
        background-size: cover;
         min-height: 460px;
        color: white;
        border-radius: 20px;
        vertical-align: middle;
        margin-top:150px;
    }

        .more-deals .btn {
            background-color: transparent !important;
            border: 1px solid white !important;
            color: white;
            text-transform: uppercase;
            padding: 14px 24px;
        }

            .more-deals .btn:hover,
            .more-deals .btn:focus,
            .more-deals .btn:active {
                background-color: white !important;
                border: 1px solid white !important;
                color: black !important;
            }


    .marker {
        position: relative;
        display: inline-block;
        font-weight: 600;
        white-space: nowrap;
        z-index: 0;
    }

        .marker::before {
            content: "";
            position: absolute;
            z-index: -1;
            left: -6px;
            right: -5px;
            top: 48%;
            height: 72%;
            background: #ffed3b;
            transform: rotate(-1deg) skewX(-7deg);
            border-radius: 2px 5px 3px 1px;
        }
    /* Für den Leasingfaktor 0,41 */
    .marker-factor::before {
        left: -5px;
        right: -3px;
        top: 45%;
        height: 75%;
        transform: rotate(-4deg) skewX(-9deg);
    }
    /* Für Prozentwerte wie 2,44 % */
    .marker-percent::before {
        left: -7px;
        right: -6px;
        top: 50%;
        height: 65%;
        transform: rotate(-2deg) skewX(-6deg);
    }

    .marker-white, .marker-white::before {
        background: #fff !important;
    }
.vehicle-leasing small {
    margin-top: 6px;
}
@media (min-width: 768px) {
    .hotdeals-badge-bottom {
        text-align: right;
        position: relative;
        right: 40px;
        margin-top: 50px;
        margin-bottom: 50px;
    }

        .hotdeals-badge-bottom img {
            width: 280px;
        }



}




    @media (min-width: 992px) {
        .ah-buehne {
            height: 700px !important;
            background-position: bottom;
        }

            .ah-buehne h3 {
                line-height: 38px;
            }
        .vehicle-leasing small {
            margin-top: 2px;
        }

        .hotdeals-container {
            margin-bottom: 100px;
            padding-top: 65px;
        }

        .hotdeals-badge {
            position: absolute;
            z-index: 7;
            top: -140px;
            right: 60px;
        }

            .hotdeals-badge img {
                width: 280px;
            }

        .vehicle-image {
            flex: 0 0 32%;
        }


        .hotdeals-badge-bottom img {
            width: 380px;
        }


        .vehicle-button, .vehicle-button:visited {
            width: initial;
        }

        .vehicle-leasing {
            text-align: right;
        }

            .vehicle-leasing small {
                display: inline-block;
            }

        .hotdeals-text p {
            margin-bottom: 1rem;
            line-height: 1.6
        }
    }

    @media all and (min-width: 2400px) {
        .vehicle-image {
            flex: 0 0 24%;
        }
    }