/* -------------------------------------------------------
color 1: #3faf67; //grün
color 2: #2f6bb6; // blau

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

body{
  font-family: 'Open Sans';
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.5px;
  border: none;
  color: #383838;
  margin: 0;
  padding: 0;
/*  overflow-x: hidden;*/
	hyphens: auto;
-webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
	hyphenate-limit-chars: auto 5;
   hyphenate-limit-lines: 2;
}

form *, form, input, select, textarea {
  font-family: 'Open Sans';
  font-weight: 400;
  font-size: 16px;
  color: #000;
  letter-spacing: -0.5px;
}

a {outline: none; text-decoration: none; color: #255AA5!important;}

a:hover {text-decoration: underline;}

a img {
  line-height: 1!important;
}

.superscript {
	font-size: 0.9rem;
	vertical-align:super;
	/*<span class=”superscript”>&#174;</span>
	<span class=”superscript”>&reg;</span>*/
}

h1, h2, h3{
  font-family: 'Open Sans';
  padding: 0;
    /*hyphens: manual;*/
}

h1{
  
  font-size: 1.9rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  margin: 2rem 0 3rem;
  text-transform: uppercase;
    position: relative;
  display: block; /* oder block, je nach Layout */
  padding-bottom: 0.5em; /* Abstand zur Linie */
    
}

h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 6px; /* Dicke der Linie */
  width: 200px; /* feste Breite der Linie */
  background-color: #255AA5; 
}

h1:first-child{margin-top: 0;}

@media screen and (max-width: 690px), (max-device-width: 690px) {
	h1 {
		letter-spacing: 0;
	}
}

h2{
  font-size: 1.4rem;
  font-weight: 300;
  margin: 1.5rem 0 2.5rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
    color: #255AA5!important;
    
}

h3{
  font-size: 1.2rem;
  font-weight: 400;
  margin: 1.5rem 0 1.5rem;
}

h1 + h2 {margin-top: 0;}

p {margin: 0 0 3rem; padding: 0;}

em {font-style: italic;}

strong, .strong {
    font-size: 1.4rem;
  font-weight: 300;
  /*margin: 1.5rem 0 2.5rem;*/
  text-transform: uppercase;
  letter-spacing: 0.1em;
    color: #255AA5!important;
}

@media screen and (max-width: 940px), (max-device-width: 940px) {
strong, .strong {
    font-size: 1.2rem;
  font-weight: 300;
  /*margin: 1.5rem 0 2.5rem;*/
  text-transform: uppercase;
  letter-spacing: 0;
    color: #255AA5!important;
    }
    
h2{
  font-size: 1.2rem;
  font-weight: 300;
  margin: 1.5rem 0 2.5rem;
  text-transform: uppercase;
  letter-spacing: 0;
    color: #255AA5!important;
    
}
}

small{font-size: 0.7em;}

img{border: 0;}

.content_img{
    box-sizing: border-box; /* Wichtig für Padding/Border */
    display: block; /* Wichtig für 100% Breite */
    width: 100%; /* Wichtig, damit das Bild immer 100% der Spaltenbreite hat */
    padding: 3px;
    border: 1px solid #255AA5;
    margin: 0 0 0 0;
}

ol, ul{
  font-weight: 300;
    font-size: 1.2rem;
  list-style-position: outside;
  margin: 25px 0 30px 50px;
  padding: 0;
  text-align: left;
}

ol{list-style-type: decimal-leading-zero;}

