/* =========================================================
   ALPIN – GLOBAL FOOTER
   Datei: 60-alpin-footer.css
   KOMPAKTE STABILE VERSION

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


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

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

    margin: 0 auto !important;

    /* kompakter zum roten CTA */
    padding:
        22px
        0
        0
        0 !important;

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

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

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

    box-sizing: border-box !important;

    background:
        linear-gradient(
            110deg,
            #080808 0%,
            var(--alpin-black-soft, #0d0d0d) 50%,
            #080808 100%
        ) !important;
}


/* =========================================================
   02 | 5 SPALTEN DESKTOP
========================================================= */

.alpin-footer-col-brand {
    flex: 0 0 28% !important;
    width: 28% !important;
    max-width: 28% !important;

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

    box-sizing: border-box !important;
}

.alpin-footer-col-products {
    flex: 0 0 17% !important;
    width: 17% !important;
    max-width: 17% !important;

    box-sizing: border-box !important;
}

.alpin-footer-col-solutions {
    flex: 0 0 21% !important;
    width: 21% !important;
    max-width: 21% !important;

    box-sizing: border-box !important;
}

.alpin-footer-col-about {
    flex: 0 0 19% !important;
    width: 19% !important;
    max-width: 19% !important;

    box-sizing: border-box !important;
}

.alpin-footer-col-social {
    flex: 0 0 15% !important;
    width: 15% !important;
    max-width: 15% !important;

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

    box-sizing: border-box !important;
}


/* =========================================================
   03 | SPALTEN RESET
========================================================= */

.alpin-footer-col-brand,
.alpin-footer-col-products,
.alpin-footer-col-solutions,
.alpin-footer-col-about,
.alpin-footer-col-social {
    margin: 0 !important;

    background: transparent !important;
}


/* =========================================================
   04 | LOGO
========================================================= */

.alpin-footer-col-brand .elementor-widget-image {
    margin: 0 !important;
    padding: 0 !important;
}

.alpin-footer-col-brand .elementor-widget-image img {
    display: block !important;

    width: auto !important;
    max-width: 230px !important;
    height: auto !important;

    margin: 0 !important;
}


/* =========================================================
   05 | TAGLINE
========================================================= */

.alpin-footer-tagline {
    margin-top: 7px !important;
}

