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


/* -------------------------------------- */
/* diese datei enthält das HAUTPMENÜ */
/* -------------------------------------- */

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

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

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

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

#menu1 ul {display:table-cell;
vertical-align:middle;
/*background:#44484f; 
background:radial-gradient(#44484f, #000);*/
background:#216d96;
background:linear-gradient(to right, #216d96, #24749f);
text-align:center;
margin:0rem 0;
padding:0 0 0 5rem;
box-shadow:1px -2px 10px  #000;
}

#menu1 li {list-style-type : none;display:table;
margin:0rem 0 0 0;
width:100%;
text-align:left;
padding: 0 0 0 5rem;border-left:solid 2px #D1D6D6;
text-shadow:none;
}

#menu1 li a {display:table-cell;vertical-align:middle;
width:150%;
text-decoration : none;
font-size:1.3rem;
line-height:1.6rem;
letter-spacing:0.8px;
padding:.5rem 0rem;
margin: 0;
color:#D1D6D6;
}

/* 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 Brand' for Brands symbols. */
content:"\f138";
/*content:"\f138";*/
font-style: normal;
font-variant-caps: normal;
font-variant-ligatures: normal;
font-weight: 900;/* Weight of the font (by fontawesome)- Hinweis:
               - 400 for Regular and Brands symbols;
               - 900 for Solid symbols. */
text-rendering: auto;
-webkit-font-smoothing: antialiased;
text-decoration: none;
margin:0 3rem 0 -8rem;
color:#7A8989;
font-size:1.3rem;
}

/* hover und aktuell angezeigter link/icon */

#menu1 li a:hover {background:transparent;
color:#D1D6D6;
}

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

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

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


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

/* menü-öffnen-schalter  formatierung */
#nav label.button-open {display:inline-block;
text-align:center;
margin:0;
padding:0rem;
background:transparent;
cursor:pointer;
color:#D1D6D6;
font-size:3rem;
}


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

#nav label.button-close  {display:inline-block;
position: relative;
top:-.5rem;right:-2.5rem;
z-index:2;
cursor:pointer;
background:transparent;
text-align:center;
vertical-align:middle;
opacity:0;
color:#7A8989;
font-size:3rem;
transition:transform 1s;
}

#nav label.button-open:hover {
color:firebrick;
}

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

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

/* schaltet menu ein/aus */
input#open-menue:checked ~ #menu1  {
margin-left:0;
}

/*  menue-öffnen-button EIN / AUS */
input#open-menue:checked ~  label.button-open  {
opacity:0;
}

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



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




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

@media (min-width: 580px) {

/* menu-schalter versteckt */
#nav label.button-open ,
#nav label.button-close {display:none;
}

/* menu sichtbar */
#menu1 {z-index:4;position:relative;width:60rem;
background:transparent;
height:0%;
margin:0;
padding:0rem;
box-shadow:none;
}

#menu1 ul {display:table-cell;
vertical-align:middle;
background:transparent;
background:xlinear-gradient(to right,#216d96, #24749f);
/*background:xlinear-gradient(to right, #fff,#D6DCDC);*/
text-align:center;
margin:0rem 0;
padding:1.5rem 0 1.5rem 4rem;
box-shadow:none;
}

}


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