/* =========================================================
   ALPIN – 32 PRODUCTS
   ZWEI PRODUKTE. EINE MISSION.

   TYPOGRAFIE:
   lokale Archivo-Fonts aus ALPIN Core

   STRUKTUR:

   .alpin-products
   +-- .alpin-products-title
   +-- .alpin-products-grid
       +-- .alpin-product-image.alpin-product-powerup
       +-- .alpin-product-content
       +-- .alpin-product-image.alpin-product-powerpedal
       +-- .alpin-product-content

   DESKTOP:
   [ BILD ][ TEXT ][ BILD ][ TEXT ]
========================================================= */


/* =========================================================
   01 | GESAMTER ABSCHNITT
========================================================= */

.alpin-products {
    position: relative !important;

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

    margin: 0 auto !important;

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

    box-sizing: border-box !important;

    background: #ffffff !important;

    overflow: hidden !important;

    --gap: 0px !important;
    --row-gap: 0px !important;
    --column-gap: 0px !important;
}


/* =========================================================
   02 | OUTER ELEMENTOR INNER
========================================================= */

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

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

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

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

    gap: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   03 | HAUPTÜBERSCHRIFT
========================================================= */

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

    margin: 0 !important;

    padding:
        0
        0
        30px
        0 !important;

    text-align: center !important;
}


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


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

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

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

    line-height: 1.05 !important;

    letter-spacing: -.25px !important;

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

    color: #111111 !important;
}


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


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

    display: block !important;

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

    margin:
        11px
        auto
        0
        auto !important;

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


/* =========================================================
   04 | PRODUKT-GRID
   BILD | TEXT | BILD | TEXT
========================================================= */

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

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

    display: grid !important;

    grid-template-columns:
        24% 26% 24% 26% !important;

    grid-template-rows:
        minmax(340px, auto) !important;

    gap: 0 !important;

    align-items: stretch !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    --display: grid !important;
    --gap: 0px !important;
    --row-gap: 0px !important;
    --column-gap: 0px !important;
}


/* Elementor Inner absichern */

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

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

    display: grid !important;

    grid-template-columns:
        24% 26% 24% 26% !important;

    grid-template-rows:
        minmax(340px, auto) !important;

    gap: 0 !important;

    align-items: stretch !important;

    box-sizing: border-box !important;
}


/* =========================================================
   05 | DIREKTE KIND-CONTAINER RESET
========================================================= */

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

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

    margin: 0 !important;

    flex: none !important;

    align-self: stretch !important;

    box-sizing: border-box !important;
}


/* =========================================================
   06 | BILDCONTAINER BASIS
========================================================= */

.alpin-product-image {
    position: relative !important;

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

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

    margin: 0 !important;
    padding: 24px !important;

    background-color:
        #f7f7f7 !important;

    background-repeat:
        no-repeat !important;

    background-position:
        center center !important;

    background-size:
        contain !important;

    box-sizing:
        border-box !important;

    overflow:
        hidden !important;
}


.alpin-product-image > .e-con-inner {
    width: 100% !important;
    height: 100% !important;

    min-height: 340px !important;

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


/* =========================================================
   07 | POWERUP BILD
   mehrfach abgesichert
========================================================= */

.alpin-product-image.alpin-product-powerup,
.alpin-product-image.alpin-product-image-powerup,
.alpin-product-powerup,
.alpin-product-image-powerup,

.alpin-products-grid > .e-con:nth-child(1),
.alpin-products-grid > .e-con-inner > .e-con:nth-child(1) {

    background-image:
        var(--alpin-img-powerup) !important;

    background-repeat:
        no-repeat !important;

    background-position:
        center center !important;

    background-size:
        78% auto !important;
}


/* =========================================================
   08 | POWERPEDAL BILD
   mehrfach abgesichert
========================================================= */

.alpin-product-image.alpin-product-powerpedal,
.alpin-product-image.alpin-product-image-powerpedal,
.alpin-product-powerpedal,
.alpin-product-image-powerpedal,

.alpin-products-grid > .e-con:nth-child(3),
.alpin-products-grid > .e-con-inner > .e-con:nth-child(3) {

    background-image:
        var(--alpin-img-powerpedal) !important;

    background-repeat:
        no-repeat !important;

    background-position:
        center center !important;

    background-size:
        66% auto !important;
}


/* =========================================================
   09 | TEXTCONTAINER
========================================================= */

.alpin-product-content {
    position: relative !important;

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

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

    margin: 0 !important;

    padding:
        30px
        28px
        30px
        28px !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;
}


.alpin-product-content > .e-con-inner {
    width: 100% !important;
    max-width: 100% !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;

    box-sizing: border-box !important;
}


/* =========================================================
   10 | PRODUKTÜBERSCHRIFT
========================================================= */

.alpin-product-title,
.alpin-product-name {
    width: 100% !important;

    margin: 0 !important;

    padding:
        0
        0
        10px
        0 !important;
}


.alpin-product-title .elementor-widget-container,
.alpin-product-name .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
}


.alpin-product-title .elementor-heading-title,
.alpin-product-name .elementor-heading-title {
    margin: 0 !important;
    padding: 0 !important;

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

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

    line-height: 1 !important;

    letter-spacing: -.15px !important;

    text-transform: uppercase !important;

    color:
        #111111 !important;
}


/* =========================================================
   11 | SUBHEADLINE
========================================================= */

.alpin-product-subtitle {
    width: 100% !important;

    margin: 0 !important;

    padding:
        0
        0
        20px
        0 !important;
}


