/* =========================================================
   34 | ALPIN – SPÜRBAR BESSER UNTERWEGS
   WOHNMOBILE
========================================================= */


/* =========================================================
   01 | SECTION
========================================================= */

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

    margin: 0 !important;

    padding:
        64px
        0
        72px
        0 !important;

    background: #f7f7f7 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   02 | INNER
   WICHTIG:
   HEADLINE + GRID MÜSSEN UNTEREINANDER LIEGEN
========================================================= */

.alpin-better > .e-con-inner,
.alpin-better-inner,
.alpin-better-inner > .e-con-inner {
    width: 100% !important;
    max-width: 1600px !important;

    margin: 0 auto !important;

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

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

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

    gap: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   03 | SECTION HEADLINE
========================================================= */

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

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

    margin:
        0
        0
        34px
        0 !important;

    padding:
        0
        0
        20px
        0 !important;

    flex:
        0
        0
        auto !important;

    align-self:
        stretch !important;
}


.alpin-better-title
.elementor-widget-container {
    width: 100% !important;

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


.alpin-better-title
.elementor-heading-title {
    width: 100% !important;

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

    font-family:
        var(
            --alpin-font-display,
            "Archivo ExtraCondensed",
            "Archivo",
            sans-serif
        ) !important;

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

    line-height: .96 !important;

    letter-spacing: -.4px !important;

    text-transform: uppercase !important;

    color: #111111 !important;
}


/* rote ALPIN Linie */

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

    display: block !important;

    width: 54px !important;
    height: 4px !important;

    margin-top: 16px !important;

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


/* =========================================================
   04 | GRID
========================================================= */

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

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

    display: grid !important;

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

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

    align-items: start !important;

    box-sizing: border-box !important;

    overflow: visible !important;
}


/* =========================================================
   05 | EINZELNE KARTE
========================================================= */

.alpin-better-item {
    position: relative !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !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;

    overflow: visible !important;
}


.alpin-better-item > .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;

    gap: 0 !important;

    overflow: visible !important;
}


/* =========================================================
   06 | BILDBEREICH
========================================================= */

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

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

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

    flex:
        0
        0
        190px !important;

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

    background-repeat:
        no-repeat !important;

    background-size:
        cover !important;

    background-position:
        center center !important;

    box-sizing:
        border-box !important;

    overflow:
        hidden !important;
}


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

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

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


/* =========================================================
   07 | BILDER
========================================================= */

.alpin-better-item-1
.alpin-better-image {
    background-image:
        url("/wp-content/themes/alpin/img/womo_besser_1.webp") !important;
}


.alpin-better-item-2
.alpin-better-image {
    background-image:
        url("/wp-content/themes/alpin/img/womo_besser_2.webp") !important;
}


.alpin-better-item-3
.alpin-better-image {
    background-image:
        url("/wp-content/themes/alpin/img/womo_besser_3.webp") !important;
}


.alpin-better-item-4
.alpin-better-image {
    background-image:
        url("/wp-content/themes/alpin/img/womo_besser_4.webp") !important;
}


/* =========================================================
   08 | CONTENT
========================================================= */

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

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

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

    display: grid !important;

    grid-template-columns:
        70px
        minmax(0, 1fr) !important;

    column-gap: 18px !important;

    align-items: start !important;

    box-sizing: border-box !important;

    overflow: visible !important;
}


.alpin-better-content > .e-con-inner {
    display: contents !important;
}


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

