@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'gudearegular';
    src: url('webfonts/gudea/gudea-regular-webfont.eot');
    src: url('webfonts/gudea/gudea-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfonts/gudea/gudea-regular-webfont.woff') format('woff'),
         url('webfonts/gudea/gudea-regular-webfont.ttf') format('truetype'),
         url('webfonts/gudea/gudea-regular-webfont.svg#gudearegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gudeabold';
    src: url('webfonts/gudea/gudea-bold-webfont.eot');
    src: url('webfonts/gudea/gudea-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfonts/gudea/gudea-bold-webfont.woff') format('woff'),
         url('webfonts/gudea/gudea-bold-webfont.ttf') format('truetype'),
         url('webfonts/gudea/gudea-bold-webfont.svg#gudeabold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gudeaitalic';
    src: url('webfonts/gudea/gudea-italic-webfont.eot');
    src: url('webfonts/gudea/gudea-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfonts/gudea/gudea-italic-webfont.woff') format('woff'),
         url('webfonts/gudea/gudea-italic-webfont.ttf') format('truetype'),
         url('webfonts/gudea/gudea-italic-webfont.svg#gudeaitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'courier_primebold_italic';
    src: url('webfonts/courier/courier_prime_bold_italic-webfont.eot');
    src: url('webfonts/courier/courier_prime_bold_italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfonts/courier/courier_prime_bold_italic-webfont.woff') format('woff'),
         url('webfonts/courier/courier_prime_bold_italic-webfont.ttf') format('truetype'),
         url('webfonts/courier/courier_prime_bold_italic-webfont.svg#courier_primebold_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'courier_primebold';
    src: url('webfonts/courier/courier_prime_bold-webfont.eot');
    src: url('webfonts/courier/courier_prime_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfonts/courier/courier_prime_bold-webfont.woff') format('woff'),
         url('webfonts/courier/courier_prime_bold-webfont.ttf') format('truetype'),
         url('webfonts/courier/courier_prime_bold-webfont.svg#courier_primebold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'courier_primeitalic';
    src: url('webfonts/courier/courier_prime_italic-webfont.eot');
    src: url('webfonts/courier/courier_prime_italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfonts/courier/courier_prime_italic-webfont.woff') format('woff'),
         url('webfonts/courier/courier_prime_italic-webfont.ttf') format('truetype'),
         url('webfonts/courier/courier_prime_italic-webfont.svg#courier_primeitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'courier_primeregular';
    src: url('webfonts/courier/courier_prime-webfont.eot');
    src: url('webfonts/courier/courier_prime-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfonts/courier/courier_prime-webfont.woff') format('woff'),
         url('webfonts/courier/courier_prime-webfont.ttf') format('truetype'),
         url('webfonts/courier/courier_prime-webfont.svg#courier_primeregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

*::-moz-selection {
	color:#FFF;
    background-color: #0994C0;
}
*::selection {
	color:#FFF;
    background-color: #0994C0;
}


body {
	margin:0;
	font-family: 'gudearegular', Helvetica, Arial, sans-serif;
	font-size:16px;
}

p{
	margin:0 0 10px 0;
	line-height: 22px;
}

h1, h2, h3{
	font-family: 'courier_primeitalic', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', Monaco, 'Courier New', monospace;
	color:#0994c0;
	margin:0;
	font-weight:normal;
	clear:both;
}

h1{
	color:#024d62;
	font-size:34px;
	padding-top: 17px;
}
h2{
	font-size:26px;
	margin-bottom: 10px;
	padding-top: 15px;
}

h1 + h2{
	padding-top: 0px;
	padding-bottom: 10px;
}
h3{
	font-size:18px;
	margin: 20px 0 3px;
}

h4{
    margin-bottom: 0;
	font-weight:normal;
	font-family: 'gudeabold', Helvetica, Arial, sans-serif;
}

em {
	font-style:normal;
	font-family: 'gudeaitalic', Helvetica, Arial, sans-serif;
}

strong {
	font-weight:normal;
	font-family: 'gudeabold', Helvetica, Arial, sans-serif;
}

a {
	color:#024d62;
}

.rot{
	color:#FF0004;
	font-weight:bold;
	font-size:18px;
}

.courier{
	font-family: 'courier_primeregular', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', Monaco, 'Courier New', monospace;
}
.courier-italic{
	font-family: 'courier_primeitalic', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', Monaco, 'Courier New', monospace;
}
.courier-bold{
	font-family: 'courier_primebold', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', Monaco, 'Courier New', monospace;
}
.courier-bolditalic{
	font-family: 'courier_primebold_italic', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', Monaco, 'Courier New', monospace;
}


header{
	max-width:960px;
	margin:15px auto 25px;
	padding:0 50px 0 20px;
	overflow:auto;
}

.kopf{
	margin-left: 100px;
	max-width: 730px;
	overflow: hidden;
}

.page{
	max-width:960px;
	margin:0 auto;
	padding:0 50px 30px 20px;
	overflow:auto;
	position: relative;
}

.topleiste{
	background-color:#0994C0;
	color:#FFFFFF;
	height: 23px;
	padding:0 50px 0 20px;
}

.topleiste ul{
	margin: 0 auto;
    max-width: 960px;
    padding: 0;
    text-align: right;
}
.topleiste ul li{
	margin:0 0 0 13px;
	padding:0;
	display:inline-block;
	font-family: 'courier_primeregular', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', Monaco, 'Courier New', monospace;
	font-size: 14px;
	text-transform: uppercase;
}
.topleiste ul li a{
	text-decoration:none;
	color:#FFFFFF;
}


.logo{
	height: 175px;
	float: left;
    width: 33.33%;
	background:url(../images/logo-2x.png);
	background-size:250px 175px;
	background-position:right bottom;
	background-repeat:no-repeat;
}
.logo a{
	height: 175px;
	display:block;
}

nav ul{
	margin: 70px 0 0 0;
	padding: 0;
	color:#f28e00;
}

nav li{
	display: inline-block;
	float:left;
	font-family: 'courier_primeregular', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', Monaco, 'Courier New', monospace;
	font-size: 20px;
	line-height:18px;
	height: 57px;
	text-transform: uppercase;
	width: 33.33%;
	text-align:right;
	background-image:url(../images/icons-2x.png);
	background-position:right 11px;
	background-repeat:no-repeat;
	background-size:32px 482px;
}

nav li:hover{
	background-image:url(../images/icons-h-2x.png);
	cursor:pointer;
}

nav li div{
	float: right;
	margin: 0 0 0 15px;
}

.ico-genex{						background-position:right -39px;}
.ico-kuenstleraustausch{			background-position:right -89px;}
.ico-post{							background-position:right -139px;}
.ico-deutrans{						background-position:right -189px;}
.ico-kirche{						background-position:right -239px;}
.ico-transit{						background-position:right -289px;}
.ico-staedtepartnerschaften{		background-position:right -339px;}
.ico-gefangenenfreikauf{			background-position:right -389px;}
.ico-bahnverkehr{					background-position:right -439px;}

nav li a{
	text-decoration:none;
	color:#f28e00;
	display: block;
	height: 49px;
	padding-top:11px;
	padding-right: 49px;
}
nav li a:hover{
	color:#f4af00;
}



.start-infos{
	float:left;
	width:260px;
	min-height:200px;
}

.start-infos h2 {
	line-height: 30px;
    width: 390px;
}

.start-infos a{
	background-color: #ef7b14;
    color: #FFFFFF;
    display: inline-block;
    padding: 5px 10px 8px 10px;
    text-decoration: none;
}
.start-beschreibung a:hover{
	background-color: #f4af00;
}
.start-karte{
	width:400px;
	height:500px;
	float:right;
	background-color:#EAEAEA;
	background-size:400px 500px;
	background-image:url(../images/karte-2x.gif);
}









#sticky {
  top: 0;
	background-color:#ef790b;
	width:auto;
	margin-top: 20px;
}

.sticky {
  position: fixed;
}


#sticky a{
	background-image:url(../images/btns-2x.png);
	background-size:32px 320px;
	background-repeat:no-repeat;
	background-color:#ef790b;
	margin:0;
	border-color: #ef790b;
    border-style: solid;
    border-width: 3px 5px;
	-webkit-transition: 0.25s;
	-moz-transition: 0.25s;
	-o-transition: 0.25s;
	transition: 0.25s;
}

#sticky a:first-child{
    border-width: 5px 5px 3px;
}
#sticky a:last-child{
    border-width: 3px 5px 5px;
}

#sticky a#btn-oben{
	background-position: 0 0;
}
#sticky a#btn-text{
	background-position: 0 -32px;
}
#sticky a#btn-interview{
	background-position: 0 -256px;
}
#sticky a#btn-zeitstrahl{
	background-position: 0 -288px;
}
#sticky a#btn-zusatz{
	background-position: 0 -128px;
}
#sticky a#btn-interaktiv{
	background-position: 0 -96px;
}

