
<style>

/*----- Menu -----*/

nav {
    /*--- muss sein, sonst: urks (09.11.22) ---*/
    width:100%
}

nav ul { /* ************ betrifft nur "Oben" ************ 09.11.22 */
  text-align: left;
  background: #ffffff;
  border-top: 1px solid black;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0em 0.1em 0em 1.3em;
  height: 80%;
  /*border-bottom: 1px solid black;*/
}

nav ul li { /* ************ betrifft komplette Navi ("Oben" und "Klappe") ************ 29.09.22 */
  list-style: none;
  display: inline;
  color: #009999;
  font-size: 1.1em;
  text-align: left;
  text-transform: uppercase;
  
  
}

/* **** obere Navigationsleiste **** */
nav ul li a { /* ************ betrifft nur "Oben"  ************ 29.09.22 */
  color: #555555;
  position: relative;
  margin: 0.3em;
  margin-left: -0.01em;
  display: inline-block;
  text-decoration: none;
  z-index:100;
}

  ul li a:hover { /* ************ betrifft nur "Oben"  ************ 29.09.22 */
  color: #009999;

}

/*----------------*/
/*------ Media Queries --##########################--stand bei 6xx, wegen Test auf 9xx gestellt (28.09.22) ---*/

@media screen and (min-width: 961px) { /* wenn mindestens 961 pix, dann Navi nebeneinander * (STAT) */
  nav ul.menu {
    max-height: 20px; /* keine Auswirkung ?!? (28.09.22) */
    width:100%; /* keine Auswirkung ?!? (11.11.22) */
  }
  nav a#nav-m,
  nav a.close {
    display: none;
  }
  nav ul li {
    margin: -100px 30px 0 0;
    text-transform: uppercase;
  }
}

/*------ (MOB) ---*/
@media screen and (max-width: 960px) {
/*  Formatierung Mobiles Menue*/
  nav ul {
    top: 10.5em;
    position: absolute;
    background: #E6EBFA; /* **** Hintergrundfarbe Pulldown *** */
    /* font-weight: bold; */
    width: 80%;
    left: -120%;
    list-style-type:none;
    margin: 0;
    padding: 0;
    margin-left: 10%; /* ****** damit bei Stat. mit schmalen Fenster eine Einrueckung vermieden wird (15.11.22) *** */
    border-top: 3px solid #ffffff;


    box-shadow: 10px 10px 15px #555555;
	  border-radius: 2px;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
    z-index:100;
  }

nav ul li{ /* **** Klappe *** */
    display: block;
    text-align: left;
    vertical-align: center;
    padding: 1.7em 1.5em 1.7em 1.5em;
    height:1.7em ;
    background: #E6EBFA;
    border-bottom: 3px solid #ffffff;
  }

  nav ul li a {
    color: #555;
    margin-left: 0;
  }

  nav ul.menu li a:hover { /* wichtig fuer Hamburger-Button */
    border-bottom: 0;
  }

/*Hamburger-Icon*/
  nav a#nav-m img,
  nav a.close img {
    width: 68px;
    height: 68px;

  /* border: 2px solid black; */
  }

  nav > .close,
  nav a#nav-m:target {
    display: none;
  }

  nav a:target ~ ul,
  nav a:target ~ .close {
    display: inline-block;
  }

  /* nav a:target ~ .close {
    position: absolute;
    margin-left: -40px;
  } */

  nav a:target ~ ul {
    left: 0;
  }
}
/*--------------------------------------*/
</style>
