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


/* ==========================================================
   RUFFUS HERO
========================================================== */

.rh-hero {
    --rh-yellow: #FEEE02;
    --rh-black: #090909;
    --rh-white: #ffffff;
    --rh-text: #dddddd;

    position: relative;

    width: 100%;

    overflow: hidden;

    background: var(--rh-black);

    color: var(--rh-white);

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

    border-bottom:
        1px solid
        #252525;
}


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


/* ==========================================================
   GELBE FLÄCHE RECHTS
========================================================== */

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

    position: absolute;

    top: 0;
    right: -140px;

    width: 47%;
    height: 100%;

    z-index: 0;

    background:
        var(--rh-yellow);

    clip-path:
        polygon(
            22% 0,
            100% 0,
            100% 100%,
            0 100%
        );

    transform:
        translateX(110%);

    animation:
        rh-yellow-panel
        1s
        cubic-bezier(.22,.8,.28,1)
        .15s
        forwards;
}


/* ==========================================================
   OBERER GELBER STRICH
========================================================== */

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

    position: absolute;

    top: 0;
    left: 0;

    width: 210px;
    height: 7px;

    z-index: 3;

    background:
        var(--rh-yellow);

    transform-origin:
        left center;

    transform:
        scaleX(0);

    animation:
        rh-line-in
        .7s
        ease
        .2s
        forwards;
}


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

.rh-hero-inner {
    position: relative;

    z-index: 2;

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

    margin:
        0
        auto;

    padding:
        90px
        25px
        75px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, .95fr);

    gap: 70px;

    align-items: center;
}


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

.rh-content {
    max-width: 690px;
}


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

.rh-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 22px;

    padding:
        9px
        14px;

    background:
        #242424;

    color:
        #ffffff;

    border:
        1px solid
        #454545;

    font-size: 13px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: .8px;

    text-transform: uppercase;

    opacity: 0;

    transform:
        translateY(20px);

    animation:
        rh-up
        .7s
        cubic-bezier(.2,.75,.3,1)
        .25s
        forwards;
}


.rh-dot {
    width: 9px;
    height: 9px;

    flex:
        0
        0
        9px;

    display: inline-block;

    background:
        var(--rh-yellow);

    border-radius: 50%;

    animation:
        rh-dot-pulse
        2.2s
        ease-in-out
        1.3s
        infinite;
}


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

.rh-hero h1 {
    max-width: 700px;

    margin:
        0
        0
        24px;

    color: #ffffff;

    font-size:
        clamp(
            42px,
            5vw,
            64px
        );

    line-height: 1.02;

    letter-spacing:
        -2.3px;

    font-weight: 750;

    opacity: 0;

    transform:
        translateY(28px);

    animation:
        rh-up
        .8s
        cubic-bezier(.2,.75,.3,1)
        .42s
        forwards;
}


/* ==========================================================
   GELBER FRAKTUR MARKER
========================================================== */

.rh-marker {
    position: relative;

    display: inline-block;

    white-space: nowrap;

    isolation: isolate;

    z-index: 1;

    padding:
        .02em
        .14em
        .08em;

    margin-left:
        -.05em;

    color:
        var(--rh-black) !important;

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

    font-size:
        1.08em;

    line-height:
        .92;

    letter-spacing:
        0 !important;

    font-weight:
        700 !important;
}


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

    position: absolute;

    left: 0;
    right: 0;

    top: 8%;
    bottom: 0;

    background:
        var(--rh-yellow);

    z-index: -1;

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

    transform-origin:
        left center;

    animation:
        rh-marker-full
        .78s
        cubic-bezier(.22,.8,.24,1)
        1.35s
        forwards;
}


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

    position: absolute;

    left: -5px;
    right: 7px;

    bottom: -2px;

    height: 6px;

    background:
        var(--rh-yellow);

    z-index: -1;

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

    transform-origin:
        left center;

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


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

.rh-intro {
    max-width: 650px;

    margin: 0;

    color:
        var(--rh-text);

    font-size: 18px;

    line-height: 1.7;

    opacity: 0;

    transform:
        translateY(24px);

    animation:
        rh-up
        .8s
        cubic-bezier(.2,.75,.3,1)
        .62s
        forwards;
}


.rh-intro p {
    margin: 0;
}


.rh-intro strong {
    color:
        #ffffff;

    font-weight: 700;
}


/* ==========================================================
   BUTTONS
========================================================== */

