/* N A V I G A T I O N */
  /*Zunächst verändern wir mittels box-sizing das Box-Modell, so dass ein Innenabstand (padding) das Element nicht mehr vergrößert. Für den nav-Container setzen wir eine Hintergrundfarbe und legen die Schriftgröße auf 16 Pixel fest. */
  /*-- die grüne Box, in der das Menü ist --*/
nav {
  box-sizing: border-box;
  float: left;
  width: 100%;
  background: #a2d80db4;
  font-size: 16px;
}

/*Im nächsten Schritt deklarieren wir die Aufzählungslisten und Links.   */
/* die ungeordnete Liste insgesamt, bei Änderung werden die äußeren Grenzen und Abstände des Menüs in der grünen Box geändert */

/*Wir deaktivieren den Innen- und Außenabstand der Aufzählungslisten.*/
nav ul {
  margin: 0;
  padding: 0;
}
 /*Die Links formatieren wir als Blockelement, damit das gesamte Listenelement klickbar wird und nicht nur der Link selbst. Die Schriftfarbe setzen wir auf den gewünschten Wert und schalten ein Unterstreichen der Links ab.*/
nav a {
  /*erzeugt die Box um die Menüpunkte */
  display: block;
  /*Schriftfarbe für alle Menüpunkte*/
  color: rgb(20, 10, 161);
  /*Verhindert den Unterstrich der Links im gesamten Menü*/
  text-decoration: none;
}

/*Wir stylen nun die Listenelemente sowie die darin liegenden Links der ersten Ebene.  */

/*Die Listenelemente werden gefloatet, damit sie horizontal dargestellt werden. Zugleich deaktivieren wir Aufzählungszeichen (list-style)*/
nav ul li {
  position: relative;
  float: left;
  list-style: none;
}
 /*und geben den Listenelmenten bei hover eine andere Hintergrundfarbe*/
nav ul li:hover {
  background: #e8ebee;
}
 
nav ul li a {
    /*Die Links innerhalb der Listenelemente versehen wir mit einem Innenabstand von 20 Pixel zu allen Seiten*/
    padding: 20px;
}

/*Kommen wir zu den Untermenüs. Die Untermenüs positionieren wir absolut und verfrachten sie mit den Positionsangaben (top und left) erst einmal ganz weit außerhalb des sichtbaren Bereichs, da sie ja nur angezeigt werden sollen, wenn wir mit der Maus über das entsprechende Listenelement hovern.
Die Untermenüs bekommen eine gegenüber der ersten Ebene leicht veränderte Hintergrundfarbe und einen schicken Schlagschatten (box-shadow).*/

nav ul ul {
  position: absolute;
  top: -9999px;
  left: -9999px;
  background: rgb(238, 118, 118);
  box-shadow: inset 5px 5px 10px rgba(175, 115, 4, 0.781);
  width: 200px;
}
 /* Den Listenelementen innerhalb der Untermenüs geben wir eine feste Breite (width) von 200 Pixel und eine dezente Rahmenlinie nach unten. Ganz wichtig: die Listenelemente der Untermenüs sollen nicht horizontal sondern vertikal dargestellt werden. Daher müssen wir den float abschalten. Abweichend von der ersten Ebene setzen wir noch den Innenabstand der Listenelemente oben und unten von 20 auf 10 Pixel herab.*/
nav ul ul li {
  float: none;
  width: 200px;
  border-bottom: 1px solid #555;
}
 nav ul ul li a {
     /*die Links im Submenu*/
    padding: 5px 8px;
}
nav ul ul li a:hover {
    /*beim Überfahren der Submenüpunkte*/
    background: rgb(185, 187, 45);
}
/*..............................*/
/* Wir ändern bei hover des Listenelements einfach die Positionsangaben des Untermenüs und schon wird das Untermenü an der linken Kante genau unterhalb des Listenelements ausgerichtet.*/
nav ul li:hover > ul {
  top: 100%;
  left: 0px;
}
/*Die Position der Untermenüs für die folgenden Ebenen müssen wir noch anpassen, da diese ja nicht links unterhalb des Listenelements sondern an der oberen Kante rechts daneben ausgerichtet werden sollen. Das erreichen wir durch folgende Angaben: */
/* wird hier nicht benötigt
nav ul ul li:hover > ul {
  top: 0;
  left: 150px;
} */
/*Die Listenelemente (1.Ebene) mit Untermenü wollen wir abweichend von den Standard-Listenelementen formatieren und diesen einen Pfeil nach unten bzw. ab der zweiten Ebene nach rechts, als Indikator für das Vorhandensein eines Untermenüs, verpassen.

Das machen wir mittels des Pseudoelements :after und bedienen uns eines kleinen Tricks, um den Pfeil darzustellen:*/

nav ul li.submenu > a:after {
  position: relative;
  float: right;
  content: '';
  margin-left: 10px;
  margin-top: 5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid rgb(33, 15, 199);
  border-bottom: 5px solid transparent;
}
/* wird in diesem Menü nicht benötigt 
Nun haben wir zwar den Pfeil nach unten für die Hauptmenüebene, bei den Untermenüs der folgenden Ebenen passt das aber nicht mehr, da das Untermenü nach rechts aufgeht und nicht nach unten. Da wäre ein Pfeil nach rechts angebracht, oder?
nav ul ul li.submenu a:after {
  margin-left: auto;
  margin-right: -10px;
  border-left: 5px solid rgb(33, 15, 199);
  border-right: 5px solid transparent;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}*/

/* Noch eine Sache: den Listenelementen der Untermenüs haben wir eine Rahmenlinie nach unten verpasst. Beim letzten Listenelement eines Untermenüs wirkt das eher deplatziert.
So stellen wir die Rahmenlinie beim jeweils letzten li-Kindelement ab.*/
nav ul ul li:last-child {
  border-bottom: none;
}

