/*╔════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════╗*/
/*║ HEADER I                                                                                                                                                                                                                                              ║*/
/*╚════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════╝*/
/***-------------------------------------------*** Body ***-------------------------------------------***/
body { padding-top: 126px; }
body.home { padding-top: 188px; }

/***-------------------------------------------*** Header ***-------------------------------------------***/
header { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; height: 126px; }
body.home header { height: 188px; }
header li { list-style: none; }
header a { text-decoration: none; }

/***-------------------------------------------*** Hamburger ***-------------------------------------------***/
header #hHamburger { position: absolute; top: 27px; left: 30px; display: none; justify-content: center; align-items: center; width: 105px; height: 105px; background: #FFFFFF; }
body.home header #hHamburger { top: 75px; }
#nav-icon4 { cursor: pointer; position: relative; display: inline-block; width: 77px; height: 63px; transition: .3s ease-in-out; }
#nav-icon4 span { position: absolute; left: 0; display: block; width: 100%; height: 13px; background: #000000; transition: .3s ease-in-out; }
#nav-icon4 span:nth-child(1) { top: 0; }
#nav-icon4 span:nth-child(2) { top: 25px; }
#nav-icon4 span:nth-child(3) { top: 50px; }
body.navi #nav-icon4 span:nth-child(1) { top: 25px; transform: rotate(45deg); }
body.navi #nav-icon4 span:nth-child(2) { width: 0%; opacity: 0; }
body.navi #nav-icon4 span:nth-child(3) { transform: rotate(-45deg); top: 25px; }

/***-------------------------------------------*** Logo ***-------------------------------------------***/
body #logo_container { position: absolute; z-index: 1; top: 34px; right: 45px; width: 199px; height: 92px; }
body.home #logo_container { top: 75px; width: 230px; height: 105px; }
body #logo_container > a { position: absolute; z-index: 2; inset: 0; transition: .3s ease-in-out; }
body #logo_container > a#hLogo1 { background: center right / contain no-repeat url("/pages/img/logo_2025_black.svg"); }
body #logo_container > a#hLogo2 { background: center right / contain no-repeat url("/pages/img/logo_2025_white.svg"); opacity: 0; visibility: hidden; }
body.home #logo_container > a#hLogo1 { opacity: 0; visibility: hidden; }
body.home #logo_container > a#hLogo2 { opacity: 1; visibility: visible; }

