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


/* ==========================================================
   RUFFUS FAQ
========================================================== */

.rfq-faq {
    position:relative;

    width:100%;

    overflow:visible;

    background:#f6f6f2;

    color:#090909;

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


.rfq-faq *,
.rfq-faq *::before,
.rfq-faq *::after {
    box-sizing:border-box;
}


/* ==========================================================
   DEKO
========================================================== */

.rfq-faq::after {
    content:"";

    position:absolute;

    right:-180px;
    top:-190px;

    width:390px;
    height:390px;

    background:#FEEE02;

    opacity:.08;

    transform:
        rotate(22deg);

    pointer-events:none;
}


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

.rfq-inner {
    position:relative;

    z-index:2;

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

    margin:
        0
        auto;

    padding:
        95px
        25px
        100px;

    display:grid;

    grid-template-columns:
        .76fr
        1.24fr;

    gap:78px;

    align-items:start;
}


/* ==========================================================
   LINKS / STICKY
========================================================== */

.rfq-intro {
    position:sticky;

    top:105px;

    align-self:start;
}


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

.rfq-kicker {
    display:inline-flex;

    align-items:center;

    gap:11px;

    margin-bottom:20px;

    color:#090909;

    font-size:13px;

    line-height:1;

    font-weight:700;

    letter-spacing:.9px;

    text-transform:uppercase;
}


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

    width:38px;
    height:4px;

    flex:
        0
        0
        38px;

    background:#FEEE02;

    transform-origin:left center;
}


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

.rfq-title {
    max-width:500px;

    margin:
        0
        0
        24px;

    color:#090909;

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

    line-height:1.04;

    letter-spacing:-1.8px;

    font-weight:750;
}


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

.rfq-marker {
    position:relative;

    display:inline-block;

    white-space:nowrap;

    z-index:1;

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

    margin-left:-.05em;

    color:#090909 !important;

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

    font-size:1.05em;

    line-height:.92;

    font-weight:700 !important;
}


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

    position:absolute;

    left:0;
    right:0;

    top:8%;
    bottom:0;

    background:#FEEE02;

    z-index:-1;

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

    transform-origin:left center;
}


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

    position:absolute;

    left:-5px;
    right:7px;

    bottom:-2px;

    height:6px;

    background:#FEEE02;

    z-index:-1;

    transform:
        skewX(8deg);
}


/* ==========================================================
   BESCHREIBUNG
========================================================== */

.rfq-description {
    max-width:455px;

    margin:0;

    color:#555;

    font-size:17px;

    line-height:1.7;
}


.rfq-description p {
    margin:0;
}


.rfq-description strong {
    color:#090909;

    font-weight:700;
}


/* ==========================================================
   KONTAKTBOX
========================================================== */

.rfq-contact {
    position:relative;

    margin-top:30px;

    padding:20px;

    display:grid;

    grid-template-columns:
        46px
        1fr;

    gap:15px;

    background:#090909;

    color:#fff;
}


.rfq-contact::before {
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:5px;
    height:100%;

    background:#FEEE02;
}


.rfq-contact-icon {
    width:46px;
    height:46px;

    display:flex;

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

    overflow:hidden;

    background:#FEEE02;

    color:#090909;
}


/* ICON NORMALISIERUNG */

.rfq-contact-icon > i,
.rfq-contact-icon > svg {
    width:17px !important;
    height:17px !important;

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

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

    font-size:17px !important;

    color:#090909 !important;

    fill:currentColor !important;

    margin:0 !important;
}


.rfq-contact strong {
    display:block;

    margin:
        2px
        0
        5px;

    color:#fff;

    font-size:15px;

    line-height:1.25;

    font-weight:700;
}


.rfq-contact p {
    margin:0;

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

    font-size:13px;

    line-height:1.5;
}


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

.rfq-button {
    min-height:54px;

    margin-top:18px;

    padding:
        0
        24px;

    display:inline-flex;

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

    gap:10px;

    background:#FEEE02;

    border:
        2px solid
        #FEEE02;

    color:#090909 !important;

    text-decoration:none !important;

    font-size:15px;

    line-height:1;

    font-weight:700;

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


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

    background:#090909;

    border-color:#090909;

    color:#fff !important;
}


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


.rfq-button:hover i {
    transform:
        translateX(4px);
}


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

.rfq-list {
    display:grid;

    gap:12px;
}


/* ==========================================================
   FAQ ITEM
========================================================== */

