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

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

}
@font-face {
    font-family: 'droid_sansbold';
    src: url('DroidSans-Bold-webfont.eot');
    src: url('DroidSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('DroidSans-Bold-webfont.woff') format('woff'),
         url('DroidSans-Bold-webfont.ttf') format('truetype'),
         url('DroidSans-Bold-webfont.svg#droid_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;

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

}

/*Tester für maximale Breite für jquery
ist bei max 768 10px; wird mit =="20px" abgefragt*/
.maxBreite{
	font-size: 20px;
}
.Tester1000{
	font-size: 20px;
}
	
/*Body-Schriftart, Zeile 902, aus bootstrap-css rausgenommen*/
body {
	font-family: 'droid_sansregular', sans-serif;
	/*font-family: 'Asap', sans-serif;*/
	/*font-family: "Gudea";*/
	font-weight: 400;
	font-style: normal;
	font-size: 14px;
	line-height: 1.42857143;
	color: #333;
	background-color: #fff;
}

/*den zuletzt angeklickten Anker einfärben und den Link der aktuellen Seite einfärben im .js
andere Linkeigenschaften hier*/
a{
	text-decoration: none;
	color: #666;
}
a:hover, a:active, a:focus{
	text-decoration: none;
}
a:focus{
	outline: none;
}
.Klammer a{
	background: #fff;
}
.Klammer a:hover{
	color: #000;
}
/*Logo links soll keine Farbeänderung bei :hover haben*/
.Logotext a:hover, .Logosub a:hover{
	color: #666;
}
/*andere Farben bei Links in der Fussleiste*/
.unten_Inhalt a{
	color: #fff;
}
.unten_Inhalt a:hover{
	color: #aaa;
}
.Detail_Head a{
	color: #000 !important;
}
.row_Titel{
	margin-left: 0px;
	margin-right: 0px;
}
.Head_Titel{
	font-size: 26px; 
	color:#666; 
	margin-top: 30px; 
	text-align:center;
}
.Bild_Artikel{
	width: 100%;
	height: auto;
	margin-top: 4px;
}
.Rahmen_Hoehe{
	clear: both;
	float: left;
	width: 100%;
	min-height: 100%;
}
.Klammer{
	clear: both;
	float: left;
	width: 100%;
	/*background: #fff;*/
	/*border: solid 1px #ddd;*/
}
.Menue_fixed{
	position: fixed;
	/*position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;*/
	top: 0px;
}
.Logotext{
	padding-bottom: 0px;
	float: left;
	color: #666;
	/*font-weight: 700;*/
	font-size: 26px;
	background: #fff;
/*	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;*/
}
.Logosub{
	clear: both;
	float: left;
	margin-top: -2px;
	/*letter-spacing: 0.4px;*/
}
.aussen{
	max-width: 1240px;
	/*background: #eee;*/
	margin: 0px auto;
	position: relative;
}
.Kopf{
	width: 90%;
	/*background: #ddd;*/
	margin-left: 5%;
	position: relative;
	height: 78px; /*etwas höher als das Logo*/
	background: #fff;
	border-bottom: 2px solid #666;
}
/*.Kopf::before {*/
.Kopf_Schatten {
	width: 86%;
	top: 56px;
	bottom: 0px;
	left: 7%;
	height: 20px;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.6);
	border-radius: 100% / 20px;
	position: absolute;
}
.Bild_oben{
	clear: both;
	float: left;
	width: 100%;
	height: 150px;
	background: #fff;
}
.Bild_oben_Seiten{
	clear: both;
	float: left;
	width: 100%;
	height: 90px;
	background: #fff;
}
.Bild_oben img{
	width: 100%;
	height: auto;
}
.mitte, .unten_Inhalt{
	width: 90%;
	/*background: #bbb;*/
	margin-left: 5%;
}
.unten{
	position: relative
	clear: both;
	float: left;
	width: 100%;
	background: #666;
}
.unten_Inhalt{
	font-size: 12px;
	color: #fff;
}
.unten_Container{
	width: 25%;
	float: left;
	margin-top: 15px;
	margin-bottom: 15px;
}
.Menue_Rahmen{
	position: absolute;
	right: 0px;
	top: 0px;
}
.frtar{
	float: right;
	text-align: right;
}

.Projekte_Head_oben{
	font-size: 186%;
	color:#666;
	padding-top: 15px;
	padding-bottom: 15px;
	float: left;
	width: 100%;
}
.Projekte_Head{
	font-size: 186%;
	color:#666;
	padding-top: 25px;
	padding-bottom: 15px;
	border-top: 1px solid #bbb;
	float: left;
	width: 100%;
}
.kU{
	white-space: nowrap;
}
.hellgrau{
	background: #eee;
}

/*row 4 Spalten*/
.Box_4sp_Head{
	background:#bbb;
}
.col-sm-4, .col-xs-6{
	border-right: 1px solid #bbb;
	margin-bottom: 15px;
}
.Box_4sp_Bild img{
	width: 100%;
	height: auto;
}
.keine_Linie{
	border-right: 0px;
}

@media (min-width: 993px){
.keine_Linie_4_Spalten{
	border-right: 0px;
}
}
/*Ende row 4 Spalten*/


/*row 6 Spalten*/
.col-md-2, .col-sm-3, .col-xs-4{
	border-right: 1px solid #bbb;
	margin-bottom: 10px;
}
.Box_6sp_Bild{
	margin-top: 5px;
}
.Box_6sp_Bild img{
	width: 100%;
	height: auto;
}

@media (min-width: 993px){
.r6_keine_Linie_6_Spalten{
	border-right: 0px;
}
}
/*Ende row 6 Spalten*/


/*für Slider (.Detail_Beschr wird auch anderswo verwendet)*/
.Detail_Head{
	color: #666;
}
.Detail_Beschr{
	font-size: 80%;
	/*line-height: 1.2;*/
	margin-top: 5px;
}
/*wenn ein Slider keine Buttons haben soll*/
.keine_Buttons .bx-wrapper .bx-controls{
	display: none; /*statt block*/
}
/*wenn ein Slider keine Pfeile vor/zurück haben soll*/
.keine_Buttons .bx-wrapper .bx-next, .keine_Buttons .bx-wrapper .bx-prev{
	display: none; /*statt block*/
}
/*Abstand nach unten, wenn die Punkte wegfallen*/
.keine_Buttons .bx-wrapper{
	margin-bottom: 20px; /*statt 60 px*/
}
.icongroesse{
	font-size: 161.5px;
}
.bx-viewport{
	height: auto !important; /*sonst stehen die Buttons zu tief*/
}
.Farbe1{
	background: #e61857;
	text-align: center;
}
.Farbe2{
	background: #0d91e4;
	text-align: center;
}
.Farbe3{
	background: #f89b17;
	text-align: center;
}
.Farbe4{
	background: #29a399;
	text-align: center;
}
.Farbe5{
	background: #2951a3;
	text-align: center;
}
.Farbe6{
	background: #666;
	text-align: center;
}
.Farbe7{
	background: #7929a3;
	text-align: center;
}

.icontrans{
	color: #fff;
	filter: alpha(opacity = 70);
	-ms-filter: "alpha(opacity = 70)";
	opacity: .7; 
}
.bx-viewport{
	background: none !important;
}
/*Ende für Slider*/


/*Karteikarten alt*/

.schwarz {
	color: #000000;
}
.rot {
	color: red;
}
.tac {
	text-align:center;
}
.tar {
	text-align:right;
}
.va2 {
	vertical-align: 2px;
}
.fw300 {
	font-weight:300;
}
.fw400 {
	font-weight:400;
}
.mt5 {
	margin-top: 5%;
}
.mb1 {
	margin-bottom: 1% !important;
}
.mb2 {
	margin-bottom: 2% !important;
}
.mb20px {
	margin-bottom: 20px;
}
.mb40px {
	margin-bottom: 40px;
}
.mt0 {
	margin-top:0px;
}
.mt4 {
	margin-top:4px;
}
.mt10px {
	margin-top:10px;
}
.mt20px {
	margin-top:20px;
}
.mt30px {
	margin-top:30px;
}
.mt40px {
	margin-top:40px;
}
.mt15px {
	margin-top:15px;
}
.pt30px{
	padding-top: 30px;
}
.pt120px{
	padding-top: 120px;
}
.pb20px{
	padding-bottom: 20px;
}
.pb30px{
	padding-bottom: 30px;
}
.ml0 {
	margin-left: 0px;
}
.ml20 {
	margin-left: 20px;
}
.mr20 {
	margin-right: 20px;
}
.rel {
	position:relative;
}
.fn {
	float:none;
}
.f70 {
	font-size:70%;
}
.f100 {
	font-size:100%;
}
.bt1px{
	border-top: 1px solid #bbb;
}
.btno{
	border-top: none !important;
}
.bb1px{
	border-bottom: 1px solid #bbb;
}
.neunzigProzent {
	width: 90%;
	margin-right: 5%;
	margin-left: 5%;
}
.Tabelle_HL {
	text-align: center;
	color: #fff;
	background: #666;
}
.24px {
	font-size: 24px;
}
/*Ende Karteikarten alt*/


/*Karteikarten*/
.row_rel{
	position: relative;
}
.Karten{
	position: relative;
}
.Karten_Kopf{
	border-left: 1px solid #bbb;
	border-top: 1px solid #bbb;
	border-right: 1px solid #bbb;
	width: 15%;
	position: relative;
	float: left;
	height: 30px;
	margin-left: 25px;
}
.Karten_Kopf_innen{
	position: absolute;
	width: 100%;
	height: 95%;
	background: #fff;
	text-align: center;
	font-size: 120%;
	color: #666;
	padding-top: 5px;
}
.Karten_Linie, .Karten_Linie_smart{
	clear: both;
	float: left;
	width: 100%;
	height: 0px;
	border-top: 1px solid #bbb;
}
.Karten_Inhalt{
	width: 100%;
	display: none;
	clear: both;
	float: left;
	border-top: 1px solid #bbb;
	padding-top: 15px;
	background: #fff;
	margin-bottom: 15px;
	overflow: hidden;
}
.Karten_Inhalt_sichtbar{
	width: 100%;
	clear: both;
	float: left;
	padding-top: 15px;
	background: #fff;
	margin-bottom: 15px;
}
	/*Überschreibungen, wenn in Desktop- und Smartphoneversion nur Karten gewünscht sind
	Variante mit runden Ecken und farbigen Flächen*/
	.Reihe_02 .Karten_Kopf {
		width: 23%;
		border: none; /*wg. bunt*/
	}
			/*ab hier wg. bunt*/
			.Reihe_02 .Karten_Kopf_innen{
				-webkit-border-top-left-radius: 15px;
				-webkit-border-top-right-radius: 15px;
				-moz-border-radius-topleft: 15px;
				-moz-border-radius-topright: 15px;
				border-top-left-radius: 15px;
				border-top-right-radius: 15px;
				color: #fff;
				font-family: "droid_sansbold";
			}
			.Reihe_02 .Karten_Inhalt_sichtbar{
				-webkit-border-top-left-radius: 15px;
				-webkit-border-top-right-radius: 15px;
				-moz-border-radius-topleft: 15px;
				-moz-border-radius-topright: 15px;
				border-top-left-radius: 15px;
				border-top-right-radius: 15px;
				color: #fff;
			}
			.Reihe_02 .Karten_Linie{
				border: none;
			}
			.Karten_Farbe_2{
				background: #0D91E4;
			}
			.Karten_Farbe_3{
				background: #F89B17;
			}
			.Karten_Farbe_4{
				background: #29A399;
			}
			.Karten_Farbe_7{
				background: #7929A3;
			}
			.Jahreszahl{
				font-size: 58px;
				font-size: 58px;
				float: left;
				margin-right: 20px;
				filter: alpha(opacity = 70);
				-ms-filter: "alpha(opacity = 70)";
				opacity: .7;
			}
			/*Ende ab hier wg. bunt*/
	/*Ende Überschreibungen, wenn in Desktop- und Smartphoneversion nur Karten gewünscht sind*/
	
	/*Überschreibungen, wenn in Desktop- und Smartphoneversion nur Reihen gewünscht sind*/
	/*wenn die Reihen mit Reitern wie Karteikarten dargestellt werden sollen*/
	.Reihe_03 .Karten_Kopf{
		clear: both;
		float: left;
		margin-top: 10px;
		width: 15%;
	}
	.Reihe_03 .Karten_Linie{
		display: none;
	}
	.Reihe_03 .Karten_Kopf_innen{
		height: 105%;
	}
	.Reihe_03 .Karten_Inhalt{
		border-top: 0px;
	}
	/*Ende wenn die Reihen mit Reitern wie Karteikarten dargestellt werden sollen*/
		/*Überschreibungen, wenn die Reihenköpfe als lange Zeilen dargestellt werden sollen*/
			.Reihe_03 .Karten_Kopf{
				margin-top: 0px;
				margin-left: 0px;
				height: 40px;
				width: 100%;
				border-right: none;
				border-left: none;
			}
			.Reihe_03 .Karten_Kopf_innen{
				line-height: 30px;
				text-align: left;
				font-family: "droid_sansbold";
				color: #0D91E4;
				background: none;
			}
			.Reihe_03 .Karten_Kopf_innen:hover{
				color: #005f9c;
			}
			.Reihe_03 .Karten_Inhalt{
				padding-top: 0px;
				background: none;
				margin-bottom: 0px;
			}
			.Reihe_03 .Karten_Linie_smart{
				border-top: none;
			}
		/*Ende Überschreibungen, wenn die Reihenköpfe als lange Zeilen dargestellt werden sollen*/
	/*Ende Überschreibungen, wenn in Desktop- und Smartphoneversion nur Reihen gewünscht sind*/
/*Ende Karteikarten*/


/*Beginn für zoom*/
/*cursor für kleines Ausgangsbild*/
.Lupe{
/*cursor für kleines Anfangsbild
	nur für IE, für die anderen Browser im js definiert*/
	cursor: pointer;
}
.zoomlayer{
	/*zoomlayer mittig auf dem Bildschirm platzieren*/
	position: fixed;
	top: 50%;
	/*margin-top: im zoom.js definiert, da die Höhe des Layers nicht bekannt ist*/
	left: 50%;
	/*Zoombild inst 400px, das linke Lupenbild ebenfalls (=800px); + 20px Abstand zwischen den Bildern, /2 = 410px*/
	margin-left: -410px;
	/*Ende horizontal mittig*/
	padding-left: 10px;
	padding-right: 10px;
	background: #fff;
	display: none;
	-webkit-box-shadow: 10px 10px 30px rgba(0,0,0,0.1), -10px -10px 30px rgba(0,0,0,0.1);
	-moz-box-shadow: 10px 10px 30px rgba(0,0,0,0.1), -10px -10px 30px rgba(0,0,0,0.1);
	box-shadow: 10px 10px 30px rgba(0,0,0,0.1), -10px -10px 30px rgba(0,0,0,0.1);
}
.standardbild{
	width: 400px;
	height: auto;
}
.zl_BU{
	width: 400px;
	margin-top: 5px;
	margin-bottom: 5px;
}
.zl_Head{
	width: 370px; /*30px weniger wegen weg-Kreuz*/
	font-size: 130%;
	margin-top: 4px;
	margin-bottom: 5px;
}
.entfernen{
	cursor: pointer;
	position: absolute;
	top: 2px;
	right: 0px;
	background: #fff;
}
.entAbst{
	margin: 2px 5px 5px 5px;
}
.weiss{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: #fff;
	opacity: .5;
	filter:Alpha(Opacity=50);
	display: none;
	z-index: 50;
}
/*Ende für zoom*/

/*für individuelle Scrollbalken / Silbentrennung*/
.Ab_unten_1, .Ab_unten_2, .Ab_unten_3, .Ab_unten_4{
	margin-bottom: 20px;
}
.Ab_unten_1_R2, .Ab_unten_2_R2, .Ab_unten_3_R2, .Ab_unten_4_R2{
	margin-bottom: 40px;
	margin-top: 40px;
}
/*Ende für individuelle Scrollbalken / Silbentrennung*/

.einblenden{
	opacity: 0;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.weich{
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.Seitenwechsel{height: 100%;}

@media (min-width: 769px) and (max-width: 992px){
	/*row 4 Spalten*/
	.keine_Linie_3_Spalten{
		border-right: 0px;
	}
	/*Ende row 4 Spalten*/
	
	/*row 6 Spalten*/
	.r6_keine_Linie_4_Spalten{
		border-right: 0px;
	}
	/*Ende row 6 Spalten*/
	
	/*beginn für zoom*/
	.easyzoom--adjacent .easyzoom-flyout {
		left: 0px;
		margin-left: 0px;
	}
	.zoomlayer{
		margin-left: -200px;
	}
	/*Ende für zoom*/
	
	
	/*für individuelle Scrollbalken / Silbentrennung*/
	.Ab_unten_1, .Ab_unten_2{
		margin-bottom: 40px;
	}
	.Ab_unten_3_R2, .Ab_unten_4_R2{
		margin-top: 20px;
	}
	/*Ende für individuelle Scrollbalken / Silbentrennung*/
}


@media (max-width: 768px){
	/*Tester für maximale Breite für jquery*/
	.maxBreite{
		font-size: 10px;
	}
	
	/*Logo etwas kleiner*/
	.Logotext img{
		width: 190px;
		height: auto;
	}
	.Kopf{
		height: 65px;
	}
	/*Ende Logo etwas kleiner*/
	
	.Kopf_Schatten{
		top: 44px;
	}
	
	/*row 4 Spalten*/
	.keine_Linie_2_Spalten{
		border-right: 0px;
	}
	/*Ende row 4 Spalten*/
	
	/*row 6 Spalten, bei kleiner Smartphone-Ansicht kann man zwei- oder dreispaltig auswählen*/
	.r6_keine_Linie_3_Spalten, .r6_keine_Linie_2_Spalten{
		border-right: 0px;
	}
	/*Ende row 6 Spalten*/
	
	
	/*für Slider
	.keine_Linie ist die Klasse der rechten, jetzt untereinanderstehenden bootstrap-Spalte*/
	.keine_Linie{
		/*etwas mehr Abstand zum Text oben*/
		margin-top: 10px;
	}
	/*Ende für Slider*/
	
	
	/*für den unteren Balken, andere Umbrüche bei Smartphone*/
	.uC_links{
		width: 55%;
	}
	.uC_rechts{
		width: 45%;
		text-align: right;
	}
	.uC_cbfl{
		clear: both;
		float: left;
	}
	.unten_Abstand{
		margin-top: 30px;
	}
	/*Ende für den unteren Balken*/
	
	
	/*für Karteikarten, wenn responsive mit Umstellung von Karten auf Reihen (im html nur bei der ersten Kartengruppe .Reihe_01)
	wenn in Desktop und Smartphone die Reihenfunktion gewünscht ist (wie im html-Dokument bei Reihe_3), werden diese Definitionen mit Reihe_3 bei den Desktop-Stilen hinzugefügt*/
	.Reihe_01 .Karten_Kopf{
		clear: both;
		float: left;
		margin-top: 10px;
		width: 15%;
	}
	.Reihe_01 .Karten_Linie{
		display: none;
	}
	.Reihe_01 .Karten_Kopf_innen{
		height: 105%;
	}
	.Reihe_01 .Karten_Inhalt{
		border-top: 0px;
	}
		/*für Karteikarten, Abstand der Tabs zum nächsten Block vergrößern*/
		.Reihe_02, .Reihe_01{
			margin-bottom: 60px;
		}
	/*Ende für Karteikarten*/
	
	/*für zoom*/
	/*bei kleinem Smartphone das zoom-Bild nur auf 200px, damit es in jedem Fall ganz drauf ist und der entfernen-Button erreicht werden kann
	(da der zoom-Überleger mit position:fixed definiert ist, kann nicht zum entfernen-Button gescrollt werden)*/
	.standardbild{
		width: 250px; 
		height: auto;
	}
	.zl_BU{
		width: 250px;
	}
	.zl_Head{
		width: 220px;
	}
	.easyzoom--adjacent .easyzoom-flyout {
		left: 0px;
		margin-left: 0px;
	}
	.zoomlayer{
		margin-left: -125px;
	}
	/*Ende für zoom*/
	
	/*für individuelle Scrollbalken / Silbentrennung*/
	.Ab_unten_1, .Ab_unten_2, .Ab_unten_3{
		margin-bottom: 40px;
	}
	.Ab_unten_2, .Ab_unten_3, .Ab_unten_4{
		margin-top: 20px;
		margin-bottom: 20px;
	}
	/*Ende für individuelle Scrollbalken / Silbentrennung*/
}


@media (max-width: 992px){
	.Tester1000{
		font-size: 10px;
	}
	/*für Slider*/
	/*wenn der Slider beim Smartphone Buttons braucht, die bei der großen Ansicht gelöscht wurden*/
	.Buttos_Smartphone .bx-wrapper .bx-controls{
		display: block; /*statt none*/
	}
	/*wenn ein Slider wieder Pfeile vor/zurück haben soll*/
	.Buttos_Smartphone .bx-wrapper .bx-next, .Buttos_Smartphone .bx-wrapper .bx-prev{
		display: block; /*statt none*/
	}
	/*Abstand nach unten, wenn die Punkte wieder hinzukommen*/
	.Buttos_Smartphone .bx-wrapper{
		margin-bottom: 60px; /*statt 20 px*/
	}
	/*Ende für Slider*/
	
	
	/*damit das Menue bei Mobile mitscrollt*/
/*	.Menue_fixed{
		position: relative;
	}
	.Bild_oben_Seiten{
		height: 10px;
	}*/
	/*Ende damit das Menue bei Mobile mitscrollt*/
	
	
	/*größeres Ausklappmenue bei Smartphone*/
	.navbar-nav > li > a {
		line-height: 40px;
		font-size: 20px;
	}	
	.Linie_in_Hauptmenue {
		margin-top: -50px !important;
	}	
	.caret {
		margin-top: 12px;
		border-top: 15px solid;
		border-right: 15px solid transparent;
		border-left: 15px solid transparent;
		float: right;
	}
	
	/*Untermenue*/
	.Bm {
		font-size: 20px;
	}
	.navbar-nav .open .dropdown-menu > li > a {
		line-height: 40px;
	}
	/*Ende größeres Ausklappmenue bei Smartphone*/
}