/* === menu ==== */

#menu ul {
margin:0;
padding:0;padding-left:1rem;
padding-top:1rem;
padding-bottom:1rem;
}

#menu li {display:block;
list-style-type: none;
margin:0rem;
padding:0;
text-align:left;
}

#menu li a{
display:inline-block;
text-align:left;
color:#802800;
text-decoration: none;
padding:0rem;
margin-bottom:0.5rem;
width:26rem;
border:solid 0.1rem #339999;
border-top-left-radius:4rem;
border-bottom-left-radius:4rem;
transition: all 0.5s ease-in-out;
font-style:normal;
}

#menu li a:hover  {
color:#fff;
text-decoration: none;
border-radius:0rem;
background-color:teal;
border-top-right-radius:36rem;
border-bottom-right-radius:36rem;
}


#menu .fa {
color:black;
text-align:center;
background-color:teal;
margin-top:0.4rem;
margin-bottom:0.4rem;
margin-right:1rem;
margin-left:0.4rem;
border-radius:36rem;
border:solid 0.1rem #000;
font-size:1rem;
height:4rem;
line-height:4rem;
width:4rem;
transition: all 0.5s ease-in-out;
}

#menu a:hover .fa {
color:white;
text-align:center;
background-color:#009999;
}


#menu #aktuell a   {
color:#E4E4E4
}

#menu #aktuell .fa   {
color:teal;
background:#E4E4E4;
}


/* ############################################################ */
/* M E D I A   Q U E R I E S */
/* ############################################################ */


/* ==================================== ab 360 pixel ================================== */
@media (min-width: 360px) {

#menu li a {width:30rem; }

}