/*Formatierung Mobiles Menue Bildschirm bis 960px*/
@media screen and (max-width: 959px) {
    body {
      font-size: small;
    }
    /* bei Mobilmenü die obere Box ausblenden und das Hamburger Icon rechts einblenden*/
      #topbox{
        display: none;
      }
      /*
      #logo{
        height: 3em;
        width: 3em;
        background-color: blueviolet;
        float: left;
        background: url(mh48-symbol.png);
        background-size: contain;
            } */
      figure {
        float: none;
        text-align: center;
        font-style: italic;
        margin: 0px;
        padding: 0px;
        border: 1px dotted;
      }
      .scaled{
        width: 100%;
      }
      .quellTextBox {
      box-sizing: border-box;
      width: 100%;
      display: flex;
      word-break: break-all;
      background-color: lightgreen;
      border:  2px solid red;
      border-radius: 0 1em 1em 0;
      margin: 2px auto;
      padding: 0em;
      }
      .quellTextPython {
        background-color: lightblue;
        border: 5px solid yellow;
        border-radius: 0 1em 1em 0;
        margin: 5px;
        padding: 1em;
        /*text-wrap: balance;*/
        overflow-wrap: break-word ;
      }
      pre{
        white-space: pre-wrap;
      }
      .schriftrechts {
      float: left;
      margin-right: 10px;
      } 
      #gesamttabelle {
        margin-left: auto;
        margin-right: auto;
        border-collapse: separate;
        border-spacing: 0.1em;
        font-family:Arial, Sans-Serif;
        font-size:small;
        text-align:center;
        }
    
     #gesamttabelle th {
          position: sticky;
          position: -webkit-sticky;
          top:0;
          z-index:2;
          border:2px solid #3333;
          padding:1px 1px;
          background: lightgrey;
        }
  
     #gesamttabelle td {
      border:1px solid green;
      padding:1px 1px;
      }
  
     #balkentabelle {
      margin-left: auto;
      margin-right: auto;
      position: sticky;
      position: -webkit-sticky;
      background: lightgrey;
      width: 100%;
      padding-left: 3px;
      border: none;
     }
    
      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;
        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;
      }
    }