.rh-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 32px;

    opacity: 0;

    transform:
        translateY(24px);

    animation:
        rh-up
        .8s
        cubic-bezier(.2,.75,.3,1)
        .80s
        forwards;
}


.rh-btn {
    min-height: 54px;

    padding:
        0
        24px;

    display: inline-flex;

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

    gap: 10px;

    text-decoration:
        none !important;

    font-size: 15px;

    line-height: 1;

    font-weight: 700;

    border-radius:
        0 !important;

    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}


.rh-btn i {
    font-size: 13px;

    transition:
        transform .2s ease;
}


.rh-btn:hover {
    transform:
        translateY(-2px);
}


.rh-btn:hover i {
    transform:
        translateX(4px);
}


/* PRIMARY */

.rh-btn-primary {
    background:
        var(--rh-yellow);

    border:
        2px solid
        var(--rh-yellow);

    color:
        var(--rh-black) !important;
}


.rh-btn-primary:hover {
    background:
        #ffffff;

    border-color:
        #ffffff;

    color:
        var(--rh-black) !important;
}


/* SECONDARY */

.rh-btn-secondary {
    background:
        var(--rh-black);

    border:
        2px solid
        #ffffff;

    color:
        #ffffff !important;
}


.rh-btn-secondary:hover {
    background:
        #ffffff;

    border-color:
        #ffffff;

    color:
        var(--rh-black) !important;
}


/* ==========================================================
   VORTEILE
========================================================== */

.rh-benefits {
    display: flex;

    flex-wrap: wrap;

    gap:
        10px
        22px;

    margin-top: 34px;

    opacity: 0;

    transform:
        translateY(20px);

    animation:
        rh-up
        .8s
        cubic-bezier(.2,.75,.3,1)
        .98s
        forwards;
}


.rh-benefit {
    display: flex;

    align-items: center;

    gap: 9px;

    color: #ffffff;

    font-size: 14px;

    line-height: 1.3;

    font-weight: 650;
}


.rh-benefit > span {
    width: 22px;
    height: 22px;

    flex:
        0
        0
        22px;

    display: flex;

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

    background:
        var(--rh-yellow);

    color:
        var(--rh-black);

    border-radius: 50%;

    font-size: 10px;

    transition:
        transform .22s ease;
}


.rh-benefit:hover > span {
    transform:
        scale(1.12)
        rotate(-5deg);
}


/* ==========================================================
   VISUAL
========================================================== */

.rh-visual {
    position: relative;

    width:
        calc(
            100% +
            clamp(90px,8vw,170px)
        );

    margin-right:
        calc(
            clamp(90px,8vw,170px)
            * -1
        );

    min-width: 0;

    min-height: 620px;

    display: flex;

    align-items: center;

    justify-content: flex-start;
}


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

.rh-slider-stage {
    position: relative;

    width:
        calc(
            100% - 24px
        );

    height: 590px;

    margin-left: 24px;

    opacity: 0;

    transform:
        translateX(55px)
        rotate(-1.4deg)
        scale(.985);

    animation:
        rh-slider-in
        1s
        cubic-bezier(.18,.8,.3,1)
        .48s
        forwards;
}


/* GELB HINTEN */

.rh-slider-stage::before {
    content: "";

    position: absolute;

    top: -16px;
    right: -17px;

    width: 76%;
    height: 88%;

    background:
        var(--rh-yellow);

    z-index: -2;

    transition:
        transform .35s ease;
}


/* SCHWARZ HINTEN */

.rh-slider-stage::after {
    content: "";

    position: absolute;

    left: -17px;
    bottom: -18px;

    width: 82%;
    height: 76%;

    background:
        var(--rh-black);

    z-index: -2;

    transition:
        transform .35s ease;
}


.rh-slider-stage:hover::before {
    transform:
        translate(
            5px,
            -5px
        );
}


.rh-slider-stage:hover::after {
    transform:
        translate(
            -5px,
            5px
        );
}


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

.rh-slider-frame {
    position: relative;

    width: 100%;
    height: 100%;

    padding: 8px;

    background:
        var(--rh-black);

    box-shadow:
        0
        20px
        50px
        rgba(0,0,0,.17);
}


.rh-slider-frame::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 145px;
    height: 8px;

    z-index: 5;

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


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

.rh-slider {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background:
        #dddddd;
}


.rh-slider-track {
    width: 100%;
    height: 100%;

    display: flex;

    transform:
        translate3d(
            0,
            0,
            0
        );

    transition:
        transform
        .9s
        cubic-bezier(.65,0,.25,1);

    will-change:
        transform;
}


