html {
	background: none;
	height: 100%;
	overflow-y: -moz-scrollbars-vertical;
	overflow-y: scroll;
	margin: auto;
	text-align: center;
	vertical-align: top;
	cursor: default;
}
body, div, img, span, ul, li, p {
	text-align: left;
	border: 0px;
	padding: 0px;
	margin: 0px;
	/* font-family: 'Lato', 'Arial', "sans serif"; */
	font-family: 'Open Sans';
	color: #000;
	text-decoration: none;
}
body {
	width: 940px;
	height: auto;
	font-size: 100%;
	text-align: center;
	position: absolute;
	left: 50%;
	top: 70px;
	margin: 0 0 0 -480px;
	background-color: #fff;
}
a {
	color: #000;
	font-style: normal;
	font-weight: normal;
	text-decoration: underline;
}
a:hover, a:active {
	color: #000;
	font-style: normal;
	font-weight: normal;
	background-color: #ccc;
	}
#navi a {
  text-decoration: none;
}
#navi a:hover {
  text-decoration: underline;
}
#aussen {
	position: relative;
	width: 940px;
	margin: 0px;
	padding: 0px;
	text-align: left;
	font-size: 0.925em;  /*  14px  */
	line-height: 1.5em;
	background: none;
}
#navi, .thema {
	box-shadow: 0 0 15px #000;
}
#navi {
	position: fixed;
	top: 50px;
	width: 128px;
	padding: 30px 15px 12px 20px;
	margin-left: 15px;
	z-index: 5;
	background: #fff;
}
	.navList {
		margin: 0px 0px 8px 0px;
	}
	.navElem {
		width: 115%;
		height: auto;
		padding: 2px 5px 2px 5px;
		margin: 0px;
		list-style: none;
		text-decoration: none;
		color: #333;
		font-size: 1.2em;
	}
	.navElem:hover {
		text-decoration: underline;
	}
	.navElem:hover, .navElem:active {
		cursor: pointer;
		color: #cc3300;
	}
	#startNavi {
		padding-top: 15px;
		height: 20px;
		background: no-repeat scroll 3px 0px url("bilder/logo_schwarz.svg");
	}
	#startNavi:hover, #startNavi:active, #startNavi.actNaviTog {
		background: no-repeat scroll 3px 0px url("bilder/logo_rot.svg");
	}
	.actNaviTog, .actNaviTog:hover {
		cursor: default;
		color: #cc3300;
	}
	.actNaviTog:after {
		border-left: 13px solid #fff;
	}
	#startNavi.actNaviTog:after {
		border: 0px;
	}
	#javaRefNavi {
		margin: 0px;
		padding: 0px;
		border: 0px;
		display: none;
	}
	
