@charset "UTF-8";

/* 
    Created on : 4.3.2020
    Author     : roby
*/
/* input#ham_check {display:none}*/

.ham_container {
    /* position: relative; */
    position: fixed;
    top: 20px;
    right: 0;
    
}


/* der unsichtbare Input -> Checkbox */
.ham_check {display:none}
/* Label für die unsichtbare Checkbox */
label.ham_label { 
   display: block;
   background: transparent;
   width: 4em;
   height: 4em; 
   position: absolute; 
   right: 2em;
   margin-left: auto;
   margin-right: auto;
   border-radius: 4px; 
   z-index: 12;
}
/* den eigentlichen Hamburger basteln wir uns durch drei span-Elemente */
.ham_line { /* es gibt 3 elemente innerhalb des labels */
   position: absolute; 
   left:0.5em;
   height: 5px;
   width: 3em; 
   background: #dfa03f;
   border-radius: 3px;
   display: block; 
   transition: 0.5s; 
   transform-origin: center;
   opacity: 0.3;
}
.ham_line:nth-child(1) { top: 12px; }
.ham_line:nth-child(2) { top: 24px; }
.ham_line:nth-child(3) { top: 36px; }

/* wenn der Hamburger gechecked ist eine kleine Animation */
.ham_check:checked + .ham_label .ham_line:nth-child(1){
   transform: translateY(12px) rotate(-45deg); /* gehe in die Mitte und drehe um 45° */
   opacity: 1;
}

.ham_check:checked + .ham_label .ham_line:nth-child(2){
   opacity:0; /* werde unsichtbar */
}

.ham_check:checked + .ham_label .ham_line:nth-child(3){ /* gehe in die Mitte und drehe um 45° */
   transform: translateY(-12px) rotate(45deg);
   opacity: 1;
}

.ham_menu {  /*  das eigentliche Menu */
  z-index: 10;
  display: inherit;
  background-color:  #EEE;
  position: absolute;
  right: -30rem;
  top: 0;
  padding-top: 2.5rem;
  padding-left: 0.5rem;
  padding-right: 1rem;
  transition: 0.5s; 
  transform-origin: center;
}

.ham_check:checked ~ .ham_menu {
  right: 0;
}

.ham_menu ul {
    padding-left: 0;
/*    border: 1px red solid; */
    color: black;
    list-style: none inside; 
    text-indent: 0;
    font-family: sans-serif;
    font-size: large;
}    
.ham_menu a { width: 100%; font-weight:normal; font-style:normal; color:black;   text-decoration:none;
}    
.ham_menu a:hover { color:blue;
   text-decoration:none;
}    

.hambutton {

  background: none;
  border: none;
  padding: 0;
  padding-left: 5px;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;


}

/*

a { font-weight:normal; font-style:normal; color:black;   text-decoration:none; }
a:link    { font-weight:normal; font-style:normal; color:black;   text-decoration:none; }
a:visited { font-weight:normal; font-style:normal; color:black;   text-decoration:none; }
a:focus   { font-weight:normal; font-style:normal; color:black;   text-decoration:none; }
a:hover   { font-weight:normal; font-style:normal; color:#6a6868; text-decoration:none; }

*/

    
.ham_menu li {
    padding: 0em;
    margin: 0em;
}

.ham_menu li p {
    padding: 0.2em;
    margin: 0;
}

.ham_menu li:hover {
    background-color: #CCC;
    border-radius: 0.3em;
}    

.ham_menu_ver {
  font-weight: lighter;
  font-size: xx-small;
}
.ham_menu_title {
  font-weight: lighter;
  font-size: small;
}

    
@media only screen and (max-height: 30em) {
.ham_menu li p {
    padding: 0.1em;
}
.ham_menu a { font-weight: normal; color: #2d565e;
}    

    
}