/* ============================================================
   TIP HERO
   ============================================================ */

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


.tip-hero {

    /* ========================================================
       FESTE TIP CI
       Elementor Globals werden innerhalb dieses Bereichs
       bewusst überschrieben.
       ======================================================== */

    --tip-red: #e30613;
    --tip-red-dark: #b9000d;
    --tip-red-deep: #930009;

    --tip-yellow: #ffd600;

    --tip-black: #090a0c;
    --tip-dark: #101114;

    --tip-title-color: #ffffff;
    --tip-lead-color: rgba(255,255,255,.75);
    --tip-eyebrow-color: rgba(255,255,255,.64);
    --tip-facts-color: rgba(255,255,255,.58);

    --e-global-color-primary: #e30613 !important;
    --e-global-color-secondary: #111216 !important;
    --e-global-color-accent: #ffd600 !important;

    position: relative;

    width: 100%;

    overflow: hidden;

    background:
        var(--tip-black);

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


/* ============================================================
   RESET ELEMENTOR LINK COLORS
   ============================================================ */

.tip-hero a,
.tip-hero a:link,
.tip-hero a:visited,
.tip-hero a:hover,
.tip-hero a:active {

    text-decoration:
        none !important;
}


/* ============================================================
   SLIDER
   ============================================================ */

.tip-hero__slider {

    position: relative;

    width: 100%;

    height:
        clamp(
            650px,
            76vh,
            805px
        );

    min-height:
        650px;

    overflow: hidden;

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


/* ============================================================
   SLIDES
   ============================================================ */

.tip-hero__slide {

    position: absolute;

    inset: 0;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:

        opacity .85s
        cubic-bezier(.2,.7,.2,1),

        visibility .85s ease;
}


.tip-hero__slide.is-active {

    z-index: 2;

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* ============================================================
   IMAGE
   ============================================================ */

.tip-hero__image {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position:
        center center;

    transform:
        scale(1.015);

    filter:
        saturate(.94)
        contrast(1.035);

    transition:
        transform 8s
        cubic-bezier(.2,.7,.2,1);
}


.tip-hero__slide.is-active
.tip-hero__image {

    transform:
        scale(1.055);
}


/* ============================================================
   OVERLAY
   schwarz + echtes Rot
   KEIN LILA / MAGENTA
   ============================================================ */

.tip-hero__overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(
            90deg,
            rgba(6,7,9,.97) 0%,
            rgba(12,7,8,.95) 18%,
            rgba(16,7,8,.88) 32%,
            rgba(7,9,12,.69) 53%,
            rgba(5,10,14,.31) 76%,
            rgba(5,10,14,.08) 100%
        );
}


/* rote Lichtstimmung links */

.tip-hero__overlay::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(227,6,19,.23) 0%,
            rgba(227,6,19,.115) 22%,
            rgba(227,6,19,.035) 43%,
            transparent 60%
        );
}


/* bottom readability */

.tip-hero__overlay::after {

    content: "";

    position: absolute;

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

    height:
        32%;

    background:

        linear-gradient(
            to top,
            rgba(0,0,0,.47),
            transparent
        );
}


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

.tip-hero__container {

    position: relative;

    z-index: 5;

    width:

        min(
            1350px,
            calc(100% - 90px)
        );

    height:
        100%;

    margin:
        0 auto;

    display: flex;

    align-items: center;
}


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

.tip-hero__content {

    width:

        min(
            770px,
            64%
        );

    padding-bottom:
        18px;
}


/* ============================================================
   EYEBROW
   dünn und clean
   ============================================================ */

.tip-hero__eyebrow {

    display: flex;

    align-items: center;

    gap:
        11px;

    margin-bottom:
        18px;

    color:
        var(--tip-eyebrow-color);

    font-size:
        10px;

    font-weight:
        450;

    line-height:
        1;

    letter-spacing:
        .075em;

    text-transform:
        uppercase;
}


