@charset "UTF-8";
/* 
CSS Stylesheet by dialog im netz
*/

:root {
--grey: #626262;
--lightgrey: #e0e0e0;
--trans2: .2s
}

/* MENÜ / NAVIGATION */


nav {
 z-index: +1;
 height: 50px;
 max-width: 660px;
border-top: 1px solid black;

}
nav ul {
padding: 0;
margin: 0;
list-style: none;
}
nav > ul {
 margin-left: -10px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start; 
align-content: flex-start; 
}
nav li {
min-height: 20px;
position: relative;
}
nav > ul > li {
display: block;
width: auto;
list-style: none;
padding: 0;
margin: 0 10px 0 0;
white-space: nowrap;
overflow: visible
}

nav ul ul{
position: relative;
clear: both;
height: auto;
max-height: 0;
overflow-y: hidden;
transition: var(--trans2);
background-color: var(--lightgrey);
box-shadow: 2px 4px 5px rgba(0,0,0,.3)
}
nav ul ul li {
display: block;
clear: both;
}
nav > ul  li:hover > ul {
max-height: 1000px;
}

nav ul ul ul {
position: fixed;
margin-left: -100px;
height: auto;
min-width: 100px;
max-height: 0;
clear: both;
transition: var(--trans2);
}

nav a {
position: relative;
display: block;
float:left;
padding: 4px 10px ;
line-height: normal;
text-decoration: none;
font-size: 13px;
color: black;
hyphens: auto;
transition: .4s;
}
#nav1 a,
#nav6 a,
#nav33 a,
#nav19 {
 min-width: 40px
}
#unav14 a {
min-width: 100px
}
#nav33,
#nav19 {
 margin-right: 0;
}

nav li:hover,
nav li.ac,
nav ul ul li:hover,
nav ul ul li.ac,
nav ul ul ul li:hover,
nav ul ul ul li.ac {
 background-color: #f5f5f5
}
nav a.ac{
}
nav li.ext {
    background: transparent url('/img/style/exlink.png') 80% center no-repeat; 
    background-size: 1.5rem auto; 
}

 
nav a.opensub,
nav a.hidesub {
display: block;
float: right;
padding: 5px 2px 2px 4px; 
margin: 0;
cursor: pointer;
color: #909090;
background-color: transparent;
min-width: 10px;
}
nav a.hidesub {
 display: none;
}
nav a.opensub.hide,
nav a.hidesub.hide{
display: none;
}

nav a.opensub.show,
nav a.hidesub.show {
display: block;
}

nav a.opensub:hover,
nav a.hidesub:hover {
color: black;
}
nav a.opensub,
nav a.hidesub, 
nav a.show,
nav a.show {
display: none!important
}

nav ul.subac {
    left: 0; 
    max-height: 0
}
#searchform {
    background-color: transparent;
}

#hamburger-button{
position: fixed;
top: 0;
right: 0;
height: 70px;
width: 90px; 
transition: var(--trans);
cursor: pointer
}
#mobilebutton{
background: transparent url('/img/style/hamburger.png') center right no-repeat;
}
#mobilebutton,
#hidenav {
position: absolute;
display: block;
top:10px;
left:15px;
width: 70%;
height: 70%;
background-size: contain; 
transition: var(--trans);
opacity: 0;
}
#mobilebutton.show,
#hidenav.show{
display:block;
z-index: 252;
opacity: 1;
}
#mobilebutton.hide,
#hidenav.hide{
display:none;
opacity: 0;
z-index: -1;
 
}
#hidenav {
background: transparent url('/img/style/hidenav.png') center right no-repeat;
background-size: 80% auto; 
}
#mobilebutton span ,
#hidenav span,
#topbutton span {
visibility: hidden
}

#topbutton {
    position: fixed;
    opacity: 0;
    bottom: 0px;
    right: 0px;
    width: 60px;
    height: 60px;
    background: transparent url('/img/style/top.svg') center center no-repeat; 
    background-size: contain; 
    transition: .4s;
    z-index: 200
}
#topbutton:hover,
#topbutton:focus {
    opacity: 1!important
}
#topbutton a {
    display: block; 
    width: 60px;
    height: 60px;
    
}

@media screen and (max-width: 850px) {

nav {
position: fixed;
left: -110vw;
top: 60px;
width: 100vw;
height: auto;
overflow: auto;
padding: 20px 20px 50px;
margin: 0;
background-color: rgba(255,255,255,.9);
box-shadow: 0 10px 20px rgba(0,0,0,.4);
z-index: 140;
transition: var(--trans)
}
nav p,
nav a {
    font-size: 1.6rem;
    padding: 4px 2px 4px 4px
}
nav a.opensub,
nav a.hidesub {
 padding-left: 0
}
nav li{
 min-height: 26px
}
nav ul ul ul {
 position: relative; 
 margin-left: 0;
}

#hamburger-button,
#mobilebutton {
opacity: 1;
z-index: 200;
}

}


@media screen and (max-width: 690px){
nav {
 width: 100%;
 max-width: 300px;
 left: -320px;
 top: 10px;
 transition: .4s
}
nav ul {
 display: block;
}
nav li {
display: block;
 float: none;
 clear: both;
 width: 100%;
 padding: 0;
 overflow: hidden;
}
nav a {
 width: 100%;
}
nav ul,
nav ul ul,
nav ul ul  ul {
 max-height: 1000px;
 background-color: transparent;
 box-shadow: none;
}
nav ul ul {
 padding-left: 10px;
}
nav ul ul ul {
 padding-left: 10px;
}
nav li:hover,
nav li:hover ul,
nav ul ul li:hover ul {
 background-color: transparent
}

nav li.ac {
background-color: transparent
}
nav ul li.ac > a {
 background-color: #f5f5f5
}
nav ul ul li.ac > a{
 background-color: #e8e8e8
}
nav ul ul ul li.ac > a{
 background-color: #d5d5d5
}
nav a.opensub,
nav a.hidesub,
nav a.opensub.show,
nav a.hidesub.show  {
 display: none;
}
}