#sticky label {
	color: #EF790B;
    height: 24px;
    padding: 4px 5px 0 0;
    position: absolute;
    right: 44px;
    text-align: right;
    width: 100px;
}




.hauptspalte{
	margin: 0 140px 0 45px;
}

.film {
    position: relative;
}

.film img{
	width:100%;
}

#videohinweis{
	background-image:url(../images/btn-videoplay-2x.png);
	background-size:32px 32px;
	background-repeat:no-repeat;
	background-position:9px center;
	position:absolute;
	width:calc(100% - 90px);
	display:block;
	padding: 17px 15px 13px 55px;
	bottom:0;
	color:#ef790b;
	font-family: 'courier_primeitalic', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', Monaco, 'Courier New', monospace;
	background-color:#FFFFFF;
	margin:0 10px 13px;
	line-height: 18px;
}

section{
	margin-bottom:30px;
	clear: both;
}
.seitenspalte{
	margin-right: 45px;
    position: absolute;
    right: 0;
    width: 42px;
	z-index: 100;
}
.buttons{
	position:fixed;
}
.btn{
	width:32px;
	height:32px;
	text-align:center;
	display:block;
	color:#FFFFFF;
	margin-bottom:10px;
	cursor:pointer;
}
#sticky a.active{
	background-color:#f5b014;
	border-color:#f5b014;
}
.btn:hover{
	/* opacity:0.8; */
}
.bild{
	margin:20px 0;
	display: table;
}
.bild img{
	float:left;
	margin:0 20px 5px 0;
	max-height:400px;
	max-width: 550px;
}
.bild-kleiner img{
	float:left;
	margin:0 20px 5px 0;
	max-height:280px;
	max-width: 370px;
}
.bildunterschrift{
	float:left;
	width:200px;
	font-size:13px;
	line-height:18px;
}
.quelle {
    clear: both;
    color: #808080;
    font-size: 10px;
    letter-spacing: 0.05em;
    line-height: 16px;
    text-transform: uppercase;
}

