@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,600;1,800&display=swap');

body {
	margin: 0;
	font-family: 'Fira Sans', sans-serif;
	background:	white;
	overflow-y:	scroll;
}
* {
	box-sizing: border-box;
}
header {
	width:		100%;
	background:	white;
	height:		80px;
	position:	fixed;
	top:		0;
	left:		0;
	z-index:	1000;
}
header svg {
	height:		87%;
	display:	block;
	margin:		6px 6px 6px 105px;
	float:		left;
}
.header-right {
	float:		right;
}
.header-right > a {
	display:	inline-block;
	height:		80px;
	line-height:80px;
	background:	#0077d9;
	text-decoration: none;
	color:			white;
	font-weight:	bold;
	width:			150px;
	text-align:		center;
	transition:		background 300ms;
}
.header-right > a:last-of-type, .header-right > a:hover {
	background:		#002646;
}
.defaultSection {
	padding:	270px 300px 208px 105px;
	position:	relative;
	background-image: url("/img/bg1.webp");
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.defaultSection:after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0; 
  background: rgba(0,0,0,0.2);
  pointer-events: none;
}
.defaultSection > div {
	position:	relative;
	z-index:	1;
	color:		white;
	font-weight:bold;
	font-size:	70px;
	line-height:75px;
	width:		43%;
}
.blocks {
	height:		400px;
}
.blocks > div {
	height:		100%;
	position:	relative;
}
.blocks > div, .blocks > img {
	float:		left;
	width:		33.33%;
	background:	#004c8c;
}
.blocks > img {
	height:		100%;
}
.blocks > div > div {
	color:		white;
	font-size:	40px;
	font-weight:bold;
}
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.messed {
	position:	relative;
	height:		767px;
}
.messed img {
	pointer-events:	none;
	position:	absolute;
}

.messed img:first-of-type {
	top:		0;
	height:		100%;
	left:		0;
}
.messed img:last-of-type {
	bottom:		0;
	right:		0;
	width:		60%;
	height:		400px
}
.top-blocks {
	height:		50%;
	width:		calc(100% - 490px);
	float:		right;
}
.top-blocks > div, .bottom-blocks > div {
	width:		50%;
	height:		100%;
	float:		left;
	background:	#0077d9;
	position:	relative;
	color:		white;
	font-size:	40px;
	font-weight:bold;
}
.bottom-blocks {
	height:		50%;
	float:		left;
	width:		900px;
	margin:		0 0 0 300px;
}
.leistungs-titel {
	font-size:	43px;
	color:		#004c8c;
	font-weight:bold;
	text-align:center;
	margin:		40px 0;
}
.box-freunde {
	margin:		0 15px;
	overflow:	hidden;
}
.box-freunde > div {
	width:		33.33%;
	float:		left;
	padding:	80px 0;
	color:		white;
	font-size:	25px;
	font-weight:bold;
	background:lightgray;
	text-align:center;
	margin:		0 0 15px 0;
	position:	relative;
}

.box-freunde svg {
	width:		218px;
}
.dak {
	text-align:	center;
	margin:		50px 0;
}
.kontakt {
	background:	#0077d9;
	text-align:	center;
	color:		white;
	font-size:	21px;
	padding:	55px 0;
	margin:		0 0 35px;
}
.kontakt strong {
	display:	block;
	font-size:	36px;
	margin:		0 0 15px;
}
.kontakt > div {
	width:		600px;
	margin:		0 auto;
	line-height:35px
}
footer {
	width:		60%;
	margin:		0 auto;
	line-height:23px;
	color:		#888888;
}
footer strong {
	color:		gray;
}
footer div {
	margin: 15px 0 50px 16px;
}
footer > div a {
	color:		gray;
	text-decoration: none;
}
.color-darkblue {
	background:	#002646 !important;
}
.color-blue {
	background:	#004c8c !important;
}
.color-lightblue {
	background:	#0077d9 !important;
}
button {
	background: transparent;
	color:		white;
	border-radius: 0;
	border:			1px solid white;
	padding:		 8px 27px;
	font-size:		16px;
	cursor:			pointer;
	outline:		0;
	transition:		background 300ms, color 300ms;
}
button:hover {
	background:		white;
	color:			black;
}
#menu {
	position:		fixed;
	width:			100%;
	height:			100vh;
	background:		rgba(255,255,255,0.4);
	z-index:		10000;
	display:		none;
}
#menu > div:first-of-type {
	width:			calc(100% - 600px);
	height:			100vh;
	position:		absolute;
	left:			0;
	top:			0;
}
#menu-side {
	position:		absolute;
	right:			0;
	top:			0;
	width:			600px;
	background:		#004c8c;
	height:			100vh;
}
.show {
	display:		block !important;
}
#menu-side a {
	display:		block;
	color:			white;
	text-decoration: none;
	font-weight:	bold;
	font-size:		30px;
	margin:			45px 0 45px 35px
}
#menu-side a:hover {
	color:			lightblue;
}
.big-text {
	overflow:		hidden;
	width:			50%;
	margin:			60px auto;
}
.big-text > div:first-of-type {
	float:			left;
	font-size:		45px;
	font-weight:	bold;
	width:			30%;
	margin-right:	10%;
}
.big-text > div:last-of-type {
	float:			right;
	width:			60%;
	line-height:	24px;
}
.imagebox > div, .imagebox2 > div {
	text-shadow: 0px 3px #000000;
	position: relative;
	z-index: 100;
}

