@charset "UTF-8";

* { box-sizing: border-box;
}

*:focus:not(:focus-visible) { /* barrierrefreiheit */
    outline: none;
}

*:focus-visible { 	/* barrierrefreiheit */
   outline-color: currentColor; 
   outline-style: solid; 
   outline-offset: .25rem; 
   outline-width: .25rem;
}

/* BLAUER BALKEN */
.blue-bar { 
	width: 100%; 
	height: 20px;
	background-color: #313E99; /* Blau */
	}

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

/* Menueleiste */
.navbar { 
		  position: relative;
		  width: 100%;  
		  max-width: 1440px;
		  margin: 0 auto; /* Zentriert das Element horizontal */
  		  display: flex;
		  justify-content: space-between;
 		  align-items: flex-end; /* unten ausrichten */
  		}
	
	.logo {
		margin: 8px 0 0 18px;
		height: 100px;
		width: auto;
		}

.mainmenu { 
	position: absolute; 
	right: 0; top: 65px;
	
}

.dropdown-content { 
      display: none;
      position: absolute;
      background-color: #f5f5f5;
      width: 215px;
      z-index: 1;
      padding: 5px 0;
      margin: 0;
      border: 1px solid #313e99;	
	  font-size: 21px; 
	  font-size: 2.1rem; 
	}

    .dropdown-content ul {
      list-style-type: none;
    }

    .dropdown-content li { 
	  font-family: "Fira Sans", sans-serif;
	  font-size: 21px; 
	  font-size: 2.1rem; 
	  letter-spacing: 0.01rem;
      padding: 10px 0;
      cursor: pointer;
  	  width: 215px;
}
    .dropdown-content li a { /* Untermenues */ 
	  text-decoration: none;
	  text-align: left;  
	  font-weight: 400;
      padding: 10px 9px 10px 10px; 
	}
	.dropdown-content li:link, 
	.dropdown-content li:visited {  
	  color: #313e99;
	}
	.dropdown-content li:hover, 
	.dropdown-content li:focus {
	  text-decoration: underline; 
	  text-underline-offset: 0.3em; 
	  text-decoration-thickness:2px;
	  color: #313e99;
	}
	.dropdown-content li a:active {
	  color: #000; 
	  text-decoration: underline; 
	  text-underline-offset: 0.3em; 
	  text-decoration-thickness:2px;
	}
        .dropdown-content:active {
          border-top: 5px solid #000;
		  margin-top: 0;
		}
    .dropdown-content.show {
      display: block;
    }
    
    
.dropdown-button {  
	  font-family: "Fira Sans", sans-serif;
	  font-size: 21px; 
	  font-size: 2.1rem; 
	  letter-spacing: 0.01rem;
		
      margin: 0;
      padding: 10px 0;
      cursor: pointer;
      background-color: inherit;
      border: none;
      color: #313e99;
      width: 215px;
	  text-align: center;
      border-bottom: 4px solid inherit;
    }
    
    .dropdown-button a { /* Untermenues */
	  text-decoration: none;
	  text-align: left;
	}
	.dropdown-button:hover, .dropdown-button:focus {
	  color: #313e99; 
	  border-bottom: 4px solid #313e99;   
	}
	.dropdown-button:active {
	  color: #000; 
	}

	.dropdown-button.active {
	  color: #000; 
	}


/* Positionierungshilfe */
.dropdown-wrapper {
      position: relative;
      display: inline-block; align-self: flex-end;
    }
    
.soloitem {
	  font-family: "Fira Sans", sans-serif;
	  font-size: 21px; 
	  font-size: 2.1rem; 
	  letter-spacing: 0.01rem;
	
      margin: 0;
      padding: 10px 18px;
	  text-align: center;
	  display: inline-block;
      width: auto;
	  border-bottom: 4px solid inherit;
    }
	.soloitem:link, .soloitem:visited { 
	  color: #313e99;		
	  text-decoration: none;  
	  font-weight: 400;
	}
	.soloitem:hover, .soloitem:focus {
	  color: #313e99; 
	  border-bottom: 4px solid #313e99;
	}
	.soloitem:active {
	  color: black; 
	  border-bottom: 4px solid #000;
	}


@media screen and (max-width: 1150px) {  /* Font Size und Width Wechsel*/	
	.dropdown-content,
	.dropdown-content li,
	.dropdown-button, 
	.soloitem { 
		font-size: 20px; font-size: 2.0rem; 
		}
	.dropdown-content,
	.dropdown-content li,
	.dropdown-button { 
		width: 205px;
		}
	}
	
@media screen and (max-width: 1024px) {  /* Hamburger Wechsel 1024px */	
	.logo {
		height: 50px;
		width: auto;
		}

	.mainmenu {
		display: none; 
		}
	.blue-bar { 
		height: 15px;
		}
	}


@media screen and (max-width: 300px) { 
	.logo {	
		margin: 5px 0 0 18px;
		height: 40px;
		width: auto;
		}

	.blue-bar { 
		height: 10px;
		}
	}