/* generic */

html {
	min-height: 100%;
	position: relative;
}

body {
	margin: 0;					/* #### Webseiten-Abstand zum Browserfenster (auch margin-top, bottom, left, right möglich)*/
	padding: 0;
	background-image: url(../../img/desktop/background.jpg);			/* #### hintergrund-bild */	
	background-color: #ffffff;								/* #### hintergrund-farbe */	
	background-attachment: fixed;
	background-position: center top;						/* #### oder: center top bottom left right */
	background-repeat: repeat;								/* #### no-repeat hier eintragen bei grossem Hintergrundbild */
	color: #000000;				/* #### Textfarbe "(Fehler)meldungen" Kontaktformular" */
	font-family: Roboto, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
	text-decoration: none;
	height: 100%;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	text-size-adjust: none;
}

/* Ueberschriften h1 - h3 */
h1 {
	color: #000000;
	font-size: 16px;
	margin: 0;
	padding: 0;
	margin-bottom: 16px;
}

h2 {
	
}

h3 {
	margin-bottom: 4px;
	padding-bottom: 0;
}

/* überschriften:	bezieht sich auf "tiniEditor" wenn dort "überschrift 1" ausgewählt wird */
div.contentColumn h1 {
	color: #000000;				/* #### Überschrift 1 "Farbe" */
	text-shadow: 0px 0px 5px rgba(0,0,0,0.4);
	font-weight: normal;	
	font-size: 24px;
	margin: 0;
	padding: 0;
	margin-bottom: 16px;
}

/* überschriften:	bezieht sich auf "tiniEditor" wenn dort "überschrift 2" ausgewählt wird */
div.contentColumn h2 {
	color: #000000;				/* #### Überschrift 2 "Farbe" */
	text-shadow: 0px 0px 5px rgba(0,0,0,0.4);
	font-weight: normal;
	font-size: 18px;
	margin: 0;
	padding: 0;
	margin-bottom: 16px;
}

a {
	color: #000000;				/* #### Textfarbe "status: normal" (verlinkter Text im Contentbereich) */
	text-shadow: 0px 0px 5px rgba(0,0,0,0.4);
	font-family: Roboto, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
	text-decoration: none;
}

a:hover   {
	color: #000000;				/* #### Textfarbe "status: hover" (verlinkter Text im Contentbereich) */
	text-shadow: 0px 0px 5px rgba(0,0,0,0.4);
	font-family: Roboto, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
	text-decoration: underline;	/* #### Textunterstreichung "hover" (verlinkter Text im Contentbereich) */
}

a:active {
	color: #000000;
	text-shadow: 0px 0px 5px rgba(0,0,0,0.4);
	font-family: Roboto, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
	text-decoration: underline;	/* #### Textfarbe "status: mausklick" (verlinkter Text im Contentbereich) */
}

div, p {
	max-height: 100000px;		/* #### "HACK" Olaf, für gleichgrosse Schrift, auch bei Android-Geräten */
}

p {
	color: #000000;				/* #### Textfarbe (normaler Text im Contentbereich) */
	text-shadow: 0px 0px 5px rgba(0,0,0,0.4);
	font-family: Roboto, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
	font-size: 1.33em;			/* #### Schriftgröße auch "27 Zeilen höher" auf dieselbe Schriftgröße einstellen */
	text-decoration: none;
	margin-top: 0;
	padding-top: 0;
}

td {
	vertical-align: top;
	color: #000000;				/* #### Textfarbe über "Kontaktformular-Eingabefelder" */
	text-shadow: 0px 0px 5px rgba(0,0,0,0.4);
	font-family: Roboto, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
	text-decoration: none;
}

form {
	margin: 0;
	padding: 0;
}

.pageWrapper {
	min-height: 100%;
	position: relative;
}

/* .upperWrapper, */
.footer {
	width: 1024px;				/* #### footer-Breite (siehe auch 13 Zeilen tiefer) */
	margin-left: auto;
	margin-right: auto;
}

.header {
	background-image: url(../../img/desktop/headerWidening.jpg);		/* #### header-Erweiterung-Bild */
	background-position: center top;
	height: 105px;				/* #### Höhe "header" (immer 2x eintragen, siehe 6 Zeilen tiefer) und gleichzeitig "Abstand Hauptmenü" von oben */
	position: relative;
	background-repeat: repeat;	/* #### no-repeat hier eintragen bei grossem Hintergrundbild */
}