#inhalt {
	position: relative;
	width: 810px;
	height: auto;
	padding: 0px 0px 20px 0px;
	margin: 25px 15px 50px 115px;
	z-index: 4;
}
	.thema {
		width: 600px;
		height: auto;
		margin: 0px;
		background: repeat-y scroll rgba(255,255,255,1);
	}
	#mensch.thema {
		padding: 65px 80px 65px 130px;
	}
	#menschKurz {
		padding: 0px 0px 10px 20px;
	}
	#menschKurz p {
		max-width: 500px;
	}
	#referenzen.thema  {
		padding: 65px 100px 70px 110px;
	}
	.js #refBox {
		display: none;
	}
	#kontakt.thema  {
		padding: 65px 80px 65px 130px;
	}
	#refBox {
		margin: 0px;
		padding: 0px;
		border: 0px;
	}
	h1, h2 {
		padding: 0px;
		font-style: normal;
		font-weight: normal;
		text-decoration: none;
		}
	h1, h2 {
		margin: 0px 0px 1px 0px;
		font-size: 1.45em;
		line-height: 1.3em;
	}
	p {
		max-width: 540px;
		padding: 0.14em 0em 0.85em 0em;
	}
	#mensch p, #kontakt p {
		max-width: 480px;
	}
	.thema ul {
		margin: 0px;
		padding: 0.14em 0em 0.85em 0em;
	}
	.thema li {	
		list-style-type: none;
		padding: 0px 0px 0px 1.1em;
		text-indent: -8px;		
	}
	.refToggler {
		cursor: default;
    color: #cc3300;
		padding: 2px 6px 2px 20px;
		margin: 1px 0px 0px 0px;
		max-width: 550px;
		line-height: 1.8em;
		background: no-repeat 0px 4px url("bilder/pfeil_grau_rechts.png");
		background-color: none;
		text-decoration: none;
	}
			.refToggler:hover, .refToggler:active {
				cursor: pointer;
		    color: #000;
				background: no-repeat 0px 4px url("bilder/pfeil_schwarz_rechts.png");
				background-color: #ccc;
				text-decoration: none;
			}
			.actRefTog {/*
				color: #cc3300;*/
		    color: #000;
				background: no-repeat 0px 4px url("bilder/pfeil_schwarz_rechts.png");
				background-color: none;
				text-decoration: none;
			}
			.actRefTog:visited, .actRefTog:active, .actRefTog:hover {
		    color: #000;
				background: no-repeat 0px 4px url("bilder/pfeil_schwarz_rechts.png");
				background-color: none;
				cursor: default;
				text-decoration: none;
			}
	.refThema {
		width: 550px;
		padding: 0px 0px 0px 0px;
		margin: 0px 30px 0px 20px;
	}
	.refTitel {
		margin: 0px 0px 8px 0px;
		padding: 10px 0px 0px 0px;
		font-size: 1.5em;
		line-height: 1.1em;
	}
	.refImg {
		width: 100%;
		margin: 10px 0px;
	}
	.refInfo {
		text-decoration: underline; 
	}
	#videokasten {
		position: relative;
		padding-bottom: 56.25%;
		padding-top: 0px;
		height: 0px;
		overflow: hidden;
		margin-bottom: 15px;
	}
	#videokasten iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
#scrollStopper {
	width: auto;
	height: 1px;
	margin: 35px 0px 0px 0px;
}
.nachOben, .nachOben:visited {
	display: inline-block;
	width: 550px;
	margin: 0px 0px 35px 0px;
	padding: 0px 0px 0px 20px;
	border-top: 1px solid #999;
	font-size: 100%;
	color: #666;
	text-decoration: none;
	background: no-repeat 0px 1px url("bilder/pfeil_grau_oben.png");
}
.nachOben:hover, .nachOben:active {
	text-decoration: none;
	background: no-repeat 0px 1px url("bilder/pfeil_schwarz_oben.png");
	background-color: #ccc;
}
#tele, #epost1, #epost2 {
	padding: 0px;
	margin: 0px;
}
#tele {
	margin-left: -2px;
}
#konBild1, #konBild2 {
	position: relative;
	top: 2px;
	width: 179px;
}
#konBild1kurz, #konBild2kurz {
	position: relative;
	top: 2px;
	width: 138px;
}
#konBild1 {
	height: 10px;
	background: no-repeat url("bilder/kntkt2.gif");
}
#konBild2 {
	height: 10px;
	background: no-repeat url("bilder/kntkt1.gif");
}
#konBild2kurz {
	height: 10px;
	background: no-repeat url("bilder/kntkt2kurz.gif");
}
#konBild1kurz {
	height: 10px;
	background: no-repeat url("bilder/kntkt1kurz.gif");
}
.verant {
  float: left;
}
#verantBild1 {
	height: 84px;
	width: 30px;
	background: no-repeat url("bilder/verant2.gif");
}
#verantBild2 {
	height: 84px;
	width: 41px;
	background: no-repeat url("bilder/verant3.gif");
}
#verantBild3 {
	height: 84px;
	width: 70px;
	background: no-repeat url("bilder/verant1.gif");
	clear: right;
}
#backStart, #backRef, #backKon {
	position: fixed;
	width: 200%;
	height: 200%;
	top: -50%;
	left: -50%;
	margin: 0px;
	padding: 0px;
	border: 0px;
	background: none no-repeat center center fixed;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	z-index: 1;
}
#backStart {
	background-image: url("bilder/Hexagon-9.jpg");
}
#backRef {
	background-image: url("bilder/Hexagon-9.jpg");
}
#backKon {
	background-image: url("bilder/Hexagon-9.jpg");
}




