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


/* ==========================================================
   RUFFUS – NORMALER TEXTBEREICH
========================================================== */

.rt-section {
    width:100%;

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

.rt-section *,
.rt-section *::before,
.rt-section *::after {
    box-sizing:border-box;
}


/* HELL */

.rt-light {
    background:#f6f6f2;
    color:#090909;
}


/* DUNKEL */

.rt-dark {
    background:#090909;
    color:#ffffff;
}


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

.rt-inner {
    width:100%;
    max-width:1320px;

    margin:0 auto;

    padding:
        85px
        25px
        90px;
}


.rt-content {
    width:100%;
}


.rt-normal {
    max-width:880px;
}


.rt-wide {
    max-width:1120px;
}


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

.rt-kicker {
    display:inline-flex;

    align-items:center;

    gap:11px;

    margin-bottom:18px;

    font-size:12px;

    line-height:1;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;
}


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

    width:38px;
    height:4px;

    background:#FEEE02;

    flex:
        0
        0
        38px;

    transform-origin:left center;
}


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

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

    margin:
        0
        0
        28px;

    color:inherit;

    font-size:
        clamp(
            36px,
            3.6vw,
            50px
        );

    line-height:1.05;

    letter-spacing:-1.5px;

    font-weight:750;
}


.rt-title-line {
    display:block;

    margin-top:5px;
}


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

.rt-marker {
    position:relative;

    display:inline-block;

    z-index:1;

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

    margin-left:-.04em;

    color:#090909 !important;

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

    font-size:1.04em;

    line-height:.92;

    letter-spacing:0;

    font-weight:700 !important;
}


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

    position:absolute;

    left:0;
    right:0;

    top:8%;
    bottom:0;

    z-index:-1;

    background:#FEEE02;

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

    transform-origin:left center;
}


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

    position:absolute;

    left:-5px;
    right:7px;

    bottom:-2px;

    height:6px;

    z-index:-1;

    background:#FEEE02;

    transform:
        skewX(8deg);
}


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

.rt-text {
    font-size:17px;

    line-height:1.8;
}


.rt-light
.rt-text {
    color:#555555;
}


.rt-dark
.rt-text {
    color:
        rgba(255,255,255,.70);
}


.rt-text p {
    margin:
        0
        0
        18px;
}


.rt-text p:last-child {
    margin-bottom:0;
}


.rt-text strong {
    font-weight:700;
}


.rt-light
.rt-text strong {
    color:#090909;
}


.rt-dark
.rt-text strong {
    color:#ffffff;
}


.rt-text h3 {
    margin:
        34px
        0
        12px;

    color:inherit;

    font-size:25px;

    line-height:1.2;

    font-weight:700;
}


.rt-text h4 {
    margin:
        28px
        0
        10px;

    color:inherit;

    font-size:20px;

    line-height:1.25;

    font-weight:700;
}


/* ==========================================================
   LISTEN
========================================================== */

.rt-text ul,
.rt-text ol {
    margin:
        20px
        0;

    padding-left:0;

    list-style:none;
}


.rt-text li {
    position:relative;

    margin-bottom:10px;

    padding-left:25px;
}


.rt-text li::before {
    content:"";

    position:absolute;

    left:2px;
    top:.68em;

    width:8px;
    height:8px;

    background:#FEEE02;

    transform:
        rotate(45deg);
}


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

.rt-text a {
    color:inherit !important;

    font-weight:700;

    text-decoration:
        underline;

    text-decoration-color:
        #FEEE02;

    text-decoration-thickness:
        3px;

    text-underline-offset:
        3px;
}


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

.rt-section.rt-js
.rt-kicker,

.rt-section.rt-js
.rt-title,

.rt-section.rt-js
.rt-text {
    opacity:0;

    transform:
        translateY(20px);
}


.rt-section.rt-js
.rt-kicker {
    transition:
        opacity .65s ease .05s,
        transform .65s ease .05s;
}


.rt-section.rt-js
.rt-title {
    transition:
        opacity .7s ease .17s,
        transform .7s
        cubic-bezier(.2,.75,.3,1)
        .17s;
}


