/*-----------------------------------------------------------------------------< Hauptmenü >---*/

body:not(.small):not(.big) #mainNav{
    opacity:0;
}


#mainNav span,
#mainNav a,
#mainNav strong{
    display:block;
    color:inherit;
    font-weight:400;
    text-decoration:none;
}

#mainNav ul.level_1 > li > span{
    cursor:pointer;
}

#mainNav ul.level_2 a:where(:hover, :focus){
    color:#fff !important;
}

/* #mainNav ul.level_2 strong{
    cursor: default;
} */


#mainNav ul.level_2 strong{
    display:inline-block !important;
}

body ul.level_2 li.active > strong{
    background-color:var(--yellow);
}

/*
 * Kleines Menü
 */

body.small #background {
    display: none;
}

body.small #mainNav {
    position: fixed;
    top: 0;
    bottom: 0;
    background-color: #D9DBE1;
    left: 102%;
    width: 53%;

    padding: 1rem;

    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;

    transition:left var(--scroll_transition);
}

body.small.openNav #mainNav{
    left:47%;
}

@media screen and (max-width:768px){
    body.small.openNav #mainNav{
        left:25%;
    }
    body.small #mainNav {
        width:75%;
    }
}

body.small #mainNav ul.level_1{
    margin-top:9rem;
}




body.small #mainNav ul.level_1 > li > span{
    font-weight:var(--fw_bold);
}

body.small #mainNav ul.level_1 > li > span:before{
    content:"";
    display: inline-block;
    height: .56rem;
    width: .56rem;
    vertical-align: middle;
    margin-right: .5rem;

    background-color: var(--font-color);
    -webkit-mask-image: url('../img/marker.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url('../img/marker.svg');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    transform:rotate(-90deg);

    transition: transform .5s, background-color .5s;
}

body.small #mainNav ul.level_1 > li.trail > span:before{
    background-color: var(--yellow) !important;
}

body.small #mainNav ul.level_1 > li.active > span:before{
    background-color: #fff;
    transform:rotate(0deg);
}

body.small #mainNav ul.level_1 > li:not(:last-child){
    border-bottom:1px solid var(--font-color);
}

body.small #mainNav ul.level_2{
    margin-left:1.06rem;
}

body.small #mainNav ul.level_3{
    margin-left:.5rem;
    font-size:var(--fs_small);
}

body.small #mainNav ul.level_2 {
    transition: height .4s, opacity .4s;
    overflow: hidden;
}




/*
 * Großes Menü
 */

/* body.big #mainNav{
    position:absolute;
    right:10rem;
    top:5rem;
} */

body.big span.action {
    display: none;
}

body.big #mainNav span,
body.big #mainNav a,
body.big #mainNav strong {
    position:relative;
    display: block;
    color: inherit;
    font-weight: 400;
    text-decoration: none;
    hyphens: none;
    white-space: nowrap;
}

body.big #mainNav ul.level_1 > li > span:after,
body.big #mainNav ul.level_3 li strong:before,
body.big #mainNav ul.level_3 li a:before,
/* .ce_accordion .toggler:before */
.ce_accordion .marker:before { 
    content: "";
    display: inline-block;
    height: .56rem;
    width: .56rem;
    vertical-align: middle;
    margin-left: .5rem;

    background-color: var(--font-color);
    -webkit-mask-image: url('../img/marker.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url('../img/marker.svg');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    transform-origin: center;
    transition: transform .5s, background-color .5s;
}

body.big #mainNav ul.level_1 > li > span:after{
    position:absolute;
    right:0;
    top:calc(50% - .28rem);
    margin:0;
}

body.big #mainNav ul.level_1 > li.active > span:after{
    transform: rotate(180deg);
    background-color: #fff;

}

body.big #mainNav ul.level_1>li.trail>span:after {
    background-color: var(--yellow);
}


body.big #background {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100vw;
    background-color: #D9DBE1;
    box-shadow: -.12rem 0 .4rem rgba(0, 0, 0, .16);
}

body.small #mainNav{
    box-shadow: -.12rem 0 .4rem rgba(0, 0, 0, .16);
}

body.big:not(.openNav) #background{
    left: 102vw !important;
}

body.big #background.transition,
body.big #mainNav ul.level_1>li.transition ul.level_2 {
    transition: left .5s ease-in-out;
}

body.big #mainNav {
    padding-right: 4.2rem;
}

body.big #mainNav ul.level_1 {
    position: relative;
    display: flex;
    justify-content: flex-end;
    gap:2rem;
}

