:root {
    --rh-yellow:#FEEE02;
    --rh-black:#090909;
    --rh-white:#ffffff;
    --rh-border:#e8e8e3;
    --rh-width:1320px;
    --rh-logo-width:320px;
    --rh-logo-scroll-width:220px;
}


/* ==========================================================
   RESET
========================================================== */

.ruffus-header,
.ruffus-header *,
.ruffus-header *::before,
.ruffus-header *::after {
    box-sizing:border-box;
}


/* ==========================================================
   SVG
========================================================== */

.ruffus-header svg {
    display:block;

    width:1em;
    height:1em;

    fill:currentColor;
}


/* ==========================================================
   HEADER
========================================================== */

.ruffus-header {
    position:fixed !important;

    top:0;
    left:0;
    right:0;

    width:100%;

    z-index:2147483000;

    background:#fff;

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

    box-shadow:
        0 5px 22px rgba(0,0,0,.05);

    transition:
        box-shadow .3s ease;
}


.ruffus-header.is-scrolled {
    box-shadow:
        0 8px 30px
        rgba(0,0,0,.11);
}


.ruffus-header-space {
    width:100%;

    height:166px;
}


/* ==========================================================
   TOPBAR
========================================================== */

.ruffus-header-top {
    width:100%;

    max-height:40px;

    overflow:hidden;

    background:var(--rh-black);

    color:#fff;

    transition:
        max-height .32s ease,
        opacity .22s ease;
}


.ruffus-header-top-inner {
    width:100%;
    max-width:var(--rh-width);

    min-height:40px;

    margin:0 auto;

    padding:
        0
        25px;

    display:flex;

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

    gap:25px;
}


.ruffus-header-top-left {
    display:flex;

    align-items:center;

    gap:10px;

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

    font-size:12px;

    line-height:1;

    font-weight:700;

    letter-spacing:.5px;

    text-transform:uppercase;
}