/* mobile version */

@media (max-width:960px)  {
body {
	margin-top: 0 !important;
	position: relative;
	top: 0;
	left:0;
	right: 0;
	margin: 0 auto;
	width: auto;
	
}
a {
	text-decoration: underline;
}
a:hover, a:active {
	text-decoration: underline;
}
#aussen {
	margin: 0 auto;
	width: auto;
	background: repeat-y scroll #fff;
}
.thema {
	box-shadow: 0 0 0px #000000;
	background: repeat-y scroll #fff;
}
#navi {
	position: relative;
	top: 0px;
	width: auto;
	height: auto;
  max-width: 550px;
	padding: 0%;
	margin: 0px auto;
	margin-top: 15px;
	box-shadow: 0 0 8px #000000;
	background: repeat-y scroll #fff;
	text-align: center;
}
#navi, #javaRefNavi {
  padding-left: 18px;
}
	.navList {
		width: auto;
		height: 49px;
		max-width: 550px;
		margin: 0px auto;
		padding: 2px 2px 0px 2px;
}
	.navList a {
		text-decoration: none;
	}
	.navElem {
		float: left;
		height: 35px;
		margin: 0px;
		padding: 13px 0px 1px 0px;
		text-align: center;
		border: 0px;
		font-size: 1.45em;
		color: #000;
		background-color: #fff;
		overflow: hidden;
	}
	.navElem:hover, .navElem:active {
		color: #cc3300;
		background-color: #fff;
		padding-bottom: 0px;
	}
	.actNaviTog, .actNaviTog:hover, .actNaviTog:after {
		color: #cc3300;
		background-color: #fff;
	}
	#startNavi {
		display: block;
		width: 35%;
		max-width: 115px;
		height: 49px;
		padding: 0px;
		background: #fff no-repeat scroll center 8px url("bilder/logo_schwarz.svg");
	}
	#startNavi:hover, #startNavi:active, #startNavi.actNaviTog {
		background: #fff no-repeat scroll center 8px url("bilder/logo_rot.svg");
	}
	#profilNavi {
		width: 30%;
		max-width: 100px;
	}
	#kontaktNavi {
		width: 34%;
		max-width: 100px;
	}
	#inhalt {
		clear: both;
		width: auto;
		margin: 0 auto;
		padding: 0px;
	}
	.thema {
		clear:left;
		width: auto;
		max-width: 550px;
		margin: 0 auto;
	}
	#mensch.thema {	
		padding: 30px 25px 30px 25px;
	}
	#referenzen.thema {
		padding: 30px 25px 30px 5px;
		max-width: 570px;
	}
	#kontakt.thema {
		padding: 30px 25px 30px 25px;
	}
	.refToggler {
		display: inline-block;
		background-position: 0px 5px;
		padding: 0px 6px 0px 20px;
	}
		.refToggler:hover, .refToggler:active {
			background-position: 0px 5px;
		}
		.actRefTog {
			background-position: 0px 5px;
		}
	.refThema {
		width: auto;
		max-width: 550px;
		margin: 0px 0px 0px 20px;
	}
	.refInfo {
		text-decoration: none; 
	}
	.backs {
		display: none;
	}
}

@media (max-width:580px)  {
  
#navi {
  margin-top: 0px;
}
}
@media (max-width:350px)  {
#navi {
  margin-top: 0px;
}
	.navList {
		height: auto;
	}
	.navElem {
		float: none;
		clear: both;
		text-align: left;
		max-width: 200px;
		height: 26px;
		padding: 2px 0px 0px 0px;
	}
	#startNavi {
		width: auto;
		background-position: 0px 10px;
	}
	#startNavi:hover, #startNavi:active, #startNavi.actNaviTog {
		background-position: 0px 10px;
		border-bottom: 0px;
	}
	#refNavi {
	}
	#refNavi:hover {
	}
	#refNavi.actNaviTog {
	}
	#kontaktNavi {
		width: auto;
	}
	#inhalt {
		z-index: 3;
	}
}







/*
telefonbutton zum direkten anrufen bei mobiler version
<a href="tel:+18005550199">1-800-555-0199</a>