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


/* -------------------------------------- */
/* diese datei enthält das hauptmenü + die fenster mit fenster-öffnen-funktionen */
/* alle anderen menüs sowie auch allgemeine links im text bzw. eventuelle "weiter-Links"
sind in der datei "format.css" direkt beim jeweiligen abschnitt  definiert */
/* -------------------------------------- */


/* ############################################################ */
/* INFO-FENSTER */
/* ############################################################ */

/* - - - - - INFOFENSTER FORMATIERUNG - - - - - */

#schalter  {position:relative; }

#box-fenster  {display:none;font-size:15px;
position:absolute;
top:0;
left:0;
overflow:auto;
background:#7B9999;
color:#fff;
text-align:left;
font-size:1.5rem;
height:100vh;
width:100vw;
margin-top:0vh;
margin-bottom:0vh;
margin-left:0vw;
margin-right:0vw;
padding:1rem 2rem ;
}

#box-fenster .inhalt  {display:table-cell;
vertical-align:middle;
}


#box-fenster  h1,
#box-fenster  h2,
#box-fenster  h3  {
color:#fff;
}

#box-fenster  a  {
color:#fff;
}

hr.line-less-mar {background: #D1DCDC;
border: none;
color: #D1DCDC;
height: 1px;
width: 80%;
margin-top:1rem;
margin-bottom:1rem
}


/* - - - - - TOGGLE-FUNKTION (MENÜ AN UND AUS) MIT CHECKBOX-HACK - - - - - */

/* öffnen-schalter für box-fenster  formatierung */
#schalter label.button-open  {display:inline-block;
text-align:center;
z-index:3;
position:absolute;
top:0;left:0;
background:#7B9999;
cursor:pointer;
height:4rem;
line-height:4rem;
width:4rem;
}


/* - - - schließen-schalter für box-fenster -  - - - */

#schalter label.button-close   {display:inline-block;
position: absolute;
top:0rem;left:0rem;
z-index:3;
cursor:pointer;
text-transform:uppercase;
background:#db9494;
text-align:center;
vertical-align:middle;
height:4rem;
width:4rem;
line-height:4rem;
}

/* - - - icons  -  - - - */

#schalter  .fas ,
#schalter  .fab ,
#schalter .far  {display:inline-block;
margin:0rem;
padding: 0;
width:4rem;
height:4rem;
line-height:4rem;
font-size:2.4rem;
color:#fff;
border:none;
}

/* - - - toggle-funkton - - - */

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

/* schaltet box-fenster ein/aus */
input#open-info:checked ~ #box-fenster  {
z-index:3;
display:table;
}

/*  button-wechel öffen */
input#open-info:checked ~  label.button-open {
z-index:1;
}

/*  button-wechel schliessen */
input#open-info:checked ~  label.button-close {
z-index:4;
}




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

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

#menu1 {display:inline-block;
position:absolute;
height:100%;
width:100%;
bottom:0%;left:0%;margin-bottom:-240vh;
padding:0;
background:transparent;
}

#menu1 ul {display:block;height:100%;
vertical-align:middle;
text-align:center;
margin:0 auto;
padding-top:1rem;
}

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

#menu1 li a {display:inline-block;
width:100%;
text-align:center;
text-decoration : none;
font-size:1.6rem;
letter-spacing:1px;
padding:.4rem 1rem ;
margin: 0rem;
background:#445355;
color:#fff;
text-shadow:none;
text-transform:uppercase;
}

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


/* - - - - - TOGGLE-FUNKTION (MENÜ AN UND AUS) MIT CHECKBOX-HACK - - - - - */

/* menü-öffnen-schalter  formatierung */
#nav label.button-open  {display:inline-block;
text-align:center;
z-index:2;
position:absolute;
top:0rem;right:.0rem;
margin-right:0rem;
margin-top:0rem;
background:#fff;
cursor:pointer;
height:4rem;
line-height:4rem;
width:4rem;
}


/* - - - infofenster-schließen-schalter  formatierung - - - */

#nav label.button-close   {display:inline-block;
position: absolute;
top:0rem;right:0rem;
z-index:2;
cursor:pointer;
text-transform:uppercase;
background:#ffeecd;
text-align:center;
vertical-align:middle;
height:4rem;
width:4rem;
line-height:4rem;
}

#nav  .fas ,
#nav  .fab ,
#nav  .far  {display:inline-block;
margin:0rem;
padding: 0;
width:4rem;
height:4rem;
line-height:4rem;
font-size:2.4rem;
background:transparent;
color:#000;
border:none;
}


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

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

