@charset "UTF-8";

html {
	font-size: 62.5%;
	scroll-behavior: smooth;
}

body { /* Fließtext */
	font-family: "Fira Sans", sans-serif;
	font-size: 21px; font-size: 2.1rem; 
	letter-spacing: 0.02rem;
	color: #1a1a1a; /* Textcolor */
	}

* { margin: 0;
    padding: 0;
	}

*, *:before, *:after {
	box-sizing: border-box;
}


.maxwidth { max-width: 1440px; 
}

.nobreak { 
	white-space: nowrap; 
	}
  	@media screen and (max-width: 450px) {
	  .nobreak { white-space:normal; 
	  }
	}
	
strong, b {font-weight: 500;}
.uppercase {text-transform:uppercase;}

.gray1 { background-color: #f5f5f5; /* hell grau */ }
.gray2 { background-color: #E5E5E5; /* mittel grau */ }
.gray3 { background-color: #717376; /* dunkel grau */ }

.gelb1 { background-color: #ffeb9988; /* hell gelb */ }

/* ANKER SPRUNGMARKE */ 
.jump {
    visibility: hidden;
    height: 0px !important;
    position: absolute;
    margin-top:-100px;
}

.jump_2 {
    visibility: hidden;
    height: 0px !important;
    position: absolute;
    margin-top:200px;
}


@media screen and (max-width: 300px) { 
	.jump {margin-top:-80px;}
	.jump_2 {margin-top:200px;}
}


/*********************************/
/* BILDER */
/*********************************/

img {
  width: 100%;
  height: auto;
}

figcaption {
	  padding: 5px 0;
	}

	.bereiche {
	  font-size: 20px;
	  font-size: 2.0rem;
	  letter-spacing: 0.03rem;
	  text-align: center;
	}

	.headerbild {
		position: relative;
		margin: 0 auto;
	}



/*********************************/
/* SCHRIFTEN */
/*********************************/

h1 {
	font-family: "Fira Sans Extra Condensed", sans-serif;
	font-size: 45px; font-size: 4.5rem;  
	letter-spacing: 0.05rem; 
	font-weight: 500;
	line-height: 1.2;
	color: #313E99; /* Blau */
	}

h2 {
	font-size: 35px; font-size: 3.5rem;
	letter-spacing: 0.02rem;
	font-weight: 500; 
	padding: 15px 0;
	color: #313E99; /* Blau */
	}

	.subline {
		font-size: 30px; font-size: 3.0rem;	
		letter-spacing: 0;
		font-weight: 400; 
		}
h3 {
	font-size: 26px; font-size: 2.6rem;
	letter-spacing: 0.05rem; 
	font-weight: 500;
	line-height: 1.2;
	margin-bottom: 20px;
	color: #313E99; /* Blau 313E99 */
	}	

h1 {
	hyphens: none;
	}

h2, h3 {
	hyphens: manual;
	}

p { 
	font-size: 21px; font-size: 2.1rem; 
	letter-spacing: 0.02rem;
	margin-bottom: 15px;
	line-height: 1.5; 
	
	hyphens: auto;
	
	 -webkit-hyphenate-limit-lines: 2;
 	         hyphenate-limit-lines: 2;
-webkit-hyphenate-limit-chars: auto 3;
        hyphenate-limit-chars: auto 3;
	}

.klein { 
	font-size: 14px; font-size: 1.4rem;
	}

.none { 
text-decoration: none;
}

	
@media screen and (max-width: 1440px) {
	h1 { font-size: 40px; font-size: 4.0rem; }
	h2 { font-size: 32px; font-size: 3.2rem; }
	.subline { font-size: 28px; font-size: 2.8rem; }
	}

@media screen and (max-width: 1024px) {
	 p { font-size: 20px; font-size: 2.0rem; }
	}


@media screen and (max-width: 768px) { /* einspaltig Content */
	h1 { font-size: 35px; font-size: 3.5rem; 
		hyphens: manual;
		}	
	h2 { font-size: 29px; font-size: 2.9rem; }
	.subline { font-size: 26px; font-size: 2.6rem; }
	}

@media screen and (max-width: 450px) {
	h1 { font-size: 30px; font-size: 3.0rem;}
	h2 { font-size: 26px; font-size: 2.6rem; }
	.subline { font-size: 24px; font-size: 2.4rem; }
	
	h3 { font-size: 24px; font-size: 2.4rem; }
	}

@media screen and (max-width: 300px) {
	h1 { font-size: 24px; font-size: 2.4rem; }
	h2 { font-size: 23px; font-size: 2.3rem; }
	.subline { font-size: 21px; font-size: 2.1rem; }
	
	h3 { font-size: 21px; font-size: 2.1rem; }
	 p { font-size: 18px; font-size: 1.8rem; }
	.bereiche {font-size: 18px; font-size: 1.8rem; }
	}


.txt {	max-width: 820px;
		hyphens: manual;

	}
	@media screen and (max-width: 1440px) {
	  .txt { max-width: 780px; 
	  }
	}



/*********************************/
/* LINKS */
/*********************************/

a:link, a:visited {
	color: #313E99; /* Blau */
	text-decoration: none; 
	font-weight:500;
}

a:hover, a:focus {
	color: #313E99; /* Blau */
    text-decoration: underline;
		text-underline-offset: 0.3em; 
		text-decoration-thickness:3px;
}

a:active {
	color: #000000;
}



/*********************************/
/* BEREICHE */
/*********************************/
header { 
  width: 100%;
  z-index: 99;
  position: sticky;
  top: 0;
  background-color: #ffffff;
  border-bottom: 1px solid #313E99; /* Blau */
  padding-bottom: 1px;
}

main {
}
.main-content { } /* 4 Skip link */


footer {	
	width: 100%; height: auto;
	background-color: #1d255b; /* D-Blau */
	padding: 10px 0;
	}

	.flex-footer { 
		width: 100%;
		max-width: 1440px;
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
		padding: 15px 18px;
		}
	.flex-footer > div { 
		padding: 0;
		color: #FFF;
		line-height: 1.5;
		hyphens: none;
		}
		.flex-footer > div:nth-child(1),
		.flex-footer > div:nth-child(2),
		.flex-footer > div:nth-child(3) {
			width: auto;
		}

		.flex-footer > div a ,
		.flex-footer > div a:link, 
		.flex-footer > div a:visited {
			color: #fff;
			text-decoration: none;
			font-weight: 400;
		}
		.flex-footer > div a:hover,
		.flex-footer > div a:focus {
			color: #FFCC00;
		}		
		.flex-footer > div a:active {
			color: #FFEB99;
		}

			.flex-footer .headline { 
				font-size: 25px; font-size: 2.5rem;
				letter-spacing: 0.05rem;
				font-weight: 400;
				margin-bottom: 5px;
			}

			.flex-footer p {
				font-size: 21px; font-size: 2.1rem; 
				margin-bottom: 5px;
			}

			/* Footer Tabelle */
			.table-zt {
				width: auto;
				display: flex;
				flex-direction: column;
				font-size: 21px; font-size: 2.1rem;
			}
			.row { display: flex; }
			.cell {text-align: left; margin-bottom: 5px;
			}
			.w25 { min-width: 75px; margin-right: 5px; }
			.w75 { width: auto;}


@media screen and (max-width: 1150px) {
		.flex-footer .headline { 
		font-size: 23px; font-size: 2.3rem;
		}
		.flex-footer p, .table-zt {
		font-size: 20px; font-size: 2.0rem;
		}
}


@media screen and (max-width: 990px) { /* EINSPALTIG */
	.flex-footer { 
		flex-direction: column; 
		padding: 0;
		}
	.flex-footer > div { 
		width: 100%; margin-bottom: 10px; 
		padding: 10px 15px 0 18px;
		}
		.flex-footer > div:nth-child(1),
		.flex-footer > div:nth-child(2),
		.flex-footer > div:nth-child(3) { 
		width: 100%; 
		}
}

@media screen and (max-width: 768px) {
		.flex-footer .headline { 
		font-size: 20px; font-size: 2.0rem;
		}
		.flex-footer p, .table-zt {
		font-size: 18px; font-size: 1.8rem;
		}
}

@media screen and (max-width: 325px) {
	.flex-footer > div {
		hyphens: manual;
		}
		.flex-footer .headline { 
		font-size: 20px; font-size: 2.0rem;
		}
		.flex-footer p {
		font-size: 16px; font-size: 1.6rem;
		}

	.table-zt {
		font-size: 16px; font-size: 1.6rem;
		}
	
	.row { display: flex; flex-wrap: wrap; }
	.w25 { min-width: 55px; padding-right: 0; }
	.w75 {  width: auto;}
}