.headerLogo {
	width: 1024px;				/* #### header-Breite (siehe auch 13 Zeilen höher) */
	height: 105px;				/* #### Höhe "header" (immer 2x eintragen, siehe 6 Zeilen höher) */
	margin-left: auto;
	margin-right: auto;
	background-image: url(../../img/desktop/header.jpg);
	background-repeat: no-repeat;
}

.menu {
	background-image: url(../../img/desktop/menuWidening.png);			/* #### menu-Erweiterung-Bild */
	background-position: center top;
	background-repeat: repeat;	/* #### no-repeat hier eintragen bei grossem Hintergrundbild */
	width: 100%;
}
								/* #### WEBSEITEN-ABSTÄNDE */
.content {						
	min-height: 0px;			/* #### Bereich Unterkante Hauptmenü bis Oberkante Fußzeile */
	padding-top: 0px;			/* #### Abstand von oben (ausgehend von Hauptmenü) */
	padding-left: 0px;			/* #### Abstand von links */
	padding-bottom: 400px;		/* #### Höhe "footer"  2x eintragen, siehe 9 Zeilen tiefer, außerdem "padding-top" 4 Zeilen tiefer anpassen  */
}

.footer {
	padding-top: 372px;			/* #### Textzeile im "footer" Abstand von oben */
	padding-left: 0px;			/* #### Textzeile im "footer" Abstand von links */
	padding-right: 0px;			/* #### Textzeile im "footer" Abstand von rechts */
	background-image: url(../../img/desktop/footer.jpg);		/* #### footer-Bild */
	background-repeat: repeat-y;
	height: 400px;				/* #### Höhe "footer"  2x eintragen, siehe 9 Zeilen höher, außerdem "padding-top" 5 Zeilen höher anpassen  */
	color: #ffffff;				/* #### Farbe Trennstriche und gleichzeitig Farbe "webdesign by" (siehe auch 15Zeilen tiefer!) */
	font-size: 0.75em;			/* #### Schriftgröße innerhalb der Fußzeile */
	position: relative;
	box-sizing: border-box;
}

.footerWrapper {
	position: absolute;
	width: 100%;
	bottom: 0px;
	left: 0;
	background-image: url("../../img/desktop/footerWidening.jpg");			/* #### footer-Erweiterung-Bild */
	background-position: center top;
	background-repeat: repeat;	/* #### no-repeat hier eintragen bei grossem Hintergrundbild */
}

.footerWrapper a {
	color: #ffffff;				/* #### Textfarbe "footer" (siehe auch 15Zeilen höher!) */ 
}

.footerLinks {
	float: left;
	margin-right: 65px;			/* #### Abstand der "socials" von links (Abstand der "Menüzeile" in "footer.tpl" einstellen) */
}

.footerLinks a {
	margin: 0 10px;				/* #### Abstände zwischen Text und Trennstrichen */
}

.footerCopyright {
	float: right;				/* #### copyright-text links/rechts */
}

.socialLinks {
	display: inline-block;
	margin-top: -10px;			/* #### "socials" Position "Höhe" */
}

.socialFacebook {
	/* #### socialFacebook position */
	background-image: url(../../img/desktop/socialFacebookInactive.jpg);	/* #### "social-Logo" Facebook */
	width: 32px;
	height: 32px;
	float: left;
}
.socialFacebook:hover {
	background-image: url(../../img/desktop/socialFacebookActive.jpg);
}

.socialTwitter {
	/* #### socialTwitter position */
	background-image: url(../../img/desktop/socialTwitterInactive.jpg);	/* #### "social-Logo" Twitter */
	width: 32px;
	height: 32px;
	float: left;
}
.socialTwitter:hover {
	/* #### socialTwitter position */
	background-image: url(../../img/desktop/socialTwitterActive.jpg);
}

.socialGoogle {
	/* #### socialGoogle position */
	background-image: url(../../img/desktop/socialGoogleInactive.jpg);		/* #### "social-Logo" Youtube */
	width: 32px;
	height: 32px;
	float: left;
}
.socialGoogle:hover {
	/* #### socialGoogle position */
	background-image: url(../../img/desktop/socialGoogleActive.jpg);
}