.ruffus-header-top-left::before {
    content:"";

    width:30px;
    height:3px;

    flex:
        0 0
        30px;

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


/* ==========================================================
   TOP CONTACT
========================================================== */

.ruffus-header-contact {
    display:flex;

    align-items:stretch;

    min-height:40px;
}


.ruffus-header-contact a {
    min-height:40px;

    padding:
        0
        16px;

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:
        rgba(255,255,255,.86) !important;

    text-decoration:none !important;

    font-size:12px;

    font-weight:700;

    border-left:
        1px solid
        rgba(255,255,255,.12);
}


.ruffus-header-contact a:last-child {
    border-right:
        1px solid
        rgba(255,255,255,.12);
}


.ruffus-header-contact a svg {
    width:14px;
    height:14px;

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


.ruffus-header-contact a:hover {
    background:
        rgba(255,255,255,.07);

    color:#fff !important;
}


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

.ruffus-header-main {
    width:100%;

    background:#fff;

    border-bottom:
        1px solid
        var(--rh-border);
}


.ruffus-header-inner {
    width:100%;
    max-width:var(--rh-width);

    min-height:126px;

    margin:0 auto;

    padding:
        5px
        25px;

    display:grid;

    grid-template-columns:
        minmax(180px,var(--rh-logo-width))
        1fr
        auto;

    gap:18px;

    align-items:center;

    transition:
        min-height .34s ease,
        grid-template-columns .34s ease,
        padding .34s ease;
}


/* ==========================================================
   LOGO
========================================================== */

.ruffus-header-logo {
    width:var(--rh-logo-width);

    max-width:100%;

    display:flex;

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

    text-decoration:none !important;

    transition:
        width .34s ease;
}


.ruffus-header-logo-media {
    display:block;

    width:var(--rh-logo-width) !important;
    max-width:100% !important;

    height:116px !important;

    object-fit:contain;

    object-position:
        left
        center;

    background:#fff;

    border:0;

    transition:
        width .34s ease,
        height .34s ease;
}


/* ==========================================================
   NAV
========================================================== */

.ruffus-header-nav {
    min-width:0;

    display:flex;

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

    gap:2px;
}


.ruffus-header-nav > a,
.ruffus-nav-dropdown-toggle {
    position:relative;

    isolation:isolate;

    min-height:58px;

    padding:
        0
        11px;

    display:inline-flex;

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

    gap:7px;

    appearance:none;

    background:transparent;

    border:0;

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

    text-decoration:none !important;

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

    font-size:18px;

    line-height:1;

    font-weight:700;

    letter-spacing:-.25px;

    white-space:nowrap;

    cursor:pointer;
}


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

.ruffus-header-nav > a::before,
.ruffus-nav-dropdown-toggle::before {
    content:"";

    position:absolute;

    left:4px;
    right:4px;

    top:50%;

    height:38px;

    z-index:-1;

    background:
        var(--rh-yellow);

    transform:
        translateY(-50%)
        skewX(-5deg)
        scaleX(0);

    transform-origin:
        left center;

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


.ruffus-header-nav > a::after,
.ruffus-nav-dropdown-toggle::after {
    content:"";

    position:absolute;

    left:1px;
    right:10px;

    top:
        calc(50% + 13px);

    height:5px;

    z-index:-1;

    background:
        var(--rh-yellow);

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

    transform-origin:
        left center;

    transition:
        transform .27s ease .07s;
}


.ruffus-header-nav > a:hover::before,
.ruffus-header-nav > a.is-current::before,
.ruffus-nav-dropdown:hover
.ruffus-nav-dropdown-toggle::before,
.ruffus-nav-dropdown-toggle.is-current::before {
    transform:
        translateY(-50%)
        skewX(-5deg)
        scaleX(1);
}


.ruffus-header-nav > a:hover::after,
.ruffus-header-nav > a.is-current::after,
.ruffus-nav-dropdown:hover
.ruffus-nav-dropdown-toggle::after,
.ruffus-nav-dropdown-toggle.is-current::after {
    transform:
        skewX(8deg)
        scaleX(1);
}


/* ==========================================================
   DROPDOWN
========================================================== */

.ruffus-nav-dropdown {
    position:relative;

    display:flex;

    align-items:stretch;
}


.ruffus-nav-dropdown-toggle svg {
    width:13px;
    height:13px;

    transition:
        transform .25s ease;
}


.ruffus-nav-dropdown:hover
.ruffus-nav-dropdown-toggle svg {
    transform:
        rotate(180deg);
}


.ruffus-nav-dropdown-menu {
    position:absolute;

    top:
        calc(100% - 1px);

    left:0;

    width:295px;

    padding:
        7px
        0;

    background:
        var(--rh-black);

    border-top:
        5px solid
        var(--rh-yellow);

    box-shadow:
        0 16px 35px
        rgba(0,0,0,.20);

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    transform:
        translateY(10px);

    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .22s ease;

    z-index:100;
}


.ruffus-nav-dropdown:hover
.ruffus-nav-dropdown-menu,

.ruffus-nav-dropdown:focus-within
.ruffus-nav-dropdown-menu {
    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:
        translateY(0);
}


.ruffus-submenu-link {
    width:100%;

    min-height:47px;

    padding:
        0
        19px;

    display:flex;

    align-items:center;

    color:#fff !important;

    text-decoration:none !important;

    border-bottom:
        1px solid
        rgba(255,255,255,.09);

    font-size:14px;

    line-height:1.25;

    font-weight:700;
}


.ruffus-submenu-link:hover,
.ruffus-submenu-link.is-current {
    background:
        var(--rh-yellow);

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


.ruffus-submenu-link.depth-1 {
    padding-left:33px;
}


/* ==========================================================
   CTA
========================================================== */

.ruffus-header-cta {
    min-height:60px;

    padding:
        0
        20px;

    display:inline-flex;

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

    gap:11px;

    background:
        var(--rh-yellow);

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

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

    text-decoration:none !important;

    font-size:18px;

    line-height:1;

    font-weight:700;

    white-space:nowrap;

    transition:
        min-height .32s ease,
        padding .32s ease,
        font-size .32s ease,
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}


.ruffus-header-cta svg {
    width:17px;
    height:17px;
}


.ruffus-header-cta:hover {
    transform:
        translateY(-2px);

    background:
        var(--rh-black);

    border-color:
        var(--rh-black);

    color:#fff !important;
}


/* ==========================================================
   SCROLLED
========================================================== */

.ruffus-header.is-scrolled
.ruffus-header-top {
    height:0;
    min-height:0;
    max-height:0;

    opacity:0;

    pointer-events:none;
}


.ruffus-header.is-scrolled
.ruffus-header-inner {
    min-height:78px;

    padding-top:2px;
    padding-bottom:2px;

    grid-template-columns:
        minmax(
            150px,
            var(--rh-logo-scroll-width)
        )
        1fr
        auto;
}


.ruffus-header.is-scrolled
.ruffus-header-logo {
    width:
        var(--rh-logo-scroll-width);
}


.ruffus-header.is-scrolled
.ruffus-header-logo-media {
    width:
        var(--rh-logo-scroll-width) !important;

    height:70px !important;
}


.ruffus-header.is-scrolled
.ruffus-header-nav > a,

.ruffus-header.is-scrolled
.ruffus-nav-dropdown-toggle {
    min-height:46px;

    padding:
        0
        9px;

    font-size:15px;
}


.ruffus-header.is-scrolled
.ruffus-header-cta {
    min-height:46px;

    padding:
        0
        16px;

    font-size:15px;
}


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

.ruffus-header-mobile-button {
    display:none;

    width:54px;
    height:54px;

    min-width:54px;

    padding:0;

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

    background:
        var(--rh-black);

    border:0;

    color:
        var(--rh-yellow);

    cursor:pointer;
}


.ruffus-header-mobile-button svg {
    width:21px;
    height:21px;
}


.ruffus-menu-close {
    display:none;
}


.ruffus-header.is-open
.ruffus-menu-open {
    display:none;
}


.ruffus-header.is-open
.ruffus-menu-close {
    display:block;
}


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

.ruffus-mobile-menu {
    display:none;

    width:100%;

    background:
        var(--rh-black);

    border-top:
        5px solid
        var(--rh-yellow);
}


.ruffus-header.is-open
.ruffus-mobile-menu {
    display:block;
}


.ruffus-mobile-menu-inner {
    width:100%;
    max-width:var(--rh-width);

    margin:0 auto;

    padding:
        14px
        20px
        23px;
}


.ruffus-mobile-nav {
    display:grid;
}


.ruffus-mobile-nav > a {
    min-height:59px;

    padding:
        0
        10px;

    display:flex;

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

    color:#fff !important;

    text-decoration:none !important;

    border-bottom:
        1px solid
        rgba(255,255,255,.13);

    font-size:17px;

    font-weight:700;
}


.ruffus-mobile-nav > a svg {
    width:14px;
    height:14px;

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


/* ==========================================================
   MOBILE SUBMENÜ
========================================================== */

.ruffus-mobile-nav-group {
    width:100%;

    border-bottom:
        1px solid
        rgba(255,255,255,.13);
}


.ruffus-mobile-nav-label {
    min-height:56px;

    padding:
        0
        10px;

    display:flex;

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

    list-style:none;

    cursor:pointer;

    color:#fff;

    font-size:17px;

    font-weight:700;
}


.ruffus-mobile-nav-label::-webkit-details-marker {
    display:none;
}


.ruffus-mobile-nav-label svg {
    width:14px;
    height:14px;

    color:
        var(--rh-yellow);

    transition:
        transform .2s ease;
}


.ruffus-mobile-nav-group[open]
.ruffus-mobile-nav-label {
    background:
        var(--rh-yellow);

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


.ruffus-mobile-nav-group[open]
.ruffus-mobile-nav-label svg {
    color:
        var(--rh-black);

    transform:
        rotate(180deg);
}


.ruffus-mobile-subnav {
    display:grid;

    padding:
        5px
        0
        8px;

    background:
        rgba(255,255,255,.04);
}


.ruffus-mobile-subnav a {
    min-height:48px;

    padding:
        0
        10px
        0
        27px;

    display:flex;

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

    color:#fff !important;

    text-decoration:none !important;

    border-bottom:
        1px solid
        rgba(255,255,255,.075);

    font-size:15px;

    font-weight:700;
}


.ruffus-mobile-subnav a:last-child {
    border-bottom:0;
}


.ruffus-mobile-subnav a.depth-1 {
    padding-left:42px;
}


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

.ruffus-mobile-contact {
    display:grid;

    grid-template-columns:
        1fr
        1fr;

    gap:10px;

    margin-top:20px;
}


.ruffus-mobile-contact a {
    min-height:56px;

    padding:
        0
        15px;

    display:flex;

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

    gap:9px;

    text-decoration:none !important;

    font-size:15px;

    font-weight:700;
}


.ruffus-mobile-contact svg {
    width:16px;
    height:16px;
}


.ruffus-mobile-phone {
    background:#fff;

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


.ruffus-mobile-cta {
    background:
        var(--rh-yellow);

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


/* ==========================================================
   <= 1260
========================================================== */

@media(max-width:1260px) {

    .ruffus-header-inner {
        grid-template-columns:
            255px
            1fr
            auto;

        gap:10px;
    }


    .ruffus-header-logo,
    .ruffus-header-logo-media {
        width:250px !important;
    }


    .ruffus-header-nav > a,
    .ruffus-nav-dropdown-toggle {
        padding:
            0
            7px;

        font-size:16px;
    }


    .ruffus-header-cta {
        padding:
            0
            13px;

        font-size:16px;
    }

}


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

@media(max-width:1100px) {

    .ruffus-header-inner {
        min-height:105px;

        grid-template-columns:
            1fr
            auto;
    }


    .ruffus-header-nav,
    .ruffus-header-cta {
        display:none;
    }


    .ruffus-header-mobile-button {
        display:flex;
    }


    .ruffus-header-logo,
    .ruffus-header-logo-media {
        width:
            min(
                var(--rh-logo-width),
                300px
            ) !important;
    }


    .ruffus-header.is-scrolled
    .ruffus-header-inner {
        min-height:72px;

        grid-template-columns:
            1fr
            auto;
    }


    .ruffus-header.is-scrolled
    .ruffus-header-logo-media {
        height:64px !important;
    }

}


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

@media(max-width:700px) {

    .ruffus-header-top-inner {
        padding:
            0
            14px;
    }


    .ruffus-header-top-left {
        display:none;
    }


    .ruffus-header-contact {
        width:100%;
    }


    .ruffus-header-contact a {
        flex:1;

        justify-content:center;

        padding:
            0
            8px;
    }


    .ruffus-header-inner {
        min-height:92px;

        padding:
            4px
            14px;
    }


    .ruffus-header-logo,
    .ruffus-header-logo-media {
        width:
            min(
                var(--rh-logo-width),
                235px
            ) !important;

        height:80px !important;
    }


    .ruffus-header-mobile-button {
        width:48px;
        height:48px;

        min-width:48px;
    }


    .ruffus-header.is-scrolled
    .ruffus-header-inner {
        min-height:64px;
    }


    .ruffus-header.is-scrolled
    .ruffus-header-logo,
    .ruffus-header.is-scrolled
    .ruffus-header-logo-media {
        width:
            min(
                var(--rh-logo-scroll-width),
                180px
            ) !important;

        height:54px !important;
    }


    .ruffus-header.is-scrolled
    .ruffus-header-mobile-button {
        width:40px;
        height:40px;

        min-width:40px;
    }

}


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

@media(max-width:480px) {

    .ruffus-header-top-contact-text {
        display:none;
    }


    .ruffus-header-contact a {
        font-size:12px;
    }


    .ruffus-mobile-contact {
        grid-template-columns:1fr;
    }

}


/* ==========================================================
   RUFFUS HEADER – ELEMENTOR BUTTON RESET
   entfernt Elementor Lila / Accent Styles
========================================================== */

.ruffus-header .ruffus-nav-dropdown-toggle,
.ruffus-header .ruffus-nav-dropdown-toggle:hover,
.ruffus-header .ruffus-nav-dropdown-toggle:focus,
.ruffus-header .ruffus-nav-dropdown-toggle:focus-visible,
.ruffus-header .ruffus-nav-dropdown-toggle:active {

    appearance: none !important;
    -webkit-appearance: none !important;

    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;

    border-radius: 0 !important;

    outline: 0 !important;
    outline-color: transparent !important;

    box-shadow: none !important;
    text-shadow: none !important;

    text-decoration: none !important;

    -webkit-tap-highlight-color: transparent !important;
}


/* Elementor kann Button-Farben über Variablen einschleusen */

.ruffus-header {
    --e-global-color-primary: #090909 !important;
    --e-global-color-secondary: #090909 !important;
    --e-global-color-text: #090909 !important;
    --e-global-color-accent: #FEEE02 !important;
}


/* Dropdown bleibt ausschließlich Ruffus Gelb */

.ruffus-header
.ruffus-nav-dropdown:hover
.ruffus-nav-dropdown-toggle,

.ruffus-header
.ruffus-nav-dropdown:focus-within
.ruffus-nav-dropdown-toggle {

    color: #090909 !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}


/* Auch Elementor-Pseudoelemente außerhalb unserer Marker verhindern */

.ruffus-header
.ruffus-nav-dropdown-toggle:not(:hover):not(:focus)::before,

.ruffus-header
.ruffus-nav-dropdown-toggle:not(:hover):not(:focus)::after {
    border: 0 !important;
    box-shadow: none !important;
}



/* ==========================================================
   RUFFUS HEADER – MOBILE BUTTON KOMPLETT RESETTEN
   Elementor Lila / Rundung entfernen
========================================================== */

.ruffus-header button.ruffus-header-mobile-button,
.ruffus-header button.ruffus-header-mobile-button:hover,
.ruffus-header button.ruffus-header-mobile-button:focus,
.ruffus-header button.ruffus-header-mobile-button:focus-visible,
.ruffus-header button.ruffus-header-mobile-button:active {

    appearance: none !important;
    -webkit-appearance: none !important;

    background: #090909 !important;
    background-color: #090909 !important;
    background-image: none !important;

    color: #FEEE02 !important;

    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;

    border-radius: 0 !important;

    outline: 0 !important;
    outline-color: transparent !important;

    box-shadow: none !important;
    text-shadow: none !important;

    padding: 0 !important;

    opacity: 1 !important;

    -webkit-tap-highlight-color: transparent !important;
}


/* ==========================================================
   ICON IM BUTTON
========================================================== */

.ruffus-header
.ruffus-header-mobile-button
.ruffus-menu-open,

.ruffus-header
.ruffus-header-mobile-button
.ruffus-menu-close {

    color: #FEEE02 !important;

    background: transparent !important;

    line-height: 1 !important;
}


.ruffus-header
.ruffus-header-mobile-button
svg {

    width: 22px !important;
    height: 22px !important;

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

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

    fill: #FEEE02 !important;
    color: #FEEE02 !important;

    margin: 0 !important;

    display: block !important;
}


/* ==========================================================
   KEINE ELEMENTOR FOCUS-RINGE
========================================================== */

.ruffus-header
.ruffus-header-mobile-button::before,

.ruffus-header
.ruffus-header-mobile-button::after {

    display: none !important;

    content: none !important;
}


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

@media (max-width: 1100px) {

    .ruffus-header
    button.ruffus-header-mobile-button {

        display: flex !important;

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

        background: #090909 !important;

        color: #FEEE02 !important;

        border-radius: 0 !important;
    }

}