/* = = = = = = = = = = = = = = = = = datei menue.css = = = = = = = = = = = = = = = = = = = = = = = = = */



/* ############################################################ */
/* HAUPT-MENUE */
/* ############################################################ */

/* - - - - - MENU FORMATIERUNG - - - - - */

#nav {margin:0;color:#fff;
padding:0;
}

#menu1 {display:table;
position:fixed;
z-index:1;
top:0%;left:0%;
height:100vh;
width:100%;
margin-left:-200vw;
padding:0;
background:transparent;
transition:all 3s ease-out;
}

#menu1 ul {display:table-cell;
vertical-align:middle;
background:#171717;/*IE9*/
background:linear-gradient(to right,#171717, #313131);
text-align:center;
margin:0rem 0;
padding:0 0 0 4rem;
box-shadow:1px -2px 10px  #000;
}

#menu1 li {list-style-type : none;display:block;
margin:0rem 0 0 0;
width:100%;
text-align:left;
padding: 0 0 0 5rem;border-left:solid 1px #FF6700;
font-weight:bold;
text-shadow:none;
}

#menu1 li a {display:inline-block;
width:auto;
text-decoration : none;
font-size:1.3rem;
line-height:1.6rem;
letter-spacing:1px;
padding:.5rem 0rem;
margin: 0;
color:#DFDFDF;
transition:all .4s;
}

/* icons VORAN gestellt */
#menu1 li a:before {display:inline-block;
font-family:'Font Awesome 5 Free'; /* Hinweis: Name of the FA free font (mandatory)
            - 'Font Awesome 5 Free' for Regular and Solid symbols;
            - 'Font Awesome 5 Brands' for Brands symbols. */
content:"\f35a";
font-weight: 400;/* Weight of the font (by fontawesome)- Hinweis:
               - 400 for Regular and Brands symbols;
               - 900 for Solid symbols. */
text-decoration: none;
margin:0 3rem 0 -8rem;
color:#fff;
font-size:1.3rem;
}

/* hover und aktuell angezeigter link/icon */

#menu1 li a:hover {background:transparent;
color:#fff;
transform:translate(10px)
}

#menu1 li a:hover:before {
color:gold;
}

#menu1 #aktuell a:before {
color:gold;
}

#menu1  #aktuell a  {background:transparent;
color:gold;
}

/* icons NACH gestellt */
#menu1  #aktuell  a:after {display:inline-block;
font-family:'Font Awesome 5 Free'; /* Hinweis: Name of the FA free font (mandatory)
            - 'Font Awesome 5 Free' for Regular and Solid symbols;
            - 'Font Awesome 5 Brands' for Brands symbols. */
content:"\f00c";
font-weight: 900;/* Weight of the font (by fontawesome)- Hinweis:
               - 400 for Regular and Brands symbols;
               - 900 for Solid symbols. */
margin:0 0 0 1rem;
color:gold;
font-size:1.3rem;
}


/* - - - menü-oeffnen-schalter  formatierung - - - */

/* menü-öffnen-schalter  formatierung */
#nav label.button-open {display:inline-block;
text-align:left;
position:fixed;
top:1rem; left:2rem;
z-index:2;
margin:0;
padding:0rem;
background:transparent;
cursor:pointer;
color:#FF6700;
font-size:3rem;
transition:transform 4s,opacity 2s ;
}


/* - - - menü-schließen-schalter  formatierung - - - */

#nav label.button-close  {display:inline-block;
position: fixed;
top:1rem; left:2rem;
z-index:2;
cursor:fixed;
background:transparent;
text-align:center;
vertical-align:middle;
opacity:0;
color:#FFDF00;
font-size:3rem;
transition:transform 3s,opacity 2s ;
}


#nav label.button-open:hover {
color:#FFDF00;transform:rotate(-1080deg);
}

#nav label.button-close:hover {
color:red;
}

/* - - - toggle-funktion - - - */


/* checkbox versteckt */
input[type=checkbox]{
display: none;
}

/* schaltet menu ein/aus */
input#open-menue:checked ~ #menu1  {
margin:0;
transition:all 1s ease-out;
}

/*  menue-oeffnen-button EIN / AUS */
input#open-menue:checked ~  label.button-open  {
opacity:0;
transform:rotate(5760deg);
}

/*  menue-schließen-button EIN / AUS */
input#open-menue:checked ~  label.button-close  {
opacity:1;
transform:rotate(5760deg);
}

/*  aktion bei den links */
input#open-menue:checked ~  #menu1 li a {
transform:rotate(360deg);
transition:transform 1s 1s ease-out;
}



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

/* ==================================== ab 480 pixel ================================== */

@media (min-width: 480px) {

#menu1 ul {padding:0 0 0 12rem; }

}


/* ==================================== ab 580 pixel ================================== */

@media (min-width: 580px) {

#menu1  { width:75vw;}

}


/* ==================================== ab 768 pixel ================================== */

@media (min-width: 768px) {

#menu1  { width:40rem;}
#menu1 ul {padding:0 0 0 6rem; }

}




/* = = = = = = = = = = = = = = = = = = = = = Code Ende = = = = = = = = = = = = = = = = = = = = = */