.alpin-product-subtitle .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
}


.alpin-product-subtitle,
.alpin-product-subtitle p {
    margin: 0 !important;

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

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

    line-height: 1.35 !important;

    color:
        #666666 !important;
}


/* =========================================================
   12 | BENEFIT-LISTE
========================================================= */

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

    margin: 0 !important;

    padding:
        0
        0
        22px
        0 !important;
}


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

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


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

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


/* =========================================================
   13 | LISTENPUNKTE
========================================================= */

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

    margin: 0 !important;

    padding:
        0
        0
        8px
        0 !important;

    display: flex !important;

    align-items:
        flex-start !important;
}


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


/* =========================================================
   14 | CHECK-ICON
========================================================= */

.alpin-product-list
.elementor-icon-list-icon {
    width:
        18px !important;

    min-width:
        18px !important;

    margin-right:
        8px !important;

    padding-top:
        1px !important;

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


.alpin-product-list
.elementor-icon-list-icon i {
    font-size:
        14px !important;

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


.alpin-product-list
.elementor-icon-list-icon svg {
    width:
        14px !important;

    height:
        14px !important;

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

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


/* =========================================================
   15 | LISTENTEXT
========================================================= */

.alpin-product-list
.elementor-icon-list-text {
    margin: 0 !important;
    padding: 0 !important;

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

    font-size:
        14px !important;

    font-weight:
        500 !important;

    line-height:
        1.25 !important;

    color:
        #222222 !important;
}


/* =========================================================
   16 | BUTTON
========================================================= */

.alpin-product-button {
    width:
        auto !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


.alpin-product-button
.elementor-widget-container {
    margin:
        0 !important;

    padding:
        0 !important;
}


.alpin-product-button
.elementor-button {
    min-width:
        170px !important;

    min-height:
        44px !important;

    margin:
        0 !important;

    padding:
        0
        20px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        12px !important;

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

    border:
        0 !important;

    border-radius:
        2px !important;

    box-shadow:
        0
        5px
        13px
        rgba(0,0,0,.13) !important;

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

    font-size:
        15px !important;

    font-weight:
        800 !important;

    line-height:
        1 !important;

    letter-spacing:
        .2px !important;

    text-transform:
        uppercase !important;

    color:
        #ffffff !important;

    transition:
        background-color .2s ease,
        transform .2s ease !important;
}


.alpin-product-button
.elementor-button-text,

.alpin-product-button
.elementor-button-icon {
    color:
        #ffffff !important;
}


.alpin-product-button
.elementor-button-icon svg {
    fill:
        #ffffff !important;
}


/* =========================================================
   17 | BUTTON HOVER
========================================================= */

.alpin-product-button
.elementor-button:hover {
    background:
        #111111 !important;

    transform:
        translateY(-2px) !important;
}


/* =========================================================
   18 | ELEMENTOR RESET
========================================================= */

.alpin-products
.elementor-widget-heading,

.alpin-products
.elementor-widget-text-editor,

.alpin-products
.elementor-widget-icon-list,

.alpin-products
.elementor-widget-button {
    margin-top:
        0 !important;

    margin-bottom:
        0 !important;
}


/* =========================================================
   19 | DESKTOP BIS 1300
========================================================= */

@media (max-width: 1300px) {

    .alpin-products {
        padding-left:
            40px !important;

        padding-right:
            40px !important;
    }


    .alpin-products-grid,
    .alpin-products-grid > .e-con-inner {

        grid-template-columns:
            23% 27% 23% 27% !important;
    }


    .alpin-product-content {
        padding:
            27px
            21px !important;
    }


    .alpin-product-title
    .elementor-heading-title,

    .alpin-product-name
    .elementor-heading-title {

        font-size:
            25px !important;
    }
}


/* =========================================================
   20 | TABLET
========================================================= */

@media (max-width: 1024px) {

    .alpin-products {
        padding:
            30px
            40px
            32px
            40px !important;
    }


    .alpin-products-grid,
    .alpin-products-grid > .e-con-inner {

        grid-template-columns:
            42% 58% !important;

        grid-template-rows:
            auto auto !important;
    }


    .alpin-product-image,
    .alpin-product-content {

        min-height:
            320px !important;
    }
}


/* =========================================================
   21 | MOBILE
========================================================= */

@media (max-width: 767px) {

    .alpin-products {
        padding:
            28px
            22px
            30px
            22px !important;
    }


    .alpin-products-title {
        padding-bottom:
            25px !important;
    }


    .alpin-products-title
    .elementor-heading-title {

        font-size:
            27px !important;
    }


    .alpin-products-grid,
    .alpin-products-grid > .e-con-inner {

        grid-template-columns:
            1fr !important;

        grid-template-rows:
            auto !important;
    }


    .alpin-product-image {

        min-height:
            270px !important;
    }


    .alpin-product-content {

        min-height:
            auto !important;

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


    .alpin-products-grid > .e-con:nth-child(1),
    .alpin-products-grid > .e-con-inner > .e-con:nth-child(1) {

        background-size:
            70% auto !important;
    }


    .alpin-products-grid > .e-con:nth-child(3),
    .alpin-products-grid > .e-con-inner > .e-con:nth-child(3) {

        background-size:
            55% auto !important;
    }


    .alpin-product-button,
    .alpin-product-button
    .elementor-widget-container {

        width:
            100% !important;
    }


    .alpin-product-button
    .elementor-button {

        width:
            100% !important;
    }
}


/* =========================================================
   ENDE
   32-alpin-products.css
========================================================= */