/* =========================================================
   27 – ALPIN SELLING BENEFITS
   WARUM HÄNDLER ALPIN VERKAUFEN

   Dunkler 6er-Benefit-Block

   Hover:
   - Benefit hebt sich leicht an
   - Icon skaliert minimal
   - Text wird etwas heller
   - dezente rote Linie erscheint unten

   Trennlinien:
   - KEINE Linie ganz links
   - Linie zwischen jedem Benefit
   - letzte Linie zwischen 5 und 6 vorhanden

   GETRENNT VON 31

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


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

.alpin-selling-benefits {
    position: relative !important;

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

    margin: 0 auto !important;

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

    box-sizing: border-box !important;

    background:
        linear-gradient(
            110deg,
            #080808 0%,
            #111111 48%,
            #080808 100%
        ) !important;

    overflow: hidden !important;

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


/* =========================================================
   02 | DEZENTE HINTERGRUNDLICHT-STRUKTUR
========================================================= */

.alpin-selling-benefits::before {
    content: "" !important;

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

    pointer-events: none !important;

    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(255,255,255,.035) 0%,
            rgba(255,255,255,.012) 32%,
            rgba(255,255,255,0) 68%
        ) !important;

    z-index: 0 !important;
}


.alpin-selling-benefits > * {
    position: relative !important;
    z-index: 1 !important;
}


/* =========================================================
   03 | ELEMENTOR INNER
========================================================= */

.alpin-selling-benefits > .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;
}


/* =========================================================
   04 | SECTION HEADLINE
========================================================= */

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

    margin: 0 !important;

    padding:
        0
        0
        28px
        0 !important;

    text-align: center !important;
}


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


.alpin-selling-benefits-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: #ffffff !important;
}


/* ALPIN rot */

.alpin-selling-benefits-title
.elementor-heading-title span,

.alpin-selling-benefits-title
.alpin-red,

.alpin-selling-benefits-title
.red {
    color:
        var(--alpin-red, #d40000) !important;
}


/* rote Linie unter Headline */

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

    display: block !important;

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

    margin:
        11px
        auto
        0
        auto !important;

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


/* =========================================================
   05 | 6ER GRID
========================================================= */

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

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

    display: grid !important;

    grid-template-columns:
        repeat(6, minmax(0, 1fr)) !important;

    gap: 0 !important;

    align-items: stretch !important;

    box-sizing: border-box !important;

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


/* Elementor Inner absichern */

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

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

    display: grid !important;

    grid-template-columns:
        repeat(6, minmax(0, 1fr)) !important;

    gap: 0 !important;

    align-items: stretch !important;

    box-sizing: border-box !important;
}


/* =========================================================
   06 | EINZELNER BENEFIT
========================================================= */

.alpin-selling-benefit {
    position: relative !important;

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

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

    margin: 0 !important;

    padding:
        4px
        18px
        4px
        18px !important;

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

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

    text-align: center !important;

    gap: 0 !important;

    box-sizing: border-box !important;

    background:
        transparent !important;

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

    will-change: transform !important;
}


/* Elementor Inner */

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

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

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

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

    gap: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   07 | GRAUE TRENNLINIEN
========================================================= */

.alpin-selling-benefit::before {
    content: none !important;
}


.alpin-selling-benefit:nth-child(n+2)::before {
    content: "" !important;

    position: absolute !important;

    top: 2px !important;
    left: 0 !important;
    bottom: 2px !important;

    width: 1px !important;

    background:
        rgba(255,255,255,.17) !important;

    pointer-events: none !important;

    transition:
        background-color .22s ease !important;
}


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

.alpin-selling-benefit::after {
    content: "" !important;

    position: absolute !important;

    left: 50% !important;
    bottom: -1px !important;

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

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

    transform:
        translateX(-50%)
        scaleX(0) !important;

    transform-origin:
        center center !important;

    transition:
        transform .22s ease !important;

    pointer-events: none !important;
}


/* =========================================================
   09 | ICON
========================================================= */

.alpin-selling-benefit-icon {
    width: 100% !important;

    min-height: 61px !important;

    margin: 0 !important;

    padding:
        0
        0
        15px
        0 !important;

    display: flex !important;

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

    text-align: center !important;
}


.alpin-selling-benefit-icon
.elementor-widget-container {
    width: 100% !important;

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

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;
}


.alpin-selling-benefit-icon
.elementor-icon {
    width: 52px !important;
    height: 52px !important;

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

    display: inline-flex !important;

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

    background:
        transparent !important;

    border:
        0 !important;

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

    transform:
        translateY(0)
        scale(1) !important;

    transition:
        transform .22s ease,
        filter .22s ease !important;
}


/* Font Awesome */

