* { box-sizing: border-box;
}

/*********************************/
/* JUMP ICONS OBEN */
/*********************************/
	.icons { 
		  position: absolute;
		  top: 10px;
		  right: 55px;		
		  display: none;
		  font-size: 25px; font-size: 2.5rem;
		  cursor: pointer;
		  }
		.icons li {
			border: none;
			padding: 8px;
			display: inline-block; 
		    list-style-type: none;
		}
		.icons li a ,
		.icons li:link, 
		.icons li:visited {
			color: #555555;
			text-decoration: none;
		}
		.icons li a:hover,
		.icons li a:focus {
			color: #2f4da3;
		}		
		.icons li a:active {
			color: #000;
		}

/*********************************/
/* HAMBURGER BUTTON */
/*********************************/

.hamburger {
      position: absolute;  
      top: 10px; 
      right: 8px;	
      font-size: 25px; font-size: 2.5rem;
      background-color: inherit;
      color: #555555; 
      border: none;
      padding: 0;
      display: none;
      width: 45px;
      height: 45px;
      cursor: pointer;
      z-index: 1000;
    }
	
	.hamburger:hover {
      color: #313E99;
    }
	.hamburger:active {
      color: #000;
    }

	@media screen and (max-width: 1024px) { /* Hamburger Wechsel 1024px */
		.hamburger, .icons { 
			display: block; 
			}	
		}
	@media screen and (max-width: 300px) { /* Hamburger Wechsel*/
		.hamburger, .icons {
			top: 3px; 
   			}
		}

/*********************************/
/* Fullscreen OVERLAY-MENU */
/*********************************/

.overlay {
	  position: fixed;
      height: 100%;
      width: 100%;
	
      display: flex;  
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
	
      z-index: 1001;
      overflow-x: hidden;
		
      inset: 0;
      background-color: rgba(255, 255, 255, 1);
      color: #2f4da3;
      transform: translateX(-100%); /* von rechts wäre transform: translateX(100%); */
      transition: transform 0.5s ease;
    }

    .overlay:not([hidden]) {
      transform: translateX(0); 
    }

.close-btn {
      position: absolute;  
      top: 27px; 
      right: 10px;	
	  padding: 5px;
      border: none;
  	  font-size: 25px; font-size: 2.5rem;
      color: #313E99;
      background: none;
      cursor: pointer;
      z-index: 1000;
    }
	.close-btn:active {
      color: #000;
    }

  @media screen and (max-width: 300px) {
	.close-btn {
     	top: 15px; 
      	right: 10px;	
		}	
	}

  @media screen and (max-width: 340px) {
	.overlay {
	  align-items: flex-start;
	  padding-left: 30px;
	}
}

  @media screen and (max-width: 280px) {
	.overlay {
	  padding-left: 18px;
	}
}


/**************/
/* NAVIGATION */
/**************/

	#nav-overlay {	   
		font-family: "Fira Sans", sans-serif;
		font-size: 30px; font-size: 3.0rem; 
		letter-spacing: 0.02rem;
    }

   #nav-overlay .nav-list { /* Menu Bereich */
		list-style: none;
		margin-top: 70px;
		width: 320px;
		padding: 20px 20px 0 20px;
    }

    #nav-overlay .nav-list > li {  /* Abstand zw. Dropdown-Buttons */
		margin-bottom: 25px;
    }

    #nav-overlay a { 
		color: inherit;
		text-decoration: none;
		font-weight: 400;
		font-family: "Fira Sans", sans-serif;
		
		width: 280px;
    	display: inline-block; /* Notwendig für breitere Klickfläche */
		
		padding: 10px 0 10px 0;
		}
	  	 
    #nav-overlay a:hover {
		text-decoration: underline;
		text-underline-offset: 0.3em; 
		text-decoration-thickness: 3px;
		}
	#nav-overlay a:active {  
		color: black; 
		}

    #nav-overlay .nav-toggle {  /* Dropdown-Buttons */
		color: #313E99; /* Blau */
		background-color: inherit;
		
		border: none; /* none */
		text-align: left;
		width: 280px;
		cursor: pointer;
		
		padding: 10px 0 10px 0;
		
		font-family: "Fira Sans", sans-serif;
		font-size: 30px; font-size: 3.0rem; 
		letter-spacing: 0.02rem;
    }

    #nav-overlay ul[role="menu"] { /* Untermenu Bereich */
		list-style: none;
		padding: 5px 0 0 10px;
		width: 300px;
		margin: 0 0 0 -10px;
		background-color: #f5f5f5; 
	    border-bottom: 2px solid #717376;
    }
			
    #nav-overlay ul[role="menu"] li { /* Abstand zw. Unterpunkten */
		margin: 10px 0 15px 0;
    }


@media screen and (max-width: 600px) {
	#nav-overlay, #nav-overlay .nav-toggle {	  
		font-size: 26px; font-size: 2.6rem; 
    }
	 #nav-overlay a:hover {
		text-decoration-thickness: 2px;
		}
	 #nav-overlay .nav-list {
		margin-top: 55px;
		width: 280px;
    }
	#nav-overlay .nav-toggle { width: 240px;
    }
	 #nav-overlay a {
		width: 240px;
    }
	#nav-overlay ul[role="menu"] {
		width: 260px;
    }
}

@media screen and (max-width: 340px) {
	#nav-overlay, 
	#nav-overlay .nav-toggle {
	  font-size: 22px; font-size: 2.2rem;
    }
	#nav-overlay .nav-list { width: 255px;
    }    
	#nav-overlay .nav-list > li {  /* Abstand zw. Dropdown-Buttons */
		margin-bottom: 2px;
    }

	#nav-overlay .nav-toggle { width: 215px;
    }
	#nav-overlay a { width: 215px;
    }
    #nav-overlay ul[role="menu"] {
		width: 235px;
    }    
	#nav-overlay ul[role="menu"] li { /* Abstand zw. Unterpunkten */
		margin: 0 0 4px 0;
    }
}