#topbar {
    display: flex;
    width: 100%;
    height: 80px;
    position: fixed;
    top: 0;
    z-index: 99;
    font-family: cinzel;
    font-size: 1.3em;
    font-weight: 300;
}

.topbar-on {
    background-color: rgba(255,255,255,0.8);
    box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);
    transition: all 0.5s ease;
}

.topbar-off {
    background-color: rgba(255,255,255,0);
    transition: all 0.5s ease;
}
.topbar-off img {
    filter: grayscale(100%) invert(100%) brightness(200%) drop-shadow(1px 1px 1px black);
}
.topbar-off li a {
        color: white;
        text-shadow: 1px 1px 1px #000;

}
.site-nav {
    position: relative;
    width: 100%;
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    align-items: center;

    }

.site-nav-rightpart {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-left: auto;
}
.site-nav-list {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    list-style-type: none; 
   --background-color: burlywood;
    margin-left: 5em;
}
.site-nav-list li {
    
    margin: 0 1em;
    -background-color: aqua;
    
}
.site-nav-list a {
    color: #333;
    transition: color 0.25s;
    text-decoration: none;
}

.site-nav-list a:hover {
    color: orange;
    transition: color 0.25s;
}
.logo {
    margin-right: 3em;
    transition: all 0.25s;
}
.logo:hover {
    transform: scale(1.1);
    transition: all 0.25s;
}

.site-nav-social {
    justify-content: flex-end;
    list-style-type: none;
}



.site-nav-social a {
   margin: 0 0.25em;
}
.site-nav-social li {
    transition: all 0.25s;
}

.site-nav-social li:hover {
    transform: scale(1.2);
    transition: all 0.25s;
}
.aktuell {
    color: orange;
}
.impressum {

    width: 100%;
    height: 80px;

    background-color: rgba(255,255,255,0.8);
    box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);
}

@media screen and (max-width:986px) {
    .site-nav-list {
        display:  none;        
    }
    .togglemenu {
        --position: fixed;
        display: flex;
        top: 10px;
        --right: 15px;
        cursor: pointer;
        margin-left: 20px;
        z-index: 20;
        
    }
    .site-nav-list a {
    color: #fff;
    }
    
     .site-nav-list.responsive {
        position: absolute;
        display:  flex;
        top: 0px;
        --padding: 0em 0em 0em 1em;
        margin: 0 auto;
        right: 0px;
        flex-flow: column;
         width: 100%;
        justify-content: flex-end;
         background-color: rgba(40,40,40,0.9);    
    }
    
        
    .site-nav-list li {
        margin: 0 auto;
    }
}
@media screen and (min-width:986px) {
    .togglemenu {
        display: none;
    }
}