/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */
/*
colors
weiss: #fff;
orange: #fb9735;
stardust_hell: #444349;
stardust_dunkel: #2c2b31;
schwarz oben/unten: #000410;
hellgrau: #999; oder heller: #aeabab; oder dunkler:#666;
*/
/************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**************/


body {
	background: #444349;
	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;
}

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

.site-header {
	background:#2c2b31 url(../bilder/stardust_dunkel.png) repeat-x;
	height:210px;
	padding-bottom:1em;
}

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

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

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

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

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

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


.site-content-container {
	background:#444349 url(../bilder/stardust_hell.png) repeat;
}

.container-grau {
	background:#444349;
}

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

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

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

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

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

.site-footer {
	background:#000410 url(../bilder/footer_bg.png) top repeat-x;
	height:auto;
}


/*========== 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: 'Courier New', Courier, monospace;
	font-weight: 700; 
	font-style: normal;
}

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

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

h3 {font-weight: 400; 
	font-size:1.2em;
	color:#fb9735;
	line-height:1.2em;
    margin-bottom:0.4em;
}

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

.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: 'Source Sans Pro', Arial, Helvetica, sans-serif;
				font-weight:700;
				font-style:normal;}
a {
	text-decoration:none;
	color:#aeabab;
	cursor:pointer;
	font-weight:400;
}

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

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

.header-text {
	position:absolute;
	top: 15%;
	right: 25%;
}

.header-text-lang {
	right: 15%;
}

.header-text h2{
	font-size:1.7em;
	line-height:1.2em;
}

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

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

.footer p {
	color:#aeabab;
	}

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

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

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

nav {
	margin-bottom:0.5em;
}

#site-nav {
	list-style:none;
	padding:0;
}

.js #site-nav {
	display:none;
}

#site-nav li {
	padding:0.5em 0;
	float:left;
	width:100%;
	text-align:center;
    display: block;
    background: #000410;
	border-top:#444349 1px solid;
}

#site-nav a {
	display:block;
	color:#aeabab;
	padding:.7em 1.5em .6em 1.5em;
}

#site-nav a:hover {
	color:#fff;
}

#hamburger, #hamburger:hover, #hamburger:active, #hamburger:visited {
    padding:1em 0;
	float:left;
	width:100%;
	text-align:center;
	color:#aeabab;
    display: block;
    background: #000410;
	border-top:#444349 1px solid;
	cursor: pointer;
}

h1.logo {
	padding:.7em 0;
	float:left;
	width:100%;
	text-align:center;
	font-size: 1.7em;
    display: block;
    background: #000410;
	border-bottom:#444349 1px solid;
	line-height:1em;
    margin-bottom:0;
}

h1.logo a{
	color:#fb9735;
	font-weight:700;
}

h1.logo a:hover{
	color:#fff;
}			

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

.image, .image-text {
  text-align: center;
  margin-top:0.5em;
}

.image-text a {
	font-size:1.2em;
}

.image img {
  max-width: 40%;
  height: auto;
}

.sponsor, .sponsor-text {
  text-align: center;
  margin-top:0.5em;
}

.sponsor-text a {
  text-align: center;
  margin-top:0;
}

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

.sponsorA, .sponsorA-text {
  text-align: center;
  margin-top:0.5em;
}

.sponsorA-text p {
  margin-bottom:2em;;
}

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

.partner {
  text-align: center;
  margin-bottom:2em;
}

.partner img {
  max-width: 40%;
  height: auto;
}

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

.video-container {
	max-width:560px;
}

.kfws img {
  max-width: 100%;
  height: auto;
}
				
/*===================== Breakpoints =====================*/				

/* Header-Bild+Text*/

@media only screen and (min-width: 360px) {
	
.header-text {
	position:absolute;
	top: 15%;
	right: 32%;
}

.header-text-lang {
	right: 20%;
}

}

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

.site-header {
	height:420px;
}

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

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

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

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

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

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


.header-text {
	position:absolute;
	top: 12%;
	right: 34%;
}

.header-text-lang {
	right: 32%;
}


.header-text h2{
	font-size:3.2em;
	line-height:1.3em;
}

}

/* Navigation */

@media only screen and (min-width:450px) {
	
.js #site-nav {
	display:block;
}

#site-nav {
	float:left;
	margin:0 auto;
	position:relative;
	left:50%;
}


#site-nav li {
	float:left;
	width:auto;
	border-top:0;
	position:relative;
	right:50%;
}
	
#hamburger {display:none;}
	
}

@media only screen and (min-width:800px) {
	
.nav-title-container {
	width:50%;
	float:left;
}

.nav-container {
	width:50%;
	float:right;
}

h1.logo {
	text-align:left;
	border-bottom:none;
	padding-left:0.7em;
}

.site-nav {
	padding-top: 0.7em;
}

#site-nav {
	left:auto;
	right:0.7em;
	float:right;
}

#site-nav li {
	right:auto;
	padding-top:0.8em;
    padding-bottom:0.2em;
}
	
}

/*  Grafik, Bild, Film  */

@media only screen and (min-width:470px) {
	
.image {
    float: left;
    width: 40%;
	text-align:right;
	margin-top:1em;
}

.image img {
  max-width: 60%;
}


.image-text {
    float: right;
    width: 50%;
	text-align:left;
	margin-top:1em;
}	

.image-text a {
	line-height:3em;
}

.sponsor {
	text-align:right;
	float:left;
	width:40%;
	margin-right:5%;
	margin-left:5%;
	margin-bottom:3em;
}

.sponsor-text {
	text-align:left;
	float:left;
	width:50%;
}

.sponsor-text p {
  margin-top:1em;
}

.sponsorA img {
  max-width: 60%;
}

.partner {
  text-align:right;
  width:45%;
}

.partner img {
  max-width: 50%;
}


}

@media only screen and (min-width:700px) {
	
.image {
    width: 100%;
	text-align:center;
}

.image img {
  max-width: 60%;
}


.image-text {
    float: left;
    width: 100%;
	text-align:center;
}	

.image-text a {
	line-height:3em;
}

.sponsor, .sponsor-text {
  text-align: left;
  clear:both;
  width:90%;
  margin:0.5em 0 0 0;
}

.sponsorA, .sponsorA-text {
	text-align:left;
}

.sponsorA-text p {
  margin-bottom:3em;
}

.sponsorA img {
  max-width: 70%;
}

.partner {
  text-align:left;
  width:100%;
}

.partner img {
  max-width: 50%;
}

}


@media only screen and (min-width: 850px) {
	
.sponsor img {
  max-width: 80%;
}
	
}


/*  Text und Überschriften */

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

.site-content-container h1 {
	font-size:2.6em;
}
.site-content-container h3, h2 {
	font-size:1.7em;
}

}

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

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

.site-content-container h3, h2 {
	font-size:2em;
}

.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;
    }
}