.imagebox > a, .imagebox2 > a {
	position: relative;
	z-index: 100;
}
.imagebox, .imagebox2 {
	width:31.33%;
	position: relative;
	vertical-align: middle;
	margin:1%;
	padding:	140px 0;
	text-align:	center;
	font-weight: bold;
	font-size:	 31px;
	color: white;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: inline-block;
}

.imagebox:before, .imagebox2:before {
	content: "";
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.2);
	position: absolute;
    top: 0;
	pointer-events: none;
    left: 0;
	transition: opacity 300ms;
}

.imagebox:hover:before, .imagebox2:hover:before {
	opacity: 0 !important;
}

.imagebox a, .imagebox2 a {
	display: block;
	color: black;
	text-decoration: none;
	background: white;
	padding: 7px;
	width: 50px;
	margin: 20px auto;
}

.imagebox2 {
	width:23% !important;
	font-size: 24px;
	padding: 70px 0;
}

.partner {
	width: 55%;
	text-align: center;
	margin: 0 auto;
}

.partner img {
	margin: 0 70px 50px 0;
}

.partner > div {
	font-size: 33px;
	font-weight: bold;
	color: darkgray;
	text-align:left;
	margin: 0 0 40px;
}

@media screen and (max-width: 1700px) {
	.big-text > div:first-of-type {
		width: 100%;
		text-align: center;
		margin-bottom: 15px;
	}
	.big-text > div:last-of-type {
		width: 100%;
		text-align: center;
	}
}

@media screen and (max-width: 1247px) {
	body {
		overflow-x: hidden;
	}
	footer {
		width: 100% !important;
	}
	.imagebox2 {
		min-width: 100% !important;
		width: 100% !imporant;
	}
	.big-text {
		width: 90%;
	}
	.defaultSection > div > div:nth-of-type(2) {
		width: 100% !important;
	}
	.imagebox {
		overflow: hidden;
		width: 100%;
	}
  .blocks > div, .blocks > img, .top-blocks > div, .bottom-blocks > div, .bottom-blocks {
    width: 100% !important;
	position: static;
	margin: 0;
	float: none;
  }
  .blocks {
	  height: auto;
	  overflow: hidden;
  }
  .top-blocks {
	  height: auto;
	  width: 100%;
  }
  .blocks .center, .messed .center {
	  position: static;
	  text-align: center;
	  transform: none !important;
	  display: block;
	  padding: 60px 0;
  }
  .leistungs-titel {
	  font-size: 20px;
	  overflow: hidden;
  }
  .messed {
	  height: auto;
  }
  .blocks * {
	  background-image: none !important;
	  transform: none;
  }
  .messed img, .blocks img {
	  display: none;
  }
  header svg {
	  margin-left: 7px !important;
  }
  .defaultSection {
	  padding: 200px 0;
	  overflow: hidden;
  }
  footer {
	  overflow: hidden;
  }
  .defaultSection > div {
	  width: 100%;
	  text-align: center;
	  font-size: 50px;
  }
  .header-right > a:first-of-type {
	  display: none;
  }
  .header-right > a:last-of-type {
	  color: #002646;
	  width: 60px;
	  white-space: nowrap;
  }
  .header-right > a:last-of-type img {
	  right: 31px;
  }
  .kontakt {
	  width: 100%;
	  overflow: hidden;
  }
}

@media screen and (max-width: 700px) {
	#menu-side {
		width: 100%;
	}
	* {
		max-width: 100%
	}
	.box-freunde > div {
		width: 100%;
	}
}


@media screen and (max-width: 500px) {
	.defaultSection > div {
		font-size: 30px;
	}
}