/* ============================================================
   MOTAVIO /FAHRZEUGCHECK
   VIDEO BIGGER + SUPPORT V1

   #168FE6
   #071A2C
   #FFFFFF
   ============================================================ */


/* ============================================================
   VIDEO ETWAS GRÖSSER
   ============================================================ */

.mv-history-why__shell {

    width:
        min(
            1220px,
            calc(100% - 44px)
        ) !important;

    max-width:
        1220px !important;

}


.mv-history-why__content {

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, .85fr) !important;

    gap:
        22px !important;

}


.mv-history-why__video {

    min-height:
        375px !important;

}


.mv-history-why__video-image {

    inset:
        12px !important;

    width:
        calc(
            100% - 24px
        ) !important;

    height:
        calc(
            100% - 24px
        ) !important;

}


/* Play passend größer */

.mv-history-why__play {

    width:
        80px !important;

    height:
        80px !important;

}


/* Benefits bleiben kompakt */

.mv-history-why__benefits {

    align-content:
        center !important;

}


/* ============================================================
   SUPPORT SECTION
   ============================================================ */

.mv-support-v1 {

    --blue:
        #168FE6;

    --blue-dark:
        #0D78CE;

    --dark:
        #071A2C;

    --text:
        #536A7E;

    --line:
        #D6E5F0;


    padding:
        68px
        0
        72px;


    background:
        radial-gradient(
            circle at 50% -20%,
            rgba(22,143,230,.19),
            transparent 32rem
        ),
        linear-gradient(
            180deg,
            #EAF6FE 0%,
            #DFF1FC 100%
        );


    color:
        var(--dark);


    text-align:
        center;


    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;


    -webkit-font-smoothing:
        antialiased;

}


.mv-support-v1 * {

    box-sizing:
        border-box;

}


.mv-support-v1__shell {

    width:
        min(
            1020px,
            calc(100% - 44px)
        );


    margin:
        0
        auto;

}


/* ============================================================
   PEOPLE / BRAND BUBBLES
   ============================================================ */

.mv-support-v1__people {

    display:
        flex;


    align-items:
        center;


    justify-content:
        center;


    margin-bottom:
        18px;


    padding-left:
        12px;

}


.mv-support-v1__people span {

    width:
        48px;


    height:
        48px;


    display:
        grid;


    place-items:
        center;


    margin-left:
        -12px;


    border:
        3px solid
        #E8F6FE;


    border-radius:
        50%;


    color:
        #FFFFFF;


    background:
        linear-gradient(
            145deg,
            #168FE6,
            #0D78CE
        );


    box-shadow:
        0
        8px
        20px
        rgba(7,26,44,.10);


    font-size:
        15px;


    font-weight:
        900;

}


.mv-support-v1__people span:nth-child(2) {

    background:
        #071A2C;

}


.mv-support-v1__people span:nth-child(3) {

    color:
        #168FE6;


    background:
        #FFFFFF;

}


/* ============================================================
   EYEBROW
   ============================================================ */

.mv-support-v1__eyebrow {

    display:
        block;


    margin-bottom:
        10px;


    color:
        var(--blue);


    font-size:
        10.5px;


    line-height:
        1;


    font-weight:
        850;


    letter-spacing:
        .09em;


    text-transform:
        uppercase;

}


/* ============================================================
   TITLE
   ============================================================ */

.mv-support-v1 h2 {

    max-width:
        760px;


    margin:
        0
        auto;


    color:
        var(--dark);


    font-size:
        clamp(
            38px,
            3.4vw,
            50px
        );


    line-height:
        1.03;


    font-weight:
        850;


    letter-spacing:
        -.045em;

}


.mv-support-v1 h2 span {

    color:
        var(--blue);

}


/* ============================================================
   LEAD
   ============================================================ */

.mv-support-v1__lead {

    max-width:
        720px;


    margin:
        15px
        auto
        0;


    color:
        #40596E;


    font-size:
        14px;


    line-height:
        1.55;

}


