:root
{
    --topBarHeight: var(--headerHeight);
}
#page
{
    padding-top: var(--topBarHeight);
}
#headerWrapper
{
    background: transparent;
}
#teaserWrapper
{
    top: 0;
}
#topBarWrapper
{
    display: block;
    padding-top: 4rem;
    overflow: hidden;
}
#topBarInner
{
    position: absolute;
    display: grid;
    grid-template-areas: "logo logo"
                         "els menu";
    top: 1rem;
    width: calc(100vw - 5rem);
    margin-inline: 0;
    padding-inline: 1rem;
}

#logo
{
    grid-area: logo;
}

#topMenu
{
    grid-area: menu;
}
#top-menu
{
    display: flex;
    column-gap: 1rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
}
#top-menu li.level1
{
    display: block;
    width: fit-content;
    padding-inline: 0;
}
#top-menu a,
#top-menu a:visited
{
    color: var(--secondaryclr);
    font-weight: 900;
    hyphens: manual;
}
#topBarEls
{
    grid-area: els;
    padding-left: 0.5rem;
    padding-top: 0.5rem;
}

.topbarEl > a
{
    white-space: nowrap;
}

.toggle-button
{
    filter: unset;
}

.toggle-button .bar
{
    mix-blend-mode: unset;
    filter: none;
}

.level2 .mobileSubArrow
{
    display: none;
}

.active .menuTitle
{
    background-color: var(--primaryclr);
}

.menuLinkLevel1 > span:has(svg)
{
    display: none;
}

.mobileSubArrow
{
    transform: none !important;
    transition: none;
    background-color: transparent;
}

.opened .mobileSubArrow
{
    transform: none;
}
.arrowMarker
{
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 3rem;
    opacity: 1;
    transform: translate(-50%,-50%);
    transition: opacity 0.5s ease-in-out;
    pointer-events: auto;
}

.openedMarker
{
    margin-top: -0.5rem;
    font-size: 4.5rem;
    font-weight: 300;
    opacity: 0;
    pointer-events: none;
}

.opened .closedMarker
{
    opacity: 0;
    pointer-events: none;
}

.opened .openedMarker
{
    opacity: 1;
    pointer-events: auto;
}

ul.level3
{
    max-height: 0;
    margin-left: 1rem;
    font-size: 0.9em;
    overflow: clip;
}

#mainMenuWrapper ul.level1 li.level1.opened ul.level2
{
    padding-top: 0;
}

#mainMenuWrapper ul.level1 li.level1 ul.level2 li.level2
{
    margin-bottom: 0;
    margin-top: 0;
    padding-top: 0.5rem;
    background-color: #f0f0f0;
}
#mainMenuWrapper ul.level1 li.level1 ul.level2 li.level2:first-child
{
    padding-top: 0;
}

#mainMenuWrapper li.level1 li.level2 a
{
    display: block;
    padding-left: 3rem;
    padding-right: 2rem;
    padding-block: 0.5rem;
}
.mobileMenuSubSelector
{
    height: 2.8em;
    width: 2.8em;
}
@media screen and (max-width: 480px)
{
    #topBarInner
    {
        width: 98vw;
    }
}