@charset "utf-8";
/* CSS Document */
div.sp1, div.sp1a, div.sp1b, div.sp2a, div.sp2b, div.sp2c, div.oc_sp1, div.oc_sp2, div.oc_sp3 {
	width:306px;
	float:left;
	box-sizing: border-box;
}

div.sp1 {
	background:url(../grafik/punktelinie_960px_vert.png) top right repeat-y;
	width: 652px;
	padding:24px 20px 0px 0px;
}

div.sp1a, div.sp1b {
	padding:0px 0px 10px 0px;
}

div.sp2a, div.sp2b, div.sp2c {
	padding:24px 0px 0px 20px;
}
div.sp2a, div.sp2b {
	background:url(../grafik/punktelinie_960px.png) bottom left repeat-x;
}

div.portrait_image {
	width:47px;
	height:47px;
	float:left;
	box-sizing: border-box;
}

div.portrait_text {
	float:left;
	box-sizing: border-box;
	padding:0px 0px 0px 20px;
}

/*overlay content */
div.oc_header {
	width:100%;
	margin:0px 0px 35px 0px;
}

div.oc_header div.text {
	float:left;
	width:90%;
}

div.oc_header div.close {
	float:right;
	width:10%;
	text-align:right;
}

div.oc_header div.close img {
	width:23px;
	height:23px;
}

div.oc_header h1, div.oc_header h2 {
	margin:0;
	padding:0:
}

div.oc_sp1 {
	width:316px;
	margin:0px 20px 0px 0px;
}

div.oc_sp1x {
	width:540px;
	margin:0px 0px 0px 0px;
	float:left;
	background:url(../grafik/punktelinie_960px_vert.png) top right repeat-y;
}

div.oc_sp1a, div.oc_sp1b {
	width:100%;
}

div.oc_sp1b {
	margin:19px 0px 0px 0px;
}

div.oc_sp2 {
	width:204px;
	background:url(../grafik/punktelinie_960px_vert.png) top right repeat-y;
	height:335px;
	padding:0px 20px 0px 0px;
}
div.oc_sp3 {
	width:204px;
	margin:0px 0px 0px 20px;
}

div.oc_sp3 h3 {
	margin:0px 0px 19px 0px;
}

div.oc_sp_resp01, div.oc_sp_resp02 {
	width:100%;
	padding:19px 0px 19px 0px;
	display:none;
	background:url(../grafik/punktelinie_960px.png) top left repeat-x;
}
/*end overlay content*/

/* responsiveness */
/* 5 spalten */
@media screen and (max-width:1023px) { 
	div.sp1 {
		background:url(../grafik/punktelinie_960px.png) bottom left repeat-x;
	}
	div.sp2a,div.sp2b {
		padding:19px 20px 0px 0px;
		width:306px;
		background:none;
	}
	div.sp2c{
		clear: both;
		width:100%;
		padding:19px 0px 0px 0px;
		background:url(../grafik/punktelinie_960px.png) top left repeat-x;
	}
	div.oc_sp1 {
		width:204px;
		margin:0px 20px 0px 0px;
		background:url(../grafik/punktelinie_960px_vert.png) top right repeat-y;
	}
  div.oc_sp1x {
	  width:425px;
		margin:0px 0px 0px 0px;
  }
	div.oc_sp1a, div.oc_sp1b {
		width:100%;
	}

	div.oc_sp1ax {
		/*! background:url(../grafik/punktelinie_960px.png) bottom left repeat-x; */
		/*! padding:0px 0px 20px 0px; */
		
	}
	div.oc_sp1a img {
		width:184px;
		height:184px;
	}
	div.oc_sp1ax img {
		width:370px;
		height:auto;
	}
	
	span.resp01 {
		display:none;
	}
	div.oc_sp2, div.oc_sp1 {
		height:275px;
	}
}
/* 4 spalten */
@media screen and (max-width:859px) { 
	span.resp02 {
		display:none;
	}
	div.oc_sp_resp01 {
		display:inline;
		float:left;
	}
	div.oc_sp1, div.oc_sp2, div.oc_sp1x {
		background:none;
		height:auto;
	}
	div.oc_sp1a, div.oc_sp1ax {
		background:none;
	}
	div.oc_sp1a img {
		width:204px;
		height:204px;
	}
	div.oc_sp1ax img {
		width:100%;
		margin-bottom:20px;
	}
	div.oc_sp1b {
		display:none;
	}
	div.oc_sp3 {
		margin:0px;
		padding:19px 0px 0px 0px;
		width:100%;
		background:url(../grafik/punktelinie_960px.png) top left repeat-x;
	}
	
}

/* 3 spalten */
@media screen and (max-width:696px) { 
	div.sp1 {
		width:100%;
	}
	div.sp2a, div.sp2b {
		width:100%;
		background:url(../grafik/punktelinie_960px.png) bottom left repeat-x;
		padding:19px 0px 0px 0px;
	}
	div.sp2b {
		background:none;
	}
	div.oc_sp1{
		width:132px;
	}
	div.oc_sp1x{
		width:100%;
	}
	div.oc_sp1 img {
		width:132px;
		height:132px;
	}
	div.oc_sp2 {
		width:164px;
	}
}

/* 1 spalte */
@media screen and (max-width:533px) { 
	/*div.oc_sp_resp01 {
		display:none;
	}
	div.oc_sp_resp02 {
		display:block;
		float:left;
	}*/
	div.oc_sp1 {
		width:100%;
	}
	div.oc_sp1 img {
		width:202px;
		height:202px;
	}
	div.oc_sp2 {
		width:100%;
	}
}