/* ============================================================
   TIP FAHRSCHULE
   CLEAN FINAL CTA
   ============================================================ */

.tip-endcta,
.tip-endcta *,
.tip-endcta *::before,
.tip-endcta *::after {
    box-sizing: border-box;
}


.tip-endcta {

    --tip-red: #e30613;
    --tip-red-dark: #bd0010;

    --tip-yellow: #ffd600;

    --tip-dark: #0e0f11;

    position: relative;

    width: 100%;
    min-height: 540px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        var(--tip-dark);

    font-family:
        "Inter",
        Arial,
        sans-serif;
}


/* ============================================================
   BACKGROUND
   ============================================================ */

.tip-endcta__media {

    position: absolute;
    inset: 0;

    z-index: 0;
}


.tip-endcta__media img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center center;

    transform: scale(1.02);

    filter:
        saturate(.88)
        contrast(1.03);

    transition:
        transform 8s ease;
}


.tip-endcta:hover
.tip-endcta__media img {

    transform:
        scale(1.045);
}


/* ============================================================
   OVERLAY
   ============================================================ */

.tip-endcta__overlay {

    position: absolute;
    inset: 0;

    z-index: 1;

    background:

        linear-gradient(
            90deg,
            rgba(7,8,10,.94) 0%,
            rgba(7,8,10,.88) 30%,
            rgba(7,8,10,.72) 52%,
            rgba(7,8,10,.37) 77%,
            rgba(7,8,10,.20) 100%
        );
}


/* nur ganz dezentes Rot links */

.tip-endcta__overlay::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(227,6,19,.13) 0%,
            rgba(227,6,19,.045) 28%,
            transparent 50%
        );
}


/* ============================================================
   CONTAINER
   ============================================================ */

.tip-endcta__container {

    position: relative;

    z-index: 3;

    width:
        min(
            1350px,
            calc(100% - 80px)
        );

    margin: 0 auto;

    padding:
        92px 0;
}


/* ============================================================
   CONTENT
   ============================================================ */

.tip-endcta__content {

    max-width:
        760px;
}


/* ============================================================
   KICKER
   Sehr leicht, keine Punkte
   ============================================================ */

.tip-endcta__kicker {

    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom:
        18px;

    color:
        rgba(255,255,255,.67);

    font-size:
        11px;

    font-weight:
        450;

    line-height:
        1;

    letter-spacing:
        .075em;

    text-transform:
        uppercase;
}


.tip-endcta__kicker > span {

    width:
        32px;

    height:
        1px;

    background:
        var(--tip-red);
}


/* ============================================================
   HEADLINE
   ============================================================ */

.tip-endcta h2 {

    max-width:
        750px;

    margin: 0;

    color:
        #fff;

    font-size:
        clamp(
            43px,
            4.35vw,
            67px
        );

    font-weight:
        610;

    line-height:
        1.01;

    letter-spacing:
        -.048em;

    text-wrap:
        balance;
}


.tip-endcta h2 strong {

    position: relative;

    display: inline-block;

    color:
        var(--tip-yellow);

    font-weight:
        610;
}


/* rote feine Unterstreichung */

.tip-endcta h2 strong::after {

    content: "";

    position: absolute;

    left: 2px;
    bottom: -8px;

    width:
        100%;

    height:
        3px;

    background:
        var(--tip-red);
}


/* ============================================================
   TEXT
   ============================================================ */

.tip-endcta__text {

    max-width:
        675px;

    margin:
        29px 0 0;

    color:
        rgba(255,255,255,.73);

    font-size:
        16px;

    font-weight:
        400;

    line-height:
        1.7;
}


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

.tip-endcta__actions {

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
        12px;

    margin-top:
        34px;
}


/* ============================================================
   BUTTON BASE
   ============================================================ */

.tip-endcta-btn {

    min-height:
        60px;

    display: inline-flex;
    align-items: center;

    overflow: hidden;

    border-radius:
        10px;

    text-decoration:
        none !important;

    transition:

        transform .25s ease,
        background-color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


/* ============================================================
   PRIMARY BUTTON
   ============================================================ */

.tip-endcta-btn--primary {

    color:
        #fff !important;

    background:
        var(--tip-red);

    border:
        1px solid
        var(--tip-red);

    box-shadow:
        0 14px 35px
        rgba(227,6,19,.20);
}


.tip-endcta-btn__text {

    display: flex;
    align-items: center;

    min-height:
        58px;

    padding:
        0 24px;

    font-size:
        14px;

    font-weight:
        620;

    letter-spacing:
        -.01em;
}


/* ============================================================
   YELLOW ARROW AREA
   ============================================================ */

.tip-endcta-btn__arrow {

    width:
        59px;

    min-height:
        58px;

    align-self: stretch;

    display: flex;
    align-items: center;
    justify-content: center;

    color:
        #111;

    background:
        var(--tip-yellow);

    transition:
        width .27s ease;
}


.tip-endcta-btn__arrow svg {

    width:
        20px;

    height:
        20px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        transform .27s ease;
}


/* ============================================================
   PRIMARY HOVER
   ============================================================ */

.tip-endcta-btn--primary:hover {

    transform:
        translateY(-3px);

    background:
        var(--tip-red-dark);

    border-color:
        var(--tip-red-dark);

    box-shadow:
        0 19px 43px
        rgba(227,6,19,.26);
}


.tip-endcta-btn--primary:hover
.tip-endcta-btn__arrow {

    width:
        67px;
}


.tip-endcta-btn--primary:hover
.tip-endcta-btn__arrow svg {

    transform:
        translateX(4px);
}


/* ============================================================
   SECONDARY BUTTON
   ============================================================ */

.tip-endcta-btn--secondary {

    gap:
        11px;

    padding:
        0 20px;

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

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

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

    font-size:
        13px;

    font-weight:
        500;

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);
}


