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


/* MENÜ / NAVIGATION */

nav {
display: block;
position: relative;
padding-left: 5px;
}
nav ,
nav li,
nav a {
display: block;
font-family: book, helvetica, sans-serif;
color: var(--alle);
}
nav ul {
display: block;
padding: 0;
margin: 0 auto;
width: auto;
}
nav > ul {
position: relative;
width: auto;
padding: 0;
z-index: 2;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
/* flex-end center space-between space-around space-evenly */
align-items: flex-end; 
/* flex-start flex-end center baseline */
align-content:  flex-start; 
/* flex-start flex-end center space-between space-around */

}
nav ul li {
list-style: none;
display: inline-block;
}
nav > ul > li {
padding: 0;
margin: 0;
margin-bottom: 0;

}


nav a {
display: inline-block;
text-decoration: none;
padding: 1px 6px 0 5px ;
margin: 0 4px;
color: var(--alle);
font-weight: normal;
}
nav a.ac,
nav a:active,
nav a:focus,
nav a:hover {
color: #fdfcfb;
background-color: var(--alle);
text-decoration: none
}

nav li.ext {
background: transparent url('/img/style/exlink.png') 90% center no-repeat; 
background-size: 1.5rem auto; 
}
nav li.ac ul{
display: block
}

nav ul > li.haschildren {
display: flow-root;
}
nav ul > li.haschildren > a {
float: left;
width: calc(100% - 40px)
}
nav ul > li.haschildren > a.opensub,
nav ul > li.haschildren > a.hidesub {
display: inline-block;
width: 40px;
cursor: pointer

}
nav ul > li.haschildren > a.opensub.hide,
nav ul > li.haschildren > a.hidesub {
display: none;
color: var(--rot);
z-index: 2
}
nav ul.subac {
left: 0; 
max-height: 1000px
}
nav ul ul {
position: relative;
height: auto;
max-height:  0;
clear: both;
overflow: hidden;
transition: var(--trans);
}
nav ul ul a {

}

#searchform {
display: none;
background-color: transparent;
}

#hamburger-button{
position: fixed;
top: 0;
right: 0;
height: 90px;
width: 90px; 
transition: var(--trans);
}
#mobilebutton{
background: transparent url('/img/style/hamburger.png') center center no-repeat;

}
#mobilebutton,
#hidenav {
position: absolute;
display: block;
top:  20px;
right:20px;
width: 30px;
height: 30px;
background-size: contain; 
transition: var(--trans);
opacity: 0;
z-index: -1;
}
#mobilebutton:hover {
 transform: rotate(90deg);
}
#hidenav {
background: transparent url('/img/style/hamburger.png') center center no-repeat;
 transform: rotate(90deg);
background-size: contain; 

}
#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;

}
#implink {
 font-size: .8rem;
 margin-bottom: -1px
}


@media screen and (max-width: 850px) {
nav > ul {
padding: 0 20px;
}
}
@media screen and (max-width: 750px) {

nav {
position: fixed;
left: -110vw;
top: 10px;
width: calc(100vw - 100px) ;
height: auto;
overflow: auto;
padding: 20px;
margin: 0;
background-color: rgba(255,255,255,.9);
box-shadow: 0 10px 20px rgba(0,0,0,.4);
z-index: 140;
transition: .4s
}
nav ul,
nav ul li {
 background-color: transparent ;
 display:block;
 padding: 0;
 margin: 0
}
nav > ul {
 background-image: none; 
}
nav p,
nav a {
display: block;
padding: 5px 10px;
margin: 10px;
}
nav li.haschildren{
}

#implink {
 font-size: .8rem;
 letter-spacing: .05rem
}
#hamburger-button,
#mobilebutton {
opacity: 1;
z-index: 200;
transition: .2s
}

}