.tip-hero__eyebrow > span {

    width:
        34px;

    height:
        1px;

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


/* ============================================================
   HEADLINES
   ============================================================ */

.tip-hero h1,
.tip-hero h2 {

    max-width:
        790px;

    margin: 0;

    color:
        var(--tip-title-color) !important;

    font-size:

        clamp(
            50px,
            4.55vw,
            74px
        );

    font-weight:
        620;

    line-height:
        .99;

    letter-spacing:
        -.052em;

    text-wrap:
        balance;
}


.tip-hero h1 strong,
.tip-hero h2 strong {

    display:
        block;

    color:
        var(--tip-title-color) !important;

    font-weight:
        620;
}


.tip-hero h1 em,
.tip-hero h2 em {

    position: relative;

    display:
        inline-block;

    color:
        var(--tip-yellow) !important;

    font-style:
        normal;
}


/* roter Akzent unter gelbem Wort */

.tip-hero h1 em::after,
.tip-hero h2 em::after {

    content: "";

    position: absolute;

    left:
        2px;

    bottom:
        -8px;

    width:
        67px;

    height:
        3px;

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


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

.tip-hero__lead {

    max-width:
        670px;

    margin:
        30px 0 0;

    color:
        var(--tip-lead-color);

    font-size:
        16px;

    font-weight:
        400;

    line-height:
        1.72;
}


/* ============================================================
   BUTTON AREA
   ============================================================ */

.tip-hero__actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap:
        12px;

    margin-top:
        34px;
}


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

.tip-hero-btn {

    min-height:
        60px;

    display:
        inline-flex;

    align-items:
        stretch;

    overflow:
        hidden;

    border-radius:
        10px;

    text-decoration:
        none !important;

    transition:

        transform .28s
        cubic-bezier(.2,.75,.2,1),

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


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

.tip-hero-btn--primary,
.tip-hero-btn--primary:link,
.tip-hero-btn--primary:visited {

    color:
        #ffffff !important;

    background:
        var(--tip-red) !important;

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

    box-shadow:

        0 15px 36px
        rgba(227,6,19,.25);
}


/* LABEL */

.tip-hero-btn__label {

    min-height:
        58px;

    display: flex;

    align-items: center;

    padding:
        0 25px;

    color:
        #ffffff !important;

    background:
        var(--tip-red) !important;

    font-size:
        13px;

    font-weight:
        620;

    line-height:
        1;

    letter-spacing:
        -.01em;

    transition:
        background-color .28s ease;
}


/* ============================================================
   YELLOW ACTION PART
   ============================================================ */

.tip-hero-btn__action {

    width:
        60px;

    min-height:
        58px;

    align-self:
        stretch;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        #111216 !important;

    background:
        var(--tip-yellow) !important;

    transition:
        width .28s ease;
}


.tip-hero-btn__action svg {

    width:
        20px;

    height:
        20px;

    fill:
        none;

    stroke:
        #111216 !important;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        transform .28s ease;
}


/* PRIMARY HOVER */

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

    transform:
        translateY(-4px);

    color:
        #ffffff !important;

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

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

    box-shadow:

        0 21px 47px
        rgba(227,6,19,.33);
}


.tip-hero-btn--primary:hover
.tip-hero-btn__label {

    background:
        var(--tip-red-dark) !important;
}


.tip-hero-btn--primary:hover
.tip-hero-btn__action {

    width:
        69px;

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


.tip-hero-btn--primary:hover
.tip-hero-btn__action svg {

    transform:
        translateX(4px);
}


/* ============================================================
   SECONDARY BUTTON
   reines Schwarz statt Elementor-Lila
   ============================================================ */

.tip-hero-btn--secondary,
.tip-hero-btn--secondary:link,
.tip-hero-btn--secondary:visited {

    min-height:
        60px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        0 21px;

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

    background:
        rgba(9,10,12,.82) !important;

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

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.17);

    font-size:
        12px;

    font-weight:
        500;

    backdrop-filter:
        blur(10px);

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


.tip-hero-btn--secondary span {

    color:
        #ffffff !important;
}


.tip-hero-btn--secondary > svg {

    width:
        18px;

    height:
        18px;

    fill:
        none;

    stroke:
        var(--tip-yellow) !important;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        transform .28s ease;
}


/* SECONDARY HOVER */

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

    transform:
        translateY(-4px);

    color:
        #ffffff !important;

    background:
        #15171a !important;

    border-color:
        rgba(227,6,19,.75) !important;

    box-shadow:

        0 18px 38px
        rgba(0,0,0,.24),

        inset 0 0 0 1px
        rgba(227,6,19,.11);
}


.tip-hero-btn--secondary:hover > svg {

    stroke:
        var(--tip-yellow) !important;

    transform:
        translateX(4px);
}


/* ============================================================
   FACTS
   keine Kreise mehr
   ============================================================ */

.tip-hero__facts {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap:
        13px 27px;

    margin:
        29px 0 0;

    padding:
        0;

    list-style:
        none;
}


.tip-hero__facts li {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin: 0;

    color:
        var(--tip-facts-color);

    font-size:
        11px;

    font-weight:
        450;

    line-height:
        1.4;
}


.tip-hero__facts i {

    color:
        var(--tip-red);

    font-size:
        9px;
}

.tip-hero__facts .tip-hero__check {
    width: 11px;
    height: 11px;
    flex: 0 0 11px;
    fill: none;
    stroke: var(--tip-red);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ============================================================
   ARROW WRAPPER
   ============================================================ */

.tip-hero__arrows {

    position: absolute;

    z-index: 30;

    top:
        50%;

    left:
        22px;

    right:
        22px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    pointer-events:
        none;

    transform:
        translateY(-50%);
}


/* ============================================================
   ARROWS
   kantiger / moderner
   ============================================================ */

.tip-hero__arrow {

    width:
        45px;

    height:
        52px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        0;

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

    background:
        rgba(8,9,11,.78) !important;

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

    border-radius:
        8px;

    box-shadow:
        none !important;

    cursor:
        pointer;

    pointer-events:
        auto;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    transition:

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


.tip-hero__arrow svg {

    width:
        19px;

    height:
        19px;

    fill:
        none;

    stroke:
        #ffffff !important;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.tip-hero__arrow:hover {

    transform:
        translateY(-3px);

    color:
        #ffffff !important;

    background:
        var(--tip-red) !important;

    border-color:
        var(--tip-red) !important;

    box-shadow:

        0 12px 30px
        rgba(227,6,19,.26) !important;
}


/* ============================================================
   PAGINATION
   ============================================================ */

.tip-hero__pagination {

    position: absolute;

    z-index:
        30;

    left:
        50%;

    bottom:
        31px;

    width:

        min(
            1350px,
            calc(100% - 90px)
        );

    display: flex;

    align-items:
        flex-end;

    gap:
        18px;

    transform:
        translateX(-50%);

    pointer-events:
        none;
}


/* ============================================================
   DOT BUTTON
   ============================================================ */

.tip-hero__dot {

    width:
        74px;

    display: flex;

    flex-direction:
        column;

    align-items:
        stretch;

    gap:
        8px;

    padding:
        0;

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

    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;

    cursor:
        pointer;

    pointer-events:
        auto;

    text-align:
        left;

    transition:
        color .25s ease;
}


.tip-hero__dot-number {

    font-size:
        9px;

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        .08em;
}


/* ============================================================
   DOT TRACK
   ============================================================ */

.tip-hero__dot-track {

    position:
        relative;

    width:
        100%;

    height:
        2px;

    display:
        block;

    overflow:
        hidden;

    background:
        rgba(255,255,255,.17) !important;
}


.tip-hero__dot-track > i {

    position:
        absolute;

    top: 0;
    left: 0;
    bottom: 0;

    width:
        0;

    display:
        block;

    background:
        var(--tip-red) !important;

    transition:
        width .38s
        cubic-bezier(.2,.7,.2,1);
}


/* ACTIVE */

.tip-hero__dot.is-active {

    color:
        #ffffff !important;
}


.tip-hero__dot.is-active
.tip-hero__dot-track {

    background:
        rgba(255,255,255,.16) !important;
}


.tip-hero__dot.is-active
.tip-hero__dot-track > i {

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


/* gelbes Ende */

.tip-hero__dot.is-active
.tip-hero__dot-track::after {

    content: "";

    position:
        absolute;

    top: 0;
    right: 0;

    width:
        10px;

    height:
        100%;

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


/* ============================================================
   CONTENT ENTRY ANIMATIONS
   ============================================================ */

.tip-hero__animate {

    opacity: 0;

    transform:
        translateY(24px);

    transition:

        opacity .64s
        cubic-bezier(.2,.7,.2,1),

        transform .64s
        cubic-bezier(.2,.7,.2,1);
}


/* EYEBROW */

.tip-hero__slide.is-active
.tip-hero__eyebrow.tip-hero__animate {

    opacity: 1;

    transform:
        translateY(0);

    transition-delay:
        .12s;
}


/* HEADLINE */

.tip-hero__slide.is-active
h1.tip-hero__animate,

.tip-hero__slide.is-active
h2.tip-hero__animate {

    opacity: 1;

    transform:
        translateY(0);

    transition-delay:
        .21s;
}


/* TEXT */

.tip-hero__slide.is-active
.tip-hero__lead.tip-hero__animate {

    opacity: 1;

    transform:
        translateY(0);

    transition-delay:
        .31s;
}


/* BUTTONS */

.tip-hero__slide.is-active
.tip-hero__actions.tip-hero__animate {

    opacity: 1;

    transform:
        translateY(0);

    transition-delay:
        .40s;
}


/* FACTS */

.tip-hero__slide.is-active
.tip-hero__facts.tip-hero__animate {

    opacity: 1;

    transform:
        translateY(0);

    transition-delay:
        .49s;
}


/* ============================================================
   ELEMENTOR OVERRIDES
   ============================================================ */

.tip-hero
.elementor-button,

.tip-hero
.elementor-button:link,

.tip-hero
.elementor-button:visited {

    background:
        var(--tip-red) !important;

    color:
        #ffffff !important;

    border-color:
        var(--tip-red) !important;
}


.tip-hero
.elementor-button:hover {

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

    color:
        #ffffff !important;
}


/* verhindert Elementor visited / accent colors */

.tip-hero
.elementor-widget-container a:visited {

    color:
        inherit;
}


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

@media (max-width: 1100px) {

    .tip-hero__slider {

        height:
            700px;

        min-height:
            700px;
    }


    .tip-hero__container {

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


    .tip-hero__content {

        width:
            74%;
    }


    .tip-hero__pagination {

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


    .tip-hero__arrows {

        left:
            11px;

        right:
            11px;
    }

}


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

@media (max-width: 767px) {

    .tip-hero__slider {

        height:
            720px;

        min-height:
            720px;
    }


    .tip-hero__image {

        object-position:
            center center;
    }


    /* MOBILE OVERLAY */

    .tip-hero__overlay {

        background:

            linear-gradient(
                180deg,
                rgba(6,7,9,.06) 0%,
                rgba(6,7,9,.19) 25%,
                rgba(11,7,8,.59) 48%,
                rgba(11,7,8,.94) 71%,
                rgba(6,7,9,.99) 100%
            );
    }


    .tip-hero__overlay::before {

        background:

            linear-gradient(
                180deg,
                transparent 31%,
                rgba(227,6,19,.10) 72%,
                rgba(227,6,19,.045) 100%
            );
    }


    .tip-hero__container {

        width:
            calc(100% - 38px);

        align-items:
            flex-end;

        padding-bottom:
            105px;
    }


    .tip-hero__content {

        width:
            100%;

        padding-bottom:
            0;
    }


    /* EYEBROW */

    .tip-hero__eyebrow {

        margin-bottom:
            14px;

        font-size:
            9px;
    }


    .tip-hero__eyebrow > span {

        width:
            27px;
    }


    /* HEADLINE */

    .tip-hero h1,
    .tip-hero h2 {

        max-width:
            100%;

        font-size:

            clamp(
                38px,
                10.5vw,
                50px
            );

        font-weight:
            600;

        line-height:
            1.01;
    }


    .tip-hero h1 em::after,
    .tip-hero h2 em::after {

        bottom:
            -5px;

        width:
            45px;
    }


    /* TEXT */

    .tip-hero__lead {

        margin-top:
            23px;

        font-size:
            14px;

        line-height:
            1.62;
    }


    /* BUTTONS */

    .tip-hero__actions {

        flex-direction:
            column;

        align-items:
            stretch;

        margin-top:
            25px;
    }


    .tip-hero-btn {

        width:
            100%;
    }


    .tip-hero-btn--primary {

        justify-content:
            space-between;
    }


    .tip-hero-btn__label {

        flex:
            1;
    }


    .tip-hero-btn__action {

        flex:
            0 0 59px;
    }


    .tip-hero-btn--secondary {

        justify-content:
            space-between;

        background:
            rgba(8,9,11,.90) !important;
    }


    /* FACTS */

    .tip-hero__facts {

        display:
            none;
    }


    /* ARROWS */

    .tip-hero__arrows {

        top:
            34%;

        left:
            8px;

        right:
            8px;
    }


    .tip-hero__arrow {

        width:
            39px;

        height:
            45px;

        border-radius:
            7px;
    }


    /* PAGINATION */

    .tip-hero__pagination {

        left:
            19px;

        bottom:
            27px;

        width:
            auto;

        gap:
            12px;

        transform:
            none;
    }


    .tip-hero__dot {

        width:
            48px;
    }

}


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

@media (max-width: 410px) {

    .tip-hero__slider {

        height:
            735px;

        min-height:
            735px;
    }


    .tip-hero__container {

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


    .tip-hero h1,
    .tip-hero h2 {

        font-size:
            38px;
    }

}


/* ============================================================
   FOCUS
   kein Elementor-Blau oder Lila
   ============================================================ */

.tip-hero a:focus,
.tip-hero button:focus {

    box-shadow:
        none !important;
}


.tip-hero a:focus-visible,
.tip-hero button:focus-visible {

    outline:
        2px solid
        var(--tip-yellow) !important;

    outline-offset:
        4px !important;

    box-shadow:
        none !important;
}


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

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

    .tip-hero__slide,
    .tip-hero__image,
    .tip-hero__animate,
    .tip-hero-btn,
    .tip-hero-btn__label,
    .tip-hero-btn__action,
    .tip-hero-btn svg,
    .tip-hero__arrow,
    .tip-hero__dot-track > i {

        transition:
            none !important;
    }


    .tip-hero__animate {

        opacity:
            1 !important;

        transform:
            none !important;
    }

}