

/*
colors:

blau:	#009ee3
rot: #cc0008

*/

/*--------------------------------------------------------------
Alignments
--------------------------------------------------------------*/

.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.text-center {
	text-align:center;
}

/*--------------------------------------------------------------
Clearings
--------------------------------------------------------------*/

.clear {
	clear: both;
}

/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/
body {
	position: relative;
}
body,
button,
input,
select,
textarea {
	color: #000;
	font-family: "Work Sans", "Helvetica Neue", helvetica, arial, sans-serif;
	font-size: 15px;
	font-size: 0.9375rem;
	font-weight: 300;
	line-height: 1.66;
}

h1,
h2,
h3,
h4,
h5,
h6 {

	clear: both;
	line-height: 1.4;
	margin: 2em 0 .5em;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
	padding-top: 0;
}

h1 {
	font-size: 24px;
	font-size: 1.5rem;
	font-weight: 300;
	text-align:center;
}

h2 {
	font-family: "Exo 2";
	color: #000;
	font-size: 58px;
	font-size: 2.5em;
	font-weight: 800;
	text-align:center;
	text-transform:uppercase;

  letter-spacing: 0em;
  transition: letter-spacing ease .25s;
}
h2:hover {
	letter-spacing: .07em;
  transition: letter-spacing ease .25s;
}



p {
	margin: 0 0 1.5em;
	padding: 0;
}

.kleingedrucktes {
	font-size:.7em;
}



:focus {
	outline: none;
}
b, strong {
    font-weight: 700;
}



/*--------------------------------------------------------------
Formatting
--------------------------------------------------------------*/

hr {
	background-color: #bbb;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
Lists
--------------------------------------------------------------*/

ul,
ol {
	margin: 0 0 1.5em;
	padding: 0;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}


/*--------------------------------------------------------------
Links
--------------------------------------------------------------*/

a {
	color: #009ee3;
	text-decoration: none;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	color:#000;
	outline: 0;
}




/* social nav */

.site-header .menu-social-container ul li {
	display:inline-block;
}
.site-header .menu-social-container ul li a {
	display:block;
	padding:8px 10px;
	font-size:1.3em;
	border-bottom:1px solid rgba(255,255,255,0);
	transition:padding ease .75s,border-color ease .75s;
	text-transform:uppercase;
}
.site-header .menu-social-container ul li a:hover,
.site-header .menu-social-container ul li a:focus {
	padding:8px 20px;
	border-bottom:1px solid rgba(255,255,255,1);
	transition:padding ease .25s,border-color ease .5s;
}
.site-header .menu-social-container ul li:first-child a img {
	height:19px;
}
.site-header .menu-social-container ul li:nth-child(2) a img {
	height:19px;
	margin-bottom:-2px;
}

/*--------------------------------------------------------------
Layout
--------------------------------------------------------------*/

html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

* {
	box-sizing: border-box;
}

body {
}


.rowmainpage {
  display:flex;
}
.rowmainpage > * {
  flex:0 1 auto;
  width:50%;
  height:100vh;
}


/*--------------------------------------------------------------
Header
--------------------------------------------------------------*/

.site-header {
	position: relative;
	width:100%;
	color:#fff;
	padding:20px 3%;
	z-index:20;
	box-shadow:0 0 25px rgba(0,0,0,.25);
}
.site-header-cfc {

	background:#009ee3;
	background:linear-gradient(to right, #009ee3, #12c4ff);
}
.site-header-fsv {
  background:#cc0008;
}

.site-header .row  {
	display:flex;
	align-items:center;
}
.site-header .row > div:nth-child(1) {
	flex:1 1 70%;
}
.site-header .row > div:nth-child(2) {
	flex:1 1 30%;
}

.site-header nav /* = main-navi*/ {
	background:#fff;
	margin:20px 0;
}

.site-header a {
	color:#fff;
	display:inline-block;
}
.site-header .social-links  {

}
.site-header .logo  {
	color:#fff;
}
.site-header .logo *  {
	color:#fff;
}
.site-header .callsearch  {
	text-align:right;

}


.site-header .logo a  {

}
.site-header .logo img {

}


.site-header ul {
	list-style:none;
	margin:0;
}

.callsearch > .fa-search {
	cursor:pointer;
	margin-left:20px;
	display:inline-block;
	padding:15px 10px;
}


/*--------------------------------------------------------------
 Regular Content
--------------------------------------------------------------*/

.site-content {
	width:100%;
	margin:auto;
}

.rahmenlink {
	text-align:center;
	cursor:pointer;
	margin-bottom:40px;
}
.rahmenlink a {
	display:inline-block;
	width:auto;
	font-size:1.5em;
	color:#000;
	font-family:'Exo 2';
	padding:15px 20px;
	border:1px solid rgba(0,0,0,.15);
	text-transform:uppercase;
	transition:padding ease .75s, border ease .4s;
}
.rahmenlink a:hover {
	border:1px solid rgba(0,0,0,.8);
	padding:15px 40px;
	transition:padding ease .25s, border ease .4s;
}


/*--------------------------------------------------------------
Pages
--------------------------------------------------------------*/

/* frontpage */

#startseite-header {
	height:calc(80vh - 175px);
	position:relative;
	overflow:hidden;
	margin-bottom:50px;
}
#startseite-header .startseite-header-textbg {
	position:absolute;
	width:70%;
	left:15%;
	top:17vh;
	padding:0;
	box-sizing:border-box;
	text-align:center;
	z-index:1;
}

