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


/* ==========================================================
   RUFFUS FINAL CTA
========================================================== */

.rfc-final {
    --yellow:#FEEE02;
    --black:#090909;

    position:relative;

    width:100%;

    overflow:hidden;

    isolation:isolate;

    background-color:var(--black);

    background-image:
        var(
            --rfc-background,
            url("https://ruffus.my-webdesigner-kunden.de/wp-content/uploads/2026/10/transporter-mit-aufzug1-AE0PwME8WltEWMDv-1-scaled.webp")
        );

    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;

    color:#fff;

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


.rfc-final *,
.rfc-final *::before,
.rfc-final *::after {
    box-sizing:border-box;
}


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

.rfc-final::before {
    content:"";

    position:absolute;

    inset:0;

    z-index:-2;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.87) 0%,
            rgba(0,0,0,.80) 46%,
            rgba(0,0,0,.68) 100%
        );
}


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

.rfc-final::after {
    content:"";

    position:absolute;

    right:-120px;
    bottom:-170px;

    width:370px;
    height:370px;

    z-index:-1;

    background:var(--yellow);

    opacity:.13;

    transform:
        rotate(20deg);
}


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

.rfc-inner {
    position:relative;

    z-index:2;

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

    margin:
        0
        auto;

    padding:
        95px
        25px
        100px;

    display:grid;

    grid-template-columns:
        1.08fr
        .92fr;

    gap:78px;

    align-items:center;
}


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

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


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

.rfc-kicker {
    display:inline-flex;

    align-items:center;

    gap:11px;

    margin-bottom:22px;

    color:#fff;

    font-size:13px;

    line-height:1;

    font-weight:700;

    letter-spacing:.9px;

    text-transform:uppercase;
}


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

    width:38px;
    height:4px;

    background:var(--yellow);

    transform-origin:left center;
}


/* ==========================================================
   TITLE
========================================================== */

.rfc-title {
    max-width:700px;

    margin:
        0
        0
        26px;

    color:#fff;

    font-size:
        clamp(
            42px,
            4.3vw,
            59px
        );

    line-height:1.03;

    letter-spacing:-2px;

    font-weight:750;
}


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

.rfc-marker {
    position:relative;

    display:inline-block;

    white-space:nowrap;

    z-index:1;

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

    margin-left:-.05em;

    color:
        var(--black) !important;

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

    font-size:1.06em;

    line-height:.92;

    font-weight:700 !important;
}


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

    position:absolute;

    left:0;
    right:0;

    top:8%;
    bottom:0;

    z-index:-1;

    background:var(--yellow);

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

    transform-origin:left center;
}


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

    position:absolute;

    left:-5px;
    right:7px;

    bottom:-2px;

    height:6px;

    z-index:-1;

    background:var(--yellow);

    transform:
        skewX(8deg);
}


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

.rfc-lead {
    max-width:620px;

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

    font-size:18px;

    line-height:1.7;
}


.rfc-lead p {
    margin:0;
}


.rfc-lead strong {
    color:#fff;
}


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

.rfc-trust {
    margin:
        32px
        0
        0;

    padding:0;

    display:flex;

    flex-wrap:wrap;

    gap:
        12px
        24px;

    list-style:none;
}


.rfc-trust-item {
    display:flex;

    align-items:center;

    gap:9px;

    color:#fff;

    font-size:14px;

    font-weight:700;
}


.rfc-trust-icon {
    width:23px;
    height:23px;

    flex:
        0
        0
        23px;

    display:flex;

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

    background:var(--yellow);

    color:var(--black);

    font-size:10px;

    transition:
        transform .2s ease;
}


.rfc-trust-item:hover
.rfc-trust-icon {
    transform:
        scale(1.12)
        rotate(-5deg);
}


/* ==========================================================
   SERVICE
========================================================== */