/***-------------------------------------------*** Desktop ***-------------------------------------------***/
@media screen and (min-width: 1201px) {
    /* Start: First-Level */
    header #hNavigation { --nav-pos-left: max(30px,calc(calc(calc(100% - 1630px) / 2) + 30px)); position: absolute; z-index: 1; top: 46px; left: 0; padding: 17px 18px 17px var(--nav-pos-left); background: #FFFFFF; box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; }
    body.home header #hNavigation { top: 94px; }
    header #hNavigation > ul { display: flex; align-items: center; gap: 25px; }
    header #hNavigation > ul > li { position: relative; display: block; }
    header #hNavigation > ul > li > a {
        display: block;
        font-family: 'Open Sans', sans-serif;
        font-weight: 600;
        font-size: 24px;
        line-height: 33px;
        color: #000000;
        text-align: left;
        white-space: nowrap;
        padding: 0 0 1px 0;
        border-bottom: 1px solid;
        border-color: transparent;
        transition: .3s ease-in-out;
    }
    header #hNavigation > ul > li.current > a,
    header #hNavigation > ul > li:hover > a { border-color: #000000; }
    /* End: First-Level */

    /* Start: Second-Level */
    header #hNavigation > ul > li > ul { display: none; position: absolute; left: 0; top: 35px; min-width: 100%; padding: 45px 0 0 0; }
    header #hNavigation > ul > li:hover > ul { display: flex; }
    header #hNavigation > ul > li.current.special_category > ul { display: flex; }
    header #hNavigation > ul > li > ul > div { display: flex; flex-direction: column; border: 1px solid #000000; background: #FFFFFF; }
    header #hNavigation > ul > li > ul > div > li { position: relative; display: block; }
    header #hNavigation > ul > li > ul > div > li > a {
        display: block;
        font-family: 'Open Sans', sans-serif;
        font-weight: 400;
        font-size: 24px;
        line-height: 33px;
        color: #000000;
        text-align: left;
        white-space: nowrap;
        padding: 5px 46px 5px 10px;
        transition: .3s ease-in-out;
    }
    header #hNavigation > ul > li.current.special_category > ul > div > li > a,
    header #hNavigation > ul > li > ul > div > li.current > a,
    header #hNavigation > ul > li > ul > div > li:hover > a { background: #AB8825; color: #FFFFFF; }
    /* End: Second-Level */

    /* Start: Second-Level Toggler */
    header #hNavigation > ul > li > ul > div > li > .toggler { position: absolute; top: 0; right: 10px; }
    header #hNavigation > ul > li > ul > div > li > .toggler:after { cursor: pointer; font-family: "Font Awesome 5 Free"; content: "\f078"; font-weight: 600; font-size: 24px; line-height: 43px; color: #000000; transition: .3s ease-in-out; }
    header #hNavigation > ul > li > ul > div > li.open > .toggler:after { content: "\f077"; }
    header #hNavigation > ul > li > ul > div > li.current > .toggler:after,
    header #hNavigation > ul > li > ul > div > li:hover > .toggler:after,
    header #hNavigation > ul > li.current.special_category > ul > div > li > .toggler:after { color: #FFFFFF; }
    /* End: Second-Level Toggler */

    /* Start: Third-Level */
    header #hNavigation > ul > li > ul > div > li > ul { display: none; flex-direction: column; }
    header #hNavigation > ul > li > ul > div > li.open > ul { display: flex; }
    header #hNavigation > ul > li > ul > div > li > ul > li { display: block; }
    header #hNavigation > ul > li > ul > div > li > ul > li > a {
        display: block;
        font-family: 'Open Sans', sans-serif;
        font-weight: 400;
        font-size: 18px;
        line-height: 24px;
        color: #000000;
        text-align: left;
        white-space: nowrap;
        padding: 5px 10px;
        transition: .3s ease-in-out;
    }
    header #hNavigation > ul > li > ul > div > li > ul > li.current > a,
    header #hNavigation > ul > li > ul > div > li > ul > li:hover > a { background: #AB8825; color: #FFFFFF; }
    /* End: Third-Level */

    /* Start: Scrolled */
    body,
    header,
    body #logo_container,
    body #logo_container > a,
    header #hNavigation { transition: .3s ease-in-out; }
    body.scrolled { padding-top: 103px; }
    body.scrolled header { height: 103px; background: #FFFFFF; box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25); }
    body.scrolled #logo_container { --logo-pos-right: max(30px,calc(calc(calc(100% - 1630px) / 2) + 30px)); top: 18px; right: var(--logo-pos-right); width: 154px; height: 71px; }
    body.home.scrolled #logo_container > a#hLogo1 { opacity: 1; visibility: visible; }
    body.home.scrolled #logo_container > a#hLogo2 { opacity: 0; visibility: hidden; }
    body.scrolled header #hNavigation { top: 34px; box-shadow: none; }
    /* End: Scrolled */
}

