/* ============================================================
   TIP BENEFITS
   ============================================================ */

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


.tip-benefits {

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

    --tip-yellow: #ffd600;

    --tip-dark: #15171a;
    --tip-text: #545960;
    --tip-muted: #74787d;
    --tip-card-text: #60656b;
    --tip-list-text: #41464b;

    --tip-bg: #f6f6f6;
    --tip-white: #ffffff;
    --tip-border: #e4e5e7;

    position: relative;

    width: 100%;

    padding:
        108px 0 112px;

    overflow: hidden;

    background:
        var(--tip-bg);

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


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

.tip-benefits__container {

    position: relative;

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

    margin: 0 auto;
}


/* ============================================================
   HEADER
   ============================================================ */

.tip-benefits__header {

    max-width:
        780px;

    margin:
        0 auto 61px;

    text-align:
        center;
}


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

.tip-benefits__eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    margin-bottom:
        16px;

    color:
        var(--tip-muted);

    font-size:
        10px;

    font-weight:
        450;

    line-height:
        1;

    letter-spacing:
        .075em;

    text-transform:
        uppercase;
}


.tip-benefits__eyebrow > span {

    width:
        30px;

    height:
        1px;

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


/* ============================================================
   H2
   ============================================================ */

.tip-benefits__header h2 {

    margin: 0;

    color:
        var(--tip-dark);

    font-size:

        clamp(
            39px,
            3.45vw,
            54px
        );

    font-weight:
        610;

    line-height:
        1.04;

    letter-spacing:
        -.043em;

    text-wrap:
        balance;
}


.tip-benefits__header h2 strong {

    position: relative;

    display:
        inline-block;

    color:
        var(--tip-red);

    font-weight:
        610;
}


/* kleiner gelber Akzent */

.tip-benefits__header h2 strong::after {

    content: "";

    position: absolute;

    left:
        2px;

    bottom:
        -8px;

    width:
        48px;

    height:
        3px;

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


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

.tip-benefits__header > p {

    max-width:
        710px;

    margin:
        26px auto 0;

    color:
        var(--tip-text);

    font-size:
        15px;

    font-weight:
        400;

    line-height:
        1.72;
}


/* ============================================================
   GRID
   ============================================================ */

.tip-benefits__grid {

    display:
        grid;

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

    grid-auto-rows:
        1fr;

    gap:
        24px;

    align-items:
        stretch;
}


/* ============================================================
   CARD
   ============================================================ */

.tip-benefit-card {

    position: relative;

    isolation: isolate;

    min-width: 0;

    height: 100%;

    min-height:
        625px;

    display: flex;

    flex-direction: column;

    padding:
        32px 30px 30px;

    overflow: hidden;

    background:
        var(--tip-white);

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

    border-radius:
        16px;

    box-shadow:
        0 12px 38px
        rgba(18,20,24,.045);

    transition:

        transform .35s cubic-bezier(.2,.75,.2,1),
        box-shadow .35s ease,
        border-color .35s ease;
}


/* moderner Glow beim Hover */

.tip-benefit-card::before {

    content: "";

    position: absolute;

    z-index: -1;

    left:
        -130px;

    top:
        -160px;

    width:
        340px;

    height:
        340px;

    border-radius:
        50%;

    background:

        radial-gradient(
            circle,
            rgba(227,6,19,.065) 0%,
            rgba(227,6,19,.025) 44%,
            rgba(227,6,19,0) 70%
        );

    opacity:
        .35;

    transition:
        opacity .35s ease,
        transform .5s ease;
}


/* kleiner gelber Corner Accent */

.tip-benefit-card::after {

    content: "";

    position: absolute;

    top:
        0;

    right:
        28px;

    width:
        34px;

    height:
        3px;

    background:
        var(--tip-yellow);

    opacity:
        .9;
}


.tip-benefit-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(227,6,19,.18);

    box-shadow:

        0 26px 58px
        rgba(18,20,24,.09);
}


.tip-benefit-card:hover::before {

    opacity:
        1;

    transform:
        scale(1.08);
}


/* ============================================================
   WATERMARK NUMBER
   ============================================================ */

.tip-benefit-card__watermark {

    position: absolute;

    z-index: -1;

    top:
        82px;

    right:
        -8px;

    color:
        rgba(21,23,26,.025);

    font-size:
        116px;

    font-weight:
        750;

    line-height:
        .8;

    letter-spacing:
        -.08em;

    pointer-events:
        none;

    user-select:
        none;
}


/* ============================================================
   TOP
   ============================================================ */

.tip-benefit-card__top {

    position: relative;

    z-index: 2;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        25px;
}


/* ============================================================
   ICON
   ============================================================ */

.tip-benefit-card__icon {

    width:
        56px;

    height:
        56px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--tip-red);

    background:
        rgba(227,6,19,.07);

    border:
        1px solid
        rgba(227,6,19,.12);

    border-radius:
        13px;

    font-size:
        20px;

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.60);

    transition:

        color .3s ease,
        background-color .3s ease,
        border-color .3s ease,
        transform .35s cubic-bezier(.2,.75,.2,1);
}