#startseite-header h2,
#startseite-header h3,
#startseite-header a {
	box-sizing:border-box;
	color:#fff;
	font-size:3em;
	line-height:1;
	white-space:nowrap;
	padding:20px 40px;
	margin:0;
}
	#startseite-header h2 {
		display:inline-block;
		width:auto;
		background:rgba(0,0,0,.5);
		border-bottom:1px solid rgba(0,0,0,.5);
		opacity: 0;
		-webkit-animation: fade-slide-in 2s ease 2s 1 normal forwards running;
		-moz-animation: fade-slide-in 2s ease 2s 1 normal forwards running;
		-o-animation: fade-slide-in 2s ease 2s 1 normal forwards running;
		animation: fade-slide-in 2s ease 2s 1 normal forwards running;
	}
	#startseite-header h3 {
		display:inline-block;
		width:auto;
		text-transform: none;
		background:rgba(0,0,0,.5);
		opacity: 0;
		-webkit-animation: fade-slide-in 2s ease 3s 1 normal forwards running;
		-moz-animation: fade-slide-in 2s ease 3s 1 normal forwards running;
		-o-animation: fade-slide-in 2s ease 3s 1 normal forwards running;
		animation: fade-slide-in 2s ease 3s 1 normal forwards running;
	}
	@-webkit-keyframes fade-slide-in {
		0%   { opacity: 0; margin-left:-40px;}
		100% { opacity: 1; margin-left:0px;}
	}
	@-moz-keyframes fade-slide-in {
		0%   { opacity: 0; margin-left:-40px;}
		100% { opacity: 1; margin-left:0px;}
	}
	@-o-keyframes fade-slide-in {
		0%   { opacity: 0; margin-left:-40px;}
		100% { opacity: 1; margin-left:0px;}
	}
	@keyframes fade-slide-in {
		0%   { opacity: 0; margin-left:-40px;}
		100% { opacity: 1; margin-left:0px;}
	}

	#startseite-header a {
		top:35vh;
		left:calc(50% - 125px);
		display:block;
		width:auto;
		font-size:1.5em;
		font-family:'Exo 2';
		padding:15px 20px;
		border:1px solid rgba(255,255,255,.3);
		text-transform:uppercase;
		transition:background ease .75s, border ease .4s;
	}
	#startseite-header a:hover {
		background:rgba(0,0,0,.5);
		border:1px solid rgba(255,255,255,.8);
		transition:background ease .25s, border ease .4s;
	}