ul{list-style-type: square;}
ul li::marker {color: #CC572C;}

li{padding: 0 0 1.5rem 0;}

sup {
    vertical-align: super;
    font-size: smaller;
}

div.clear{clear: both; float: none;}

.mb-1{margin-bottom: 1rem;}
.mb-2{margin-bottom: 2rem;}

.bg-white {background: #fff;}
.bg-black {background: #000;}
.bg-black > * {color: #fff!important;}
.bg-gray {background: #f9f9f9;}
.bg-blue {
    background: #E4F1FC;
	background-image: url('../images/logo_wasserzeichen.png');
	background-position: center bottom;
	background-repeat:no-repeat;
	padding-bottom: 5rem;
}
.bg-blue * {color: #000;}

.bg {
	background-position: center center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 0!important;
}

.black-layer{
	background: rgba(0,0,0,0.2);
	padding: 5rem 1.75rem;
	}

.white-layer{
	background: rgba(255,255,255,0.8);
	padding: 5rem 1.75rem;
	}

.black-color {
	color: #000;
}

.white-color {
	color: #fff;
}

.noborder {border: none!important;}

.border-t-dark { border-top: 1px solid #000; }
.border-b-dark { border-bottom: 1px solid #255AA5; }
.border-t-light { border-top: 1px solid #fff; }
.border-b-light { border-bottom: 1px solid #f1f1f1; }


/*-------------------------------------------------------------------
-------------------------------------------------------------------*/
#head {
    background-image: url('');
    background-position: center center;
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    width: 100vw;
    max-width: 100%;
		overflow-x: hidden;
}

#stickynavigation,
#stickynavigation *,
#stickynavigation > * {
  /*line-height: 0!important;*/
  letter-spacing: 0!important;
}

#stickynavigation {
  display: flex;
  flex-wrap: wrap;
	justify-content: center;
  backdrop-filter: blur(10px);
  background-color: rgba(255,255,255,0.6);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
	width: 100%;
	position: fixed;
	z-index:9999999!important;
	}

#stickynavigation-in {
  display: flex;
  flex-wrap: wrap;
  margin: 0 1rem;
  padding: 0;
  max-width: 1200px;
  width: 100%;
}

#mainlogo {
  display: flex;
}


@media screen and (max-width: 940px), (max-device-width: 940px) {
    #mainlogo {
  padding: 0.8rem 0;
}

#mainlogo img {
  height: 90px;
}    
}

@media screen and (min-width: 941px), (min-device-width: 941px) {
    #mainlogo {
  padding: 0.8rem 0;
}

#mainlogo img {
  height: 110px;
}    
}

#navigation {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
}

.infofeld {
	padding: 1.5rem 2.5rem;
	margin: 3rem 0 3rem;
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
	background: #fff;
    font-size: 1.2rem;
}

@media screen and (max-width: 940px), (max-device-width: 940px) {
  #stickynavigation-in {
    flex-direction: column;
    justify-content: center;
    margin: 0;
    background: #fff;
  }

  #stickynavigation-in > div {
    width: 100%;
    justify-content: center;
  }
}

#head-overlay  {
    background: rgba(255,255,255,0);
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}


#headline {
  max-width: 1200px;
  width: 100%;
}

#headline-in {
  margin-top: 52vh;
  padding-left: 1rem;
}


#headline-in  > div {
  text-shadow: -2px -2px 0px #fff, 2px 2px 0px #fff, 2px -2px 0px #fff, -2px 2px 0px #fff;
  padding: 0.5rem;
  line-height: 1;
}

#headline-in  > div:nth-of-type(1) {
  font-weight: 500;
  font-size: 3rem;
  color: #364E82;
}
#headline-in  > div:nth-of-type(2) {
  font-weight: 400;
  font-size: 2.5rem;
  color: #364E82;
}
#headline-in  > div:nth-of-type(3) {
  font-weight: 300;
  font-size: 1.7rem;
  color: #364E82;
}
#headline-in  > div:nth-of-type(4) {
  font-weight: 400;
  font-size: 2.5rem;
  color: #364E82;
}


#slogan {
  margin-top: 3vh;
  margin-bottom: 3vh;
}

#slogan  > div {
  text-shadow: -2px -2px 0px #fff, 2px 2px 0px #fff, 2px -2px 0px #fff, -2px 2px 0px #fff;
  padding: 0.5rem;
  padding-left: 0rem;
  line-height: 1;
}


#slogan  > div:nth-of-type(1) {
  font-weight: 500;
  font-size: 3rem;
  color: #255AA5;
}
#slogan  > div:nth-of-type(2) {
  font-weight: 400;
  font-size: 2.5rem;
  color: #255AA5;
}

@media screen and (max-width: 1160px), (max-device-width: 1160px) {
  #headline-in                       { margin-top: 60vh;  }
  #headline-in  > div:nth-of-type(1) { font-size: 2.5rem;    }
  #headline-in  > div:nth-of-type(2) { font-size: 2.0rem;  }
}

@media screen and (max-width: 940px), (max-device-width: 940px) {
  #headline-in                       { margin-top: 75vh;  }
  #headline-in  > div:nth-of-type(1) { font-size: 2.5rem;    }
  #headline-in  > div:nth-of-type(2) { font-size: 2.0rem;  }
  #headline-in  > div:nth-of-type(3) { font-size: 2.0rem;  }
}

