/* Beginn Hamburger-Menue-Symbol */
label.hamburg { 
   display: block;
   background: #555; width: 1.6em; height: 1.6em; 
   position: absolute;
   margin-right: 3.2em;   
   top: 0.2em; left: auto;
   /*margin-left: auto; margin-right: auto;*/
   border-radius: 0.4em; 
}

input#hamburg {display:none}

.line { 
   position: absolute; 
   left:0.3em;
   height: 0.12em; width: 1.0em; 
   background: #fff; border-radius: 0.2em;
   display: block; 
   transition: 0.5s; 
   transform-origin: center; 
}

.line:nth-child(1) { top: 0.3em; }
.line:nth-child(2) { top: 0.7em; }
.line:nth-child(3) { top: 1.1em; }

#hamburg:checked + .hamburg .line:nth-child(1){
   transform: translateY(0.4em) rotate(-45deg);
}

#hamburg:checked + .hamburg .line:nth-child(2){
   opacity:0;
}

#hamburg:checked + .hamburg .line:nth-child(3){
   transform: translateY(-0.4em) rotate(45deg);
}
#hamburg:checked + .hamburg + nav.navi {
  height: auto;  
  max-height: 40em;   /* sinnvoll? */
}
/* Ende Hamburger-Menue-Symbol */

/* Beginn Responsives Menue */
div.navi {  }
nav.navi {
  position: absolute;
  top: 2.4em; left: auto;  
  align-items: flex-start;  
  height: auto; 
  max-height:0; 
  overflow: hidden; 
  transition: all 0.5s;
  z-index: 999;
}
ul.navi {
  height: auto; 
  list-style-type: none;
  padding: 0 0.1em;
  margin: 0;
  background-color: #f1f1f1;
  font: 1.0em normal Arial,Verdana,sansserif;
}  
ul.navi2 {
  max-height:0; 
  overflow: hidden; 
  padding-left: 0.5em;
}  
li.navi a.navi {
  display: block;
  color: #000;
  padding: 0.1em;
  text-decoration: none;
  height: auto;
  width: auto;
  min-width: 80%;
}
label.navi  {
  color: #000;
  padding: 0.1rem;
}

label.navi:hover { 
  cursor: pointer; 
  color: white; 
  background-color: #555;
}  

li.navi a.navi:hover {
  background-color: #555;
  color: white;
}
input.withsub {
  display: none;
}  
input.withsub:checked + .navi + ul.navi2 { 
  height: auto;
  max-height: 40em; /* sinnvoll? */
}  
hr.navi {
  width: 100%; height: 0em; margin: 0em;
  border-top: 1px dotted gray;
  border-bottom: none;
}

img.navi {
 width: 1em; height: 1em; margin: 0; margin-right: 0.2em; padding: 0;
}  

/* 
  Die folgenden Formate lösen nicht das Problem,
  nach Klick auf einen Link mit Darstellung in neuem Register
  das Menü zu schließen. Daher wird temporär eine JS-Lösung eingesetzt
  in navi.inc.php: 
  $oc = ' onClick="document.getElementById("hamburg").checked = false;" ';
*/
/*
li.navi a.navi:active { 
  background-color: orange;
}
a.navi:active + .hamburg + nav.navi { 
  background-color: pink;
  max-height: 0em;
  overflow: hidden;
}
*/
  
/* Ende Responsives Menue */

/* größere Viewports ab ca. 800px / 16px = 50em: */

/* größere Viewports ab ca. 400px (Mobile quer, Tablet; 400/16 = 25): */
@media all and (min-width: 25em) {
}

/* größere Viewports ab ca. 480px (Mobile quer, Tablet; 480/16 = 30): */
@media all and (min-width: 30em) {
  /* no changes!
  ul.navi { font-size: 1.0em; }
  li.navi a.navi {
    height: 1.5em;
    width: 15em;
  }
  */
}

@media all and (min-width: 48em) {
}  

/* große Viewports ab ca. 1000px (Monitore ab 15"; 1000/16 = 62) */
@media all and (min-width: 62em) {
}

@media print {
  label.hamburg { display:none; }
  nav.navi { display:none; }
 }