/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */
/*
colors
weiss: #fff;
schwarz: #001523;
blau: #577a8b;
dunkelblau: #3e5662;
rot: #ae2d0f;
hellblaugrau: #9FB6BF;
*/
/************Reset**************/
* { 
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box; 
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small,
strong, var, a, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,
details, figcaption, figure, footer, header, hgroup, menu, nav, section,
summary, time, mark, audio, video, button, input, select, textarea {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    list-style: none;
}
ol, ul { 
	list-style: none;
	margin: 0;
	padding: 0;
} 
table { 
	border-collapse: collapse; 
	border-spacing: 0; 
}
header, footer, nav, div {
	display: block;	
}
legend {
	display: none;
}
/************End Reset**************/

/*================== Fonts ============================*/

/* audiowide-regular - latin */
@font-face {
  font-family: 'Audiowide';
  font-style: normal;
  font-weight: 400;
  src: url('../css/fonts/audiowide-v16-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../css/fonts/audiowide-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../css/fonts/audiowide-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../css/fonts/audiowide-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../css/fonts/audiowide-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../css/fonts/audiowide-v16-latin-regular.svg#Audiowide') format('svg'); /* Legacy iOS */
}

/* fira-sans-300 - latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../css/fonts/fira-sans-v16-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../css/fonts/fira-sans-v16-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../css/fonts/fira-sans-v16-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../css/fonts/fira-sans-v16-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../css/fonts/fira-sans-v16-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../css/fonts/fira-sans-v16-latin-300.svg#FiraSans') format('svg'); /* Legacy iOS */
}
/* fira-sans-regular - latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../css/fonts/fira-sans-v16-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../css/fonts/fira-sans-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../css/fonts/fira-sans-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../css/fonts/fira-sans-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../css/fonts/fira-sans-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../css/fonts/fira-sans-v16-latin-regular.svg#FiraSans') format('svg'); /* Legacy iOS */
}
/* fira-sans-500italic - latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 500;
  src: url('../css/fonts/fira-sans-v16-latin-500italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../css/fonts/fira-sans-v16-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../css/fonts/fira-sans-v16-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../css/fonts/fira-sans-v16-latin-500italic.woff') format('woff'), /* Modern Browsers */
       url('../css/fonts/fira-sans-v16-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../css/fonts/fira-sans-v16-latin-500italic.svg#FiraSans') format('svg'); /* Legacy iOS */
}




body {
	background: #577a8b;
	color: #fff;
	font-family: 'Fira Sans', sans-serif;
	font-size: 100%;
	line-height: 1.6em;
	padding: 0;
	-webkit-text-size-adjust: none;
}

/* Seitenaufbau */

.site-nav {
	background: rgba(62,86,98,0.8);
	height: 60px;
	width: 100%;
}

/*.site-nav .container,.site-nav .columns {
	padding:0.6em;
}*/