.rt-section.rt-js
.rt-text {
    transition:
        opacity .7s ease .30s,
        transform .7s
        cubic-bezier(.2,.75,.3,1)
        .30s;
}


/* KICKER */

.rt-section.rt-js
.rt-kicker::before {
    transform:
        scaleX(0);

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


/* MARKER */

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

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


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

    transform-origin:left center;

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


/* SICHTBAR */

.rt-section.rt-visible
.rt-kicker,

.rt-section.rt-visible
.rt-title,

.rt-section.rt-visible
.rt-text {
    opacity:1;

    transform:
        translateY(0);
}


.rt-section.rt-visible
.rt-kicker::before {
    transform:
        scaleX(1);
}


.rt-section.rt-visible
.rt-marker::before {
    transform:
        skewX(-4deg)
        scaleX(1);
}


.rt-section.rt-visible
.rt-marker::after {
    transform:
        skewX(8deg)
        scaleX(1);
}


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

@media(max-width:700px) {

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


    .rt-title {
        font-size:35px;

        line-height:1.07;
    }


    .rt-marker {
        white-space:normal;

        font-size:1em;
    }


    .rt-text {
        font-size:16px;

        line-height:1.75;
    }

}


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

.elementor-editor-active
.rt-section
.rt-kicker,

.elementor-editor-active
.rt-section
.rt-title,

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

    transform:none !important;
}


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


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

/* RUFFUS_TEXT_GALLERY_START */


/* ==========================================================
   RUFFUS TEXT – OPTIONALE GALERIE
========================================================== */

.rt-gallery-wrap {
    width:100%;

    margin-top:48px;
}


.rt-gallery-wrap.rt-normal {
    max-width:880px;
}


.rt-gallery-wrap.rt-wide {
    max-width:1120px;
}


.rt-gallery-full {
    max-width:100%;
}


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

.rt-gallery {
    width:100%;

    display:grid;

    gap:14px;
}


.rt-gallery-cols-2 {
    grid-template-columns:
        repeat(2,minmax(0,1fr));
}


.rt-gallery-cols-3 {
    grid-template-columns:
        repeat(3,minmax(0,1fr));
}


.rt-gallery-cols-4 {
    grid-template-columns:
        repeat(4,minmax(0,1fr));
}


/* ==========================================================
   BILD
========================================================== */

.rt-gallery-item {
    position:relative;

    display:block;

    width:100%;

    aspect-ratio:4 / 3;

    overflow:hidden;

    background:#090909;

    border:0 !important;
    border-radius:0 !important;

    outline:0 !important;

    text-decoration:none !important;

    box-shadow:none !important;

    cursor:pointer;
}


.rt-gallery-image {
    position:absolute;

    inset:0;

    display:block;
}


.rt-gallery-image img {
    display:block;

    width:100% !important;
    height:100% !important;

    max-width:none !important;

    object-fit:cover;

    object-position:center;

    border:0 !important;
    border-radius:0 !important;

    transform:scale(1.001);

    transition:
        transform .5s
        cubic-bezier(.22,.8,.24,1),
        filter .35s ease;
}


/* ==========================================================
   HOVER
========================================================== */

.rt-gallery-hover {
    position:absolute;

    inset:0;

    display:flex;

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

    background:
        rgba(9,9,9,0);

    opacity:0;

    transition:
        background .28s ease,
        opacity .28s ease;
}


.rt-gallery-hover::before {
    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:0;
    height:7px;

    background:#FEEE02;

    transition:
        width .35s
        cubic-bezier(.22,.8,.24,1);
}


.rt-gallery-plus {
    width:52px;
    height:52px;

    display:flex;

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

    background:#FEEE02;

    color:#090909;

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

    font-size:34px;

    line-height:1;

    font-weight:400;

    transform:
        translateY(12px)
        scale(.92);

    transition:
        transform .28s ease;
}


.rt-gallery-item:hover
.rt-gallery-image img {
    transform:scale(1.055);

    filter:
        brightness(.72);
}


