/* =========================================================
   ALPIN – 29 CUSTOMER NEEDS
   KUNDENNUTZEN / MEHR SOUVERÄNITÄT

   Datei:
   29-alpin-customer-needs.css

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


/* =========================================================
   01 | HAUPTCONTAINER
========================================================= */

.alpin-customer-needs {
    position: relative !important;

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

    min-height: 430px !important;

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

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

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

    gap: 0 !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    overflow: hidden !important;
}


/* =========================================================
   02 | ELEMENTOR INNER WRAPPER
========================================================= */

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

    min-height: 430px !important;

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

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

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

    gap: 0 !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
}


/* =========================================================
   03 | LINKE BILDHÄLFTE
========================================================= */

.alpin-customer-needs-image {
    position: relative !important;

    flex: 0 0 54% !important;

    width: 54% !important;
    max-width: 54% !important;

    min-height: 430px !important;

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

    background-color: #dddddd !important;

    background-image:
        url("/wp-content/themes/alpin/img/alpin-wohnmobil-mehr-fahrkomfort.webp") !important;

    background-size: cover !important;

    background-position:
        48% center !important;

    background-repeat: no-repeat !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
}


.alpin-customer-needs-image > .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;

    height: 100% !important;
    min-height: 430px !important;

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

    box-sizing: border-box !important;
}


/* =========================================================
   04 | WEICHER ÜBERGANG BILD ? WEISS
========================================================= */

.alpin-customer-needs-image::after {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 22% !important;

    z-index: 2 !important;

    pointer-events: none !important;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,.04) 20%,
            rgba(255,255,255,.22) 45%,
            rgba(255,255,255,.65) 72%,
            #ffffff 100%
        ) !important;
}


/* =========================================================
   05 | RECHTE CONTENTHÄLFTE
========================================================= */

.alpin-customer-needs-content {
    position: relative !important;

    flex: 0 0 46% !important;

    width: 46% !important;
    max-width: 46% !important;

    min-width: 0 !important;
    min-height: 430px !important;

    margin: 0 !important;

    padding:
        38px
        var(--alpin-edge, 72px)
        38px
        52px !important;

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

    align-items: flex-start !important;
    justify-content: center !important;

    gap: 0 !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    overflow: visible !important;
}


/* =========================================================
   06 | CONTENT INNER
========================================================= */

.alpin-customer-needs-content > .e-con-inner {
    width: 100% !important;
    max-width: 580px !important;

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

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

    align-items: flex-start !important;
    justify-content: center !important;

    gap: 0 !important;
    row-gap: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   07 | ERSTE HEADLINE
========================================================= */

.alpin-customer-needs-title {
    width: 100% !important;

    margin: 0 !important;

    padding:
        0
        0
        18px
        0 !important;
}


.alpin-customer-needs-title
.elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
}


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

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

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

    line-height: 1.03 !important;

    letter-spacing: -.25px !important;

    text-transform: uppercase !important;

    color: #111111 !important;
}


/* =========================================================
   08 | ROTE LINIE ÜBER DER HEADLINE
========================================================= */

.alpin-customer-needs-title::before {
    content: "" !important;

    display: block !important;

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

    margin:
        0
        0
        15px
        0 !important;

    padding: 0 !important;

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


/* =========================================================
   09 | ROTE HEADLINE
========================================================= */

.alpin-customer-needs-highlight {
    width: 100% !important;

    margin: 0 !important;

    padding:
        0
        0
        24px
        0 !important;
}


.alpin-customer-needs-highlight
.elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
}


