/* CSS Mobile Reset */
table { width:auto; border-collapse: collapse;border-spacing: 0; }
.open_nav {
	display: none;
}

/*Ab hier springt er auf 760px breite Elemente*/
@media all and (max-width: 980px) {

	.inner,
	#breadcrumb .inner,
	.bel37 #breadcrumb .inner
	{
		width: 700px;		
	}
	.head .inner
	{
		padding: 20px 0;
	}

	#logo
	{
		background-image: url(../img/logo-mobile.png);
		background-position: center center;
		width: 215px;
		height: 100px;
		margin: 0px;
	}
	#headblue
	{
		height: 160px;
		margin-left: -900px;
	}

	.nav
	{
		font-size: 14px;
	}
	.nav > UL > LI > A
	{
		padding: 54px 8px 13px;
	}


	#subhead .csc-textpic-text
	{
		width: 720px;
		margin-left: -360px;
	}

	/* 3-Spalten */
	.col--3
	{
		width: 220px;
	}
	/* 4-Spalten */
	.col--4
	{
		width: 50%;
		margin-bottom: 40px !important;
	}

	/* 2/3 + 1/3 Spalte */
		.col--66
		{
			width: 460px;
		}
		.col--33
		{
			width: 200px;
		}


/* col box */	
	#uid417 .column.col--box A.Button-Email,
	#uid417 .column.col--box A .Button-Email,
	#uid417 .column.col--box .Button-Email A,
	#uid417 .column.col--box A.Button,
	#uid417 .column.col--box A .Button,
	#uid417 .column.col--box .Button A
	{
		display: block;
		width: auto;
		margin: 0 0 10px;
		padding: 0;
	}
	#uid417 .column.col--box
	{
		min-height: 380px;
	}
	#uid417 .cont__top.cont--grey .column.col--box:hover
	{
		margin-top: -227px !important;
	}

		#uid417 .cont__top.cont--grey .column.col--box .csc-textpic-imagewrap
		{
			height: 95px;
		}
			#uid417 .cont__top.cont--grey .column.col--box:hover .csc-textpic-imagewrap
			{
				height: 122px;
			}


	.allcont .csc-textpic .csc-textpic-imagewrap .csc-textpic-image,
	.allcont .csc-textpic-caption
	{
		display: block;
	}
	.allcont .csc-textpic .csc-textpic-imagewrap .csc-textpic-image A
	{
		display: inline-block;
	}

	.allcont DIV.csc-textpic-above .csc-textpic-imagewrap .csc-textpic-image img
	{
		width: 100%;
		height: auto;
		max-width: 100%;
	}



}