body.big #mainNav ul.level_2>li:not(:last-child) {
    margin-bottom: 1rem;
}

body.big #mainNav ul.level_3 li strong:before,
body.big #mainNav ul.level_3 li a:before {
    margin-left: 0;
    margin-right: .3rem;
    transform: rotate(-90deg);

}

body.big #mainNav ul.level_1 > li > span {
    padding:0 1rem;
}

body.big #mainNav ul.level_2 li a,
body.big #mainNav ul.level_2 li strong {
    padding: 0 1rem;
}


body.big #mainNav ul.level_2>li>a,
body.big #mainNav ul.level_2>li>strong {
    font-weight: 800;
}

body.big #mainNav ul.level_2 {
    position: fixed;
    top: 11rem;
    z-index: 0;
    max-height: calc(100vh - 12rem);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    transition:top var(--scroll_transition);
}

body.big.hideNav #mainNav ul.level_2,
body.big.smallNav #mainNav ul.level_2{
    top:7rem;
}

body.big #mainNav ul.level_1>li.active>ul.level_2 {
    z-index: 1;
}

body.big:not(.openNav) #background+ul.level_1 ul.level_2 {
    left: 102vw !important;
}

body.big #mainNav ul.level_1 > li:not(.transition) li > a,
body.big #mainNav ul.level_1 > li:not(.transition) li > strong {
    display: block;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
}

body.big #mainNav ul.level_1 > li:not(.transition) li.show > a,
body.big #mainNav ul.level_1 > li:not(.transition) li.show > strong {
    pointer-events: all;
    opacity: 1;
}

footer .specialPages{
    margin:3rem 0;
    padding:3rem 0;
    border-top:1px solid var(--font-color);
    border-bottom:1px solid var(--font-color);
}

footer .specialPages .content-text{
    margin-bottom:1rem;
}

footer .mod_customnav ul{
    display:flex;
    flex-wrap: wrap;
    gap:2rem;
    row-gap: 1rem;
}

footer .mod_customnav strong{
    font-weight:inherit;
    text-decoration:none;
}

/*-----------------------------------------------------------------------------< Suche + Hamburger >---*/

body.small #search_1,
body.small #search_2 .ce_form,
body.big #search_3 .ce_form{
    display:none;
}

body.big #search_1{
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    width:2.6rem;
    height:1.6rem;
    overflow:hidden;
    transition:width .2s, opacity var(--scroll_transition);
}

body.big.openNav #search_1{
    opacity:0;
    pointer-events: none;
}

body.big #search_1.active{
    width:100%;
}

#search_1 button{
    position:absolute;
    right:0;
    top:0;

    display: block;
    width:1.6rem;
    height:1.6rem;

    padding:0;
    margin:0;

    border:none;
    background-color:transparent;
    background-image:url('../img/glass.svg');
    background-repeat:no-repeat;
    background-position: center right;
    background-size:1rem;
    cursor: pointer;
}


body.big #search_1 .ce_form{
    opacity:0;
    transition:opacity .5s;
}

body.big #search_1.active .ce_form{
    opacity:1;
    pointer-events: all;
}

body.big #search_1 .ce_form{
    position:absolute;
    right:1.6rem;
    width:calc(100% - 2.6rem);
    overflow:hidden;
}

/* body.small .search button{
    display:none;
} */


body.small .search .ce_form{

}

body.small .ce_form input{

}






body.big #search_2 .ce_form,
body.small #search_3 .ce_form{
    position:absolute;
    transform:translateY(-100%);
    left:1rem;
    top:8.24rem;
    transition:top var(--scroll_transition);
}

body.small #search_3 .ce_form{
    right:1rem;
}

body.big.smallNav #search_2 .ce_form,
body.big.hideNav #search_2 .ce_form,
body.small.smallNav #search_3 .ce_form,
body.small.hideNav #search_3 .ce_form{
    top:5rem;
}

#search_2 .ce_form input[type=text],
#search_3 .ce_form input[type=text]{
    background-color:#fff;
    opacity: .5;
    transition:opacity .2s;
}

#search_2 .ce_form input[type=text]:where(:hover, :focus),
#search_3 .ce_form input[type=text]:where(:hover, :focus){
    opacity:1;
}

body.big:not(.openNav) .hamburger{
    opacity:0;
    pointer-events: none;
}

body.big.openNav .hamburger{
    opacity:1;
    pointer-events: all;
}




/* body.big .hamburger:not(.is-active){
    opacity:0;
    pointer-events:none;
} */