.rt-gallery-item:hover
.rt-gallery-hover {
    opacity:1;

    background:
        rgba(9,9,9,.18);
}


.rt-gallery-item:hover
.rt-gallery-hover::before {
    width:100%;
}


.rt-gallery-item:hover
.rt-gallery-plus {
    transform:
        translateY(0)
        scale(1);
}


/* ==========================================================
   DARK VARIANTE
========================================================== */

.rt-dark
.rt-gallery-item {
    border:
        1px solid
        rgba(255,255,255,.12) !important;
}


/* ==========================================================
   LIGHTBOX
========================================================== */

.rt-lightbox {
    position:fixed;

    inset:0;

    z-index:2147483500;

    display:none;

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

    padding:
        70px
        85px;

    background:
        rgba(5,5,5,.96);

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


.rt-lightbox.is-open {
    display:flex;
}


.rt-lightbox::before {
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:7px;

    background:#FEEE02;
}


.rt-lightbox-stage {
    position:relative;

    width:100%;
    height:100%;

    display:flex;

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


.rt-lightbox-image {
    display:block;

    width:auto !important;
    height:auto !important;

    max-width:100% !important;
    max-height:100% !important;

    object-fit:contain;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.5);
}


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

.rt-lightbox-close,
.rt-lightbox-prev,
.rt-lightbox-next {
    appearance:none;
    -webkit-appearance:none;

    position:absolute;

    z-index:5;

    margin:0 !important;
    padding:0 !important;

    display:flex;

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

    background:#FEEE02 !important;

    color:#090909 !important;

    border:0 !important;
    border-radius:0 !important;

    outline:0 !important;

    box-shadow:none !important;

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

    line-height:1 !important;

    cursor:pointer;
}


.rt-lightbox-close {
    top:20px;
    right:20px;

    width:54px;
    height:54px;

    font-size:32px !important;
}


.rt-lightbox-prev,
.rt-lightbox-next {
    top:50%;

    width:58px;
    height:70px;

    font-size:35px !important;

    transform:
        translateY(-50%);
}


.rt-lightbox-prev {
    left:20px;
}


.rt-lightbox-next {
    right:20px;
}


.rt-lightbox-close:hover,
.rt-lightbox-prev:hover,
.rt-lightbox-next:hover {
    background:#ffffff !important;

    color:#090909 !important;
}


/* ==========================================================
   COUNTER
========================================================== */

.rt-lightbox-counter {
    position:absolute;

    left:50%;
    bottom:19px;

    transform:
        translateX(-50%);

    min-width:72px;

    padding:
        8px
        13px;

    background:#FEEE02;

    color:#090909;

    text-align:center;

    font-size:12px;

    line-height:1;

    font-weight:800;

    letter-spacing:.7px;
}


/* ==========================================================
   BODY LOCK
========================================================== */

html.rt-lightbox-lock,
body.rt-lightbox-lock {
    overflow:hidden !important;
}


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

@media(max-width:900px) {

    .rt-gallery-cols-4 {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }


    .rt-lightbox {
        padding:
            65px
            68px;
    }

}


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

@media(max-width:700px) {

    .rt-gallery-wrap {
        margin-top:35px;
    }


    .rt-gallery {
        grid-template-columns:
            1fr !important;

        gap:10px;
    }


    .rt-gallery-item {
        aspect-ratio:4 / 3;
    }


    .rt-gallery-hover {
        display:none;
    }


    .rt-lightbox {
        padding:
            68px
            14px
            76px;
    }


    .rt-lightbox-close {
        top:13px;
        right:13px;

        width:46px;
        height:46px;

        font-size:27px !important;
    }


    .rt-lightbox-prev,
    .rt-lightbox-next {
        top:auto;
        bottom:13px;

        width:50px;
        height:50px;

        transform:none;

        font-size:29px !important;
    }


    .rt-lightbox-prev {
        left:13px;
    }


    .rt-lightbox-next {
        right:13px;
    }


    .rt-lightbox-counter {
        bottom:25px;
    }

}


/* RUFFUS_TEXT_GALLERY_END */