/*Ab hier springt er auf 420px breite Elemente*/
@media all and (max-width: 760px) {


	.inner,
	#breadcrumb .inner,
	.bel37 #breadcrumb .inner
	{
		width: 94%;
	}
	.inner
	{
		padding: 0;
	}


/* head */
	.head
	{
		border-left: 10px solid #004d9e;
	}

	#headblue
	{
		display: none;
	}


	#logo
	{
		position: relative;
		z-index: 50;
	}

/* open nav */
	.open_nav
	{
		display: inherit;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
	.open_nav P
	{
		display: block;
		padding: 0;
		height: 89px;
		line-height: 89px;
		font-size: 15px;
		text-align: right;
		text-decoration: none;
	}

	.open_nav A
	{
		display: inline-block;
		width: auto;
		padding: 18px 22px;

		line-height: normal;
		text-decoration: none;

		color: #004d9e;
		background-color: #f3f3f3;

		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;

		-webkit-transition: 0.2s ease;
		-moz-transition: 0.2s ease;
		-ms-transition: 0.2s ease;
		-o-transition: 0.2s ease;
		transition: 0.2s ease;

	}
	.open_nav A span
	{
		padding-right: 30px;
		background: url(../img/icon-menu-default.png) no-repeat right center;
		-webkit-transition: background-image 0.2s ease;
		-moz-transition: background-image 0.2s ease;
		-ms-transition: background-image 0.2s ease;
		-o-transition: background-image 0.2s ease;
		transition: background-image 0.2s ease;
	}
	.open_nav A:hover,
	.open_nav A:active,
	.open_nav A:focus,
	.open_nav A.open
	{
		color: #fff;
		background-color: #004d9e;
	}
	.open_nav A:hover span,
	.open_nav A:active span,
	.open_nav A:focus span
	{
		background-image: url(../img/icon-menu-over.png);
	}
	.open_nav A.open span
	{
		background-image: url(../img/icon-menu-close.png);
	}


/* nav */
	.nav
	{
		display: none;
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		float: none;
		height: auto;
		top: 10px;
		margin-bottom: 10px;
	}
		.nav LI
		{
			float: none;
			display: block;
		}
		.nav LI + LI
		{
			margin: 0;
		}

		.nav LI A,
		.nav > UL > LI > A
		{
			display: block;
			padding: 8px 15px;
			background: #fff;
			font-size: 14px;
			-webkit-transition: 0.2s ease;
			-moz-transition: 0.2s ease;
			-ms-transition: 0.2s ease;
			-o-transition: 0.2s ease;
			transition: 0.2s ease;
		}

		.nav > UL > LI + LI > A
		{
			border-top: 1px solid #EBEBEB;
		}
			.nav > UL > LI:hover > A,
			.nav > UL > LI.over > A
			{
				color: #004d9e;
				background: #fff;
			}

			.nav > UL > LI.act > A,
			.nav > UL > LI.act > A:hover,
			.nav > UL > LI.over.act > A,
			.nav > UL > LI.act:hover > A
			{
				color: #fff;
				padding: 8px 15px;
				background: #004d9e;
			}

		.nav LI UL,
		.nav > UL > LI > UL
		{
			position: inherit;
			left: inherit;
			top: inherit;
			padding-top: 0;
		}
		.nav LI UL LI
		{
			margin: 0;
			padding: 0;
		}

		.nav LI UL LI A
		{
			padding: 8px 20px;
			font-size: 13px;
		}
		.nav LI UL LI A
		{
			color: #444;
			background: #F3F3F3;
		}
		.nav LI.over UL LI A:hover,
		.nav LI.over UL LI.over A
		{
			color: #004d9e;
			background: #F3F3F3;
		}
		.nav LI.over UL LI.act A,
		.nav LI.over UL LI.act:hover A,
		.nav LI.over UL LI.act A:hover,
		.nav LI.over UL LI.over.act A
		{
			color: #fff;
			background: #004d9e;
		}




/* subhead */
	#subhead DIV.csc-textpic .csc-textpic-imagewrap .csc-textpic-image
	{
		width: 1400px;
		margin-left: -700px;
	}
	#subhead DIV.csc-textpic .csc-textpic-imagewrap .csc-textpic-image img
	{
		width: 100%;
		height: auto;
	}

	#subhead .csc-textpic-text
	{
		width: 460px;
		margin-left: -230px;
		top: 30px;
	}
	#subhead .csc-textpic-text H2
	{
		font-size: 30px;
	}
	#subhead .csc-textpic-text H4
	{
		font-size: 20px;
	}

/* allcont */
	.cont
	{
		padding: 50px 0;
	}

	.col--3
	{
		width: auto;
		float: none;
		margin: 0 auto 20px !important;
		max-width: 400px;
	}

	.col--4 .column-inner
	{
		padding: 0 10px;
	}

	.box--grey
	{
		padding: 25px 35px;
	}

/* startseite col--box */
	#uid417 .cont__top.cont--grey
	{
		margin-top: 0;
		padding: 50px 0;
	}
	#uid417 .column.col--box A.Button-Email,
	#uid417 .column.col--box A .Button-Email,
	#uid417 .column.col--box .Button-Email A
	{
		display: inline-block;
		width: 39px;
	}
	#uid417 .column.col--box A.Button,
	#uid417 .column.col--box A .Button,
	#uid417 .column.col--box .Button A
	{
		display: inline-block;
		padding: 0 20px;
	}
	#uid417 .column.col--box
	{
		min-height: initial;
	}
	#uid417 .cont__top.cont--grey .column.col--box .csc-textpic-imagewrap,
	#uid417 .cont__top.cont--grey .column.col--box:hover .csc-textpic-imagewrap
	{
		height: auto;
	}
	#uid417 .cont__top.cont--grey .column,
	#uid417 .cont__top.cont--grey .column.col--box:hover
	{
		margin-top: 0 !important;
	}

	.lbox,
	.rbox,
	.col--66,
	.col--33
	{
		width: 100%;
		margin: 0;
		padding: 0;
		float: none;
		display: block;
	}
	.rbox { margin-top: 30px !important; }

	.col--66 + .col--33,
	.col--33 + .col--66
	{
		margin: 30px 0 0 0 !important;
	}

	
	DIV.csc-textpic-intext-left-nowrap .csc-textpic-imagewrap, DIV.csc-textpic-intext-right-nowrap .csc-textpic-imagewrap {float: inherit; margin:0; }
	.csc-textpic-intext-right-nowrap .csc-textpic-text {margin-right: 0;}
	.csc-textpic-intext-left-nowrap .csc-textpic-text {margin-left: 0;}

	DIV.csc-textpic .csc-textpic-imagewrap FIGURE, DIV.csc-textpic FIGURE.csc-textpic-imagewrap, FIGCAPTION.csc-textpic-caption {display: block;}
	DIV.csc-textpic-left .csc-textpic-imagewrap, DIV.csc-textpic-right .csc-textpic-imagewrap {float: none;}
	DIV.csc-textpic DIV.csc-textpic-imagecolumn {display: inline-block;float: none;vertical-align: top;}
	.csc-default {clear: both;}
	DIV.csc-textpic-intext-right-nowrap DIV.csc-textpic-imagewrap, DIV.csc-textpic-intext-left-nowrap DIV.csc-textpic-imagewrap, DIV.csc-textpic-intext-right DIV.csc-textpic-imagewrap, DIV.csc-textpic-intext-left DIV.csc-textpic-imagewrap { width: auto; float: none; margin: 0;}
	DIV.csc-textpic-intext-right-nowrap .csc-textpic-text, DIV.csc-textpic-intext-left-nowrap .csc-textpic-text {margin: 0;}


}
@media all and (max-width: 600px) {

	.head .inner
	{
		padding: 10px 0;
	}
	.open_nav P
	{
		height: 65px;
		line-height: 65px;
	}
	.open_nav A
	{
		padding: 15px 15px;
	}
	#logo
	{
		background-size: 100% auto;
		width: 150px;
		height: 84px;
	}

	.col--3,
	.col--4
	{
		width: auto;
		margin: 0 auto;
		padding: 0;
		float: none;
		display: block;
		max-width: 500px;
	}
	.col--3 .column-inner,
	.col--4 .column-inner
	{
		padding: 0;
	}

	.col--box
	{
		padding: 0 0 10px 0;
	}
	.col--box .csc-textpic-text
	{
		padding: 0 10px;
	}

	.box--grey
	{
		padding: 15px 25px;
	}
/* footer */
	.foot P
	{
		display: block;
	}
	.foot
	{
		height: 200px;
		margin-top: -200px;
	}
	.allcont
	{
		padding-bottom: 200px;
	}
	#footnav,
	#webdesign
	{
		display: block;
	}
	#footnav A:after
	{
		content: initial;
	}
	#footnav A
	{
		display: block;
		padding: 10px;
		margin: 0 5px 5px;
		background: rgba(0,0,0,.1);
	}
	#webdesign
	{
		padding-top: 5px;
	}


	#powermail_fieldwrap_112, #powermail_fieldwrap_111, #powermail_fieldwrap_110, #powermail_fieldwrap_109, #powermail_fieldwrap_108
	{
		float: none;
		width: 100%;
		margin: 0 0 15px;
	}
	.tx-powermail .powermail_form .powermail_fieldwrap
	{
		margin-bottom: 15px;
	}

}


/*Ab hier springt er auf 100% breite Elemente (320px)*/
@media all and (max-width: 470px) {
	img, embed, object, video {
		max-width: 100%;
		height: auto;
		width: auto;
	}

	#subhead
	{
		display: none;
	}
	.bel37 #breadcrumb
	{
		background-color: #f3f3f3;
		padding: 8px 0 5px;
	}

	/* Falls Footer unten klebt */
	HTML, BODY, #site {
		height: auto;
	}
	BODY > #site {
		min-height: 0;
	}
	#allcont, .allcont {
		padding-bottom: 20px;
	}
	.foot {
		height: auto;
		margin-top: 0;
	}

	/* Gekaufte Bilder .c1 ändern */
	.allcont .c1 TABLE TR TD {
		display: inline-table;
	}


}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-resolution: 192dpi) {
	
	#logo
	{
		background-image: url(../img/logo-mobile2x.png);
	}

	H1, H2, H3, H4, H5, H6
	{
		background-image: url(../img/headline-border2x.png);
		background-size: 130px 1px;
	}
	A.Button-Email,
	.E-Mail
	{
		background-image: url(../img/icon-mail2x.png);
		background-size: 21px 14px;
	}

	A.Button-Email:hover
	{
		background-image: url(../img/icon-mail-hover2x.png);
		background-size: 21px 14px;
	}
	.Ort
	{
		background-image: url(../img/icon-home2x.png);
		background-size: 25px 20px;
	}
	.Telefon
	{
		background-image: url(../img/icon-phone2x.png);
		background-size: 23px 22px;
	}
	#subhead .csc-textpic-text
	{
		background-image: url(../img/steuerrad2x.png);
		background-size: 130px 130px;
	}
	.col--3 H1, .col--3 H2, .col--3 H3, .col--3 H4, .col--3 H5
	{
		background-image: url(../img/headline-border-small2x.png);
		background-size: 70px 1px;
	}

	.open_nav A span
	{
		background-image: url(../img/icon-menu-default2x.png);
		background-size: 20px 16px;
	}
	.open_nav A:hover span,
	.open_nav A:active span,
	.open_nav A:focus span
	{
		background-image: url(../img/icon-menu-over2x.png);
		background-size: 20px 16px;
	}
	.open_nav A.open span
	{
		background-image: url(../img/icon-menu-close2x.png);
		background-size: 20px 16px;
	}

}

@media only screen and (min-width: 601px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 601px) and (-o-min-device-pixel-ratio: 1.5), only screen and (min-width: 601px) and (min--moz-device-pixel-ratio: 1.5), only screen and (min-width: 601px) and (min-device-pixel-ratio: 1.5), only screen and (min-width: 601px) and (min-resolution: 192dpi) {

	#logo
	{
		background-size: 215px 78px;
	}

}

@media only screen and (min-width: 981px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 981px) and (-o-min-device-pixel-ratio: 1.5), only screen and (min-width: 981px) and (min--moz-device-pixel-ratio: 1.5), only screen and (min-width: 981px) and (min-device-pixel-ratio: 1.5), only screen and (min-width: 981px) and (min-resolution: 192dpi) {

	#logo
	{
		background-image: url(../img/logo2x.png);
		background-size: 215px 78px;
	}

}