/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */
/*
colors
weiss: #fff;
schwarz: #001523;
hellblau: #98bce4;
blau: #007bc2;
braun: #726a62;
beige: #999088;
*/
/************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**************/


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


body {
	background: #726a62;
	color: #fff;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 100%;
	line-height: 1.4em;
	padding: 0;
	-webkit-text-size-adjust: none;
}

/* Seitenaufbau */

.site-nav {
	background:#000410 url(../bilder/nav_bg.png) bottom repeat-x;
	height: 64px;
}

.site-nav .container,.site-nav .columns {
	padding:0;
}

.site-header {
	background:url(../bilder/hg_header-klein.jpg) top repeat-x;
	height:210px;
	padding-bottom:1em;
}

.site-header .container {
	width:100%;
	margin:0 auto;
}

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

.header-ok-logo img {
	max-width: 100px;
	height: auto;
}


.site-content-container {
	background:#726a62;
	border-top:solid 3px #007bc2;
}

.container-grau {
	background:#726a62;
}

.site-content {
	background:#726a62;
	padding-top:1em;
	padding-bottom:1em;
}

.trennlinie_u {
	border-bottom:solid 1px #fff;
}

.trennlinie_o {
	border-top:solid 1px #fff;
}

.trennlinie_u_c {
	border-bottom:solid 1px #98bce4;
}

.trennlinie_o_c {
	border-top:solid 1px #98bce4;
}

.site-footer {
	background:#726a62 url(../bilder/footer_bg.png) top repeat-x;
	height:auto;
	border-top:solid 2px #007bc2;
}


/*========== 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:-1em;
}

.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: "Century Gothic", Verdana, Geneva, sans-serif;
	font-weight: 300; 
	font-style: normal;
}

h1 {font-size:1.7em;
	color:#007bc2;
	line-height:1.2em;
    margin-bottom:0.4em;
}

h2 {font-size:1.3em;
	color:#98bce4;
	line-height:1.2em;
    margin-bottom:0.4em;
}

h3 {font-size:1.1em;
	color:#fff;
	line-height:1.2em;
    margin-bottom:0.4em;
}

h1.abstand,  h2.abstand {
	margin-top:0.5em;
}
h3.abstand {
	margin-top:2em;
}

.source_l {font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
				font-weight:300;
				font-style:normal;}
/*.source_l_i {font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
				font-weight:300;
				font-style:italic;}*/
.source_r {font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
				font-weight:400;
				font-style:normal;}
/*.source_r_i {font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
				font-weight:400;
				font-style:italic;}
.source_b {font-family: 'Prompt', Arial, Helvetica, sans-serif;
				font-weight:700;
				font-style:normal;}*/
a {
	text-decoration:none;
	color:#98bce4;
	cursor:pointer;
	font-weight:400;
}

a:hover, a:active, a:focus {
	text-decoration:none;
	color:#fff;
}

#site-nav a.activ {
	color:#fff;
}


p {
	font-size:1em;
    margin-bottom:1em;
	color:#fff;
}

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

.footer p {
	color:#98bce4;
	}

.footer a {
	font-size:1.2em;
	}

/*============ Navigation ================*/


.nav-container {
	margin-bottom:0.5em;
	float:right;
}

nav {
	margin-bottom:0.5em;
}

#site-nav {
	list-style:none;
	padding:0.7em 0 0 0;
	left:auto;
	right:0.7em;
	float:right;
	margin:0 auto;
	position:relative;
	display:block;
}

#site-nav li {
	padding:0;
	float:left;
	width:auto;
	border:0;
	position:relative;
	right:auto;
	background-color:transparent;
	background-image:url(../bilder/trans.gif);
}

#site-nav a {
	display:block;
	color:#fff;
	padding:1em 1.5em 0em 1.5em;
}

#site-nav a:hover {
	color:#98bce4;
}


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

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

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


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


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

/* Header-Bild+Text*/


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

.site-header {
	background:url(../bilder/hg_header.jpg) top repeat-x;
	height:420px;
}

.site-header .container {
	max-width:1400px;
	margin:0 auto;
}

.header-bild {
	background:url(../bilder/header.jpg) top no-repeat;
	width:1400px;
	height:420px;
	position:relative;
}

.header-ok-logo {
	max-width: 960px;
	height: auto;
}

.header-ok-logo img {
	max-width: 200px;
	height: auto;
}

}

/* Navigation */

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

/*  Grafik, Bild, Film  */

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

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


/*  Text und Überschriften */

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

.site-content-container h1 {
	font-size:2.6em;
}
.site-content-container h2 {
	font-size:1.7em;
}
.site-content-container h3 {
	font-size:1.3em;
}
.site-content-container p {
	font-size:1.1em;
    line-height: 1.3em;
}

}

@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.2em;
    line-height: 1.4em;
}

}


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

.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 15px;
  right: 10px;
  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: 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;
}

}