.site-header {
	background: url("../images/landschaft_m.jpg");
	height: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.site-header .container {
	width: 100%;
	margin-top: 0;
	margin-right: 0px;
	margin-left: auto;
	margin-bottom: 0;
	height: 250px;
	padding: 0em;
}

.header-bild /*{
	background:url(../bilder/header-klein.jpg) top no-repeat;
	width:700px;
	height:210px;
	position:relative;
}
*/

.header-ok-logo {
	max-width: 100%;
	height: auto;
	position: relative;
	margin-top: 0px;
	padding-top: 0px;
}

.header-ok-logo img {
	max-width: 100%;
	height: auto;
	position: relative;
	overflow: hidden;
	padding-left: 30%;
	padding-top: 0px;
	padding-bottom: auto;
	padding-right: auto;
}


.site-content-container {
	background:#577a8b;
	border-top:solid 3px #ae2d0f;
}

.container-grau {
	background:#577a8b;
}

.site-content {
	background:#577a8b;
	padding-top:1em;
	padding-bottom:1em;
}

.trennlinie_u {
	border-bottom:solid 2px #ae2d0f;
}

.trennlinie_o {
	border-top:solid 2px #ae2d0f;
}

.trennlinie_u_c {
	border-bottom:solid 2px #ae2d0f;
}

.trennlinie_o_c {
	border-top:solid 2px #ae2d0f;
}

.site-footer {
	background:#3e5662 ;
	height:auto;
	border-top:solid 3px #ae2d0f;
	margin-bottom: 0px;
}


/*========== Raster small 1-spaltig, medium 2-spaltig, large 6-spaltig, Breakpoints: 470px, 700px ==================*/

* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

.container {
	max-width:960px;
	margin:0 auto;
	padding:1em;
}

.columns {
	float:left;
	padding-left:1em; /* 16px */
	padding-right:1em; /* 16px */
}

.push {
	float:right;
}

.pull {
	float:left;
}


.row {
	width:auto;
}

.row:before, 
.row:after {
	content:'';
	display:table;
}

.row:after {
	clear:both;
}

.row .row {
	margin-left: -1em;
	margin-right: 0em;
}

.clear {
  clear: both;
}

/* Small */

	.small-1 {
		width:100%;	
	}
		
/* Medium: 2 Spalten */

@media screen and (min-width:470px) {

	.medium-1 {
		width:50%;	
	}
	
	.medium-2 {
		width:100%;	
	}

}

/* Large: 6 Spalten */

@media screen and (min-width:700px) {
	
	.large-1 {
		width:16.66667%;	
	}
	
	.large-2 {
		width:33.333333%;	
	}
	
	.large-3 {
		width:50%;	
	}
	
	.large-4 {
		width:66.66667%;	
	}
	
	.large-5 {
		width:83.333333%;	
	}
	
	.large-6 {
		width:100%;	
	}
	
/* Offset-Klassen, um Spalte um diesen Betrag einzurücken */
	
	.large-offset-1 {
		margin-left:16.66667%;	
	}
	
	.large-offset-2 {
		margin-left:33.333333%;	
	}
	
	.large-offset-3 {
		margin-left:50%;	
	}
	
	.large-offset-4 {
		margin-left:66.66667%;	
	}
	
	.large-offset-5 {
		margin-left:83.333333%;	
	}
	
}

/*========== Ende Raster ==================*/

/* Text */


h1, h2, h3 {
	font-family: 'Fira Sans', sans-serif;
}

h1 {font-weight: 500;
	font-style: italic; 
	font-size:1.8em;
	color:#fff;
	line-height:1.4em;
    margin-bottom:0.6em;
}

h2 {font-weight: 300;
	font-style: normal; 
	font-size:1.5em;
	color:#fff;
	line-height:1.3em;
    margin-bottom:1em;
}

h3 {font-weight: 400;
	font-style: normal; 
	font-size:1.2em;
	color:#fff;
	line-height:1.4em;
    margin-bottom:1em;
}

h1.abstand,  h2.abstand {
	margin-top:0.5em;
}
h3.abstand {
	margin-top:2em;
}
p {
	font-family: 'Fira Sans', sans-serif;
	font-weight:400;
	font-style:normal;
	font-size:1em;
	color:#fff;
	line-height:1.5em;
    margin-bottom:1em;
}
p.untenabstand {
    margin-bottom:7em;
}


.font_h_1 {font-family: 'Fira Sans', sans-serif;
				font-weight:500;
				font-style:italic; 
				font-size:1.8em;}
.font_h_2 {font-family: 'Fira Sans', sans-serif;
				font-weight:300;
				font-style:normal; 
				font-size:1.5em;}
.font_h_3 {font-family: 'Fira Sans', sans-serif;
				font-weight:400;
				font-style:normal; 
				font-size:1.2em;}
.font_p {font-family: 'Fira Sans', sans-serif;
				font-weight:400;
				font-style:normal;
				font-size:1em;}
.pfeil {font-family: 'Audiowide', cursive;
				font-weight:400;
				font-style:normal;
				font-size:1em;}

li {
  list-style-type: none;
	list-style-position: outside;
	list-style-image: url("../icons/pfeil_10.png");
}


a {
	text-decoration:none;
	color:#fff;
	cursor:pointer;
	font-weight:400;
}

a:hover, a:active, a:focus {
	text-decoration:none;
	color:#9FB6BF;
	font-weight: 600;
}



p.first {
    margin-top:2em;
}
p.ohneabstand {
    margin-top:0em;
}


.footer p {
	color:#fff;
	}

.footer a {
	font-size:1.0em;
	}
.footer .copyright {
	font-size:0.8em;
	}

/*============ Navigation ================*/
/*#site-nav a.activ {
	color:#9FB6BF;
}*/


.nav-container {
	height: 60px;
	margin-bottom:0em;
	float: left;
	margin-left: 16%;
}

nav {
	margin-bottom:0.5em;
}


.topnav {
  	overflow: hidden;
	position:relative;
	display:block;
}


.topnav a {
    float: left;
    display: block;
    color: #fff;
    text-align: center;
    padding-top: 1.2em;
    padding-right: 1.1em;
    padding-left: 1.1em;
    padding-bottom: 0em;
    text-decoration: none;
    font-size: 1.0em;
    font-weight: 500;
}

.topnav a:hover {
	color:#9FB6BF;
	font-weight: 500;
}
.topnav a.active {
	font-weight: 500;
  	color: #9FB6BF;
}
.topnav .icon {
  display: none;
}

/*============ Grafik, Bild, Film ================*/

.slider-container {
	max-width:400px;
}

.slider img {
  max-width: 100%;
  height: auto;
}

.partnerlogo img {
	max-width: 100%;
	height: auto;
}

.footer img {
	margin-right:2em;
}


/*===================== Breakpoints =====================*/				

/* Header-Bild+Text*/

@media only screen and (min-width: 700px) {

.site-header {
	background: url("../images/landschaft.jpg");
	height: 50%;
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
  	position: relative;
	overflow: hidden;
	}
.site-header .container {
	width:100%;
	margin:0 auto;
	height: 300px;
	}
.header-ok-logo {
	width: 100%;
	height: auto;
	position: relative;
	margin-top: 0px;
	padding-top: 0px;
	}

.header-ok-logo img {
	width: 100%;
	height: auto;
	position: relative;
	overflow: hidden;
	padding-left: 20%;
	padding-top: 0px;
	padding-bottom: auto;
	padding-right: auto;
	}

}

@media only screen and (min-width: 1500px) {
	.site-header .container {
	width:100%;
	margin:0 auto;
	height: 400px;
	}
	.header-ok-logo {
	width: auto;
	height: 100%;
	position: relative;
	margin-top: 0px;
	padding-top: 0px;
	}

	.header-ok-logo img {
	width: auto;
	height: 100%;
	position: relative;
	overflow: hidden;
	padding-left: 5%;
	padding-top: 0px;
	padding-bottom: auto;
	padding-right: auto;
	}
}


/* Navigation */

@media screen and (max-width: 700px) {
	.nav-container {
		height: 60px;
		margin-bottom:0em;
		float: right;
		margin-left: 16%;
	}
}

@media screen and (max-width: 700px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 700px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
	background-color: rgba(62,86,98,0.8);
	float: none;
	display: block;
	text-align: left;
	padding: 1.2em 1.5em 1.2em 1.5em;
	border-bottom: 1px solid #fff;	  
  }
}

