/* =========================================================
   ALPIN – VEHICLE CARDS
   Datei: 25-alpin-vehicles.css

   FINAL VERSION
   TYPOGRAFIE: lokale Archivo-Fonts aus ALPIN Core
========================================================= */


/* =========================================================
   01 | GESAMTER VEHICLE-BEREICH
========================================================= */

.alpin-vehicles {
    width: 100% !important;
    max-width: var(--alpin-max-width, 1600px) !important;

    margin: 0 auto !important;

    padding:
        32px
        var(--alpin-edge, 72px)
        0
        var(--alpin-edge, 72px) !important;

    box-sizing: border-box !important;

    background: #ffffff !important;
}


/* Elementor-Innencontainer vollständig öffnen */

.alpin-vehicles > .e-con-inner {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   02 | HAUPTÜBERSCHRIFT
========================================================= */

.alpin-vehicles-title {
    position: relative !important;

    width: 100% !important;

    margin:
        0
        0
        22px
        0 !important;

    padding:
        0
        0
        15px
        0 !important;

    text-align: center !important;
}


.alpin-vehicles-title .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;
}


.alpin-vehicles-title .elementor-heading-title {
    margin: 0 !important;
    padding: 0 !important;

    font-family:
        var(--alpin-font-display) !important;

    font-size: 38px !important;
    font-weight: 900 !important;

    line-height: 1 !important;

    letter-spacing: -.5px !important;

    text-transform: uppercase !important;
    text-align: center !important;

    color: #111111 !important;
}


/* =========================================================
   03 | ROTE LINIE UNTER ÜBERSCHRIFT
========================================================= */

.alpin-vehicles-title::after {
    content: "" !important;

    position: absolute !important;

    left: 50% !important;
    bottom: 0 !important;

    width: 44px !important;
    height: 3px !important;

    background:
        var(--alpin-red, #d40000) !important;

    transform:
        translateX(-50%) !important;
}


/* =========================================================
   04 | KARTEN-GRID
   VOLLE BREITE ZWISCHEN DEN 72PX AUSSENFLUCHTEN
========================================================= */

.alpin-vehicles-grid {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: stretch !important;
    justify-content: space-between !important;

    gap: 6px !important;

    box-sizing: border-box !important;
}


/* Elementor Inner Wrapper */

.alpin-vehicles-grid > .e-con-inner {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: stretch !important;
    justify-content: space-between !important;

    gap: 6px !important;

    box-sizing: border-box !important;
}


/* =========================================================
   05 | EINZELNE FAHRZEUGKARTE
========================================================= */

.alpin-vehicles-grid .alpin-vehicle {
    position: relative !important;

    flex: 1 1 0 !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 240px !important;
    min-height: 240px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: stretch !important;
    justify-content: flex-end !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    background-color: #111111 !important;

    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;

    border: 0 !important;

    border-radius: 2px !important;

    box-shadow:
        0 4px 12px
        rgba(0,0,0,.10) !important;

    cursor: pointer !important;

    transition:
        transform .24s ease,
        box-shadow .24s ease !important;
}


/* =========================================================
   06 | INNERER ELEMENTOR-WRAPPER DER KARTE
========================================================= */

.alpin-vehicles-grid
.alpin-vehicle > .e-con-inner {
    position: relative !important;

    z-index: 2 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: stretch !important;
    justify-content: flex-end !important;

    box-sizing: border-box !important;
}


/* =========================================================
   07 | DUNKLES OVERLAY
========================================================= */

.alpin-vehicles-grid
.alpin-vehicle::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    z-index: 1 !important;

    pointer-events: none !important;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.00) 0%,
            rgba(0,0,0,.02) 36%,
            rgba(0,0,0,.16) 58%,
            rgba(0,0,0,.62) 81%,
            rgba(0,0,0,.92) 100%
        ) !important;

    transition:
        background .24s ease !important;
}


/* =========================================================
   08 | ROTE HOVER-KANTE UNTEN
========================================================= */