#startseite-header img {
	position:absolute;
	top:-160px;
	left:0px;
	width:100%;
	z-index:0;
	opacity: 0;
	animation: startseite-header-img 4s ease 1.5s 1 normal forwards running;
}
	}
	@-webkit-keyframes startseite-header-img {
		0%   { opacity: 0;}
		100% { opacity: 1;}
	}
	@-moz-keyframes startseite-header-img {
		0%   { opacity: 0;}
		100% { opacity: 1;}
	}
	@-o-keyframes startseite-header-img {
		0%   { opacity: 0;}
		100% { opacity: 1;}
	}
	@keyframes startseite-header-img {
		0%   { opacity: 0;}
		100% { opacity: 1;}
	}






/*--------------------------------------------------------------
Footer
--------------------------------------------------------------*/

.site-footer {
	background:#000;
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:50px 0%;
}
.site-footer > .footerbox {
	flex:1 1 20%;
	width:20%;
	text-align:center;
}

.site-footer a {
	color:#fff;
	display:inline-block;
}
.site-footer .logo {

}
.site-footer .logo img {
	width:285px;
}
.site-footer ul {
	list-style:none;
	margin:0;
}
/* social nav */

.site-footer .menu-social-container {
	display:inline-block;
	vertical-align:middle;
}
.site-footer .menu-social-container ul li {
	display:inline-block;
}
.site-footer a {
	display:inline-block;
	vertical-align:middle;
	padding:0 0px;
	border-bottom:1px solid #000;
	transition:padding ease .75s,border-color ease .75s;
}
.site-footer a img {
	height:40px;
	width:auto;
}
.site-footer a:hover,
.site-footer a:focus {
	padding:0px 5px;
	border-bottom:1px solid #fff;
	transition:padding ease .25s,border-color ease .5s;
}
.site-footer .menu-social-container ul li a {
	display:block;
	padding:8px 10px;
	font-size:1.3em;
	border-bottom:1px solid #000;
	transition:padding ease .75s,border-color ease .75s;
}
.site-footer .menu-social-container ul li a:hover,
.site-footer .menu-social-container ul li a:focus {
	padding:8px 20px;
	border-bottom:1px solid #fff;
	transition:padding ease .25s,border-color ease .5s;
}
.site-footer .menu-social-container ul li:first-child a img {
	height:19px;
}
/* .site-footer .menu-social-container ul li:nth-child(2) a img {
	height:19px;
} */

.subfooter {
	text-align:center;
	font-size:.8em;
	padding:20px 0;
}
.subfooter #menu-impressum-datenschutz{
	list-style:none;
}

.subfooter #menu-impressum-datenschutz li{
	display:inline-block;
}

.subfooter #menu-impressum-datenschutz li a{
	padding:0 5px;
}

/*--------------------------------------------------------------
Media
--------------------------------------------------------------*/

img,
video {
	height: auto; /* Make sure images are scaled correctly. */
	max-width: 100%; /* Adhere to container width. */
}

.wp-caption-text {
	display:none;
}


.box169 {
	position: relative;
}
.box169:before {
	display: block;
	content: "";
	width: 100%;
	padding-top: 56.25%;
}
.box169  iframe {
	position: absolute;
	/* padding:15px; */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height:100% !important;
	width:100%;
	border:none;
}


/*--------------------------------------------------------------
Media Queries
--------------------------------------------------------------*/


/* ###################  Handy Portrait - tablet ################### */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 1024px) {


  .rowmainpage {
    display:block;
  }
  .rowmainpage > * {
    flex:0;
    width:100%;
    height:auto;
    min-height:50vh;
  }

  h2 {
      font-size: 1em;
  }
  h1, h2, h3, h4, h5, h6 {
      margin: 1em 0 .5em;
  }
  br {
    display:none;
  }

  .site-header {
    padding: 10px 3%;
  }
  .rahmenlink a {
      font-size: 1em;
      padding: 10px 15px;
  }

}

/* ###################  Tablet landscape ###################  */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape) {

}

/* ###################  laptops small ###################  */
@media only screen
and (min-device-width: 1025px)
and (max-device-width: 1365px) {



}

/* ###################  laptops big ###################  */
@media only screen
and (min-device-width: 1366px)
and (max-device-width: 1680px) {
}

/* ###################  large screens ###################  */
@media only screen
and (min-device-width: 1920px)
and (max-device-width: 2560px) {

}
