/* =========================================================
   11 | ALPIN PERFORMANCE INTRO SYSTEM
   STABILE MODULARE VERSION
   TYPOGRAFIE: lokale Archivo-Fonts aus ALPIN Core
   ========================================================= */


/* =========================================================
   01 | BASIS
   ========================================================= */

.alpin-performance-intro {

    --alpin-height: 600px;

    --alpin-image-size: 100%;
    --alpin-image-x: 100%;
    --alpin-image-y: 50%;

    --alpin-col-content: 80%;
    --alpin-col-visual: 20%;

    --alpin-text-width: 650px;

    --alpin-text-x: 0px;
    --alpin-text-y: 0px;

    --alpin-content-top: 38px;
    --alpin-content-right: 24px;
    --alpin-content-bottom: 38px;
    --alpin-content-left: 72px;

    position: relative !important;

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

    height: var(--alpin-height) !important;
    min-height: var(--alpin-height) !important;

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

    display: grid !important;

    grid-template-columns:
        var(--alpin-col-content)
        var(--alpin-col-visual) !important;

    overflow: hidden !important;

    box-sizing: border-box !important;

    background-color: #f5f5f5 !important;

    background-repeat: no-repeat !important;

    background-size:
        auto var(--alpin-image-size) !important;

    background-position:
        var(--alpin-image-x)
        var(--alpin-image-y) !important;
}


/* =========================================================
   02 | VARIANTE 1 – POWERUP
   ========================================================= */

.alpin-performance-product {

    --alpin-height: 430px;

    --alpin-image-size: 165%;
    --alpin-image-x: 100%;
    --alpin-image-y: calc(70% - 10px);

    --alpin-col-content: 80%;
    --alpin-col-visual: 20%;

    --alpin-text-width: 650px;

    --alpin-text-x: 0px;
    --alpin-text-y: 0px;

    --alpin-content-top: 38px;
    --alpin-content-right: 24px;
    --alpin-content-bottom: 38px;
    --alpin-content-left: 72px;
}


/* =========================================================
   03 | VARIANTE 2 – SOUVERÄNITÄT
   ========================================================= */

.alpin-performance-sovereignty {

    --alpin-height: 300px;

    --alpin-image-size: 150%;
    --alpin-image-x: 100%;
    --alpin-image-y: 80%;

    --alpin-col-content: 80%;
    --alpin-col-visual: 20%;

    --alpin-text-width: 570px;

    --alpin-text-x: 0px;
    --alpin-text-y: 0px;

    --alpin-content-top: 38px;
    --alpin-content-right: 24px;
    --alpin-content-bottom: 38px;
    --alpin-content-left: 72px;
}


/* =========================================================
   04 | VARIANTE 3 – DEVELOPMENT / REVERSE
   Bild: alpin-dev.webp
   ========================================================= */

.alpin-performance-dev.alpin-performance-reverse {

    --alpin-height: 275px;

    --alpin-image-size: 100%;

    --alpin-image-x: 0%;
    --alpin-image-y: 50%;

    --alpin-col-visual: 40%;
    --alpin-col-content: 60%;

    --alpin-text-width: 750px;

    --alpin-text-x: 0px;
    --alpin-text-y: 0px;

    --alpin-content-top: 10px;
    --alpin-content-right: 45px;
    --alpin-content-bottom: 30px;
    --alpin-content-left: 300px;
}


/* =========================================================
   05 | STANDARD-VERLAUF
   ========================================================= */

.alpin-performance-intro::after {

    content: "" !important;

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

    z-index: 1 !important;

    pointer-events: none !important;

    background:
        linear-gradient(
            90deg,
            #f5f5f5 0%,
            #f5f5f5 27%,
            rgba(245,245,245,1) 31%,
            rgba(245,245,245,.98) 35%,
            rgba(245,245,245,.92) 39%,
            rgba(245,245,245,.74) 43%,
            rgba(245,245,245,.46) 47%,
            rgba(245,245,245,.20) 51%,
            rgba(245,245,245,0) 57%
        ) !important;
}


/* =========================================================
   06 | SOUVERÄNITÄT – VERLAUF
   ========================================================= */

.alpin-performance-sovereignty::after {

    background:
        linear-gradient(
            90deg,
            #f5f5f5 0%,
            #f5f5f5 28%,
            rgba(245,245,245,1) 32%,
            rgba(245,245,245,.97) 36%,
            rgba(245,245,245,.87) 40%,
            rgba(245,245,245,.65) 45%,
            rgba(245,245,245,.36) 50%,
            rgba(245,245,245,.12) 55%,
            rgba(245,245,245,0) 61%
        ) !important;
}