.alpin-vehicles-grid
.alpin-vehicle::after {
    content: "" !important;

    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    height: 3px !important;

    z-index: 4 !important;

    background:
        var(--alpin-red, #d40000) !important;

    transform:
        scaleX(0) !important;

    transform-origin:
        left center !important;

    transition:
        transform .24s ease !important;

    pointer-events: none !important;
}


/* =========================================================
   09 | FAHRZEUGTITEL
========================================================= */

.alpin-vehicles-grid
.alpin-vehicle
.alpin-vehicle-title {
    position: relative !important;

    z-index: 3 !important;

    width: 100% !important;

    margin: 0 !important;

    padding:
        16px
        12px
        15px
        12px !important;

    box-sizing: border-box !important;
}


.alpin-vehicles-grid
.alpin-vehicle
.alpin-vehicle-title
.elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
}


.alpin-vehicles-grid
.alpin-vehicle
.alpin-vehicle-title
.elementor-heading-title {
    margin: 0 !important;
    padding: 0 !important;

    font-family:
        var(--alpin-font-display) !important;

    font-size: 16px !important;
    font-weight: 800 !important;

    line-height: 1.05 !important;

    letter-spacing: .1px !important;

    text-transform: uppercase !important;
    text-align: left !important;

    color: #ffffff !important;

    white-space: nowrap !important;

    transition:
        transform .24s ease !important;
}


/* Elementor-Farben sicher überschreiben */

.alpin-vehicles-grid
.alpin-vehicle
.alpin-vehicle-title,

.alpin-vehicles-grid
.alpin-vehicle
.alpin-vehicle-title * {
    color: #ffffff !important;
}


/* =========================================================
   10 | HOVER
========================================================= */

.alpin-vehicles-grid
.alpin-vehicle:hover {
    transform:
        translateY(-5px) !important;

    box-shadow:
        0 12px 28px
        rgba(0,0,0,.24) !important;
}


.alpin-vehicles-grid
.alpin-vehicle:hover::before {
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.00) 0%,
            rgba(0,0,0,.01) 36%,
            rgba(0,0,0,.11) 58%,
            rgba(0,0,0,.56) 81%,
            rgba(0,0,0,.88) 100%
        ) !important;
}


.alpin-vehicles-grid
.alpin-vehicle:hover::after {
    transform:
        scaleX(1) !important;
}


.alpin-vehicles-grid
.alpin-vehicle:hover
.alpin-vehicle-title
.elementor-heading-title {
    transform:
        translateY(-2px) !important;
}


/* =========================================================
   11 | FAHRZEUGBILDER
========================================================= */


/* WOHNMOBILE */

.alpin-vehicle-motorhome {
    background-image:
        var(--alpin-vehicle-motorhome) !important;

    background-position:
        center center !important;
}


/* TRANSPORTER */

.alpin-vehicle-van {
    background-image:
        var(--alpin-vehicle-van) !important;

    background-position:
        center center !important;
}


/* 4X4 / OFFROAD */

.alpin-vehicle-offroad {
    background-image:
        var(--alpin-vehicle-offroad) !important;

    background-position:
        center center !important;
}


/* PKW */

.alpin-vehicle-car {
    background-image:
        var(--alpin-vehicle-car) !important;

    background-position:
        center center !important;
}


/* PERFORMANCE */

.alpin-vehicle-performance {
    background-image:
        var(--alpin-vehicle-performance) !important;

    background-position:
        center center !important;
}


/* TRAKTOREN */

.alpin-vehicle-tractor {
    background-image:
        var(--alpin-vehicle-tractor) !important;

    background-position:
        center center !important;
}


/* LKW */

.alpin-vehicle-truck {
    background-image:
        var(--alpin-vehicle-truck) !important;

    background-position:
        center center !important;
}


/* =========================================================
   12 | ELEMENTOR RESET
========================================================= */

.alpin-vehicles-grid
.alpin-vehicle
.elementor-widget-heading {
    margin: 0 !important;
}