.alpin-selling-benefit-icon
.elementor-icon i {
    font-size:
        44px !important;

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


/* SVG */

.alpin-selling-benefit-icon
.elementor-icon svg {
    width:
        44px !important;

    height:
        44px !important;

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

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


/* =========================================================
   10 | BENEFIT HEADLINE
========================================================= */

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

    margin: 0 !important;

    padding:
        0
        0
        7px
        0 !important;

    text-align:
        center !important;
}


.alpin-selling-benefit-title
.elementor-widget-container {
    margin:
        0 !important;

    padding:
        0 !important;
}


.alpin-selling-benefit-title
.elementor-heading-title {
    margin:
        0 !important;

    padding:
        0 !important;

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

    font-size:
        18px !important;

    font-weight:
        800 !important;

    line-height:
        1.08 !important;

    letter-spacing:
        0 !important;

    text-transform:
        uppercase !important;

    text-align:
        center !important;

    color:
        #ffffff !important;

    transition:
        color .22s ease !important;
}


/* =========================================================
   11 | BENEFIT SUBTEXT
========================================================= */

.alpin-selling-benefit-text {
    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    text-align:
        center !important;
}


.alpin-selling-benefit-text
.elementor-widget-container {
    margin:
        0 !important;

    padding:
        0 !important;
}


.alpin-selling-benefit-text,
.alpin-selling-benefit-text p {
    margin:
        0 !important;

    padding:
        0 !important;

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

    font-size:
        14px !important;

    font-weight:
        400 !important;

    line-height:
        1.35 !important;

    color:
        rgba(255,255,255,.70) !important;

    text-align:
        center !important;

    transition:
        color .22s ease !important;
}


/* =========================================================
   12 | HOVER – KLEINE BEWEGUNG
========================================================= */

.alpin-selling-benefit:hover {
    transform:
        translateY(-5px) !important;
}


.alpin-selling-benefit:hover
.alpin-selling-benefit-icon
.elementor-icon {
    transform:
        translateY(-2px)
        scale(1.08) !important;

    filter:
        drop-shadow(
            0 3px 5px
            rgba(212,0,0,.18)
        ) !important;
}


.alpin-selling-benefit:hover::after {
    transform:
        translateX(-50%)
        scaleX(1) !important;
}


.alpin-selling-benefit:nth-child(n+2):hover::before {
    background:
        rgba(255,255,255,.25) !important;
}


.alpin-selling-benefit:hover
.alpin-selling-benefit-title
.elementor-heading-title {
    color:
        #ffffff !important;
}


.alpin-selling-benefit:hover
.alpin-selling-benefit-text,

.alpin-selling-benefit:hover
.alpin-selling-benefit-text p {
    color:
        rgba(255,255,255,.90) !important;
}


/* =========================================================
   13 | ELEMENTOR RESET
========================================================= */

.alpin-selling-benefits
.elementor-widget-icon,

.alpin-selling-benefits
.elementor-widget-heading,

.alpin-selling-benefits
.elementor-widget-text-editor {
    margin-top:
        0 !important;

    margin-bottom:
        0 !important;
}


/* =========================================================
   14 | DESKTOP BIS 1300
========================================================= */

@media (max-width: 1300px) {

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

        padding-right:
            40px !important;
    }


    .alpin-selling-benefit {
        padding-left:
            13px !important;

        padding-right:
            13px !important;
    }


    .alpin-selling-benefit-title
    .elementor-heading-title {
        font-size:
            17px !important;
    }


    .alpin-selling-benefit-text,
    .alpin-selling-benefit-text p {
        font-size:
            13px !important;
    }

}


/* =========================================================
   15 | TABLET
========================================================= */

@media (max-width: 1024px) {

    .alpin-selling-benefits {
        padding:
            32px
            40px
            36px
            40px !important;
    }


    .alpin-selling-benefits-grid,
    .alpin-selling-benefits-grid > .e-con-inner {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        row-gap:
            28px !important;
    }


    .alpin-selling-benefit::before {
        display:
            none !important;
    }


    .alpin-selling-benefit:nth-child(2)::before,
    .alpin-selling-benefit:nth-child(3)::before,
    .alpin-selling-benefit:nth-child(5)::before,
    .alpin-selling-benefit:nth-child(6)::before {
        content: "" !important;

        display: block !important;

        position: absolute !important;

        top: 2px !important;
        left: 0 !important;
        bottom: 2px !important;

        width: 1px !important;

        background:
            rgba(255,255,255,.17) !important;
    }


    .alpin-selling-benefit:hover {
        transform:
            translateY(-3px) !important;
    }

}


/* =========================================================
   16 | MOBILE
========================================================= */

@media (max-width: 767px) {

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


    .alpin-selling-benefits-title {
        padding-bottom:
            22px !important;
    }


    .alpin-selling-benefits-title
    .elementor-heading-title {
        font-size:
            28px !important;
    }


    .alpin-selling-benefits-grid,
    .alpin-selling-benefits-grid > .e-con-inner {
        grid-template-columns:
            1fr !important;

        row-gap:
            0 !important;
    }


    .alpin-selling-benefit {
        min-height:
            0 !important;

        padding:
            22px
            10px
            24px
            10px !important;

        border-bottom:
            1px solid
            rgba(255,255,255,.13) !important;
    }


    .alpin-selling-benefit:last-child {
        border-bottom:
            0 !important;
    }


    .alpin-selling-benefit::before,
    .alpin-selling-benefit::after {
        display:
            none !important;
    }


    .alpin-selling-benefit:hover {
        transform:
            none !important;
    }


    .alpin-selling-benefit:hover
    .alpin-selling-benefit-icon
    .elementor-icon {
        transform:
            none !important;

        filter:
            none !important;
    }

}


/* =========================================================
   ENDE 27
========================================================= */