.alpin-better-icon {
    position: relative !important;

    z-index: 5 !important;

    width: 70px !important;
    height: 70px !important;

    min-width: 70px !important;

    margin:
        -18px
        0
        0
        0 !important;

    padding: 0 !important;

    display: flex !important;

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

    background:
        #ffffff !important;

    border-radius:
        50% !important;

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

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


.alpin-better-icon
.elementor-icon-wrapper {
    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    display: flex !important;

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


.alpin-better-icon
.elementor-icon {
    display: flex !important;

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

    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

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

    font-size:
        36px !important;
}


.alpin-better-icon svg {
    width: 36px !important;
    height: 36px !important;

    fill: none !important;

    stroke:
        currentColor !important;
}


/* =========================================================
   10 | COPY
========================================================= */

.alpin-better-copy {
    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;

    padding:
        18px
        0
        0
        0 !important;

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

    gap: 0 !important;
}


.alpin-better-copy > .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;

    gap: 0 !important;
}


/* Headline */

.alpin-better-copy
.elementor-widget-heading {
    width: 100% !important;

    margin: 0 !important;
}


.alpin-better-copy
.elementor-heading-title {
    margin: 0 !important;

    font-family:
        var(
            --alpin-font,
            "Archivo",
            sans-serif
        ) !important;

    font-size: 17px !important;
    font-weight: 700 !important;

    line-height: 1.15 !important;

    text-transform: uppercase !important;

    color: #111111 !important;
}


/* Text */

.alpin-better-copy
.elementor-widget-text-editor {
    width: 100% !important;

    margin:
        8px
        0
        0
        0 !important;
}


.alpin-better-copy
.elementor-widget-text-editor
.elementor-widget-container {
    width: 100% !important;

    font-family:
        var(
            --alpin-font,
            "Archivo",
            sans-serif
        ) !important;

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

    line-height: 1.48 !important;

    color: #444444 !important;
}


.alpin-better-copy p {
    margin: 0 !important;
}


/* =========================================================
   11 | PFEILE
========================================================= */

.alpin-better-item:not(:last-child)::after {
    content: "›" !important;

    position: absolute !important;

    top: 76px !important;
    right: -26px !important;

    z-index: 20 !important;

    width: 18px !important;
    height: 36px !important;

    display: flex !important;

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

    font-family:
        Arial,
        sans-serif !important;

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

    line-height: 1 !important;

    color: #111111 !important;

    pointer-events: none !important;
}


/* =========================================================
   12 | TABLET
========================================================= */

@media
(min-width: 768px)
and
(max-width: 1024px) {

    .alpin-better {
        padding:
            54px
            0
            60px
            0 !important;
    }


    .alpin-better > .e-con-inner,
    .alpin-better-inner,
    .alpin-better-inner > .e-con-inner {
        padding:
            0
            40px !important;
    }


    .alpin-better-title
    .elementor-heading-title {
        font-size:
            38px !important;
    }


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

        gap:
            44px
            30px !important;
    }


    .alpin-better-image,
    .alpin-better-image > .e-con-inner {
        height:
            190px !important;

        min-height:
            190px !important;
    }


    .alpin-better-item::after {
        display:
            none !important;
    }
}


/* =========================================================
   13 | MOBILE
========================================================= */

@media
(max-width: 767px) {

    .alpin-better {
        padding:
            44px
            0
            52px
            0 !important;
    }


    .alpin-better > .e-con-inner,
    .alpin-better-inner,
    .alpin-better-inner > .e-con-inner {
        padding:
            0
            24px !important;
    }


    .alpin-better-title {
        margin-bottom:
            28px !important;
    }


    .alpin-better-title
    .elementor-heading-title {
        font-size:
            34px !important;
    }


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

        gap:
            38px !important;
    }


    .alpin-better-image,
    .alpin-better-image > .e-con-inner {
        height:
            210px !important;

        min-height:
            210px !important;
    }


    .alpin-better-content {
        grid-template-columns:
            64px
            minmax(0, 1fr) !important;

        column-gap:
            16px !important;
    }


    .alpin-better-icon {
        width:
            64px !important;

        min-width:
            64px !important;

        height:
            64px !important;
    }


    .alpin-better-copy {
        padding-top:
            14px !important;
    }


    .alpin-better-item::after {
        display:
            none !important;
    }
}


/* =========================================================
   ENDE 34 | ALPIN – SPÜRBAR BESSER UNTERWEGS
========================================================= */