@import url('https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&display=swap');


/* ==========================================================
   RUFFUS – HERO ÜBERSCHRIFT FÜR UNTERSEITEN
========================================================== */

.rsh-hero {
    position: relative;

    width: 100%;

    overflow: hidden;

    background: #090909;

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    border-bottom:
        1px solid
        #242424;
}


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


/* ==========================================================
   GELBER STRICH OBEN
========================================================== */

.rsh-hero::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 210px;
    height: 7px;

    z-index: 3;

    background: #FEEE02;

    transform-origin:
        left center;

    transform:
        scaleX(0);

    animation:
        rsh-line-in
        .7s
        ease
        .1s
        forwards;
}


/* ==========================================================
   GELBES DETAIL RECHTS
========================================================== */

.rsh-hero::after {
    content: "";

    position: absolute;

    top: -150px;
    right: -80px;

    width: 340px;
    height: 340px;

    background: #FEEE02;

    opacity: .055;

    transform:
        rotate(24deg);

    pointer-events: none;
}


/* ==========================================================
   INNER
========================================================== */

.rsh-inner {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 1320px;

    margin:
        0
        auto;

    padding:
        70px
        25px
        66px;
}


.rsh-content {
    max-width: 900px;
}


/* ==========================================================
   KICKER
========================================================== */

.rsh-kicker {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 19px;

    color: #ffffff;

    font-size: 13px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: .9px;

    text-transform: uppercase;

    opacity: 0;

    transform:
        translateY(15px);

    animation:
        rsh-up
        .65s
        cubic-bezier(.2,.75,.3,1)
        .15s
        forwards;
}


.rsh-kicker::before {
    content: "";

    width: 38px;
    height: 4px;

    background: #FEEE02;
}


/* ==========================================================
   H1
========================================================== */

.rsh-title {
    max-width: 900px;

    margin:
        0
        0
        21px;

    color: #ffffff;

    font-size:
        clamp(
            40px,
            4vw,
            53px
        );

    line-height: 1.04;

    letter-spacing:
        -1.8px;

    font-weight: 700;

    opacity: 0;

    transform:
        translateY(21px);

    animation:
        rsh-up
        .72s
        cubic-bezier(.2,.75,.3,1)
        .28s
        forwards;
}


.rsh-title-line {
    display: block;

    margin-top: 7px;
}


/* ==========================================================
   MARKER
========================================================== */

.rsh-marker {
    position: relative;

    display: inline-block;

    z-index: 1;

    padding:
        .02em
        .13em
        .08em;

    color:
        #090909 !important;

    font-family:
        "UnifrakturCook",
        serif !important;

    font-size: 1.04em;

    line-height: .92;

    letter-spacing: 0;

    font-weight:
        700 !important;
}


.rsh-marker::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 8%;
    bottom: 0;

    z-index: -1;

    background: #FEEE02;

    transform:
        skewX(-4deg)
        scaleX(0);

    transform-origin:
        left center;

    animation:
        rsh-marker-in
        .78s
        cubic-bezier(.22,.8,.24,1)
        .82s
        forwards;
}


.rsh-marker::after {
    content: "";

    position: absolute;

    left: -5px;
    right: 7px;

    bottom: -2px;

    height: 6px;

    z-index: -1;

    background: #FEEE02;

    transform:
        skewX(8deg)
        scaleX(0);

    transform-origin:
        left center;

    animation:
        rsh-marker-edge
        .65s
        cubic-bezier(.22,.8,.24,1)
        .98s
        forwards;
}


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

.rsh-text {
    max-width: 760px;

    margin: 0;

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

    font-size: 17px;

    line-height: 1.7;

    opacity: 0;

    transform:
        translateY(18px);

    animation:
        rsh-up
        .72s
        cubic-bezier(.2,.75,.3,1)
        .44s
        forwards;
}


.rsh-text p {
    margin: 0;
}


.rsh-text strong {
    color: #ffffff;

    font-weight: 700;
}


/* ==========================================================
   ANIMATIONEN
========================================================== */

@keyframes rsh-up {

    from {
        opacity: 0;

        transform:
            translateY(20px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


@keyframes rsh-line-in {

    from {
        transform:
            scaleX(0);
    }

    to {
        transform:
            scaleX(1);
    }

}


@keyframes rsh-marker-in {

    from {
        transform:
            skewX(-4deg)
            scaleX(0);
    }

    to {
        transform:
            skewX(-4deg)
            scaleX(1);
    }

}


@keyframes rsh-marker-edge {

    from {
        transform:
            skewX(8deg)
            scaleX(0);
    }

    to {
        transform:
            skewX(8deg)
            scaleX(1);
    }

}


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

@media(max-width:700px) {

    .rsh-inner {
        padding:
            54px
            18px
            51px;
    }


    .rsh-hero::before {
        width: 140px;
        height: 6px;
    }


    .rsh-hero::after {
        top: -110px;
        right: -110px;

        width: 230px;
        height: 230px;
    }


    .rsh-title {
        font-size: 38px;

        line-height: 1.06;

        letter-spacing:
            -1.3px;
    }


    .rsh-text {
        font-size: 16px;
    }

}


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

@media(max-width:390px) {

    .rsh-title {
        font-size: 34px;
    }


    .rsh-marker {
        font-size: 1em;
    }

}


/* ==========================================================
   ELEMENTOR EDITOR
========================================================== */

.elementor-editor-active
.rsh-kicker,

.elementor-editor-active
.rsh-title,

.elementor-editor-active
.rsh-text {
    opacity: 1 !important;

    transform: none !important;

    animation: none !important;
}


.elementor-editor-active
.rsh-marker::before {
    transform:
        skewX(-4deg)
        scaleX(1) !important;

    animation: none !important;
}


.elementor-editor-active
.rsh-marker::after {
    transform:
        skewX(8deg)
        scaleX(1) !important;

    animation: none !important;
}


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

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

    .rsh-hero *,
    .rsh-hero *::before,
    .rsh-hero *::after {
        animation: none !important;

        transition: none !important;
    }


    .rsh-kicker,
    .rsh-title,
    .rsh-text {
        opacity: 1 !important;

        transform: none !important;
    }


    .rsh-marker::before {
        transform:
            skewX(-4deg)
            scaleX(1) !important;
    }


    .rsh-marker::after {
        transform:
            skewX(8deg)
            scaleX(1) !important;
    }

}