.tip-benefit-card:hover
.tip-benefit-card__icon {

    color:
        #fff;

    background:
        var(--tip-red);

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

    transform:
        translateY(-3px)
        rotate(-2deg);
}


/* ============================================================
   SMALL INDEX
   ============================================================ */

.tip-benefit-card__index {

    margin-top:
        6px;

    color:
        #b4b7bc;

    font-size:
        9px;

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        .12em;
}


/* ============================================================
   FIXED HEADING AREA

   Damit alle Listen exakt auf gleicher Höhe starten.
   ============================================================ */

.tip-benefit-card__heading {

    min-height:
        164px;
}


/* ============================================================
   H3
   ============================================================ */

.tip-benefit-card h3 {

    margin:
        0;

    color:
        var(--tip-dark);

    font-size:
        22px;

    font-weight:
        610;

    line-height:
        1.18;

    letter-spacing:
        -.029em;
}


.tip-benefit-card h3 strong {

    color:
        var(--tip-red);

    font-weight:
        610;
}


/* ============================================================
   CARD DESCRIPTION
   ============================================================ */

.tip-benefit-card__heading > p {

    margin:
        17px 0 0;

    color:
        var(--tip-card-text);

    font-size:
        13px;

    font-weight:
        400;

    line-height:
        1.68;
}


/* ============================================================
   SEPARATOR
   ============================================================ */

.tip-benefit-card__separator {

    position: relative;

    width:
        100%;

    height:
        1px;

    margin:
        22px 0 23px;

    background:
        #ececee;
}


.tip-benefit-card__separator::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width:
        34px;

    height:
        1px;

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


/* ============================================================
   LIST
   ============================================================ */

.tip-benefit-card ul {

    flex:
        1;

    display:
        flex;

    flex-direction:
        column;

    gap:
        13px;

    margin: 0;

    padding: 0;

    list-style:
        none;
}


/* ============================================================
   LIST ITEM
   ============================================================ */

.tip-benefit-card li {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    margin: 0;

    padding: 0;

    color:
        var(--tip-list-text);

    font-size:
        12px;

    font-weight:
        450;

    line-height:
        1.55;
}


/* ============================================================
   CHECK
   ============================================================ */

.tip-benefit-card__check {

    width:
        17px;

    height:
        20px;

    flex:
        0 0 17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-start;

    padding-top:
        3px;

    color:
        var(--tip-red);

    font-size:
        9px;
}


/* ============================================================
   CARD FOOTER DETAIL
   ============================================================ */

.tip-benefit-card__footer {

    position: relative;

    height:
        3px;

    display:
        flex;

    flex:
        0 0 3px;

    margin-top:
        28px;

    overflow:
        hidden;

    border-radius:
        20px;
}


