* {
   margin: 0;
   padding: 0;
   font-size: 22px;
   font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
html {
   height: 100%;
}
body {         /* Gestaltung des Hintergrundes */
   height: 100%;
   width: 100%;
   background: lightgray;
   background-image: url("hintergrund.gif");
   background-size: 100%;
   background-repeat: no-repeat;
   background-position: center;
   background-attachment: fixed;
}

/* Anfang - Gestaltung des nav-Elemente  */

nav {          /* Gestaltung der Navigationsleiste */
	width: 98%;
   margin: 0 1%;
   display: flex;
   justify-content: space-between;      /* horizontale Ausrichtung */
   align-items: center;                 /* vertikale Zentrierung */
   height: 50px;  /* Abhängig mit Höhe von taschen_liste */ 
   background-color: lightgray;  /* nav-Hintergrund  */ 
   background-image: linear-gradient(rgb(164, 164, 164), rgb(218, 218, 218), rgb(164, 164, 164));
   /* background: #314453; */
   box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.11);
   position: fixed;
}

nav .logo {    /* Bild */
   margin-left: 20px;
   margin-top: 5px;
   height: 50px;  /* achte auf nav Höhe */
   width: auto;
}
nav ul {
   height: 100%;       /* 100% Höhe des Elternelement nav */
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   list-style: none;     /* entfernt die Stichpunkte */
}
nav li {
   height: 100%;
   width: 150px;
   text-align: center;
   position: relative;  /* damit sich die taschen_liste */
   /* relativ zu seinem li positioniert */
}

nav a:hover {
	color: rgb(190, 6, 49);     /* Textfarbe bei hover */
}
nav ul li label:hover {
	color: rgb(190, 6, 49);     /* Textfarbe bei hover */
}

nav ul a {
   height: 100%;
   width: 100%;

   display: flex;
   align-items: center;
   justify-content: center;
	color: rgb(70, 68, 68);   /* nav-Schriftfarbe */
   text-decoration: none;
   
}
nav ul li label {
   color: rgb(70, 68, 68);   /* nav-Schriftfarbe */
}
.taschen_liste {
   height: min-content;
   width: 150px;
   
   display: none;   /* bei none ist taschen_liste weg */
                    /* bei flex wird sie angezeigt */
                    /* siehe nav li:hover */
   flex-direction: column;

   position: absolute;
   left: 0;
   top: 50px;  /* Abhängig von Höhe nav */
}
.taschen_liste li {
   background-image: linear-gradient(rgb(164, 164, 164), rgb(218, 218, 218), rgb(164, 164, 164)); 
   height: 50px;
   width: 100%;
}
.taschen_liste li a {  
   justify-content: flex-start;  /* jetzt sind sie linksbündig */
   padding-left: 30px;
   width: calc(100% - 30px); /* abhängig von padding-left */
}
nav li:hover .taschen_liste {
   display: flex;   
}
nav input[type="checkbox"] {
   display: none; /* checkbox verschwindet  */
}

.dropdown_taschen {  /* Taschen wird in der nav ausgerichtet */
   display: flex;
   justify-content: center;
   align-items: center;
}
/* Ende - Gestaltung des nav-Elemente  */

/* Anfang  -  Gestaltung des Hamburger-Menu */

.hamburger-menu {
   width: 30px;
   position: fixed;
   top: 10px;
   right: 20px;
   cursor: pointer;
   display: none;  /* in @media display:flex */
   flex-direction: column; 
   z-index: 1;
   transition: 0.4s;
}
.bar {
   height: 4px;
   width: 30px;
   background: black;
   border-radius: 4px;
   margin: 3px 0;
   transition: transform 0.3s;
}
#bar2 {
   /*transform: scaleX(0.8);*/
   transform: scale(0.5, 0.6);
   display: flex;
   justify-content: center; 
   background: transparent;
   align-items: center;
   font-weight: bold;
}
#ham_button:checked ~ label #bar1 {
   transform: rotate(45deg);
   position: absolute; top: 10px;
}
#ham_button:checked ~ label #bar2 {
   transform: scaleX(0);
}
#ham_button:checked ~ label #bar3 {
   transform: rotate(-45deg); 
}
/* Ende  -  Gestaltung des Hamburger-Menu */

