/*Allgemeine Einstellungen*/
*{
  margin: 0;
  padding: 0;
}
html{
  height: 100%;
}
body{
  height: 100%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: medium;
}
.cronjob{
    color: red;
    font-style: italic;
  }
  .standardtext{
    font-family: 'Times New Roman', Times, serif;
    
  }    
  aside {
	  position: fixed;
	  right: 0%;
	  top: 100px;
    border: 2px solid;
    width: 20em;
    padding:10px;
    margin:10px;
    color: #FE2E64;
  }  
  
/*https://developer.mozilla.org/de/docs/Web/CSS/text-shadow */
  .raspi-shadow {
   text-shadow: 1px 1px 2px black, 0 0 1em darkgreen, 0 0 0.2em darkgreen;
   color: yellow;
   font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L";
}

.haupttext{
  height: 80px;
    float: left;
    color: blue;
    padding: 5px;
    }
.datum {
  float: left;
  color: #FE2E64;
  font-weight: lighter;
}
hr {width: 100%; background-color: rgb(14, 16, 167); border: 0; height: 4px;}
/* 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;
  z-index: 15;
}

/*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;
  z-index: 5;
}
 /* 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);
}