.rfc-service {
    max-width:620px;

    margin-top:35px;

    padding-top:22px;

    display:flex;

    align-items:flex-start;

    gap:14px;

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


.rfc-service-icon {
    width:42px;
    height:42px;

    flex:
        0
        0
        42px;

    display:flex;

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

    overflow:hidden;

    background:var(--yellow);

    color:var(--black);
}


/* Elementor Icon-Fix */

.rfc-service-icon > i,
.rfc-service-icon > svg {
    width:16px !important;
    height:16px !important;

    min-width:16px !important;
    min-height:16px !important;

    max-width:16px !important;
    max-height:16px !important;

    margin:0 !important;

    font-size:16px !important;

    line-height:1 !important;

    color:var(--black) !important;

    fill:currentColor !important;
}


.rfc-service-copy strong {
    display:block;

    margin-bottom:4px;

    color:#fff;

    font-size:15px;

    line-height:1.3;

    font-weight:700;
}


.rfc-service-copy > span {
    display:block;

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

    font-size:13px;

    line-height:1.5;
}


/* ==========================================================
   ACTION BOX
========================================================== */

.rfc-action {
    position:relative;

    padding:
        34px
        32px
        30px;

    background:#fff;

    color:var(--black);

    border-top:
        6px solid
        var(--yellow);

    box-shadow:
        14px
        14px
        0
        rgba(254,238,2,.22);

    transition:
        box-shadow .3s ease,
        transform .3s ease;
}


.rfc-action:hover {
    box-shadow:
        18px
        18px
        0
        rgba(254,238,2,.25);
}


/* ==========================================================
   ACTION HEAD
========================================================== */

.rfc-action-head {
    display:grid;

    grid-template-columns:
        54px
        1fr;

    gap:16px;

    align-items:center;

    margin-bottom:27px;
}


.rfc-action-icon {
    width:54px;
    height:54px;

    display:flex;

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

    overflow:hidden;

    background:var(--black);

    color:var(--yellow);
}


.rfc-action-icon > i,
.rfc-action-icon > svg {
    width:20px !important;
    height:20px !important;

    min-width:20px !important;
    min-height:20px !important;

    max-width:20px !important;
    max-height:20px !important;

    margin:0 !important;

    font-size:20px !important;

    line-height:1 !important;

    color:var(--yellow) !important;

    fill:currentColor !important;
}


.rfc-action-label {
    display:block;

    margin-bottom:5px;

    color:#707070;

    font-size:11px;

    line-height:1;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;
}


.rfc-action h3 {
    margin:0;

    color:var(--black);

    font-size:27px;

    line-height:1.15;

    letter-spacing:-.6px;

    font-weight:700;
}


/* ==========================================================
   MAIN BUTTON
========================================================== */

.rfc-button {
    min-height:58px;

    width:100%;

    padding:
        0
        22px;

    display:flex;

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

    gap:14px;

    background:var(--yellow);

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

    color:
        var(--black) !important;

    text-decoration:none !important;

    font-size:15px;

    font-weight:700;

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


.rfc-button:hover {
    transform:
        translateY(-2px);

    background:var(--black);

    border-color:var(--black);

    color:#fff !important;
}


.rfc-button i {
    transition:
        transform .2s ease;
}


.rfc-button:hover i {
    transform:
        translateX(5px);
}


/* ==========================================================
   ODER
========================================================== */

.rfc-or {
    margin:
        25px
        0;

    display:flex;

    align-items:center;

    gap:13px;

    color:#8a8a8a;

    font-size:11px;

    font-weight:700;

    letter-spacing:.6px;

    text-transform:uppercase;
}


.rfc-or::before,
.rfc-or::after {
    content:"";

    height:1px;

    flex:1;

    background:#e1e1dd;
}


/* ==========================================================
   KONTAKT
========================================================== */

.rfc-contacts {
    display:grid;

    gap:10px;
}


.rfc-contact {
    min-height:66px;

    padding:
        10px
        13px;

    display:grid;

    grid-template-columns:
        42px
        1fr
        20px;

    gap:13px;

    align-items:center;

    background:#f5f5f1;

    border:
        1px solid
        #e5e5df;

    color:
        var(--black) !important;

    text-decoration:none !important;

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


.rfc-contact:hover {
    transform:
        translateX(3px);

    background:var(--yellow);

    border-color:var(--yellow);
}


.rfc-contact-icon {
    width:42px;
    height:42px;

    display:flex;

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

    background:var(--black);

    color:var(--yellow);

    font-size:14px;
}


.rfc-contact-label {
    display:block;

    margin-bottom:3px;

    color:#777;

    font-size:10px;

    line-height:1;

    font-weight:700;

    letter-spacing:.8px;

    text-transform:uppercase;
}


.rfc-contact-number {
    display:block;

    color:var(--black);

    font-size:17px;

    line-height:1.2;

    font-weight:700;
}


.rfc-contact-arrow {
    justify-self:end;

    color:var(--black);

    font-size:11px;

    transition:
        transform .2s ease;
}


.rfc-contact:hover
.rfc-contact-arrow {
    transform:
        translateX(4px);
}


/* ==========================================================
   NOTE
========================================================== */

.rfc-note {
    margin-top:22px;

    padding:
        16px
        17px;

    display:flex;

    align-items:flex-start;

    gap:11px;

    background:var(--black);

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

    font-size:12px;

    line-height:1.55;
}


.rfc-note i {
    margin-top:2px;

    color:var(--yellow);

    font-size:13px;
}


/* ==========================================================
   IDENTITY
========================================================== */

.rfc-identity {
    margin-top:16px;

    display:flex;

    align-items:center;

    gap:9px;

    color:#777;

    font-size:12px;

    line-height:1.5;
}


/* ==========================================================
   ANIMATION
========================================================== */

.rfc-final.rfc-js
.rfc-kicker,

.rfc-final.rfc-js
.rfc-title,

.rfc-final.rfc-js
.rfc-lead,

.rfc-final.rfc-js
.rfc-trust,

.rfc-final.rfc-js
.rfc-service {
    opacity:0;

    transform:
        translateY(23px);
}


.rfc-final.rfc-js
.rfc-kicker {
    transition:
        opacity .65s ease .08s,
        transform .65s ease .08s;
}


.rfc-final.rfc-js
.rfc-title {
    transition:
        opacity .72s ease .20s,
        transform .72s
        cubic-bezier(.2,.75,.3,1)
        .20s;
}


.rfc-final.rfc-js
.rfc-lead {
    transition:
        opacity .72s ease .34s,
        transform .72s
        cubic-bezier(.2,.75,.3,1)
        .34s;
}


.rfc-final.rfc-js
.rfc-trust {
    transition:
        opacity .7s ease .47s,
        transform .7s ease .47s;
}


.rfc-final.rfc-js
.rfc-service {
    transition:
        opacity .7s ease .58s,
        transform .7s ease .58s;
}


/* KICKER */

.rfc-final.rfc-js
.rfc-kicker::before {
    transform:
        scaleX(0);

    transition:
        transform
        .65s
        cubic-bezier(.22,.8,.28,1)
        .55s;
}


/* MARKER */

.rfc-final.rfc-js
.rfc-marker::before {
    transform:
        skewX(-4deg)
        scaleX(0);

    transition:
        transform
        .78s
        cubic-bezier(.22,.8,.24,1)
        1.05s;
}


.rfc-final.rfc-js
.rfc-marker::after {
    transform:
        skewX(8deg)
        scaleX(0);

    transform-origin:left center;

    transition:
        transform
        .68s
        cubic-bezier(.22,.8,.24,1)
        1.23s;
}


.rfc-final.rfc-js
.rfc-marker {
    color:#fff !important;

    transition:
        color .15s ease 1.28s;
}


/* RECHTE BOX */

.rfc-final.rfc-js
.rfc-action {
    opacity:0;

    transform:
        translateX(35px);

    transition:
        opacity .8s ease .28s,
        transform .8s
        cubic-bezier(.2,.75,.3,1)
        .28s,
        box-shadow .3s ease;
}


/* SICHTBAR */

.rfc-final.rfc-js.rfc-visible
.rfc-kicker,

.rfc-final.rfc-js.rfc-visible
.rfc-title,

.rfc-final.rfc-js.rfc-visible
.rfc-lead,

.rfc-final.rfc-js.rfc-visible
.rfc-trust,

.rfc-final.rfc-js.rfc-visible
.rfc-service {
    opacity:1;

    transform:
        translateY(0);
}


.rfc-final.rfc-js.rfc-visible
.rfc-action {
    opacity:1;

    transform:
        translateX(0);
}


.rfc-final.rfc-js.rfc-visible
.rfc-kicker::before {
    transform:
        scaleX(1);
}


.rfc-final.rfc-js.rfc-visible
.rfc-marker::before {
    transform:
        skewX(-4deg)
        scaleX(1);
}


.rfc-final.rfc-js.rfc-visible
.rfc-marker::after {
    transform:
        skewX(8deg)
        scaleX(1);
}


.rfc-final.rfc-js.rfc-visible
.rfc-marker {
    color:
        var(--black) !important;
}


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

@media(max-width:1000px) {

    .rfc-inner {
        grid-template-columns:
            1fr
            .9fr;

        gap:45px;
    }


    .rfc-title {
        font-size:46px;
    }

}


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

@media(max-width:800px) {

    .rfc-final {
        background-position:
            55%
            center;
    }


    .rfc-final::before {
        background:
            rgba(0,0,0,.78);
    }


    .rfc-inner {
        padding:
            75px
            20px
            80px;

        grid-template-columns:
            1fr;

        gap:45px;
    }


    .rfc-content {
        max-width:none;
    }


    .rfc-action {
        max-width:620px;
    }

}


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

@media(max-width:560px) {

    .rfc-inner {
        padding:
            65px
            18px
            70px;
    }


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

        line-height:1.08;
    }


    .rfc-marker {
        white-space:normal;

        font-size:1em;

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


    .rfc-lead {
        font-size:17px;
    }


    .rfc-trust {
        display:grid;

        gap:11px;
    }


    .rfc-action {
        padding:
            27px
            21px
            24px;

        box-shadow:
            8px
            8px
            0
            rgba(254,238,2,.22);
    }


    .rfc-action h3 {
        font-size:23px;
    }

}


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

.elementor-editor-active
.rfc-final
.rfc-kicker,

.elementor-editor-active
.rfc-final
.rfc-title,

.elementor-editor-active
.rfc-final
.rfc-lead,

.elementor-editor-active
.rfc-final
.rfc-trust,

.elementor-editor-active
.rfc-final
.rfc-service,

.elementor-editor-active
.rfc-final
.rfc-action {
    opacity:1 !important;

    transform:none !important;
}


.elementor-editor-active
.rfc-marker {
    color:
        var(--black) !important;
}


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


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