/* newsdesign hauptbild hintergrundfarbe */
body.popup {
	background-image: url(../../img/desktop/verlauf-newsbild.jpg);
	text-align: center;
}
/* newsdesign hauptbild umrandung */
body.popup img {
	border: 1px solid #000000;
}
/* newsdesign hauptbild hover umrandung */
body.popup img:hover {
	border: 1px solid #ffffff;
	cursor: pointer
}

/* untermenü position + abstand nach rechts zu tumbnail oder text (einstellungen aus früherer cms-Version) */
div.naviColumn {
	margin-top: 0px;
	margin-left: 0px;
	width: 133px;
	float: left;
	margin-right: 7px;
	overflow: hidden;
}





/* Kontaktform */

.contactForm .contentColumn {
	width: 776px;
	margin-left: auto;
	margin-right: auto;
}



/**** Adressblock und impressumLink ****/

/* adressblock links und rechts*/
a.mailLinkFarbe:hover {
	color: #ff0000;
	text-decoration: underline;
}

a.linkFarbe:hover {
	color: #ff0000;
	text-decoration: underline;
}

/* adressblock 3fach */
div.addressBlock p {
	margin: 0;
	padding: 0;
	margin-bottom: 4px;
	font-size: 12px;
}

div.addressLeft {
	float: left;
	width: 170px;
	margin-right: 20px;
}

div.addressRight {
	float: left;
	width: 150px;
}

div.addressRight a {
	color: #03459d;
}

div.addressRight a:hover {
	color: #03459d;
	text-decoration: underline;
}

div.addressBottom {
	margin-top: 20px;
}

div.addressBottom p {
	text-align: justify;
}

.thumbsTable {
	border-spacing: 0;
}

a.impressumLink {
	color: #000000;
	font-family: Roboto, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
	text-decoration: none;
}

a.impressumLink:hover {
	color: #000000;
	font-family: Roboto, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
	text-decoration: underline;
}


.imageLink {
	margin-right: auto;
	margin-left: auto;
	display: block;
	width: 150px;
	height: 40px;
	background-size: cover; /* oder: contain */
}

.linkImg1 {
	background-image: url("../../img/desktop/button-01-normal.gif");
	/*
	position: absolute;
	top: -1100%;
	left: 65%;
	*/
	display: inline-block;
	width: 75px;
	height: 20px;
}

.linkImg1:hover {
	background-image: url("../../img/desktop/button-01-hover.gif");
	text-decoration: none;
}

.linkImg1:active {
	background-image: url("../../img/desktop/button-01-klick.gif");
	text-decoration: none;
}


.linkImg2 {
	background-image: url("../../img/desktop/button-02-normal.gif");
	/*
	position: absolute;
	top: -850%;
	left: 65%;
	*/
	display: inline-block;
	width: 75px;
	height: 20px;
}

.linkImg2:hover {
	background-image: url("../../img/desktop/button-02-hover.gif");
	text-decoration: none;
}

.linkImg2:active {
	background-image: url("../../img/desktop/button-02-klick.gif");
	text-decoration: none;
}

.galerie-01, .galerie-02, .text-01, .text-02, .lightbox-01, .lightbox-02 {
	background-repeat: no-repeat;
}

.emptypage {
	background-image: url(../../img/desktop/emptypage.jpg);
}

img.thumb {
	transition-duration: 0.3s;
	transition-timing-function: ease-in-out;
	transform: scale(1);
}

img.thumb:hover {
	transition-duration: 0.03s;
	transition-timing-function: linear;
	transform: scale(0.9);
/*	filter: blur(1px); */
}

/*
img.thumb {
	transition-duration: 0.5s;
	transition-timing-function: ease-in-out;
	transform: rotateY(0deg);
}

img.thumb:hover {
	transition-duration: 0s;
	transition-timing-function: linear;
	transform: rotateY(360deg);
	filter: blur(1px);
}
*/

/* 2018-01-05 */