/* =========================================================
   07 | CONTENT-CONTAINER
   ========================================================= */

.alpin-performance-content {

    position: relative !important;

    z-index: 3 !important;

    grid-column: 1 !important;

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

    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;

    padding:
        var(--alpin-content-top)
        var(--alpin-content-right)
        var(--alpin-content-bottom)
        var(--alpin-content-left) !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: transparent !important;

    transform:
        translate(
            var(--alpin-text-x),
            var(--alpin-text-y)
        ) !important;
}


/* =========================================================
   08 | VISUAL-CONTAINER
   ========================================================= */

.alpin-performance-visual {

    position: relative !important;

    z-index: 2 !important;

    grid-column: 2 !important;

    width: 100% !important;

    height: 100% !important;
    min-height: 0 !important;

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

    box-sizing: border-box !important;

    background: transparent !important;

    pointer-events: none !important;
}


/* =========================================================
   09 | EYEBROW
   ========================================================= */

.alpin-performance-eyebrow {

    position: relative !important;

    width: auto !important;

    margin:
        0
        0
        18px
        0 !important;

    padding:
        0
        0
        12px
        0 !important;
}


.alpin-performance-eyebrow::after {

    content: "" !important;

    position: absolute !important;

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

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

    background: #d40000 !important;
}


.alpin-performance-eyebrow,
.alpin-performance-eyebrow *,
.alpin-performance-eyebrow .elementor-heading-title {

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

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

    line-height: 1.2 !important;

    letter-spacing: .45px !important;

    text-transform: uppercase !important;

    color: #151515 !important;
}


.alpin-performance-eyebrow
.elementor-heading-title {

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

    white-space: nowrap !important;
}


/* =========================================================
   10 | HEADLINE SCHWARZ
   ========================================================= */

.alpin-performance-title {

    position: relative !important;

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

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

    overflow: visible !important;
}


.alpin-performance-title
.elementor-widget-container {

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

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

    overflow: visible !important;
}


.alpin-performance-intro
.alpin-performance-title
.elementor-heading-title {

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

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

    line-height: .92 !important;

    letter-spacing: -.4px !important;

    text-transform: uppercase !important;

    color: #111111 !important;

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

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

    white-space: nowrap !important;

    overflow: visible !important;
}


/* =========================================================
   11 | HEADLINE ROT
   ========================================================= */

.alpin-performance-title-red {

    position: relative !important;

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

    margin:
        6px
        0
        0
        0 !important;

    padding: 0 !important;

    overflow: visible !important;
}


.alpin-performance-title-red
.elementor-widget-container {

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

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

    overflow: visible !important;
}


.alpin-performance-intro
.alpin-performance-title-red
.elementor-heading-title {

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

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

    line-height: .92 !important;

    letter-spacing: -.4px !important;

    text-transform: uppercase !important;

    color: #d40000 !important;

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

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

    white-space: nowrap !important;

    overflow: visible !important;
}


/* =========================================================
   12 | BODY TEXT
   ========================================================= */

.alpin-performance-text {

    width: 100% !important;

    max-width:
        var(--alpin-text-width) !important;

    margin:
        24px
        0
        0
        0 !important;

    padding: 0 !important;

    box-sizing: border-box !important;

    flex: 0 0 auto !important;

    align-self: flex-start !important;
}


/* =========================================================
   13 | ELEMENTOR BODY-TEXT BREITEN-FIX
   ========================================================= */

.alpin-performance-intro
.alpin-performance-text.elementor-element {

    width: 100% !important;

    max-width:
        var(--alpin-text-width) !important;

    flex-basis: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}


