@charset "utf-8";
/* * * * * G L O B A L E   E I N S T E L L U N G E N   A N F A N G * * * * */
/* * * * * G L O B A L E   E I N S T E L L U N G E N       E N D E * * * * */

/* ///////////////// Mobile-Formatierung - 480px Anfang ///////////////// */
#-----mobile------bis---480px----- {}

html.desktop.landscape.js.rgba.boxshadow.csstransitions body div.page div#content div#links div#leistungenKacheln div {

}


.halbeSpalte {
	width: 90%;
	float: inherit;
	margin-top: 5px;
	margin-bottom: 10px;
	margin-right: 0;
	margin-left: 5%;
	border: #ddd thin solid; 
}

#content  .halbeSpalte h2 {
	font-size: 1.2em;
	line-height: 1.1em;
	font-style: normal;
	letter-spacing: 0.07em;
	font-weight: 200;
	font-family: "Roboto", Helvetica, Arial, sans-serif;
	weidth:90%;
	color: #f00;
}

#content .halbeSpalteNotdienst   h2 {
	color: #FFFFFF;
	background-color: #CC0000;
}



#content #punkte {
	list-style-type: none;
	margin-left: 0%;
	font-size: 1em;
	font-family: "Roboto",Helvetica,Arial,sans-serif;
	line-height: 0.8em;
	letter-spacing: 0.07em;
	color: #f00;
	background: rgba(255, 255, 255, 0.8);
	margin-top: 60px;
	text-transform: uppercase;
}

#content .halbeSpalte #punkte {
	position: absolute;
	margin-left: 45%;
	margin-top: 30%;
	width: 120px;
}


div#content div#links div div.halbeSpalte ul#punkte li {
	margin-top: 5px;
	margin-right: 5%;
	margin-left: 5%;
	margin-bottom: 5px;
	font-size: 0.8em;
	color:#ccc;

}	
	

div#content div#links div div.halbeSpalte ul#punkte li#punkteHead{
color:#f00;
font-weight:bold;
letter-spacing: 0.07em;
}
div#content div#links div div.halbeSpalte ul#punkte li#punkteText {
color: #333;
}
	





div#content div#links div div.halbeSpalte ul#liste li fa.fa-smile-o{
font-family: "Roboto" Arial, Helvetica, sans-serif;
}

div#content div#links div div.halbeSpalte ul#liste li  a {
background-image:none;
margin-left:0;
padding-left:0;line-height:1em;
}

div#content div#links div div.halbeSpalte ul#liste li {
margin-top:5px;
margin-bottom:5px;
line-height:1em;
font-size:0.9em;
letter-spacing:0.07em;
}

div#content div#links div div.halbeSpalte ul#liste {
margin-top:15px;
margin-bottom:20px;
}


#content   img {
	width: 100%;
	height: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0%;
	margin-right: 0%;
	border: #ddd thin solid;
}

div.figure {
	float: left;
	width: 100%;
	height: auto;
	margin: -0em;
	margin-top: -8px;
	margin-right: 2%;
	overflow: hidden;
	padding: 0em;
	padding-bottom: 5px;
	background-position: center, center;
}

/* ------ both = Erzwingt in jedem Fall die Fortsetzung unterhalb. ------ */
.clearfloat {
	clear: both;
}

}
/* ///////////////// Mobile-Formatierung - 480px   Ende ///////////////// */




/* ! ! ! ! ! ! ! ! ! !  2. Breakpoint (von Mobile auf Tablet(1)) ! ! ! ! ! ! ! ! ! ! */
/* ///////////////////// Tablet(1)-Formatierung -> 700px Anfang ////////////////// */
#-----tablet-----bis---700px-----{}
@media only screen and (min-width:480px){

.halbeSpalte {
	width: 27%;
	float: inherit;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: 0;
	margin-left: 5%;
	border: #ddd thin solid; 
}
	#content #punkte {
	list-style-type: none;
	margin-left: 0%;
	font-size: 1em;
	font-family: "Roboto",Helvetica,Arial,sans-serif;
	line-height: 1.0em;
	letter-spacing: 0.07em;
	background: rgba(255, 255, 255, 0.8);
	margin-top: 150px;

}

#content .halbeSpalte #punkte {
	position: absolute;
	margin-left: 12%;
	margin-top: 12%;
	width: 120px;
}


div#content div#links div div.halbeSpalte ul#punkte li {
	margin-top: 5px;
	margin-right: 5%;
	margin-left: 5%;
	margin-bottom: 5px;
line-height:1em;
font-size:0.8em;
letter-spacing:0.07em;
}	
	

 div.page div#content div#links div div.halbeSpalte h2{
padding-right:3.5%;
margin-top: 10px;
}	
	
	#content   h2 img {
	float:right;
	width: 27px;
	height: 25px;
	box-shadow:none;
	border: none;
	margin-top:0px;
	margin-right:1.5%;
	position: relative;
	top:-17px;
	}
		
	

#content .halbeSpalteNotdienst #punkte {
	margin-left: 4%;
}

#content   img {
	width: 100%;
	height: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0%;
	margin-right: 0%;
	border: #ddd thin solid;
}

hr {
	color: #3399FF;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 1%;
	margin-right: 1%;
	border: none;
	border-bottom-style: dotted;
	border-bottom-width: thin;
	display: inherit;
	clear: both;
}

body div.page div#content div#links div#leistungenKacheln div div.halbeSpalte div.figure p{
margin-left: 5%;
}
}
/* ///////////////////// Tablet(1)-Formatierung -> 700px   Ende /////////////////// */