/*https://www.w3schools.com/howto/howto_js_scroll_to_top.asp*/
button{
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  left: 20px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: rgba(14, 109, 233, 0.6); /* Set a background color */
  color: rgb(247, 231, 12); /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 25px; /* Increase font size */
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
  
}
button:hover{
background-color: rgba(0, 100, 0, 0.6);
}

/*----- Media Queries -----*/

/*für Bildschirm größer 960px*/
@media screen and (min-width: 960px) {
  /*nav ul {
    max-height: 20px;
  }*/

  /*Hamburger Menü verstecken*/
  nav a#nav-m,
  nav a.close {
    display: none;
  }
  nav ul li { /*die Links in der oberen Leiste 30px zwischen den Einträgen*/
    margin: 0 30px 0 0;
  }
}

/*Formatierung Mobiles Menue Bildschirm bis 960px*/
@media screen and (max-width: 959px) {
  /* bei Mobilmenü die obere Box ausblenden und das Hamburger Icon rechts einblenden*/
  nav {
    /*Form der Zeile für Hamburger Menü*/
    margin: 0 auto;
    width: 100%;
    height: 3em;
    text-align: right;
    position: relative;
    background: rgba(255, 255, 255, 1.0);
    border-bottom: 2px solid rgb(54, 236, 160);
  }
  
  /*Format des gesamten mobilen Menüs und
   ausbleden des normalen Menüs nach links*/
  nav ul {
    top: 2em;
    position: absolute;
    background: #ccc;
    width: 100%;
    left: -110%;

    list-style-type:none;
    margin: 0;
    padding: 0;
      
    /*Animationseffekt*/
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
  }
  /* Anzeige des Hauptmenüs untereinander */
  nav ul li {
    float: none;
    display: block;
    text-align: left;
    /*padding: 0em 0.5em;*/
    border-bottom: 1px solid #fff;
  }
/*die Listenelemente im Submenü*/
  nav ul li.submenu ul {
    text-align: left;
    }
/*Die Links im Hauptmenü*/
  nav ul li a {
    color: #555;
    padding: 1em 0;
  }
  nav ul ul {
    /*so sind auch die Untermenüpunkte zu sehen*/
    position: relative; /*Anzeige der Untermenüpunkte dauerhaft*/
    top: 0px;
    left:0px;
    width: 200px;
    background-color: rgb(231, 200, 99);
  }
  /*Beim hovern der Listenpunkte mit Submenü dürfen sich die Submenüs nicht bewegen */
  nav ul li:hover > ul {
    top: 0;
    left: 0;
  }
  /*Die kleinen Dreiecke kommen vor den Text im mob. Menü*/
  nav ul li.submenu > a:before {
    position: relative;
    float: left;
    content: '';
    margin-left: 10px;
    margin-top: 10px;
    margin-right: 5px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid rgb(33, 15, 199);
    border-bottom: 5px solid transparent;
  }
  
nav ul ul li a:hover{
    width: 185px;
}
/*Die kleinen Dreiecke rechts löschen*/
nav ul li.submenu > a:after {
  display: none;
} 

/*https://www.w3schools.com/howto/howto_js_scroll_to_top.asp*/
button{
  position: fixed; /* Fixed/sticky position */
  bottom: 80px; /* Place the button at the bottom of the page */
  left: 20px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: rgba(14, 109, 233, 0.6); /* Set a background color */
  color: rgb(247, 231, 12); /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 25px; /* Increase font size */
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
  
}
button:hover{
background-color: rgba(0, 100, 0, 0.6);
}

.logo{
  float: right;
  }
/*Hamburger-Icon
Dieser Bereich ist für die Funktionalität des Hamburger-Menüs zuständig.
Es gibt zwei Hamburger-Icons. Eins ist blau, das andere grau. Die beiden sind deckungsgleich übereinander positioniert. Wird das blaue Hamburger-Icon angeklickt und dabei das Menü ausgefahren, so wird gleichzeitig das graue Hamburger-Icon sichtbar gesetzt und erscheint an der Position des blauen Icons.
Beim Klick auf das blaue Hamburger-Icon wird auf einen Anker referenziert (<a href=“#nav-m“…) und das blaue Hamburger-Icons wird ausgeblendet. Durch die Referenzierung lässt sich der Zustand über die CSS-Pseudoklasse :target prüfen.
Gleichzeitig wird die UL des Menüs von left:-100%; auf left:0; gesetzt (mittels nav a:target ~ ul{left: 0;} ) und bewegt sich dadurch von der bisherigen linken Positionierung (außerhalb des sichtbaren Bereichs) in das Betrachtungsfeld.
nav a#nav-m img, nav a.close img {…}
Die Anzeigegröße des Hamburger-Menü-Icons wird festgelegt.
nav > .close, nav a#nav-m:target {display: none;}
Standardeinstellung ist, dass das graue Hamburger-Menü-Icon (nav > .close) nicht angezeigt wird. Über die CSS-Pseudoklasse :target wird dafür gesorgt, dass das blaue Hamburger-Menü-Icon verborgen wird, wenn es angeklickt wird und dabei den target erhält (a#nav-m:target).
nav a:target ~ ul, nav a:target ~ .close {display: inline-block;}
Wenn der Link aktiv ist (wird auch hier über die CSS-Peseudoklasse a:target geprüft), werden die Navigationsliste sowie das graue Hamburger-Menü-Icon auf sichtbar gesetzt.
*/ 
/*Hamburger-Icon*/
nav a#nav-m img, nav a.close img {
    width: 40px;
    height: auto;
  }

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;
  }
}
/*--------------------------------------*/