.alpin-performance-intro
.alpin-performance-text
.elementor-widget-container {

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


.alpin-performance-intro
.alpin-performance-text
.elementor-widget-container > * {

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


.alpin-performance-intro
.alpin-performance-text p {

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


.alpin-performance-dev
.alpin-performance-content
.alpin-performance-text {

    width:
        var(--alpin-text-width) !important;

    max-width:
        var(--alpin-text-width) !important;

    flex-basis: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}


.alpin-performance-text,
.alpin-performance-text *,
.alpin-performance-text p {

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

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

    line-height: 1.55 !important;

    color: #222222 !important;
}


.alpin-performance-text p {

    margin:
        0
        0
        14px
        0 !important;

    padding: 0 !important;
}


.alpin-performance-text p:last-child {

    margin-bottom: 0 !important;
}


/* =========================================================
   14 | BUTTON
   ========================================================= */

.alpin-performance-button {

    width: auto !important;

    margin:
        23px
        0
        0
        0 !important;

    padding: 0 !important;
}


.alpin-performance-button
.elementor-button {

    min-width: 205px !important;
    min-height: 46px !important;

    padding:
        0
        22px !important;

    display: inline-flex !important;

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

    gap: 15px !important;

    background: #d40000 !important;

    border:
        1px solid
        #d40000 !important;

    border-radius: 0 !important;

    color: #ffffff !important;

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

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

    text-transform: uppercase !important;

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

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


.alpin-performance-button
.elementor-button:hover {

    background: #b80000 !important;

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


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

.alpin-performance-content
.elementor-element {

    margin-left: 0 !important;
    margin-right: 0 !important;
}


.alpin-performance-content
.elementor-widget-container {

    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* =========================================================
   16 | REVERSE
   ========================================================= */

.alpin-performance-intro.alpin-performance-reverse {

    grid-template-columns:
        var(--alpin-col-visual)
        var(--alpin-col-content) !important;
}


.alpin-performance-reverse
.alpin-performance-content {

    grid-column: 2 !important;
}


.alpin-performance-reverse
.alpin-performance-visual {

    grid-column: 1 !important;
}


/* =========================================================
   17 | REVERSE STANDARDVERLAUF
   ========================================================= */

.alpin-performance-intro.alpin-performance-reverse::after {

    background:
        linear-gradient(
            90deg,
            rgba(245,245,245,0) 0%,
            rgba(245,245,245,0) 35%,
            rgba(245,245,245,.10) 40%,
            rgba(245,245,245,.30) 44%,
            rgba(245,245,245,.55) 48%,
            rgba(245,245,245,.78) 52%,
            rgba(245,245,245,.92) 56%,
            rgba(245,245,245,.98) 60%,
            #f5f5f5 65%,
            #f5f5f5 100%
        ) !important;
}


/* =========================================================
   18 | DEVELOPMENT VERLAUF
   ========================================================= */

.alpin-performance-dev.alpin-performance-reverse::after {

    background:
        linear-gradient(
            90deg,
            rgba(245,245,245,0) 0%,
            rgba(245,245,245,0) 12%,
            rgba(245,245,245,.10) 18%,
            rgba(245,245,245,.25) 22%,
            rgba(245,245,245,.45) 26%,
            rgba(245,245,245,.68) 30%,
            rgba(245,245,245,.86) 34%,
            rgba(245,245,245,.96) 38%,
            rgba(245,245,245,.995) 42%,
            #f5f5f5 46%,
            #f5f5f5 100%
        ) !important;
}


/* =========================================================
   19 | OPTIONALE MODIFIER
   ========================================================= */

.alpin-performance-compact {
    --alpin-height: 320px;
}

.alpin-performance-tall {
    --alpin-height: 480px;
}

.alpin-performance-text-up {
    --alpin-text-y: -30px;
}

.alpin-performance-text-down {
    --alpin-text-y: 30px;
}

.alpin-performance-text-left {
    --alpin-text-x: -30px;
}

.alpin-performance-text-right {
    --alpin-text-x: 30px;
}

.alpin-performance-wide-text {
    --alpin-text-width: 800px;
}

.alpin-performance-narrow-text {
    --alpin-text-width: 500px;
}


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

@media (max-width: 1024px) {

    .alpin-performance-intro:not(.alpin-performance-reverse) {

        --alpin-col-content: 55%;
        --alpin-col-visual: 45%;

        grid-template-columns:
            var(--alpin-col-content)
            var(--alpin-col-visual) !important;
    }


    .alpin-performance-intro.alpin-performance-reverse {

        --alpin-col-visual: 45%;
        --alpin-col-content: 55%;

        grid-template-columns:
            var(--alpin-col-visual)
            var(--alpin-col-content) !important;
    }


    .alpin-performance-content {

        --alpin-content-left: 30px;
        --alpin-content-right: 30px;
    }


    .alpin-performance-intro
    .alpin-performance-title
    .elementor-heading-title,

    .alpin-performance-intro
    .alpin-performance-title-red
    .elementor-heading-title {

        font-size: 32px !important;

        white-space: normal !important;
    }


    .alpin-performance-text,
    .alpin-performance-dev
    .alpin-performance-content
    .alpin-performance-text {

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


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

@media (max-width: 767px) {

    .alpin-performance-intro,
    .alpin-performance-intro.alpin-performance-reverse {

        display: block !important;

        height: auto !important;
        min-height: auto !important;

        background-position:
            center bottom !important;

        background-size:
            auto 290px !important;
    }


    .alpin-performance-intro::after,
    .alpin-performance-sovereignty::after,
    .alpin-performance-intro.alpin-performance-reverse::after,
    .alpin-performance-dev.alpin-performance-reverse::after {

        background:
            linear-gradient(
                180deg,
                #f5f5f5 0%,
                #f5f5f5 48%,
                rgba(245,245,245,.96) 55%,
                rgba(245,245,245,.72) 63%,
                rgba(245,245,245,.32) 71%,
                rgba(245,245,245,0) 80%
            ) !important;
    }


    .alpin-performance-content,
    .alpin-performance-reverse
    .alpin-performance-content {

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        padding:
            40px
            24px
            320px
            24px !important;

        transform: none !important;
    }


    .alpin-performance-visual,
    .alpin-performance-reverse
    .alpin-performance-visual {

        display: none !important;
    }


    .alpin-performance-text,
    .alpin-performance-dev
    .alpin-performance-content
    .alpin-performance-text {

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


    .alpin-performance-intro
    .alpin-performance-title
    .elementor-heading-title,

    .alpin-performance-intro
    .alpin-performance-title-red
    .elementor-heading-title {

        font-size: 34px !important;

        white-space: normal !important;

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


/* =========================================================
   22 | ALPIN DUO SECTION
   Händler / Werkstatt + Österreich

   STRUKTUR:
   .alpin-duo-section
      +-- .alpin-duo-card.alpin-duo-dealer
      |      +-- .alpin-duo-content
      |
      +-- .alpin-duo-card.alpin-duo-austria
             +-- .alpin-duo-content

   AUFTEILUNG:
   LINKS  = 66,6667 %
   RECHTS = 33,3333 %

   ALPIN CONTENT-ABSTAND:
   Händler links = 72px
   ========================================================= */


/* =========================================================
   22.1 | EINSTELLBARE GRUNDWERTE
   ========================================================= */

.alpin-duo-section {

    --alpin-duo-height: 380px;

    --alpin-duo-dealer-text: 44%;

    --alpin-duo-austria-text: 57%;

    --alpin-duo-content-edge: 72px;

    --alpin-duo-bg: #f5f5f5;

    --alpin-duo-red: #d40000;

    --width: 100% !important;

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

    height: var(--alpin-duo-height) !important;
    min-height: var(--alpin-duo-height) !important;

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

    box-sizing: border-box !important;
    overflow: hidden !important;

    display: flex !important;

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

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

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

    background: var(--alpin-duo-bg) !important;
}


/* =========================================================
   22.2 | DIREKTE KINDER
   Elementor-Werte neutralisieren
   ========================================================= */

.alpin-duo-section > * {

    position: relative !important;

    min-width: 0 !important;

    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;

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

    box-sizing: border-box !important;
    overflow: hidden !important;
}


/* =========================================================
   22.3 | LINKES DIREKTES KIND
   EXAKT 66,6667 %
   ========================================================= */

.alpin-duo-section > :nth-child(1) {

    --width: 66.6667% !important;

    width: 66.6667% !important;
    min-width: 66.6667% !important;
    max-width: 66.6667% !important;

    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: 66.6667% !important;

    align-self: stretch !important;
}


/* =========================================================
   22.4 | RECHTES DIREKTES KIND
   EXAKT 33,3333 %
   ========================================================= */

.alpin-duo-section > :nth-child(2) {

    --width: 33.3333% !important;

    width: 33.3333% !important;
    min-width: 33.3333% !important;
    max-width: 33.3333% !important;

    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: 33.3333% !important;

    align-self: stretch !important;

    border-left: 1px solid rgba(0, 0, 0, 0.10) !important;
}


/* =========================================================
   22.5 | KARTEN – GEMEINSAME BASIS
   ========================================================= */

.alpin-duo-card {

    position: relative !important;

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

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

    box-sizing: border-box !important;
    overflow: hidden !important;

    background-color: var(--alpin-duo-bg) !important;

    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
}


/* =========================================================
   22.6 | LINKER HÄNDLER-/WERKSTATT-CONTAINER
   ========================================================= */

.alpin-duo-dealer {

    --alpin-card-text-width:
        var(--alpin-duo-dealer-text);

    background-position: center center !important;
}


/* =========================================================
   22.7 | RECHTER AUSTRIA-CONTAINER
   ========================================================= */

.alpin-duo-austria {

    --alpin-card-text-width:
        var(--alpin-duo-austria-text);

    background-position: center center !important;
}


/* =========================================================
   22.8 | TEXTCONTAINER – GRUNDEINSTELLUNG
   ========================================================= */

.alpin-duo-content {

    --width:
        var(--alpin-card-text-width, 50%) !important;

    position: relative !important;
    z-index: 5 !important;

    width:
        var(--alpin-card-text-width, 50%) !important;

    max-width:
        var(--alpin-card-text-width, 50%) !important;

    min-width: 0 !important;

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

    margin: 0 !important;

    padding:
        30px
        24px
        30px
        42px !important;

    box-sizing: border-box !important;

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

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

    gap: 0 !important;

    background: transparent !important;
}


/* =========================================================
   22.8A | HÄNDLER / WERKSTATT
   ALPIN Standard-Fluchtlinie = 72px
   ========================================================= */

.alpin-duo-dealer .alpin-duo-content {

    padding-top: 30px !important;

    padding-right: 24px !important;

    padding-bottom: 30px !important;

    padding-left:
        var(--alpin-duo-content-edge) !important;
}


/* =========================================================
   22.8B | AUSTRIA TEXTBEREICH
   ========================================================= */

.alpin-duo-austria .alpin-duo-content {

    padding-top: 30px !important;
    padding-right: 20px !important;
    padding-bottom: 30px !important;
    padding-left: 34px !important;
}


/* =========================================================
   22.9 | WEISSER VERLAUF ÜBER DEM BILD
   ========================================================= */

.alpin-duo-card::before {

    content: "" !important;

    position: absolute !important;
    z-index: 2 !important;

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

    pointer-events: none !important;

    width:
        calc(
            var(--alpin-card-text-width, 50%)
            + 150px
        ) !important;

    background:
        linear-gradient(
            90deg,

            rgba(245,245,245,1) 0%,
            rgba(245,245,245,1) 48%,

            rgba(245,245,245,.99) 58%,
            rgba(245,245,245,.96) 66%,
            rgba(245,245,245,.86) 73%,
            rgba(245,245,245,.68) 80%,
            rgba(245,245,245,.44) 87%,
            rgba(245,245,245,.20) 94%,
            rgba(245,245,245,0) 100%
        ) !important;
}


/* linker Verlauf darf breiter laufen */

.alpin-duo-dealer::before {

    width:
        calc(
            var(--alpin-card-text-width)
            + 180px
        ) !important;
}


/* rechte Karte kompakter */

.alpin-duo-austria::before {

    width:
        calc(
            var(--alpin-card-text-width)
            + 90px
        ) !important;
}


/* =========================================================
   22.10 | ALLE ELEMENTOR-WIDGETS IM TEXTCONTAINER
   ========================================================= */

.alpin-duo-content > .elementor-element {

    --width: 100% !important;

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

    min-width: 0 !important;

    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
}


/* =========================================================
   22.11 | EYEBROW
   ========================================================= */

.alpin-duo-eyebrow {

    position: relative !important;

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

    margin:
        0
        0
        20px
        0 !important;

    padding:
        0
        0
        10px
        0 !important;

    box-sizing: border-box !important;
}


.alpin-duo-eyebrow::after {

    content: "" !important;

    position: absolute !important;

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

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

    background:
        var(--alpin-duo-red) !important;
}


.alpin-duo-eyebrow,
.alpin-duo-eyebrow *,
.alpin-duo-eyebrow p,
.alpin-duo-eyebrow .elementor-heading-title {

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

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

    line-height: 1.25 !important;

    letter-spacing: .25px !important;

    text-transform: uppercase !important;

    color: #151515 !important;
}


.alpin-duo-eyebrow p {

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


/* =========================================================
   22.12 | HEADLINE
   ========================================================= */

.alpin-duo-title {

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

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


.alpin-duo-title .elementor-widget-container {

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

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


.alpin-duo-title .elementor-heading-title {

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

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

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

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

    line-height: 1.12 !important;

    letter-spacing: -.5px !important;

    color: #111111 !important;
}


/* rechte Karte etwas kleiner */

.alpin-duo-austria
.alpin-duo-title
.elementor-heading-title {

    font-size: 23px !important;
}


/* =========================================================
   22.13 | BODYTEXT
   ========================================================= */

.alpin-duo-text {

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

    margin:
        18px
        0
        0
        0 !important;

    padding: 0 !important;
}


.alpin-duo-text .elementor-widget-container {

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

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


.alpin-duo-text,
.alpin-duo-text *,
.alpin-duo-text p {

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

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

    line-height: 1.48 !important;

    color: #333333 !important;
}


.alpin-duo-text p {

    margin:
        0
        0
        8px
        0 !important;

    padding: 0 !important;
}


/* =========================================================
   22.14 | BUTTON-BEREICH
   ========================================================= */

.alpin-duo-actions {

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

    margin:
        20px
        0
        0
        0 !important;

    padding: 0 !important;

    display: flex !important;

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

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

    gap: 10px !important;
}


/* =========================================================
   22.15 | PRIMÄRER BUTTON
   ========================================================= */

.alpin-duo-actions .elementor-button {

    min-height: 40px !important;

    padding:
        0
        20px !important;

    display: inline-flex !important;

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

    background:
        var(--alpin-duo-red) !important;

    border:
        1px solid
        var(--alpin-duo-red) !important;

    border-radius: 0 !important;

    box-shadow: none !important;

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

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

    line-height: 1 !important;

    text-transform: uppercase !important;

    color: #ffffff !important;

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


.alpin-duo-actions .elementor-button:hover {

    background: #111111 !important;

    border-color: #111111 !important;

    color: #ffffff !important;
}


/* =========================================================
   22.16 | SEKUNDÄRER BUTTON
   Elementor CSS-Klasse:
   alpin-duo-button-secondary
   ========================================================= */

.alpin-duo-button-secondary .elementor-button {

    background: #ffffff !important;

    border:
        1px solid #777777 !important;

    color: #111111 !important;
}


.alpin-duo-button-secondary .elementor-button:hover {

    background: #111111 !important;

    border-color: #111111 !important;

    color: #ffffff !important;
}


/* =========================================================
   22.17 | TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .alpin-duo-section {

        height: auto !important;
        min-height: 0 !important;

        flex-direction: column !important;

        overflow: visible !important;
    }


    .alpin-duo-section > :nth-child(1),
    .alpin-duo-section > :nth-child(2) {

        --width: 100% !important;

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

        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: 100% !important;

        height: 360px !important;
        min-height: 360px !important;
        max-height: none !important;
    }


    .alpin-duo-section > :nth-child(2) {

        border-left: 0 !important;

        border-top:
            1px solid
            rgba(0,0,0,.10) !important;
    }


    .alpin-duo-dealer {

        --alpin-card-text-width: 48%;
    }


    .alpin-duo-austria {

        --alpin-card-text-width: 48%;
    }


    .alpin-duo-dealer .alpin-duo-content {

        padding-left: 40px !important;
    }
}


/* =========================================================
   22.18 | MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .alpin-duo-section > :nth-child(1),
    .alpin-duo-section > :nth-child(2) {

        height: auto !important;

        min-height: 520px !important;
    }


    .alpin-duo-card {

        background-size:
            auto 240px !important;

        background-position:
            center bottom !important;
    }


    .alpin-duo-dealer,
    .alpin-duo-austria {

        --alpin-card-text-width: 100%;
    }


    .alpin-duo-card::before,
    .alpin-duo-dealer::before,
    .alpin-duo-austria::before {

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

        width: 100% !important;
        height: 350px !important;

        background:
            linear-gradient(
                180deg,

                rgba(245,245,245,1) 0%,
                rgba(245,245,245,1) 72%,

                rgba(245,245,245,.96) 80%,
                rgba(245,245,245,.78) 86%,
                rgba(245,245,245,.48) 92%,
                rgba(245,245,245,0) 100%
            ) !important;
    }


    .alpin-duo-content,
    .alpin-duo-dealer .alpin-duo-content,
    .alpin-duo-austria .alpin-duo-content {

        --width: 100% !important;

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

        height: auto !important;
        min-height: 0 !important;

        padding:
            28px
            24px
            260px
            24px !important;
    }


    .alpin-duo-title
    .elementor-heading-title,

    .alpin-duo-austria
    .alpin-duo-title
    .elementor-heading-title {

        font-size: 23px !important;
    }
}


/* =========================================================
   ENDE
   22 | ALPIN DUO SECTION
   ========================================================= */


/* =========================================================
   ENDE
   11 | ALPIN PERFORMANCE + DUO SYSTEM
   ========================================================= */