/* LOCATION ICON */

.tip-endcta-btn__location {

    width:
        33px;

    height:
        33px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color:
        var(--tip-yellow);

    border:
        1px solid
        rgba(255,214,0,.32);

    border-radius:
        7px;

    transition:
        background-color .25s ease,
        color .25s ease;
}


.tip-endcta-btn__location svg {

    width:
        16px;

    height:
        16px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* SECONDARY HOVER */

.tip-endcta-btn--secondary:hover {

    transform:
        translateY(-3px);

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

    border-color:
        rgba(255,214,0,.35);
}


.tip-endcta-btn--secondary:hover
.tip-endcta-btn__location {

    color:
        #151515;

    background:
        var(--tip-yellow);
}


/* ============================================================
   TRUST
   ============================================================ */

.tip-endcta__trust {

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
        23px;

    margin-top:
        27px;

    color:
        rgba(255,255,255,.56);

    font-size:
        11px;

    font-weight:
        400;
}


.tip-endcta__trust > div {

    display: inline-flex;
    align-items: center;

    gap:
        8px;
}


.tip-endcta__trust > div > span {

    width:
        18px;

    height:
        18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color:
        #121212;

    background:
        var(--tip-yellow);

    border-radius:
        50%;
}


.tip-endcta__trust svg {

    width:
        10px;

    height:
        10px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        2.3;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* ============================================================
   BOTTOM BRAND BAR
   ============================================================ */

.tip-endcta__brandbar {

    position: absolute;

    z-index: 5;

    left: 0;
    right: 0;
    bottom: 0;

    height:
        4px;

    display: flex;
}


.tip-endcta__brandbar span {

    width:
        85%;

    background:
        var(--tip-red);
}


.tip-endcta__brandbar i {

    flex: 1;

    background:
        var(--tip-yellow);
}


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

@media (max-width: 1024px) {

    .tip-endcta {

        min-height:
            520px;
    }


    .tip-endcta__container {

        width:
            calc(100% - 60px);
    }


    .tip-endcta__content {

        max-width:
            700px;
    }

}


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

@media (max-width: 767px) {

    .tip-endcta {

        min-height:
            570px;
    }


    .tip-endcta__media img {

        object-position:
            62% center;
    }


    .tip-endcta__overlay {

        background:

            linear-gradient(
                180deg,
                rgba(7,8,10,.39) 0%,
                rgba(7,8,10,.70) 37%,
                rgba(7,8,10,.96) 75%,
                rgba(7,8,10,.99) 100%
            );
    }


    .tip-endcta__overlay::before {

        background:

            linear-gradient(
                180deg,
                transparent 25%,
                rgba(227,6,19,.08) 100%
            );
    }


    .tip-endcta__container {

        width:
            calc(100% - 38px);

        padding:
            72px 0 77px;
    }


    .tip-endcta__kicker {

        margin-bottom:
            15px;

        font-size:
            10px;

        font-weight:
            450;
    }


    .tip-endcta h2 {

        max-width:
            100%;

        font-size:
            clamp(
                38px,
                10vw,
                49px
            );

        font-weight:
            600;
    }


    .tip-endcta__text {

        margin-top:
            26px;

        font-size:
            14px;

        line-height:
            1.65;
    }


    .tip-endcta__actions {

        align-items:
            stretch;

        flex-direction:
            column;

        margin-top:
            27px;
    }


    .tip-endcta-btn {

        width:
            100%;
    }


    .tip-endcta-btn--primary {

        justify-content:
            space-between;
    }


    .tip-endcta-btn__text {

        flex:
            1;
    }


    .tip-endcta-btn__arrow {

        flex:
            0 0 59px;
    }


    .tip-endcta-btn--secondary {

        justify-content:
            center;
    }


    .tip-endcta__trust {

        margin-top:
            22px;

        gap:
            12px 20px;
    }

}


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

@media (max-width: 410px) {

    .tip-endcta__container {

        width:
            calc(100% - 30px);
    }


    .tip-endcta__trust {

        align-items:
            flex-start;

        flex-direction:
            column;
    }

}


/* ============================================================
   FOCUS
   ============================================================ */

.tip-endcta-btn:focus-visible {

    outline:
        3px solid
        var(--tip-yellow);

    outline-offset:
        4px;
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .tip-endcta__media img,
    .tip-endcta-btn,
    .tip-endcta-btn__arrow,
    .tip-endcta-btn__arrow svg {

        transition:
            none !important;
    }

}