table{
	width:100%;
	border-spacing: inherit;
}
table.width-auto{
	width:auto;
}
td {
    padding: 10px;
    vertical-align: text-top;
	line-height: 22px;
}
.datum{
	width:100px;
	font-size:13px;
	padding-left: 20px;
	background-image:url(../images/tabelle-datum.gif);
	background-position:top left;
	background-repeat:no-repeat;
	image-rendering: -moz-crisp-edges;         /* Firefox */
	image-rendering:   -o-crisp-edges;         /* Opera */
	image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
	image-rendering: crisp-edges;
	-ms-interpolation-mode:nearest-neighbor;
}

.trigger{
	background-color: #92E2FA;
    color: #024d62;
    font-size: 18px;
    margin: 0;
    padding: 10px 15px;
	border-top: 1px solid #FFFFFF;
	background-image:url(../images/accordeon-pfeil-unten.png);
	background-repeat:no-repeat;
	background-position:right;
	background-size:35px 16px;
}
.trigger:hover{
	background-color:#a8e8fb;
	cursor:pointer;
}
.trigger_active{
	background-image:url(../images/accordeon-pfeil-oben.png);
}

.toggle_container{
	background-color: #cbf4ff;
    margin: 0;
    padding: 12px 30px 23px 15px;
}
.platzhalter-interaktiv{
	background-color: #92E2FA;
	height:400px;
}

.video-interview{
	width:50%;
	float:right;
}
.video-interviewfragen{
	width:50%;
	float:left;
}
.video-interview > video {
    width: 100%;
}
.video-interview a, .video-interview a:visited {
    background-color: #92E2FA;
    border-bottom: 1px solid #FFFFFF;
    display: block;
    padding: 12px 15px;
	color: #024D62;
}
.video-interview a:hover {
    background-color: #a8e8fb;
	cursor:pointer;
}

.clear{
	clear:both;
}

footer {
    margin: 0 auto;
    max-width: 780px;
    padding: 0 190px 20px 65px;
}


.kopf-mobil{
	display:none;
}

.menu-mobil-button{
	background-color: #F28E00;
    color: #FFFAFA;
    cursor: pointer;
    display: inline-block;
    float: right;
    font-size: 14px;
    letter-spacing: 1px;
    margin-top: 65px;
    padding: 10px;
    text-transform: uppercase;
}
.menu-mobil{
	border-bottom: 1px solid #D4D4D4;
    padding-bottom: 10px;
    width: auto;
}