@media screen and (max-width: 600px), (max-device-width: 600px) {
  #head                              { background-image: url(''); }
  #headline-in                       { margin-top: 72vh;  }
  #headline-in  > div:nth-of-type(1) { font-size: 2.2rem;    }
  #headline-in  > div:nth-of-type(2) { font-size: 1.8rem;  }
  #headline-in  > div:nth-of-type(3) { font-size: 1.8rem;  }
}

@media screen and (max-width: 500px), (max-device-width: 500px) {
  #head                              { background-image: url(''); }
  #headline-in                       { margin-top: 63vh;  }
  #headline-in  > div:nth-of-type(1) { font-size: 2.0rem;    }
  #headline-in  > div:nth-of-type(2) { font-size: 1.3rem;  }
  #headline-in  > div:nth-of-type(3) { font-size: 1.3rem;  }
}








/* -------------------------- */

#wrap {
	font-size: 1.3rem;
}

.content {
    padding: 10rem 1.75rem;
}

.content-in {
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;

}

.content-in + .content-in {
  margin-top: 2rem;
}

.box-group {
	display: flex;
	flex-wrap: wrap;
  gap: 4rem;
}

.box-group > div {	padding-bottom: 1rem;}

.box-group5050 > div {	width: calc(50% - 2rem);}

.box-group6040 > div:nth-of-type(odd) {  width: calc(60% - 2rem); }
.box-group6040 > div:nth-of-type(even) {  width: calc(40% - 2rem); }

.box-group7030 > div:nth-of-type(odd) {  width: calc(70% - 2rem); }
.box-group7030 > div:nth-of-type(even) {  width: calc(30% - 2rem); }

.box-group3070 > div:nth-of-type(odd) {  width: calc(30% - 2rem); }
.box-group3070 > div:nth-of-type(even) {  width: calc(70% - 2rem); }


@media screen and (max-width: 650px), (max-device-width: 650px) {
	.box-group5050 > div {	width: 100%;	}
}

@media screen and (max-width:750px), (max-device-width: 750px) {
  .box-group6040 > div {	width: 100%!important;	}
  .box-group7030 > div {	width: 100%!important;	}
  .box-group3070 > div {	width: 100%!important;	}
    
    .reverse-on-mobile {
    flex-direction: column-reverse;
    }
}


.box-group33 > div {
	width: 33.3%;
	padding-bottom: 1rem;
}

.box-group33 > div:nth-of-type(1) {
	padding-right: 1rem;
}

.box-group33 > div:nth-of-type(2) {
	padding-left: 1rem;
	padding-right: 1rem;
}

.box-group33 > div:nth-of-type(3) {
	padding-left: 1rem;
}

@media screen and (max-width: 850px), (max-device-width: 850px) {
.box-group33 > div {
	width: 50%;
}

.box-group33 > div:nth-of-type(1),
.box-group33 > div:nth-of-type(2),
.box-group33 > div:nth-of-type(3) {
	padding-left: 0;
	padding-right: 0;
}

.box-group33 > div:nth-of-type(odd) {
	padding-right: 1rem;
}

.box-group33 > div:nth-of-type(even) {
	padding-left: 1rem;
}
}

@media screen and (max-width: 650px), (max-device-width: 650px) {
	.box-group33 > div {	width: 100%;	}
	.box-group33 > div:nth-of-type(odd) {	padding-right: 0;	}
	.box-group33 > div:nth-of-type(even) {	padding-left: 0;	}
}

#footer * {color: #000;}

#footer  {
    padding: 1.75rem;
}


#footer-in {
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
}

#footer_imprint {display: flex; flex-wrap: wrap; padding: 2rem 0;}

#footer_imprint div {flex-grow: 1;}

@media screen and (max-width: 900px), (max-device-width: 900px) {
  #footer_imprint div {width: 50%;}
  #footer_imprint div:nth-last-of-type(-n +2) {padding-top: 2rem;}
}

@media screen and (max-width: 600px), (max-device-width: 600px) {
  #footer_imprint div {width: 100%; text-align:center;}
  #footer_imprint div:nth-last-of-type(-n +2) {padding-top: 0rem;}
  #footer_imprint div:nth-of-type(n +2) {padding-top: 2rem;}
}

#footer_imprint div h3 {
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  text-transform: uppercase;
}

#footer_imprint * {
  line-height: 1.9;
}


.partner-logos {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap:1rem;
}

.partner-logos img {
  width: 100%;
}

.company {
  display: flex;
  flex-wrap: wrap;
  gap:3rem;
  justify-content: center;
 align-items: center;
}


.company > div > img{
  max-width: 200px;

}