body,html{padding:0;height:100%;}
body{}
*{box-sizing: border-box;margin:0;border-width:0;border-style:solid;}
img{max-width:100%;height:auto;}

p{margin-bottom:1em;}
p.m15{margin-top:1.5em;}
p.mt0{margin-top:0;}
h5{margin:2em 0 1.5em 0;}
h5.mb0{margin-bottom:0;}
.mt0{margin-top:0;}

/*blöcke*/
.right_col,.left_col{min-width:320px;}
.right_col{}
.kreis{padding: 5em 1em 7em 1em;}
body.portfolioBody .kreis{padding-bottom: 0;}
header{position:relative;margin-bottom:2em;}
footer.imp{padding:1em;text-align:right;}
.content{width:100%;}


/* Navi */
nav a,.imp a{text-decoration:none;}
nav li{position:relative;padding: 0 1em 0 1em;line-height:1.8em;font-size: .9em;}
nav ul{padding:0;list-style-type:none;}
nav li:before{content:'I'; position:absolute;left:0;}
nav a{display:block;line-height:inherit;}

/*oben*/
a#home{width:8.6em;position:absolute;right:0; top:0;}
a#home img{display:block;}
header nav ul{max-width:60%;}

/* TABELLEN */
table{padding:0;border-spacing:0;}
th,td{vertical-align:top;text-align:left;}
th{padding: .2em 1em .2em 0;font-weight: bold;}
td{padding: .2em 0 .2em 0;}

/* PROFIL */
img.img_right{margin:1em 0;float:left;}
table.tab_left{margin-right:2em;width:auto;float:left;}

/* Kunden*/
ul.kunden{margin:1em 0;padding:0;list-style-type:none;}
ul.kunden li{margin:0;padding:0 0 0 .6em;text-indent: -.6em;}