@media only screen and (min-width: 900px) {

.topnav a {
    float: left;
    display: block;
    color: #fff;
    text-align: center;
    padding-top: 1.2em;
    padding-right: 1.2em;
    padding-left: 1.2em;
    padding-bottom: 0em;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: 600;
}

.topnav a:hover {
	color:#9FB6BF;
	font-weight: 600;
}
.topnav a.active {
	font-weight: 600;
  	color: #9FB6BF;
}
}

@media only screen and (min-width: 1500px) {

.topnav a {
    float: left;
    display: block;
    color: #fff;
    text-align: center;
    padding-top: 1.1em;
    padding-right: 1.2em;
    padding-left: 1.2em;
    padding-bottom: 0em;
    text-decoration: none;
    font-size: 1.2em;
    font-weight: 600;
}

.topnav a:hover {
	color:#9FB6BF;
	font-weight: 600;
}
.topnav a.active {
	font-weight: 600;
  	color: #9FB6BF;
}
}


/*footer*/

@media screen and (max-width: 600px) {
	.site-footer {
	background:#3e5662 ;
	height:auto;
	border-top:solid 3px #ae2d0f;
	}
}


/*  Grafik, Bild, Film  */


@media only screen and (min-width:700px) {
	
.slider-container {
	margin-top:2em;
	margin-left:1.5em;
}
	

li {
  list-style-type: none;
	list-style-position: outside;
	list-style-image: url("../icons/pfeil_15.png");
}

@media only screen and (min-width: 850px) {
}

}
/*  Text und Überschriften */

@media only screen and (min-width: 700px) {

.site-content-container h1 {
	font-size:2.3em;
}
.site-content-container h2 {
	font-size:1.7em;
}
.site-content-container h3 {
	font-size:1.4em;
}
.site-content-container p {
	font-size:1.2em;
    line-height: 1.6em;
}

.font_h_1 {font-size:2.3em;}
.font_h_2 {font-size:1.7em;}
.font_h_3 {font-size:1.4em;}
.font_p {font-size:1.2em;
		line-height: 1.6em;}
.pfeil {font-size:1.2em;}	
	
	
}

@media only screen and (min-width: 1200px) {

.site-content-container h1 {
	font-size:3.2em;
}

.site-content-container h2 {
	font-size:2em;
}
.site-content-container h3 {
	font-size:1.5em;
}
.site-content-container p {
	font-size:1.3em;
    line-height: 1.6em;
}
.font_h_1 {font-size:3.2em;}
.font_h_2 {font-size:2em;}
.font_h_3 {font-size:1.5em;}
.font_p {font-size:1.3em;
		line-height: 1.6em;}
.pfeil {font-size:1.3em;}	
	
	
}


/* ============ Back-To-Top Button ================ */

.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 5px;
  right: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: transparent url(../icons/cd-top-arrow.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}
.no-touch .cd-top:hover {
  background-color: transparent;
  opacity: 1;
}
/*@media only screen and (min-width: 700px) {
  .cd-top {
    right: 100px;
	bottom: 20px;
  }
}*/
/*@media only screen and (min-width: 1200px) {
  .cd-top {
    right: 50px;
  }
}*/


/* ==========================================================================
   Helper classes
   ========================================================================== 

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}*/

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    *, *:before, *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

/*#hamburger {
    display: none !important;
    visibility: hidden;
}
*/
.site-header {
	max-height:80px;
}

/*.header-text {
	position:absolute;
	top: 5%;
	right: 28%;
}
*/
a {
	text-decoration: none;
}

img {
	page-break-inside: avoid;
	max-width: 100% !important;
}

p, hi, h2, h3 {
	orphans: 3;
	widows: 3;
}

h1, h2, h3 {
	page-break-after: avoid;
}
}