.alpin-footer-tagline .elementor-heading-title {
    font-family:
        var(--alpin-font) !important;

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

    line-height: 1.35 !important;

    letter-spacing: 1.6px !important;

    text-transform: uppercase !important;

    color: var(--alpin-grey-300, #bdbdbd) !important;

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


/* =========================================================
   06 | SPALTENÜBERSCHRIFTEN
========================================================= */

.alpin-footer-heading {
    position: relative !important;

    margin:
        0
        0
        16px
        0 !important;

    padding:
        0
        0
        10px
        0 !important;
}

.alpin-footer-heading .elementor-heading-title {
    font-family:
        var(--alpin-font) !important;

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

    line-height: 1.1 !important;

    letter-spacing: .8px !important;

    text-transform: uppercase !important;

    color: #ffffff !important;

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

.alpin-footer-heading::after {
    content: "" !important;

    position: absolute !important;

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

    width: 34px !important;
    height: 2px !important;

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


/* =========================================================
   07 | LINKLISTEN
========================================================= */

.alpin-footer-links,
.alpin-footer-links *,
.alpin-footer-links p {
    font-family:
        var(--alpin-font) !important;

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

    line-height: 1.65 !important;

    color:
        var(
            --alpin-text-secondary,
            rgba(255,255,255,.66)
        ) !important;

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

.alpin-footer-links a {
    color:
        var(
            --alpin-text-secondary,
            rgba(255,255,255,.66)
        ) !important;

    text-decoration: none !important;

    transition:
        color .18s ease,
        padding-left .18s ease !important;
}

.alpin-footer-links a:hover {
    color: #ffffff !important;

    padding-left: 4px !important;
}


/* =========================================================
   08 | SOCIAL ICONS
========================================================= */

.alpin-footer-col-social
.elementor-social-icons-wrapper {
    display: flex !important;

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

    gap: 14px !important;
}

.alpin-footer-col-social
.elementor-social-icon {
    width: 18px !important;
    height: 18px !important;

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

    background: transparent !important;

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

    font-size: 17px !important;

    transition:
        color .18s ease,
        transform .18s ease !important;
}

.alpin-footer-col-social
.elementor-social-icon:hover {
    color:
        var(--alpin-red, #d40000) !important;

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

.alpin-footer-col-social
.elementor-social-icon svg,
.alpin-footer-col-social
.elementor-social-icon svg path {
    fill: currentColor !important;
}


/* =========================================================
   09 | BOTTOM BAR
========================================================= */

.alpin-footer-bottom {
    position: relative !important;

    flex: 0 0 100% !important;

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

    box-sizing: border-box !important;

    /* deutlich näher an die Footer-Inhalte */
    margin:
        -50px
        0
        0
        0 !important;

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

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

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

    gap: 30px !important;

    border: 0 !important;
    border-top: 0 !important;

    background: transparent !important;

    overflow: hidden !important;
}


/* =========================================================
   10 | BOTTOM TRENNLINIE
========================================================= */

.alpin-footer-bottom::before {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;

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

    width:
        calc(
            100% - (2 * var(--alpin-edge, 72px))
        ) !important;

    height: 1px !important;

    background:
        var(
            --alpin-line,
            rgba(255,255,255,.08)
        ) !important;

    pointer-events: none !important;
}


/* =========================================================
   11 | BOTTOM TEXTEDITOR
========================================================= */

.alpin-footer-bottom
.elementor-widget-text-editor {
    flex: 0 0 auto !important;

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

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

.alpin-footer-bottom
.elementor-widget-text-editor
.elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
}

.alpin-footer-bottom
.elementor-widget-text-editor,
.alpin-footer-bottom
.elementor-widget-text-editor *,
.alpin-footer-bottom
.elementor-widget-text-editor p,
.alpin-footer-bottom
.elementor-widget-text-editor span,
.alpin-footer-bottom
.elementor-widget-text-editor a {
    font-family:
        var(--alpin-font) !important;

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

    line-height: 1.4 !important;

    letter-spacing: .25px !important;

    color:
        var(
            --alpin-text-muted,
            rgba(255,255,255,.56)
        ) !important;
}

.alpin-footer-bottom
.elementor-widget-text-editor p {
    margin: 0 !important;
    padding: 0 !important;
}


/* linker Text */

.alpin-footer-bottom
.elementor-widget-text-editor:first-child,
.alpin-footer-bottom
.elementor-widget-text-editor:first-child * {
    text-align: left !important;
}


/* rechter Text */

.alpin-footer-bottom
.elementor-widget-text-editor:last-child {
    margin-left: auto !important;
}

.alpin-footer-bottom
.elementor-widget-text-editor:last-child,
.alpin-footer-bottom
.elementor-widget-text-editor:last-child * {
    text-align: right !important;
}


/* Links */

.alpin-footer-bottom a {
    text-decoration: none !important;

    transition:
        color .18s ease !important;
}

.alpin-footer-bottom a:hover {
    color:
        var(--alpin-red, #d40000) !important;
}


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

@media (max-width: 1024px) {

    .alpin-footer-main {
        padding:
            18px
            var(--alpin-edge, 40px)
            0
            var(--alpin-edge, 40px) !important;
    }

    .alpin-footer-col-brand,
    .alpin-footer-col-products,
    .alpin-footer-col-solutions,
    .alpin-footer-col-about {
        flex: 0 0 50% !important;

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

        margin-bottom: 26px !important;
    }

    .alpin-footer-col-brand {
        padding-left: 0 !important;
    }

    .alpin-footer-col-social {
        flex: 0 0 100% !important;

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

        padding-right: 0 !important;
    }

    .alpin-footer-bottom {
        margin-top: 4px !important;

        padding:
            10px
            0
            11px
            0 !important;
    }

    .alpin-footer-bottom::before {
        left: 0 !important;
        width: 100% !important;
    }
}


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

@media (max-width: 767px) {

    .alpin-footer-main {
        padding:
            16px
            var(--alpin-edge, 24px)
            0
            var(--alpin-edge, 24px) !important;
    }

    .alpin-footer-col-brand,
    .alpin-footer-col-products,
    .alpin-footer-col-solutions,
    .alpin-footer-col-about,
    .alpin-footer-col-social {
        flex: 0 0 100% !important;

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

        padding-left: 0 !important;
        padding-right: 0 !important;

        margin-bottom: 24px !important;
    }

    .alpin-footer-col-brand
    .elementor-widget-image img {
        max-width: 210px !important;
    }

    .alpin-footer-bottom {
        margin-top: 2px !important;

        flex-direction: column !important;

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

        gap: 7px !important;

        padding:
            10px
            0
            12px
            0 !important;
    }

    .alpin-footer-bottom::before {
        left: 0 !important;
        width: 100% !important;
    }

    .alpin-footer-bottom
    .elementor-widget-text-editor,
    .alpin-footer-bottom
    .elementor-widget-text-editor *,
    .alpin-footer-bottom
    .elementor-widget-text-editor p,
    .alpin-footer-bottom a {
        font-size: 10px !important;
    }

    .alpin-footer-bottom
    .elementor-widget-text-editor:last-child {
        margin-left: 0 !important;
    }

    .alpin-footer-bottom
    .elementor-widget-text-editor:last-child,
    .alpin-footer-bottom
    .elementor-widget-text-editor:last-child * {
        text-align: left !important;
    }
}


/* =========================================================
   FOOTER WHATSAPP BUTTON
========================================================= */

.alpin-footer-whatsapp {
    margin-top: 0px !important;
}

.alpin-footer-whatsapp .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
}

.alpin-footer-whatsapp a {
    display: inline-flex !important;

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

    gap: 10px !important;

    min-height: 40px !important;

    padding:
        0
        16px !important;

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

    border:
        1px solid
        rgba(255,255,255,.18) !important;

    border-radius: 3px !important;

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

    font-size: 12px !important;
    font-weight: 600 !important;

    line-height: 1 !important;

    letter-spacing: .2px !important;

    color: #ffffff !important;

    text-decoration: none !important;

    box-shadow: none !important;

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

.alpin-footer-whatsapp a,
.alpin-footer-whatsapp a * {
    color: #ffffff !important;
}

.alpin-footer-whatsapp svg {
    width: 18px !important;
    height: 18px !important;

    fill: currentColor !important;
}

.alpin-footer-whatsapp a:hover {
    background:
        var(--alpin-red, #d40000) !important;

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

    color: #ffffff !important;

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


/* =========================================================
   ENDE
   60-alpin-footer.css
========================================================= */