/* Hingucktertasche Top-Bild gestalten */
#hinguckertasche {
	padding-top: 100px;
	text-align: center;
	padding-bottom: 30px;
}   
.hinguckergroesse {
	width: 90%;
   max-width: 1300px;
	max-height: auto;
}
#hinguckertasche_klein {
	display: none;
	padding-top: 40px;
	text-align: center;
	padding-bottom: 30px;
}
.hinguckergroesse_klein {
	width: 90%;
	height: auto;
}
/* Ende - Hingucktertasche Top-Bild gestalten */


@media screen and (max-width: 768px) {
   
   /* Anfang - Navigationsverhalten Mobil-Ansicht*/
   .hamburger-menu {
      display: flex;  /* ohne @media ist display:none */
   }
   .nach_oben {
      display: none;
   }
   .taschen_liste li {
      background-image: none;
   }
   nav {
      background-color: transparent;
      background-image: none;
      margin: 0;
      box-shadow: 0 0 0 rgba(0, 0, 0, 0.11);
      backdrop-filter: blur(8px);
   }
   nav ul {
      height: min-content;  /* Inhalt entsprechend */
      width: 100%; /* 300px für seitlich */
      background: rgb(164, 164, 164);
      
      display: none;  /* Elemente werden untereinander angezeigt */
      /* display wird ham_button:checked auf block gesetzt */
      /* dadurch werden in der Handy-Ansicht die Elemente ausgeblendet */
      position: absolute;  /* absolute */
      top: 50px; 
      /* Einblendung von rechts */
      position: fixed;
      right: -200px;
      width: 200px;
      box-shadow: 5px 5px 10px rgba(218, 218, 218, 0.6) inset;
   }
   nav li {
      display: block;
      height: min-content;
      width: 100%;  /* setzt die Elemente in die Mitte */
  }
   nav ul a {
      padding: 15px 0;  /* vergrößert den Abstand zwischen den Elementen */
   }
   .dropdown_taschen {
      display: block;
   }
   .dropdown_taschen label { /* Abstände aller li ist gleich groß */
      padding: 15px 0;
      display: block;
      cursor: pointer;
   }
   /* Anfang - Untermenu an- und ausschalten */
   .dropdown_taschen:hover .taschen_liste {
      display: none;
   }
   .dropdown_taschen input[type="checkbox"]:checked ~ .taschen_liste {
      display: block;
   /* Ende - Untermenu an- und ausschalten */  
   } 
   /* taschen-liste kommt jetzt in die Reihe */
   .taschen_liste {
      position: static;
      width: 100%;
      background: rgb(218, 218, 218);
      box-shadow: 5px 5px 10px rgba(164, 164, 164, 0.6) inset;
   }
   .taschen_liste li {
      padding: 0;
      display: block;
      position: static;      
   }
   .taschen_liste li a {
      width: 100%;
      padding: 0;
      justify-content: center;
      /* taschen-liste ist jetzt eingerichtet */ 
   }
   
   #ham_button:checked ~ ul {
      display: block;
      right: 0;
   }  
   /* Ende - Navigationsverhalten Mobil-Ansicht*/

   /* Gestaltung Hinguckertasche in Mobil-Ansicht */
   #hinguckertasche_klein {
      display: block;
      padding-top: 100px;
   }    
   #hinguckertasche {
      display: none;
   }
  
   /* Ende - Gestaltung Hinguckertasche in Mobil-Ansicht */
  
}  
@media screen and (max-width: 200px) {
	body {display: none;}
}