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



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


nav {margin:0;
padding:0;width:100vw; 
}

#menu1  {display:table;
POSITION:fixed;z-index:3;
top:0%;right:0%;
margin:-200vh 0 0 0;
background:#fff;/* IE 9*/
background:linear-gradient(to right,#efefef,#FCFCFC,#efefef);
height:100vh;
width:100%;
padding:0;
opacity:0;
TRANSITION:all 1s ease-out;
box-shadow:0 1px 3px black;
}

#menu1 ul {display:table-cell;
vertical-align:middle;
padding:0rem 1rem;
}

#menu1  li {list-style-type : none;display:block;
padding:0rem;
margin: 0px 0 5px 0;
border:0;box-shadow: 0px 1px 1px rgba(0,0,0,0.6);
font-family:'old_standard_ttitalic';
}

#menu1  a {display:table-cell;
width:32rem;
background:steelblue;
color:#fff;
padding:.8rem 1rem .8rem 1rem;
text-decoration:none;
}

#menu1  a:hover {
color: #fff;
background:dodgerblue;
}

/*  aktuell angezeiger link  */

#menu1 #aktuell a {background:steelblue }
#menu1 #aktuell:nth-child(n):before {background:lightskyblue;
color:white; }


/* die icons im menu */

#menu1 li:before {display:table-cell;
font-size:2rem;
width:4rem;
padding:0rem;
text-align:center;
font-family:'Font Awesome 5 Free';/* - 'Font Awesome 5 Free' for Regular and Solid symbols;
                                     - 'Font Awesome 5 Brand' for Brands symbols. */
font-weight:900; /* - 400 for Regular and Brands symbols;
                    - 900 for Solid symbols. */
content:"\f005";
color:white;
text-shadow:0 0 1px #3F3F3F;
background:silver;
}

#menu1 li:hover:nth-child(n):before {
background:#CE9982;
color:white;
}

#menu1 li:nth-child(1):before {
content:"\f015";
}

#menu1 li:nth-child(2):before {
content:"\f05a";
}

#menu1 li:nth-child(3):before {
content:"\f073";
}

#menu1 li:nth-child(4):before {
content:"\f085";
}

#menu1 li:nth-child(5):before {
content:"\f0e0";
}

#menu1 li:nth-child(6):before {
content:"\f0f4";
}

#menu1 li:nth-child(7):before {
content:"\f15c";
}



/* menü-oeffnen-schalter  formatierung */

/* menü-öffnen-schalter  formatierung */
label.button-open  {display:inline-block;
text-align:center;
margin:0;
padding:0rem;
background:#4682B4;
cursor:pointer;
color:#FFFFFF;
font-size:2.2rem;
width:3.2rem;
height:3.2rem;
line-height:3.2rem;
}


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

label.button-close  {display:inline-block;
POSITION: fixed;
top:1rem;right:1rem;
margin-right:-200vw;
z-index:4;
color:#DFDFDF;
cursor:pointer;
background:transparent;
text-align:center;
vertical-align:middle;
font-size:4rem;
width:4rem;
height:4rem;
line-height:4rem;
TRANSITION:margin-right 3s;
}

/* hover bei den menü-schaltern */

label.button-open:hover {
color:#fff;background:#000;
}

label.button-close:hover {
color:tomato;
}


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

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

/*  menue-oeffnen-button EIN / AUS */
input#open-menue:checked ~  label.button-open  {
opacity:0;
TRANSITION:all 1s ease-out;
}

/*  menue-schließen-button EIN / AUS */
input#open-menue:checked ~  label.button-close  {
margin:0;
TRANSITION:margin 1.5s ease-out;
}

/* schaltet menu ein/aus */
input#open-menue:checked ~ #menu1  {
opacity:1;
margin:0;
TRANSITION:margin 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 { width:32rem; }

}


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

@media (min-width: 768px) {

#menu1  a {padding:2rem 0rem 2rem 1rem; }

}


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

nav {width:auto; }

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

/* menu sichtbar */
#menu1 {opacity:1;
border-right:solid 8px #fff;
left:0;
margin:0;
box-shadow:-1px -1px 70px #9F9F9F;
}




}


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