.tip-benefit-card__footer span {

    width:
        86%;

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


.tip-benefit-card__footer i {

    flex:
        1;

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


/* ============================================================
   ENTRY ANIMATIONS
   Nur wenn JS aktiv ist
   ============================================================ */

.tip-benefits.is-animation-ready
.tip-reveal {

    opacity: 0;

    transform:
        translateY(28px);

    transition:

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

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

    transition-delay:
        var(--reveal-delay, 0ms);
}


.tip-benefits.is-animation-ready
.tip-reveal.is-visible {

    opacity: 1;

    transform:
        translateY(0);
}


/* Karten beim Eintritt minimal anders */

.tip-benefits.is-animation-ready
.tip-benefit-card.tip-reveal {

    transform:
        translateY(34px)
        scale(.985);
}


.tip-benefits.is-animation-ready
.tip-benefit-card.tip-reveal.is-visible {

    transform:
        translateY(0)
        scale(1);
}


/* Icon entrance */

.tip-benefits.is-animation-ready
.tip-benefit-card.tip-reveal
.tip-benefit-card__icon {

    opacity: 0;

    transform:
        translateY(10px)
        scale(.88);

    transition:

        opacity .55s ease,
        transform .65s
        cubic-bezier(.2,.8,.2,1),
        color .3s ease,
        background-color .3s ease,
        border-color .3s ease;

    transition-delay:
        calc(
            var(--reveal-delay, 0ms)
            + 160ms
        );
}


.tip-benefits.is-animation-ready
.tip-benefit-card.tip-reveal.is-visible
.tip-benefit-card__icon {

    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


/* Hover nach Animation erhalten */

.tip-benefits.is-animation-ready
.tip-benefit-card.tip-reveal.is-visible:hover {

    transform:
        translateY(-8px);
}


.tip-benefits.is-animation-ready
.tip-benefit-card.tip-reveal.is-visible:hover
.tip-benefit-card__icon {

    transform:
        translateY(-3px)
        rotate(-2deg);
}


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

@media (max-width: 1100px) {

    .tip-benefits {

        padding:
            90px 0;
    }


    .tip-benefits__container {

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


    .tip-benefits__grid {

        grid-template-columns:
            1fr;

        grid-auto-rows:
            auto;

        gap:
            18px;
    }


    .tip-benefit-card {

        min-height:
            0;
    }


    .tip-benefit-card__heading {

        min-height:
            0;
    }


    .tip-benefit-card ul {

        display:
            grid;

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

        gap:
            13px 28px;
    }

}


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

@media (max-width: 767px) {

    .tip-benefits {

        padding:
            74px 0 78px;
    }


    .tip-benefits__container {

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


    .tip-benefits__header {

        margin-bottom:
            43px;

        text-align:
            left;
    }


    .tip-benefits__eyebrow {

        justify-content:
            flex-start;

        margin-bottom:
            14px;

        font-size:
            9px;
    }


    .tip-benefits__header h2 {

        font-size:

            clamp(
                35px,
                9.5vw,
                44px
            );

        font-weight:
            600;
    }


    .tip-benefits__header > p {

        margin-top:
            22px;

        font-size:
            14px;

        line-height:
            1.65;
    }


    .tip-benefits__grid {

        grid-template-columns:
            1fr;

        gap:
            16px;
    }


    .tip-benefit-card {

        min-height:
            0;

        padding:
            25px 22px 26px;

        border-radius:
            13px;
    }


    .tip-benefit-card__watermark {

        top:
            71px;

        right:
            -6px;

        font-size:
            95px;
    }


    .tip-benefit-card__top {

        margin-bottom:
            22px;
    }


    .tip-benefit-card__icon {

        width:
            52px;

        height:
            52px;

        border-radius:
            11px;

        font-size:
            18px;
    }


    .tip-benefit-card__heading {

        min-height:
            0;
    }


    .tip-benefit-card h3 {

        font-size:
            21px;
    }


    .tip-benefit-card__heading > p {

        font-size:
            13px;
    }


    .tip-benefit-card ul {

        grid-template-columns:
            1fr;

        gap:
            12px;
    }


    .tip-benefit-card__footer {

        margin-top:
            24px;
    }

}


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

@media (max-width: 410px) {

    .tip-benefits__container {

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

}


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

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

    .tip-benefits.is-animation-ready
    .tip-reveal,

    .tip-benefits.is-animation-ready
    .tip-benefit-card.tip-reveal,

    .tip-benefits.is-animation-ready
    .tip-benefit-card.tip-reveal
    .tip-benefit-card__icon,

    .tip-benefit-card,
    .tip-benefit-card__icon {

        opacity:
            1 !important;

        transform:
            none !important;

        transition:
            none !important;
    }

}



/* Elementor icon compatibility */
.tip-benefit-card__icon svg {
    width: 1em;
    height: 1em;
    display: block;
    fill: currentColor;
}

.tip-benefit-card__check svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Elementor may inject margins into headings / paragraphs. */
.tip-benefits h2,
.tip-benefits h3,
.tip-benefits p,
.tip-benefits ul {
    box-sizing: border-box;
}