/* wechselt zw. menue-öffnen-button und menue-schließen-button */
input#open:checked ~  label.button-open  {
opacity:0;
}

/* schaltet animation bei den links ein  */
input#open:checked ~ #menu1 li a {
animation: fade-in  1.5s  ease-out backwards;
}

/* schaltet die hintergrund-farbe beim menü ein  */
input#open:checked ~ #menu1 ul {
background:#445355;
transition:background 1s 3.5s ;
}




/* schaltet die animation-verzögerung bei den links ein  */
input#open:checked ~
#menu1 li:nth-child(1)  a  {animation-delay:200ms; }
input#open:checked ~
#menu1 li:nth-child(2)  a  {animation-delay:500ms; }
input#open:checked ~
#menu1 li:nth-child(3)  a  {animation-delay:800ms; }
input#open:checked ~
#menu1 li:nth-child(4)  a  {animation-delay:1100ms; }
input#open:checked ~
#menu1 li:nth-child(5)  a  {animation-delay:1400ms; }
input#open:checked ~
#menu1 li:nth-child(6)  a  {animation-delay:1700ms; }
input#open:checked ~
#menu1 li:nth-child(7)  a  {animation-delay:2000ms; }
input#open:checked ~
#menu1 li:nth-child(8)  a  {animation-delay:2300ms; }
input#open:checked ~
#menu1 li:nth-child(9)  a  {animation-delay:2600ms; }
input#open:checked ~
#menu1 li:nth-child(10)  a  {animation-delay:2800ms; }





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

/* ==================================== ab 360 pixel ================================== */

@media (min-width: 360px) {

#menu1 ul {width:36rem; }

}


/* ==================================== ab 600 pixel ================================== */

@media (min-width: 600px) {


#box-fenster  {
height:40vh;
width:80vw;
margin-top:30vh;
margin-bottom:30vh;
margin-left:10vw;
margin-right:10vw;
}

}


/* ==================================== ab 640 pixel ================================== */

@media (min-width: 640px) {


#box-fenster  {
height:100vh;
width:100vw;
margin-top:0vh;
margin-bottom:0vh;
margin-left:0vw;
margin-right:0vw;
}

}


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

@media (min-width: 768px) {


#box-fenster  {
height:40vh;
width:80vw;
margin-top:30vh;
margin-bottom:30vh;
margin-left:10vw;
margin-right:10vw;
}

}


/* ==================================== ab 800 pixel ================================== */

@media (min-width: 800px) {


#box-fenster  {
height:60vh;
width:80vw;
margin-top:20vh;
margin-bottom:20vh;
margin-left:10vw;
margin-right:10vw;
}

}


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

#box-fenster  {
height:60vh;
width:60vw;
margin-top:20vh;
margin-bottom:20vh;
margin-left:20vw;
margin-right:20vw;
}

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

/* schaltet die hintergrund-farbe beim menü aus  */
input#open:checked ~ #menu1 ul {
background:transparent;
transition:background 0s 0s ;

}

/* menu sichtbar */
#menu1 {position:absolute;
background:transparent;
bottom:4.1rem;left:0%;
height:0%;width:100%;
margin-bottom:0rem;
margin-left:0;
padding:0;
padding:0rem;text-align:center;
box-shadow:none;
opacity:1;
}

#menu1 ul  {background:transparent;
margin:0rem;width:100%;
padding:0rem;text-align:center;
}

#menu1 li  {display:inline-block;
height:4rem;
line-height:4rem;
margin:0rem -.24rem ;
padding:0rem 0rem ;
}

#menu1 li a {display:block;
width:100%;
text-decoration : none;
font-size:1.3rem;
letter-spacing:.1rem;
padding:0rem 1rem ;
margin: 0;
color:#000;
background:#fff;
border-radius:1rem;
border-bottom-left-radius:0;border-bottom-right-radius:0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1),
inset -2px 0 3px 2px rgba(255, 255, 255, 0.6),
inset 2px 0 3px 2px rgba(255, 255, 255, 0.6),
inset -10px 0 10px 1px rgba(155, 155, 155, 0.1),
inset 10px 0 10px 1px rgba(155, 155, 155, 0.1);
border:solid 1px transparent;
transition:all .2s ease-out;
}

#menu1 li a:hover {background:#445355;
color:#fff;box-shadow:0 0 1px white;
}


}


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