/* generic */

html {
	height: 100%;
}

body {
	margin: 0;					/* #### Webseiten-Abstand zum Browserfenster (auch margin-top, bottom, left, right möglich)*/
	padding: 0;
/*	background-image: url(../../img/mobile/background.jpg);			/* #### background-Bild */
/*	background-size: 100%; */
/*	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%;
}

/* 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,01); */
	font-weight: 500;
	font-size: 26px;
	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,01); */
	font-weight: 500;
	font-size: 24px;
	margin: 0;
	padding: 0;
	margin-bottom: 16px;
}

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

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

a:hover   {
	color: #000000;				/* #### Textfarbe "hover" (verlinkter Text im Contentbereich) */
	/* text-shadow: 0px 0px 5px rgba(0,0,0,01); */
	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,01); */
	font-family: Roboto, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
	text-decoration: none;
}

p {
	color: #000000;				/* #### Textfarbe (normaler Text im Contentbereich) */
	/* text-shadow: 0px 0px 5px rgba(0,0,0,01); */
	font-family: Roboto, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
	font-size: 18px;			/* #### Schriftgröße auch "27 Zeilen höher" auf dieselbe Schriftgröße einstellen */
/*	line-height: 20px;	*/		/* #### Zeilenhöhe ggf. hier für "Contenttext" 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,01); */
	font-family: Roboto, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
	text-decoration: none;
}

form {
	margin: 0;
	padding: 0;
}

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

.upperWrapper {
	background-image: url(../../img/mobile/background.jpg);
	background-size: 100%;
	background-attachment: local;
	background-position: center top;						/* #### oder: center top bottom left right */
	background-repeat: repeat;
}

.upperWrapper, .footer {
	width: 100%;				/* #### footer-Breite (des gesamten "footer-Bereich")*/
	margin-left: auto;
	margin-right: auto;
}

.header {
	background-image: url(../../img/mobile/background.jpg);			/* #### header-Erweiterung-Bild */
	background-position: center top;
	height: auto;				/* #### Höhe "header" und gleichzeitig "Abstand Hauptmenü" von oben */
	position: relative;
}

.headerLogo {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	background-image: url(../../img/mobile/topheaderBackground.gif);
	background-repeat: repeat;
	background-position: center;
}

.headerLogo img {
	height: 0px;				/* #### topheader aktivieren: feste höhe  "height: 70px;"  --- oder --- variable bildgröße:  "width: 100%; height:100%;"  hier eintragen */
	margin-left: auto;
	margin-right: auto;
	display: block;	
}

.menu {
	background-image: url(../../img/mobile/background.jpg);			/* #### menu-Erweiterung-Bild */
	background-position: center top;
}

.menuToggleWrapper {
		
}

.menuIcon {
	width: 20px;
	height: 17px;
	display: inline-block;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url(../../img/mobile/menuOpen.gif);
}

.closeMenuIcon {
	background-image: url(../../img/mobile/menuClose.gif) !important;
}

								/* #### 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: 340px;		/* #### Höhe "footer"  2x eintragen, siehe 6 Zeilen tiefer */
}

.footer {
	padding-top: 74px;			/* #### Textzeile im "footer" Abstand von oben */
	padding-left: 16px;			/* #### Textzeile im "footer" Abstand von links */
	padding-right: 16px;			/* #### Textzeile im "footer" Abstand von rechts */
	background-image: url(../../img/mobile/footer.jpg);				/* #### footer-Bild */
	background-position: center bottom;
	height: 340px;				/* #### Höhe "footer"  2x eintragen, siehe 6 Zeilen höher (und auch 35 Zeilen tiefer, das spielt zusammen) */
	color: #ffffff;				/* #### Textfarbe "2015" "footer" */
	font-size: 10px;			/* #### Schriftgröße innerhalb der Fußzeile */
	position: relative;
	box-sizing: border-box;
}

.footerWrapper {
	position: absolute;
	width: 100%;
	bottom: 0px;
	left: 0px;
	/*
	background-image: url("../../img/mobile/footer.jpg");				/* #### footer-Erweiterung-Bild */
	background-position: center bottom;
	*/
}

.footerWrapper a {
	color: #ffffff;				/* #### Textfarbe "©" "footer" */ 
}

.upperFooter {
	padding-top: 20px;
	padding-bottom: 20px
}

.upperFooter p {
	color: #ffffff;				/* #### Textfarbe "Anfahrt" "footer" */
	font-size: 18px;
}

.mapWrapper {
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;	
}
/*
.footerMap {
	width: 100%;
	height: 30px;				/* #### Höhe "footer" im Bereich der Karte, siehe auch 35 Zeilen höher, das spielt zusammen */
/*	background-image: url(../../img/mobile/karte.gif);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}	*/

.socialLinks {
	margin-top: 0px;
	margin-bottom: 105px;
}

.socialLinks div {
	width: 33%;
	min-width: 60px;
	float: left;
	text-align: center;
}

.socialLinks img {
	width: 50px;
}

.lowerFooter {
	padding-top: 20px;
	padding-bottom: 20px;
}

.footerLinks {
	float: right;
	margin-left: 1px;			/* #### Abstand der "socialbuttons" von links */
	color: #000000;
}

.footerLinks a {
	margin: 0 10px;				/* #### Abstände zwischen Text und Trennstrichen */
	color: #ffffff;				/* #### Textfarbe "Impressum/Datenschutz" "footer" */
}

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

/* newsdesign hauptbild hintergrundfarbe */
body.popup {
	background-image: url(../../img/mobile/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;
}





/**** Kontaktformular ****/

.contactForm .contentColumn {
	width: 95%;
	margin-left: auto;
	margin-right: auto;
}

.submitBtn {
	width: 100%;
}

/**** 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;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	/* padding-top: 25px; */
	height: 0;
}

.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.galerie-01, .galerie-02, .text-01, .text-02, .lightbox-01, .lightbox-02 {
	background-repeat: no-repeat;
	background-size: 100% auto;
}

.emptypage {
	background-image: url(../../img/mobile/emptypage.jpg);
	background-size: 100%;
	background-attachment: local;
	background-position: center top;						/* #### oder: center top bottom left right */
	background-repeat: repeat;
}

.emptypage .content {
	padding-bottom: 0;
}

.emptypage .upperWrapper {
	background: none;
}

/* 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: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
	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;
}