/*
.upperWrapper .galerie-01, 
.upperWrapper .galerie-02, 
.upperWrapper .text-01, 
.upperWrapper .text-02, 
.upperWrapper .lightbox-01, 
.upperWrapper .lightbox-02 {
	margin-left: auto;
	margin-right: auto;
	width: 1004px;
}

.upperWrapper .galerie-02,
.upperWrapper .text-02 {
	width: 1024px;
}
*/


/* Fixierte Navi am oberen Rand */

#fixed-nav {
	position: fixed;
	width: 100%;
	top: -70px;
	opacity: 0;
	z-index: 1000;
	background-image: url(../../img/desktop/miniBanner.png);
	background-repeat: repeat-x;
}

#fixed-nav-inner {
	margin-left: auto;
	margin-right: auto;
	width: 1024px;
}

#fixed-nav ul, #fixed-nav li {
	display: inline;
}

#fixed-nav ul {
	display: inline-block;
	margin: 30px;
	padding: 0;
}

#fixed-nav li {
	margin-right: 50px;
}

#fixed-nav li a {
	text-decoration: none;
	color: #2a4cb0;
}

#fixed-nav li a.current, #fixed-nav li a:hover {
	color: #000000;
}

#fixed-nav li a:active {
	color: #000000;
}


/* header - absolute Positionierung, Ueberlagerung */

#module1001 {
	position: absolute;
	z-index: 101;
	top: 0px;				/* bottom: 0; */
	left: 0;
	right: 0;
	margin: auto;
}

#module1002 {
	position: absolute;
	z-index: 102;
	top: 0px;				/* bottom: 0; */
	left: 0;
	right: 0;
	margin: auto;
}

#module1003 {
	position: absolute;
	z-index: 103;
	top: 0px;				/* bottom: 0; */
	left: 0;
	right: 0;
	margin: auto;
}

#module1004 {
	position: absolute;
	z-index: 104;
	top: 0px;				/* bottom: 0; */
	left: 0;
	right: 0;
	margin: auto;
}

#module1005 {
	position: absolute;
	z-index: 105;
	top: 0px;				/* bottom: 0; */
	left: 0;
	right: 0;
	margin: auto;
}

#module1006 {
	position: absolute;
	z-index: 106;
	top: 0px;				/* bottom: 0; */
	left: 0;
	right: 0;
	margin: auto;
}


/* footer - absolute Positionierung, Ueberlagerung */

#module1007 {
	position: absolute;
	z-index: 107;
	bottom: 50px;			/* top: 0; */
	left: 0;
	right: 0;
	margin: auto;
}

#module1008 {
	position: absolute;
	z-index: 108;
	bottom: 50px;			/* top: 0; */
	left: 0;
	right: 0;
	margin: auto;
}

#module1009 {
	position: absolute;
	z-index: 109;
	bottom: 50px;			/* top: 0; */
	left: 0;
	right: 0;
	margin: auto;
}


#module1010 {
	position: absolute;
	z-index: 110;
	bottom: 50px;			/* top: 0; */
	left: 0;
	right: 0;
	margin: auto;
}

#module1011 {
	position: absolute;
	z-index: 111;
	bottom: 50px;			/* top: 0; */
	left: 0;
	right: 0;
	margin: auto;
}

#module1012 {
	position: absolute;
	z-index: 112;
	bottom: 50px;			/* top: 0; */
	left: 0;
	right: 0;
	margin: auto;
}


/* absolute Positionierung, Ueberlagerung */
/*
#module552 {
	position: absolute;
	z-index: 100;
	top: 0px;			*/	/* bottom: 0; */	/*
	left: 0;
	right: 0;
	margin: auto;
}

#module551 {
	position: absolute;
	z-index: 100;
	bottom: 240px;		*/	/* top: 0; */	/*
	left: 0;
	right: 0;
	margin: auto;
}	
*/

/* Circle counter */

.progressContainer {
	text-align: center;
}

.progress {
	height: 250px;
	width: 250px;
	display: inline-block;
	position: relative;
}

.progress .label {
	position: absolute;
	bottom: 0;
	width: 100%;
	text-align: center;
}

/* Prozentangabe in Kreis */
.progressPercent {
	font-size: 30px;
	font-weight: normal; 
	top: 45%;
	font-family: Roboto, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
}

.progress > svg {
	height: 90%;
	display: block;
}

#progress2 {
	margin-left: 80px;
	margin-right: 80px;
}