.rfq-item {
    margin:0;

    overflow:hidden;

    background:#fff;

    color:#090909;

    border:
        1px solid
        #deded8;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


.rfq-item:hover {
    border-color:#cfcfc8;

    transform:
        translateX(3px);
}


.rfq-item[open] {
    background:#FEEE02;

    border-color:#FEEE02;

    box-shadow:
        8px
        8px
        0
        rgba(9,9,9,.08);

    transform:none;
}


/* ==========================================================
   QUESTION
========================================================== */

.rfq-question {
    min-height:92px;

    padding:
        19px
        21px;

    display:grid;

    grid-template-columns:
        52px
        1fr
        44px;

    gap:18px;

    align-items:center;

    cursor:pointer;

    list-style:none;

    user-select:none;
}


.rfq-question::-webkit-details-marker {
    display:none;
}


.rfq-question::marker {
    display:none;
}


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

.rfq-question-icon {
    width:52px;
    height:52px;

    display:flex;

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

    overflow:hidden;

    background:#090909;

    color:#FEEE02;
}


.rfq-question-icon > i,
.rfq-question-icon > svg {
    display:block !important;

    width:19px !important;
    height:19px !important;

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

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

    margin:0 !important;

    font-size:19px !important;

    line-height:1 !important;

    color:#FEEE02 !important;

    fill:currentColor !important;
}


/* ==========================================================
   FRAGE
========================================================== */

.rfq-question-text {
    color:#090909;

    font-size:19px;

    line-height:1.3;

    font-weight:700;
}


/* ==========================================================
   PLUS
========================================================== */

.rfq-toggle {
    width:44px;
    height:44px;

    display:flex;

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

    justify-self:end;

    background:#090909;

    color:#FEEE02;

    font-size:13px;

    transition:
        transform .25s ease,
        background .2s ease;
}


.rfq-item[open]
.rfq-toggle {
    transform:
        rotate(45deg);
}


/* ==========================================================
   ANSWER
========================================================== */

.rfq-answer {
    padding:
        0
        82px
        25px
        91px;

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

    font-size:15px;

    line-height:1.75;
}


.rfq-answer p {
    margin:0;
}


.rfq-answer strong {
    color:#090909;

    font-weight:700;
}


/* ==========================================================
   BOTTOM
========================================================== */

.rfq-bottom {
    margin-top:14px;

    display:grid;

    grid-template-columns:
        1fr
        auto;

    background:#090909;
}


.rfq-bottom-text {
    min-height:82px;

    padding:
        18px
        22px;

    display:flex;

    align-items:center;

    gap:14px;

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

    font-size:14px;

    line-height:1.5;
}


.rfq-bottom-icon {
    width:40px;
    height:40px;

    flex:
        0
        0
        40px;

    display:flex;

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

    background:#FEEE02;

    color:#090909;

    font-size:14px;
}


.rfq-bottom-link {
    min-height:82px;

    padding:
        0
        24px;

    display:flex;

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

    gap:10px;

    background:#FEEE02;

    color:#090909 !important;

    text-decoration:none !important;

    font-size:14px;

    line-height:1;

    font-weight:700;

    white-space:nowrap;

    transition:
        background .2s ease,
        color .2s ease;
}


.rfq-bottom-link:hover {
    background:#fff;

    color:#090909 !important;
}


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

.rfq-faq.rfq-js
.rfq-kicker,

.rfq-faq.rfq-js
.rfq-title,

.rfq-faq.rfq-js
.rfq-description,

.rfq-faq.rfq-js
.rfq-contact,

.rfq-faq.rfq-js
.rfq-button {
    opacity:0;

    transform:
        translateY(20px);
}


.rfq-faq.rfq-js
.rfq-item {
    opacity:0;

    transform:
        translateY(20px);
}


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


.rfq-faq.rfq-js
.rfq-title {
    transition:
        opacity .7s ease .20s,
        transform .7s ease .20s;
}


.rfq-faq.rfq-js
.rfq-description {
    transition:
        opacity .7s ease .32s,
        transform .7s ease .32s;
}


.rfq-faq.rfq-js
.rfq-contact {
    transition:
        opacity .7s ease .44s,
        transform .7s ease .44s;
}


.rfq-faq.rfq-js
.rfq-button {
    transition:
        opacity .7s ease .56s,
        transform .7s ease .56s,
        background .2s ease;
}


/* KICKER LINE */

.rfq-faq.rfq-js
.rfq-kicker::before {
    transform:
        scaleX(0);

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


/* MARKER */

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

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


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

    transform-origin:left center;

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


/* ITEMS */

.rfq-faq.rfq-js
.rfq-item:nth-child(1) {
    transition:
        opacity .6s ease .18s,
        transform .6s ease .18s,
        background .25s ease;
}

.rfq-faq.rfq-js
.rfq-item:nth-child(2) {
    transition:
        opacity .6s ease .26s,
        transform .6s ease .26s,
        background .25s ease;
}

.rfq-faq.rfq-js
.rfq-item:nth-child(3) {
    transition:
        opacity .6s ease .34s,
        transform .6s ease .34s,
        background .25s ease;
}

.rfq-faq.rfq-js
.rfq-item:nth-child(4) {
    transition:
        opacity .6s ease .42s,
        transform .6s ease .42s,
        background .25s ease;
}

.rfq-faq.rfq-js
.rfq-item:nth-child(5) {
    transition:
        opacity .6s ease .50s,
        transform .6s ease .50s,
        background .25s ease;
}

.rfq-faq.rfq-js
.rfq-item:nth-child(6) {
    transition:
        opacity .6s ease .58s,
        transform .6s ease .58s,
        background .25s ease;
}

.rfq-faq.rfq-js
.rfq-item:nth-child(7) {
    transition:
        opacity .6s ease .66s,
        transform .6s ease .66s,
        background .25s ease;
}

.rfq-faq.rfq-js
.rfq-item:nth-child(8) {
    transition:
        opacity .6s ease .74s,
        transform .6s ease .74s,
        background .25s ease;
}


/* SICHTBAR */

.rfq-faq.rfq-js.rfq-visible
.rfq-kicker,

.rfq-faq.rfq-js.rfq-visible
.rfq-title,

.rfq-faq.rfq-js.rfq-visible
.rfq-description,

.rfq-faq.rfq-js.rfq-visible
.rfq-contact,

.rfq-faq.rfq-js.rfq-visible
.rfq-button,

.rfq-faq.rfq-js.rfq-visible
.rfq-item {
    opacity:1;

    transform:
        translateY(0);
}


.rfq-faq.rfq-js.rfq-visible
.rfq-kicker::before {
    transform:
        scaleX(1);
}


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


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


/* Hover nach Animation */

.rfq-faq.rfq-js.rfq-visible
.rfq-item:not([open]):hover {
    transform:
        translateX(3px);
}


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

@media(max-width:1000px) {

    .rfq-inner {
        grid-template-columns:
            .9fr
            1.1fr;

        gap:45px;
    }


    .rfq-title {
        font-size:44px;
    }

}


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

@media(max-width:800px) {

    .rfq-inner {
        padding:
            70px
            20px
            75px;

        grid-template-columns:1fr;

        gap:45px;
    }


    .rfq-intro {
        position:relative;

        top:auto;
    }


    .rfq-description,
    .rfq-contact {
        max-width:650px;
    }

}


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

@media(max-width:560px) {

    .rfq-inner {
        padding:
            60px
            18px
            65px;
    }


    .rfq-title {
        font-size:37px;

        line-height:1.06;
    }


    .rfq-marker {
        white-space:normal;

        font-size:1em;

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


    .rfq-button {
        width:100%;
    }


    .rfq-question {
        min-height:80px;

        padding:15px;

        grid-template-columns:
            44px
            1fr
            36px;

        gap:12px;
    }


    .rfq-question-icon {
        width:44px;
        height:44px;
    }


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

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

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

        font-size:16px !important;
    }


    .rfq-toggle {
        width:36px;
        height:36px;

        font-size:11px;
    }


    .rfq-question-text {
        font-size:16px;
    }


    .rfq-answer {
        padding:
            0
            17px
            20px
            71px;

        font-size:14px;
    }


    .rfq-bottom {
        grid-template-columns:1fr;
    }


    .rfq-bottom-link {
        min-height:58px;
    }

}


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

.elementor-editor-active
.rfq-faq
.rfq-kicker,

.elementor-editor-active
.rfq-faq
.rfq-title,

.elementor-editor-active
.rfq-faq
.rfq-description,

.elementor-editor-active
.rfq-faq
.rfq-contact,

.elementor-editor-active
.rfq-faq
.rfq-button,

.elementor-editor-active
.rfq-faq
.rfq-item {
    opacity:1 !important;

    transform:none !important;
}


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


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