.rh-slide {
    position: relative;

    width: 100%;
    height: 100%;

    flex:
        0
        0
        100%;

    overflow: hidden;
}


.rh-slide img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transform:
        scale(1.01);

    transition:
        transform
        4.8s
        ease;
}


.rh-slide.is-active img {
    transform:
        scale(1.05);
}


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

@keyframes rh-up {

    from {
        opacity: 0;

        transform:
            translateY(25px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


@keyframes rh-slider-in {

    from {
        opacity: 0;

        transform:
            translateX(55px)
            rotate(-1.4deg)
            scale(.985);
    }

    to {
        opacity: 1;

        transform:
            translateX(0)
            rotate(-1.4deg)
            scale(1);
    }

}


@keyframes rh-yellow-panel {

    from {
        transform:
            translateX(110%);
    }

    to {
        transform:
            translateX(0);
    }

}


@keyframes rh-marker-full {

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

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

}


@keyframes rh-marker-edge {

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

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

}


@keyframes rh-line-in {

    from {
        transform:
            scaleX(0);
    }

    to {
        transform:
            scaleX(1);
    }

}


@keyframes rh-dot-pulse {

    0%,
    100% {
        transform:
            scale(1);
    }

    50% {
        transform:
            scale(1.4);
    }

}


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

@media (max-width: 1024px) {

    .rh-hero::after {
        width: 38%;
    }


    .rh-hero-inner {
        gap: 40px;

        padding-top: 70px;
    }


    .rh-hero h1 {
        font-size: 48px;
    }


    .rh-visual {
        width: 100%;

        margin-right: 0;

        min-height: 510px;
    }


    .rh-slider-stage {
        height: 480px;
    }

}


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

@media (max-width: 800px) {

    .rh-hero::after {
        display: none;
    }


    .rh-hero-inner {
        display: block;

        padding:
            58px
            20px
            50px;
    }


    .rh-hero h1 {
        font-size: 43px;

        letter-spacing:
            -1.5px;
    }


    .rh-marker {
        font-size: 1.04em;
    }


    .rh-visual {
        width: 100%;

        min-height: auto;

        margin-top: 52px;
        margin-right: 0;

        padding:
            12px
            8px
            18px;
    }


    .rh-slider-stage {
        width:
            calc(
                100% - 15px
            );

        height: 430px;

        margin:
            0
            auto;

        animation-name:
            rh-slider-mobile-in;
    }


    .rh-slider-stage::before {
        top: -10px;
        right: -11px;
    }


    .rh-slider-stage::after {
        left: -11px;
        bottom: -12px;
    }

}


@keyframes rh-slider-mobile-in {

    from {
        opacity: 0;

        transform:
            translateY(30px)
            rotate(-1deg);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            rotate(-1deg);
    }

}


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

@media (max-width: 560px) {

    .rh-hero-inner {
        padding:
            45px
            18px
            42px;
    }


    .rh-hero h1 {
        font-size: 37px;

        line-height: 1.06;
    }


    .rh-marker {
        white-space: normal;

        font-size: 1em;

        padding:
            .02em
            .10em
            .07em;
    }


    .rh-marker::before {
        top: 6%;
    }


    .rh-actions {
        display: grid;

        grid-template-columns:
            1fr;
    }


    .rh-btn {
        width: 100%;
    }


    .rh-benefits {
        display: grid;

        gap: 12px;
    }


    .rh-slider-stage {
        height: 340px;
    }


    .rh-slider-frame {
        padding: 6px;
    }


    .rh-slider-frame::before {
        width: 100px;
        height: 6px;
    }

}


/* ==========================================================
   ELEMENTOR EDITOR
   Im Editor Inhalte nie unsichtbar lassen
========================================================== */

.elementor-editor-active
.rh-eyebrow,

.elementor-editor-active
.rh-hero h1,

.elementor-editor-active
.rh-intro,

.elementor-editor-active
.rh-actions,

.elementor-editor-active
.rh-benefits,

.elementor-editor-active
.rh-slider-stage {
    opacity: 1 !important;

    animation-delay:
        0s !important;
}


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

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

    .rh-hero *,
    .rh-hero *::before,
    .rh-hero *::after {
        animation-duration:
            .01ms !important;

        animation-delay:
            0s !important;
    }


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


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


    .rh-slider-stage {
        opacity: 1 !important;

        transform:
            rotate(-1.4deg) !important;
    }

}