.alpin-customer-needs-highlight
.elementor-heading-title {
    margin: 0 !important;
    padding: 0 !important;

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

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

    line-height: 1 !important;

    letter-spacing: -.25px !important;

    text-transform: uppercase !important;

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


/* =========================================================
   10 | LISTE
========================================================= */

.alpin-customer-needs-list {
    width: 100% !important;

    margin: 0 !important;

    padding:
        0
        0
        27px
        0 !important;
}


.alpin-customer-needs-list
.elementor-widget-container {
    width: 100% !important;

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


.alpin-customer-needs-list
.elementor-icon-list-items {
    width: 100% !important;

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

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

    gap: 0 !important;
}


/* =========================================================
   11 | EINZELNE LISTENZEILE
========================================================= */

.alpin-customer-needs-list
.elementor-icon-list-item {
    width: 100% !important;

    margin: 0 !important;

    padding:
        0
        0
        11px
        0 !important;

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

    align-items: flex-start !important;
    justify-content: flex-start !important;

    gap: 11px !important;
}


.alpin-customer-needs-list
.elementor-icon-list-item:last-child {
    padding-bottom: 0 !important;
}


/* =========================================================
   12 | CHECK ICON
========================================================= */

.alpin-customer-needs-list
.elementor-icon-list-icon {
    flex: 0 0 18px !important;

    width: 18px !important;
    min-width: 18px !important;

    height: 20px !important;

    margin: 0 !important;

    padding:
        2px
        0
        0
        0 !important;

    display: flex !important;

    align-items: flex-start !important;
    justify-content: center !important;

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


.alpin-customer-needs-list
.elementor-icon-list-icon i {
    font-size: 15px !important;

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


.alpin-customer-needs-list
.elementor-icon-list-icon svg {
    width: 15px !important;
    height: 15px !important;

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

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


/* =========================================================
   13 | LISTENTEXT
========================================================= */

.alpin-customer-needs-list
.elementor-icon-list-text {
    flex: 1 1 auto !important;

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

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

    font-size: 15px !important;
    font-weight: 500 !important;

    line-height: 1.3 !important;

    color: #242424 !important;
}


/* =========================================================
   14 | SCHLUSSZEILE
========================================================= */

.alpin-customer-needs-final {
    width: 100% !important;

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


.alpin-customer-needs-final
.elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
}


.alpin-customer-needs-final
.elementor-heading-title {
    margin: 0 !important;
    padding: 0 !important;

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

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

    line-height: 1.05 !important;

    letter-spacing: 0 !important;

    text-transform: uppercase !important;

    color: #111111 !important;
}


.alpin-customer-needs-final
.elementor-heading-title span {
    color:
        var(--alpin-red, #d40000) !important;
}


/* =========================================================
   15 | ELEMENTOR RESET
========================================================= */

.alpin-customer-needs
.elementor-widget-heading,

.alpin-customer-needs
.elementor-widget-text-editor,

.alpin-customer-needs
.elementor-widget-icon-list {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* =========================================================
   16 | TABLET
========================================================= */

@media (max-width: 1024px) {

    .alpin-customer-needs,
    .alpin-customer-needs > .e-con-inner {
        min-height: 400px !important;
    }


    .alpin-customer-needs-image {
        flex-basis: 48% !important;

        width: 48% !important;
        max-width: 48% !important;

        min-height: 400px !important;

        background-position:
            45% center !important;
    }


    .alpin-customer-needs-image > .e-con-inner {
        min-height: 400px !important;
    }


    .alpin-customer-needs-content {
        flex-basis: 52% !important;

        width: 52% !important;
        max-width: 52% !important;

        min-height: 400px !important;

        padding:
            34px
            40px
            34px
            34px !important;
    }


    .alpin-customer-needs-title {
        padding-bottom:
            16px !important;
    }


    .alpin-customer-needs-title
    .elementor-heading-title {
        font-size: 26px !important;
    }


    .alpin-customer-needs-highlight {
        padding-bottom:
            20px !important;
    }


    .alpin-customer-needs-highlight
    .elementor-heading-title {
        font-size: 29px !important;
    }


    .alpin-customer-needs-list {
        padding-bottom:
            23px !important;
    }


    .alpin-customer-needs-list
    .elementor-icon-list-item {
        padding-bottom:
            9px !important;
    }


    .alpin-customer-needs-list
    .elementor-icon-list-text {
        font-size: 14px !important;
    }
}


/* =========================================================
   17 | MOBILE
========================================================= */

@media (max-width: 767px) {

    .alpin-customer-needs,
    .alpin-customer-needs > .e-con-inner {
        min-height: 0 !important;

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

        overflow: hidden !important;
    }


    .alpin-customer-needs-image {
        flex:
            0 0
            300px !important;

        width: 100% !important;
        max-width: 100% !important;

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

        background-position:
            42% center !important;
    }


    .alpin-customer-needs-image > .e-con-inner {
        height: 300px !important;
        min-height: 300px !important;
    }


    .alpin-customer-needs-image::after {
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

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

        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,0) 0%,
                rgba(255,255,255,.25) 42%,
                #ffffff 100%
            ) !important;
    }


    .alpin-customer-needs-content {
        flex:
            0 0
            auto !important;

        width: 100% !important;
        max-width: 100% !important;

        min-height: 0 !important;

        padding:
            30px
            24px
            34px
            24px !important;
    }


    .alpin-customer-needs-content > .e-con-inner {
        width: 100% !important;
        max-width: 100% !important;
    }


    .alpin-customer-needs-title {
        padding-bottom:
            16px !important;
    }


    .alpin-customer-needs-title
    .elementor-heading-title {
        font-size: 25px !important;
    }


    .alpin-customer-needs-highlight {
        padding-bottom:
            20px !important;
    }


    .alpin-customer-needs-highlight
    .elementor-heading-title {
        font-size: 28px !important;
    }


    .alpin-customer-needs-list {
        padding-bottom:
            24px !important;
    }


    .alpin-customer-needs-list
    .elementor-icon-list-item {
        padding-bottom:
            9px !important;
    }


    .alpin-customer-needs-list
    .elementor-icon-list-text {
        font-size: 14px !important;
    }


    .alpin-customer-needs-final
    .elementor-heading-title {
        font-size: 19px !important;
    }
}


/* =========================================================
   18 | KLEINE SMARTPHONES
========================================================= */

@media (max-width: 480px) {

    .alpin-customer-needs-image {
        flex-basis: 250px !important;

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

        background-position:
            40% center !important;
    }


    .alpin-customer-needs-image > .e-con-inner {
        height: 250px !important;
        min-height: 250px !important;
    }


    .alpin-customer-needs-content {
        padding:
            26px
            22px
            30px
            22px !important;
    }


    .alpin-customer-needs-title
    .elementor-heading-title {
        font-size: 22px !important;
    }


    .alpin-customer-needs-highlight
    .elementor-heading-title {
        font-size: 25px !important;
    }


    .alpin-customer-needs-list
    .elementor-icon-list-item {
        padding-bottom:
            8px !important;
    }


    .alpin-customer-needs-list
    .elementor-icon-list-text {
        font-size: 13px !important;
    }


    .alpin-customer-needs-final
    .elementor-heading-title {
        font-size: 18px !important;
    }
}


/* =========================================================
   ENDE
   29-alpin-customer-needs.css
========================================================= */