@media (max-width: 850px) {
	.kopf {
		margin-left: 0;
	}
	section#abschnitt-interaktiv {
		display: none;
	}
	#sticky a#btn-interaktiv {
		display: none;
	}
}

/* IPAD VERTICAL */
@media (max-width: 750px) {
	.logo, nav li {
		width: 50%;
	}
	.hauptspalte {
		margin: 0 75px 0 15px;
	}
	
	.page .kopf {
		display: block;
	}
	
	.start-karte {
		float: none;
		margin: 0 auto;
	}
	
	.start-infos {
		float: none;
		min-height: inherit;
		width: auto;
	}
	
	.start-infos h2 {
		width: auto;
	}
	
}

/* SMARTPHONE */
@media (max-width: 600px) {
	
	.topleiste {
		padding: 4px 19px 0 20px;
		height: 28px;
	}
	
	.topleiste ul li {
		font-size: 13px;
	}	
	.page {
		padding: 0;
		overflow: hidden;
	}
	
	.page .kopf {
		display: block;
	}
	
	.start-karte {
		background-size: 200px 250px;
		height: 250px;
		width: 200px;
	}
	
	.start-infos {
		float: none;
		min-height: inherit;
		width: auto;
	}
	
	.start-infos h2 {
		width: auto;
	}
	
	header {
		padding: 0 20px;
		overflow: inherit;
	}
	
	.logo {
		background: url("../images/logo-2x.png") no-repeat scroll left top / 150px 105px rgba(0, 0, 0, 0);
		height: 118px;
		width: 150px;
	}
	
	.kopf {
		display: none;
	}
	
	.kopf-mobil{
		display: block;
	}
	
	nav ul {
		margin: 0;
	}
		
	nav li {
		float: none;
    	width: 100%;
	}
	
	.hauptspalte {
		margin: 0;
	}
	
	.seitenspalte {
		left: 0;
		margin-right: 0;
		position: absolute;
		right: auto;
		width: auto;
	}

	#sticky {
		bottom: 0;
		margin-top: 0;
		top: auto;
		width: 100%;
		text-align: center;
		position: fixed;
		z-index: 200;
		height: 61px;
	}
	
	#sticky a, #sticky a:first-child, #sticky a:last-child{
		display: inline-block;
		margin: 0 3px;
		border-width: 5px;
	}
	
	#sticky a#btn-oben {
		background-position: 0 -224px;
	}
		
	#sticky label {
		color: #FFFFFF;
		font-size: 10px;
		height: 24px;
		margin-left: -25px;
		margin-top: 33px;
		padding: 5px 0 0;
		right: auto;
		text-align: center;
		width: 50px;
	}	
	p, h1, h2, h3, h4 {
		padding: 0 10px;
	}
	
	h1 {
		font-size: 25px;
		line-height: 24px;
		margin-bottom: 10px;
	}
	
	h2 {
		font-size: 20px;
		line-height: 22px;
	}
	
	h3 {
		font-size: 17px;
		line-height: 20px;
	}
	
	.bild img, .bild-kleiner img {
		float: none;
		max-height: none;
		max-width: none;
		width: 100%;
	}
	
	.bildunterschrift {
		width: auto;
	}
	
	table {
		padding: 0 10px;
	}	
		
	td {
		display: block;
		padding: 0 10px 20px 20px;
		background-image:url(../images/tabelle-datum-weiter.gif);
		background-position:top left;
		background-repeat:no-repeat;
		image-rendering: -moz-crisp-edges;         /* Firefox */
		image-rendering:   -o-crisp-edges;         /* Opera */
		image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
		image-rendering: crisp-edges;
		-ms-interpolation-mode:nearest-neighbor;
	}	
	.datum {
		padding-bottom: 0;
		padding-left: 20px;
		padding-top: 11px;
	}
	
	.trigger {
		padding: 10px 50px 10px 10px;
	}	
	.toggle_container {
		padding: 12px 0 23px;
	}
	
	section #abschnitt-interaktiv{
		overflow: scroll;
	}
	
	.video-interview {
		width: 100%;
	}
	.video-interview > p {
		padding: 0;
	}
	
	footer {
		padding: 0 0 60px;
		width: 100%;
		z-index: -100;
	}
}






@media print {
@import "print.css";
}