/* ============================================================
   ACTIONS
   ============================================================ */

.mv-support-v1__actions {

    display:
        flex;


    flex-wrap:
        wrap;


    align-items:
        center;


    justify-content:
        center;


    gap:
        10px;


    margin-top:
        23px;

}


.mv-support-v1__button {

    min-height:
        46px;


    display:
        inline-flex;


    align-items:
        center;


    justify-content:
        center;


    gap:
        8px;


    padding:
        0
        19px;


    border-radius:
        10px;


    text-decoration:
        none;


    font-size:
        12px;


    line-height:
        1;


    font-weight:
        850;


    transition:
        transform .16s ease,
        box-shadow .16s ease,
        background .16s ease;

}


.mv-support-v1__button:hover {

    transform:
        translateY(-2px);

}


/* PRIMARY */

.mv-support-v1__button--primary {

    border:
        1px solid
        var(--blue);


    color:
        #FFFFFF;


    background:
        linear-gradient(
            135deg,
            #168FE6,
            #0D78CE
        );


    box-shadow:
        0
        10px
        25px
        rgba(22,143,230,.22);

}


/* SECONDARY */

.mv-support-v1__button--secondary {

    border:
        1px solid
        rgba(22,143,230,.28);


    color:
        #168FE6;


    background:
        rgba(255,255,255,.86);

}


/* ============================================================
   THREE POINTS
   ============================================================ */

.mv-support-v1__points {

    max-width:
        870px;


    display:
        grid;


    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );


    gap:
        12px;


    margin:
        34px
        auto
        0;

}


.mv-support-v1__point {

    display:
        grid;


    grid-template-columns:
        42px
        minmax(0,1fr);


    align-items:
        center;


    gap:
        11px;


    padding:
        14px;


    border:
        1px solid
        rgba(22,143,230,.17);


    border-radius:
        14px;


    background:
        rgba(255,255,255,.72);


    box-shadow:
        0
        9px
        24px
        rgba(7,26,44,.035);


    text-align:
        left;

}


/* ICON */

.mv-support-v1__point-icon {

    width:
        42px;


    height:
        42px;


    display:
        grid;


    place-items:
        center;


    border-radius:
        11px;


    color:
        #168FE6;


    background:
        #FFFFFF;


    box-shadow:
        0
        6px
        16px
        rgba(22,143,230,.10);

}


.mv-support-v1__point-icon svg {

    width:
        21px;


    height:
        21px;


    fill:
        none;


    stroke:
        currentColor;


    stroke-width:
        1.8;


    stroke-linecap:
        round;


    stroke-linejoin:
        round;

}


/* POINT TEXT */

.mv-support-v1__point strong {

    display:
        block;


    margin-bottom:
        3px;


    color:
        #071A2C;


    font-size:
        11px;


    line-height:
        1.2;


    font-weight:
        850;

}


.mv-support-v1__point > div > span {

    display:
        block;


    color:
        #667B8D;


    font-size:
        8.5px;


    line-height:
        1.35;

}


/* ============================================================
   TABLET
   ============================================================ */

@media (
    max-width:
    900px
) {

    .mv-history-why__content {

        grid-template-columns:
            1fr !important;

    }


    .mv-history-why__video {

        min-height:
            430px !important;

    }


    .mv-support-v1__points {

        grid-template-columns:
            1fr;

        max-width:
            520px;

    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (
    max-width:
    650px
) {

    .mv-history-why__video {

        min-height:
            300px !important;

    }


    .mv-support-v1 {

        padding:
            52px
            0
            58px;

    }


    .mv-support-v1__shell {

        width:
            calc(
                100% - 28px
            );

    }


    .mv-support-v1 h2 {

        font-size:
            34px;

    }


    .mv-support-v1__lead {

        font-size:
            13px;

    }


    .mv-support-v1__actions {

        display:
            grid;

        grid-template-columns:
            1fr;

    }


    .mv-support-v1__button {

        width:
            100%;

    }

}