/* ! ! ! ! ! ! ! ! ! !  3. Breakpoint (von Tablet(1) auf Tablet(2)) ! ! ! ! ! ! ! ! ! ! */

/* ///////////////////// Tablet(1)-Formatierung -> 1320px Anfang ////////////////// */
#-----tablet-----bis---1320px----- {
	
}

@media only screen and (min-width:700px) {
	#content  .halbeSpalte h2 {
		font-size: 1.1em;
		line-height: 1.2em;
		letter-spacing: 0.07em;
		font-weight: 300;
		font-family: "Roboto", Helvetica, Arial, sans-serif;
	}

div#content div#links div#leistungenKacheln div div.halbeSpalte h2 span{
font-size: 0.8em;
}	
	
	
	#content .halbeSpalte #punkte {
		margin-left: 5.5%;
	}
	#content .halbeSpalteNotdienst #punkte {
		margin-left: 5.5%;
		font-size: 1em;
		font-family: "Roboto",Helvetica,Arial,sans-serif;
		line-height: 1.2em;
		letter-spacing: 0.03em;
	}

	
	
	
#content  .halbeSpalte h2 {
	line-height: 1.0em;
}	
	
	
	
#content  .halbeSpalte h2 span{
	font-size: 0.6em;
}		
	
	#content   h2 img {
	top:-25px;
	}	
	
	/* --------------------- TYPOGRAFIE       ENDE -------------------------- */
	/* --------------------- BILDER content ANFANG -------------------------- */
	#content   img {
		width: 100%;
		height: auto;
		margin-top: 0%;
		margin-bottom: 0%;
		float: right;
	}
	#content   .caption {
		font-size: 1.1em;
	}
	img.textfluss {
		float: right;
		margin-right: 20px;
		margin-bottom: 10px;
	}
	hr {
		margin-top: 10px;
		margin-bottom: 10px;
		margin-left: 1%;
		margin-right: 1%;
		border: none;
		border-bottom-style: dotted;
		border-bottom-width: thin;
		display: inherit;
		clear: none;
	}
	#content .halbeSpalte #punkte {
		margin-left: 5%;
		width: 20%;
	}
	
	
	
	
	

#content .halbeSpalte #punkte {
	position: absolute;
	margin-left: 30%;
	margin-top: 25%;
	width: 30%;
}


div#content div#links div div.halbeSpalte ul#punkte li {
	margin-top: 5px;
	margin-right: 5%;
	margin-left: 5%;
	margin-bottom: 5px;
	font-size: 0.8em;
}	

	
div#content div#links div div.halbeSpalte ul#liste li {
	margin-top: 5px;
	margin-right: 5%;
	margin-left: 5%;
	margin-bottom: 5px;
line-height:1em;
font-size:1em;
letter-spacing:0.07em;
}	
			
	

	div.figureHoch {
		float: right;
		width: 50%;
		margin: 0em;
		padding: 0em;
	}
	div.figure p {
		text-align: left;
		text-indent: 0;
		margin: 0px;
		padding: 0px;
	}
	img.scaled {
		width: 100%;
		margin: 0px;
		padding: 0px;
	}
	/* ------ both = Erzwingt in jedem Fall die Fortsetzung unterhalb. ------ */
	.clearfloat {
		clear: both;
	}

	.halbeSpalte {
		width: 29.5%;
		height: auto;
		margin-bottom: 20px;
		margin: 2%;
		margin-left:2.5%;
		margin-right:0%;
		border: #ddd thin solid;
	}
	#content .halbeSpalte #punkte {
		position: absolute;
		margin-left: 7%;
		margin-top: 9%;
		width: 120px;
	}

	

}
/* ///////////////////// Tablet(2)-Formatierung -> 1320px   Ende /////////////////// */

/* ! ! ! ! ! ! !  4. Breakpoint (von Tablet(2) auf Desktop)  ! ! ! ! ! ! ! ! */

/* ///////////////////// Desktop-Formatierung -> 1233px Anfang //////////////////// */
#-----desktop-----bis---1920px----- {
	
}

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


#leistungenKacheln {
margin-left:0%;
margin-right:0%;
	 }	
	
div#content div#links div#leistungenKacheln div div.halbeSpalte h2 {
font-size:1.1em;
margin-left:5%;
}
div#content div#links div#leistungenKacheln div div.halbeSpalte h2 span {
font-size:0.7em;
}	
	
	.halbeSpalte {
		width: 15%;
		height: auto;
		margin-left:1%;
		margin-right:0%;
		matgin-bottom:0;
		border: #ddd thin solid;
	}

	#content   img {
		width: 150px;
		height: 150px;
		height: auto;
		border: thin solid #CCCCCC;
		margin-top: 0px;
		margin-bottom: 0px;
		margin-left: 0;
	}

#content .halbeSpalte #punkte {
	position: absolute;
	margin-left: 12%;
	margin-top: 8%;
	width: 120px;
}


div#content div#links div div.halbeSpalte ul#punkte li {
	margin-top: 5px;
	margin-right: 5%;
	margin-left: 5%;
	margin-bottom: 5px;
	font-size: 0.8em;
}	


	div.figure p {
		text-align: left;
		text-indent: 0;
		margin: 0px;
		padding: 0px;
	}
	img.scaled {
		width: 100%;
		margin: 0px;
		padding: 0px;
	}
	/* ------------------- content             Ende -------------------------- */

}
/* ///////////////////// Desktop-Formatierung -> 1233px   Ende //////////////////// */