/*portfolio navi*/
.portfolio{position:fixed;top:0; left:0;}
.portfolio h2{padding:1.5em 2em 1em 1em;margin:0;cursor:pointer;border-top:1px solid #f15923;font-size: .9em;}
.portfolio ul{display:none;margin:0 1em 1em 1em;}

/*portfolio */
.preview{display:none;}
.figure_box{margin-bottom:-6em;position:relative;margin:0 -1em;background-color:#6a757b;box-shadow: .2em .2em .2em rgba(0,0,0,.5);}
#figures{position:absolute;width:100%;}
figure{position:absolute;top:0;width:100%;display:none;}
figure.first{display:block;}
img.placeholder{max-width:100%;height:auto;display:block;}
img.img2{display:none}
figure img{display:block;width:auto;margin:auto;}
figcaption{display:none;}
.portfolio_footer{padding-top:1em;min-height: 8em;}
.portNav{text-align:right;width:auto;float:right;}
.portNav div{display:inline-block;margin-left:.3em;width:1em;height:1em;background-color:#ccc;color:#fff;line-height:1em;font-size:2.5em;text-align:center;cursor:pointer;}
#figcaption{font-size:.7em;max-width:65%;}

/*typo */
body{font-size:14px;}
* {font-family: arial,sans-serif;font-size: 1em;border: medium none;font-weight: 300;line-height: 1.4;letter-spacing:.02em;}
strong,b{font-weight:700;}
h1{font-size:1.8em;margin:1em 0;line-height:1.1;}
h1 *{font-size:1em;line-height:1;}
header a{letter-spacing:.08em;}
.fs07{font-size:.7em;}
footer.imp *{font-size:.8em;line-height:1.4em;}

/*Farben + Hintergründe*/
body,footer.imp,.portfolio{background-color:#f15923;}
body.portfolioBody, body.portfolioBody footer.imp{background-color:#eeeeee;}
.kreis{background:url(../grafics/kreis_bottom.gif) no-repeat center bottom #fff;background-size: 100% auto;}
body.portfolioBody .kreis{background:url(../grafics/kreis_bottom_grau.gif) no-repeat center bottom #fff;}
* {color: #666;}
h1,nav a:hover,nav li.current a{color: #FF421C;}
 nav.portfolio a:hover, nav.portfolio li.current a{color: #fac8b7;}
.portfolio *,.imp, .imp *{color:#fff;}
body.portfolioBody .imp, body.portfolioBody .imp *{color:#6a757b;}
#figcaption,#figcaption a{color:#6a757b;}
#figcaption h2{color:#6a757b;font-weight:bold;}

.dsgvo { display: block; height: 650px; overflow-y: scroll; }
@media (min-width: 400px) {
.kreis{padding-bottom: 8em;}
body.portfolioBody .kreis{padding-bottom: 0;}
a#home{width:9.3em;}
}

@media (min-width: 480px) AND  (max-width: 599px) {
.fl33{width:auto;width: 47.9%; float:left;padding-right: 2%;}
}

@media (min-width: 600px) {
.kreis{padding-bottom: 10em;}
body.portfolioBody .kreis{padding-bottom: 0;}
.fl33{width:auto;max-width: 33%; float:left;padding-right: 2em;}
a#home{width:10em;}
}

@media (min-width: 480px) AND  (max-width: 699px) {
figure img,img.placeholder{max-width:480px;}
}
/* Ab hier wird die portfolio-Navi links angezeigt */
@media (min-width: 700px) {
.figure_box{box-shadow:none;margin:0;background-color:transparent;}
figure img{box-shadow: .2em .2em .2em rgba(0,0,0,.5);}
a#home{width:11em;position:absolute;right:0; top:auto;bottom:0;}
footer.imp,.kreis{width:60.7em;padding-right:16.1em;padding-left:12.5em;margin:auto;}
body.portfolioBody .kreis,.kreis{height:60.7em;padding-top:8.6em;padding-bottom:1em;}
.kreis{background-image:none;background-color:#fff;border-radius:100%;}
body.portfolioBody .kreis{height:auto;min-height:60.7em;width:60.7em;background-image:url(../grafics/kreis.svg);background-size:60.7em 60.7em;background-position: left top;background-color:transparent;border-radius:0;}
.right_col,.left_col{position:absolute;top:0;min-width:0;}
.right_col{right:0;}
.left_col{max-width:15em;left:0;}
.portfolio,body.portfolioBody  .portfolio{position:relative;padding-bottom:1em;box-shadow: .2em .2em .2em rgba(0,0,0,.5); left:0;cursor:default;background-color:#6a757b;}
.portfolio h2{border-top:none;cursor:default;}
.portfolio ul{display:block;margin-right:0;}	
nav.portfolio a:hover, nav.portfolio li.current a { color: #bbb;}
figure.first,.portNav, #figcaption{display:none;}
.preview{display:block;position:absolute;top:0;left:0;width:101%;}
.prev{display:block;width:32.3%;margin:0 1% 1% 0;float:left;background-color:#6a757b;padding:.5em;box-shadow: .2em .2em .2em rgba(0,0,0,.5);}
.prev img{display:block;height:auto;margin-bottom: .9em;box-shadow: .2em .2em .2em rgba(0,0,0,.5);}
.prev div{font-size:.7em;color:#fff;letter-spacing:.08em;white-space:nowrap;overflow:hidden;}
}
@media (min-width: 700px) AND (max-width:849px){
	.childs_7,.childs_8{min-height:75.7em !important;}
	.childs_9,.childs_10{min-height:90.7em !important;}
	.childs_11,.childs_12{min-height:105.7em !important;}
}
@media (min-width: 850px) AND (max-width:969px){
	.childs_7,.childs_8,.childs_9{min-height:60.7em !important;}
	.childs_10,.childs_11,.childs_12{min-height:65.7em !important;}
}
@media (min-width: 970px) AND (max-width:1200px){
	.childs_10,.childs_11,.childs_12{min-height:67.7em !important;}
}
@media (min-width: 1200px){
	.childs_7,.childs_8,.childs_9{min-height:61.7em !important;}
	.childs_10,.childs_11,.childs_12{min-height:75.7em !important;}
}
@media (min-width: 700px) AND (max-width: 849px) {
.kreis{margin-top:-7.1em;}
.left_col{padding-top:11.6em;}
.right_col{width:93%;}
.preview{width:101.5%;}
.prev{display:block;width:48.4%;margin:0 1.5% 1.5% 0;}
}
@media (min-width: 700px) AND (max-width: 1199px) {
.right_col{overflow-x:hidden;}
}
/* Ab hier wird das zweite Portfoliobild angezeigt */
@media (min-width: 850px) {
img.placeholder{display:none;}
#figures,figure{height:100%;}
figure img{width:auto;height:100%;float:left;}
img.img2{display:block;float:right;}
}
@media (min-width: 850px) AND (max-width: 969px) {
.kreis{margin-top:-5.7em;}
.left_col{padding-top:13em;}
.figure_box{margin:0 -5.7em;height:20.14em}
.preview{padding-right:5.7em}
.right_col{width:85%;}
}
@media (min-width: 970px) {
.kreis{margin-top:-5.7em;}
.left_col{padding-top:13em;}
.figure_box{margin:0 -9em;height:23.14em}
.preview{padding-right:9em}
.right_col{width:80%;}
}

@media (min-width: 1200px){
.kreis{margin-top:-7em;}
.left_col{padding-top:16.5em;}
.figure_box{margin:0 -17em;height:30.5em}
.preview{padding-right:17em}
.right_col{width:77%;}
h1{margin-top:3em;}
}
/* ab hier wird nur noch skaliert */
@media (min-width: 1500px)  AND  (max-width: 1599px){
body{font-size: 15px;}
}

@media (min-width: 1600px)  AND  (max-width: 1699px){
body{font-size: 16px;}
}
@media (min-width: 1700px)  AND  (max-width: 1799px){
body{font-size: 17px;}
}
@media (min-width: 1800px)  AND  (max-width: 1899px){
body{font-size: 18px;}
}
@media (min-width: 1900px) {
body{font-size: 19px;}
}

@media (max-width: 1700px) {
	.dsgvo { height: 600px; }
}
@media (max-width: 1500px) {
	.dsgvo { height: 500px; }
}


@media (max-width: 600px) {
	.portfolio_footer {
		padding-top: 1em;
		min-height: 8em;
		position: absolute;
		top: 166px;
		width: calc(100% - 30px);
	}
	.figure_box {
		margin-top: 80px !important;
	}
	img.img2 {
		display: block;
	}
	
}