.alpin-vehicles-grid
.alpin-vehicle
.elementor-widget-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* =========================================================
   13 | UNTEREN ABSTAND VOLLSTÄNDIG ENTFERNEN
========================================================= */

.alpin-vehicles {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}


.alpin-vehicles > .e-con-inner {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}


.alpin-vehicles-grid {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}


.alpin-vehicles-grid > .e-con-inner {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}


.alpin-vehicles-grid
.alpin-vehicle {
    margin-bottom: 0 !important;
}


/* =========================================================
   14 | DIREKTER ANSCHLUSS ZU FACTS
========================================================= */

.alpin-vehicles + .alpin-facts {
    margin-top: 0 !important;
}


/* =========================================================
   15 | DESKTOP BIS 1300PX
   4 KARTEN PRO REIHE
========================================================= */

@media (max-width: 1300px) {

    .alpin-vehicles-grid,
    .alpin-vehicles-grid > .e-con-inner {
        flex-wrap: wrap !important;

        gap: 10px !important;
    }


    .alpin-vehicles-grid
    .alpin-vehicle {
        flex:
            0 0
            calc(25% - 7.5px) !important;

        width:
            calc(25% - 7.5px) !important;

        max-width:
            calc(25% - 7.5px) !important;

        height: 230px !important;
        min-height: 230px !important;
    }
}


/* =========================================================
   16 | TABLET
   3 KARTEN PRO REIHE
========================================================= */

@media (max-width: 1024px) {

    .alpin-vehicles {
        padding:
            30px
            var(--alpin-edge-tablet, 40px)
            0
            var(--alpin-edge-tablet, 40px) !important;
    }


    .alpin-vehicles-title {
        margin-bottom:
            20px !important;
    }


    .alpin-vehicles-grid
    .alpin-vehicle {
        flex:
            0 0
            calc(33.333% - 7px) !important;

        width:
            calc(33.333% - 7px) !important;

        max-width:
            calc(33.333% - 7px) !important;

        height: 225px !important;
        min-height: 225px !important;
    }
}


/* =========================================================
   17 | MOBILE
   2 KARTEN PRO REIHE
========================================================= */

@media (max-width: 767px) {

    .alpin-vehicles {
        padding:
            28px
            var(--alpin-edge-mobile, 24px)
            0
            var(--alpin-edge-mobile, 24px) !important;
    }


    .alpin-vehicles-title {
        margin-bottom:
            20px !important;

        padding-bottom:
            13px !important;
    }


    .alpin-vehicles-title
    .elementor-heading-title {
        font-size:
            28px !important;

        line-height:
            1.05 !important;
    }


    .alpin-vehicles-grid,
    .alpin-vehicles-grid > .e-con-inner {
        gap:
            8px !important;
    }


    .alpin-vehicles-grid
    .alpin-vehicle {
        flex:
            0 0
            calc(50% - 4px) !important;

        width:
            calc(50% - 4px) !important;

        max-width:
            calc(50% - 4px) !important;

        height:
            205px !important;

        min-height:
            205px !important;
    }


    .alpin-vehicles-grid
    .alpin-vehicle
    .alpin-vehicle-title {
        padding:
            13px
            10px
            12px
            10px !important;
    }


    .alpin-vehicles-grid
    .alpin-vehicle
    .alpin-vehicle-title
    .elementor-heading-title {
        font-size:
            14px !important;
    }


    .alpin-vehicles-grid
    .alpin-vehicle:hover {
        transform:
            none !important;
    }
}


/* =========================================================
   18 | KLEINES MOBILE
   1 KARTE PRO REIHE
========================================================= */

@media (max-width: 480px) {

    .alpin-vehicles-grid
    .alpin-vehicle {
        flex:
            0 0
            100% !important;

        width:
            100% !important;

        max-width:
            100% !important;

        height:
            220px !important;

        min-height:
            220px !important;
    }


    .alpin-vehicles-grid
    .alpin-vehicle
    .alpin-vehicle-title
    .elementor-heading-title {
        font-size:
            16px !important;
    }
}