/***-------------------------------------------*** Tablet ***-------------------------------------------***/
@media screen and (max-width: 1200px) {
    /* Start: Header */
    body { padding-top: 156px; }
    body.home { padding-top: 210px; }
    header { height: 156px; }
    body.home header { height: 210px; }
    header #hHamburger { display: flex; }
    body #logo_container { top: 30px; right: 30px; width: 215px; height: 99px; }
    body.home #logo_container { top: 75px; right: 30px; width: 230px; height: 105px; }
    /* End: Header */

    /* Start: Allgemein */
    header #hNavigation { position: fixed; z-index: 2; top: 156px; left: -100vW; bottom: 0; display: flex; flex-direction: column; width: 100vW; background: #FFFFFF; overflow-y: auto; transition: .3s ease-in-out; }
    body.home header #hNavigation { top: 210px; }
    body.navi header #hNavigation { left: 0; }
    /* End: Allgemein */

    /* Start: First-Level */
    header #hNavigation > ul { display: flex; flex-direction: column; padding: 30px; gap: 15px; }
    header #hNavigation > ul > li { position: relative; display: block; }
    header #hNavigation > ul > li > a {
        display: block;
        font-family: 'Open Sans', sans-serif;
        font-weight: 600;
        font-size: 48px;
        line-height: 62px;
        color: #000000;
        text-align: left;
        white-space: nowrap;
        padding: 0 43px 0 0;
        transition: .3s ease-in-out;
    }
    header #hNavigation > ul > li.open > a,
    header #hNavigation > ul > li.current > a,
    header #hNavigation > ul > li:hover > a { color: #AB8825; }
    /* End: First-Level  */

    /* Start: Toggler */
    header #hNavigation .toggler { position: absolute; top: 0; right: 0; }
    header #hNavigation .toggler:after {
        cursor: pointer;
        display: block;
        content: "\f078";
        border-radius: 50%;
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        text-align: center;
        color: #000000;
        transition: .3s ease-in-out;
    }
    header #hNavigation > ul > li > .toggler:after { font-size: 32px; line-height: 62px; }
    header #hNavigation > ul > li > ul > div > li > .toggler { right: 10px; }
    header #hNavigation > ul > li > ul > div > li > .toggler:after { font-size: 24px; line-height: 48px; }
    header #hNavigation > ul > li.open > .toggler:after,
    header #hNavigation > ul > li.current > .toggler:after,
    header #hNavigation > ul > li:hover > .toggler:after { color: #AB8825; }
    header #hNavigation > ul > li > ul > div > li.open > .toggler:after,
    header #hNavigation > ul > li > ul > div > li.current > .toggler:after,
    header #hNavigation > ul > li > ul > div > li:hover > .toggler:after { color: #FFFFFF; }
    header #hNavigation li.open > div.toggler:after,
    header #hNavigation li.current > div.toggler:after { content: "\f077"; }
    /* End: Toggler */

    /* Start: Second-Level */
    header #hNavigation > ul > li > ul { display: none; }
    header #hNavigation > ul > li.open > ul { display: block; }
    header #hNavigation > ul > li > ul > div { display: flex; flex-direction: column; gap: 15px; }
    header #hNavigation > ul > li > ul > div > li { position: relative; display: block; border: 1px solid #000000; }
    header #hNavigation > ul > li > ul > div > li > a {
        display: block;
        font-family: 'Open Sans', sans-serif;
        font-weight: 400;
        font-size: 32px;
        line-height: 38px;
        color: #000000;
        text-align: left;
        white-space: nowrap;
        padding: 5px 46px 5px 10px;
        transition: .3s ease-in-out;
    }
    header #hNavigation > ul > li > ul > div > li.open > a,
    header #hNavigation > ul > li > ul > div > li.current > a,
    header #hNavigation > ul > li > ul > div > li:hover > a { background: #AB8825; color: #FFFFFF; }
    /* End: Second-Level */

    /* Start: Third-Level */
    header #hNavigation > ul > li > ul > div > li > ul { display: none; flex-direction: column; padding: 0 15px; }
    header #hNavigation > ul > li > ul > div > li.open > ul { display: flex; }
    header #hNavigation > ul > li > ul > div > li > ul > li { display: block; }
    header #hNavigation > ul > li > ul > div > li > ul > li > a {
        display: block;
        font-family: 'Open Sans', sans-serif;
        font-weight: 400;
        font-size: 24px;
        line-height: 32px;
        color: #000000;
        text-align: left;
        white-space: nowrap;
        padding: 5px 10px;
        transition: .3s ease-in-out;
    }
    header #hNavigation > ul > li > ul > div > li > ul > li.current > a,
    header #hNavigation > ul > li > ul > div > li > ul > li:hover > a { background: #AB8825; color: #FFFFFF; }
    /* End: Third-Level */

    /* Start: Scrolled */
    body,
    header,
    header #hHamburger,
    body #logo_container,
    body #logo_container > a,
    body header #hNavigation { transition: .3s ease-in-out; }
    body.home.scrolled { padding-top: 156px; }
    body.scrolled header { background: #FFFFFF; box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25); }
    body.home.scrolled header { height: 156px; }
    body.scrolled header #hHamburger { box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25); }
    body.home.scrolled header #hHamburger { top: 27px; }
    body.home.scrolled #logo_container { top: 30px; width: 215px; height: 99px; }
    body.home.scrolled #logo_container > a#hLogo1 { opacity: 1; visibility: visible; }
    body.home.scrolled #logo_container > a#hLogo2 { opacity: 0; visibility: hidden; }
    body.home.scrolled header #hNavigation { top: 156px; }
    /* End: Scrolled */
}

@media screen and (max-width: 500px) {
    body { padding-top: 140px; }
    body.home { padding-top: 170px; }
    header { height: 140px; }
    body.home header { height: 170px; }
    header #hHamburger { top: 30px; width: 80px; height: 80px; }
    body.home header #hHamburger { top: 50px; }
    #nav-icon4 { width: 59px; height: 48px; }
    #nav-icon4 span { height: 10px; }
    #nav-icon4 span:nth-child(2) { top: 19px; }
    #nav-icon4 span:nth-child(3) { top: 38px; }
    body.navi #nav-icon4 span:nth-child(1) { top: 19px; }
    body.navi #nav-icon4 span:nth-child(3) { top: 19px; }
    body #logo_container { top: 30px; width: 174px; height: 80px; }
    body.home #logo_container { top: 50px; width: 174px; height: 80px; }
    header #hNavigation { top: 140px; }
    body.home header #hNavigation { top: 170px; }

    body,
    header,
    header #hHamburger,
    body #logo_container,
    header #hNavigation { transition: .3s ease-in-out; }

    body.home.scrolled { padding-top: 140px; }
    body.home.scrolled header { height: 140px; }
    body.home.scrolled header #hHamburger { top: 30px; }
    body.home.scrolled #logo_container { top: 30px; width: 174px; height: 80px; }
    body.home.scrolled header #hNavigation { top: 140px; }
}