/* middle=700  selblock = 233   ***/
<style >

divesese{background-image:url(../images/verlauf.png);background-color:#FFF;opacity:0.93;}

#menueB{position:fixed; top:0px;z-index:2;width:100%;text-align:center;margin:auto;background-color:#FFF;transition: height 0.5s ease-in-out;}

div.menueA{position:fixed; z-index:2;width:100%;text-align:center;margin:auto;height:15px;}

#menueC1{float:left; text-align:left; margin:auto;padding-top:15px;padding-bottom:30px;color:#000;font-family: 'Open Sans', sans-serif,Verdana,Helvetica,Arial,  sans-serif;font-size:20px;text-decoration:none;font-weight:bold;transition: padding-top 0.5s ease-in-out;}
#menueC2{float:right;margin:auto;padding:15px;color:#000;font-family: 'Open Sans', sans-serif,Verdana,Helvetica,Arial,  sans-serif;font-size:14px;text-decoration:none;transition: padding-top 0.5s ease-in-out;}
#menueC3{float:right;margin:auto;padding:15px;color:#000;font-family: 'Open Sans', sans-serif,Verdana,Helvetica,Arial,  sans-serif;font-size:14px;text-decoration:none;transition: padding-top 0.5s ease-in-out;}
#menueC2 a{color:#999;padding-left:12px;font-size:14px;text-decoration:none;font-weight:bold}
#menueC2 a:hover{color:#000;font-size:14px;font-weight:bold}


#board{margin-top:100px;}
#Con{height:1px}

div{font-family: 'Open Sans', sans-serif,Verdana,Helvetica,Arial,  sans-serif;font-size:20px;text-decoration:none}
a{text-decoration:underline;color:#333}
a:hover{text-decoration:none;}
ul{margin-left:35px;padding:0px;font-family: 'Open Sans', sans-serif,Verdana,Helvetica,Arial,  sans-serif;font-size:20px;text-decoration:none}
li{list-style-image: url(../images/haekele.jpg)  ;}
li#flow1{list-style-type:none; width:47% ; min-width:200px;float:left;text-align:left;margin-top:20px;padding-right:6%}
li#flow2{list-style-type:none; width:47%; min-width:200px;float:left;text-align:left;margin-top:20px;}

      div.main{
        width:400px;
        height:100px;
        background-color:#FC0;
       
        /* fuer horizontale und vertikale zentrierung */
        position: absolute;
        left:50%;
        margin-left:-230px;  /* Um die Hälfte der Breite nach links schieben */
        top:50%;
        margin-top:-80px;  /* Um die Hälfte der Höhe nach oben schieben */
		
	    display: table-cell;

		padding:30px;
        vertical-align: middle;
		text-align:center;
		
		font-size:75px;color:#000;
		font-weight:bold;
		font-family:Arial, Helvetica, sans-serif;

      }
	  
div.top{


   width:100%;
height:100px;
background-color:#FC0;
top:0px
z-index:5;

   margin:0 auto;


  border:1px solid #30F;


}
div.back{width:100%;background-color:#Fff;text-align:center;margin:auto}
#grey{width:100%;background-color:#ccc;text-align:center;margin:auto}
#abstand{width:100%;background-color:#ccc;}
#backbottom{background-color:#CCF;width:100%;margin:0px;bottom:0;height: 200px}
#backtop{}

#FL{float:left;margin:0 ;width:47%;text-align:center;}
#FM{float:left;margin:0 ;width:6%;text-align:left;height:10px}
#FR{float:left;margin:0 ;width:47%;text-align:center}

#FLr{float:left;margin:0 ;width:47%;text-align:left;min-width:200px}
#FRr{float:left;margin:0 ;width:47%;text-align:left;min-width:200px}


#s1{float:left;margin:0 ;width:30%;text-align:left;}
#s2{float:left;margin:0;  width:30%;text-align:left;}
#s3{float:left;margin:0  ;width:30%;text-align:left}
#sd{float:left;margin:0 ;margin-left:3% ;height:10px}

#mitte{margin:auto;width:80%;padding:15px; color:#333;font-family: 'Open Sans', sans-serif,Verdana,Helvetica,Arial,  sans-serif;font-size:20px;text-decoration:none}

#FLN{float:left;margin:0 auto;padding-left:20%;text-align:left}
#FLNC1{float:left;margin:0;text-align:left;width:30%}
#FLNC2{float:left;margin:0;text-align:left;width:30%}

#select{
        width:400px;
        height:500px;
        background-color:#FC0;
		visibility:hidden;
       
        /* fuer horizontale und vertikale zentrierung */
        position: absolute;
        left:50%;
        margin-left:-230px;  /* Um die Hälfte der Breite nach links schieben */
        top:50%;
        margin-top:-280px;  /* Um die Hälfte der Höhe nach oben schieben */
		
	    display: table-cell;

		padding:30px;
        vertical-align: middle;
		text-align:center;
		
		font-size:75px;color:#000;
		font-weight:bold;
		font-family:Arial, Helvetica, sans-serif;

      }
	  

body {
	text-align:center;
	margin:0 auto;
	background-color: #fff;

font-family:Arial, Helvetica, sans-serif;
}
form{
	width:100%;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#333
	}
#logo {
	position:absolute;
 margin:0px auto;
 padding:0px
 
 top: 1px;
 right:0;

 
 
} 
	

._clearall {clear:both;}
/* Navigation #m1 {  background-color:#FFF; opacity:0.5;  width:300px; height:50px; z-index:10; top: 70px; position:absolute;z-index:3;}*/
#navi {  
 margin:0px auto;
 padding:0px;
 text-align:left;
 display:block;
 width:100%;
 z-index:2;
 
 /** */
 font-family:Arial, Helvetica, sans-serif;
 
} 
#navi a {
	margin:0px;
  color: black;                  /* Schriftfarbe schwarz */ 
  text-decoration: none;         /* Unterstreichung entfernen background-color:#FFF;*/ 
  /* oben/unten 4px, re/li 8px */
  margin-top:3px;
 
padding:3px;
 display:block;
 background-color:#FFF;
opacity:0.5;/* Aufzählungszeichen entfernen */

 
}


ul#navi {
  margin:0 auto;
  text-align:left;
  padding:0;
  
}


#navi li {   
          /* display:inline;  Listenelemente nebeneinander */ 
list-style-type: none;  
}

#navi a:hover,        /* mit Komma am Ende */
#startseite #navigo1 a,       /* mit Komma am Ende */
#leistungen #navigo2 a,       /* mit Komma am Ende */
#news #navigo3 a,       /* mit Komma am Ende */
#kontakt #navigo4 a,
#impressum #navigo5 a{    /* ohne Komma am Ende color:#FFF;*/  
background-color:#fff;
opacity:10;


}
#startseite {margin:0 auto;}
#leistungen {margin:0 auto;}
#news {margin:0 auto;}
#kontakt {margin:0 auto;}
#impressum {margin:0 auto;}


/* SelBlock  *****************************************************************************************/
#textmarkergelb {
	background-color:yellow;
	}

._container{
	background-color:#000;
	width:100%;
	height:95px;
	padding:0px;
	}
._selblock{
	float:left;
	width:30.3%;
	height:70px;
	background-color:#000;
	color:#FFF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height:normal;
	margin:10px;
	display:block;
	
}

._selblock a{
	text-decoration:none;
	background-color:#000;
	color:#FFF;
	display:block;
	padding:5px;
	height:65px;
}
._selblock a:hover{
	text-decoration:none;
	color:#FFF;
	background-color:#333;
}

/** Formular ;**/
._maincontainer{
	width:100%;
	padding:0px;
	}
#formcontact{
	float:left;
	#background-color:#9F0;
	width:100%;
	
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#666;
	margin:0px;
	padding:0px;
	margin-right:4px;
	
}
#formcontact p{
	padding:0px;
	margin:0px;
	margin-bottom:10px;
	
	
	
}
#formcontact h{
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	font-weight:bold;
	padding:0px;
	margin:0px;
	margin-bottom:10px;
	
}
#formpic{
	float:left;
	width:200px;
}

#fldin{
	width:100%;
	
	height:35px;
	border:solid 1px #999;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	color:#333;	
}
#fldar{
	width:100%;
	display:block;
	height:90px;
	border:solid 1px #999;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#333;	
}
/* Bereiche  *****************************************************************************************/
#textmarkergelb {background-color:yellow;}
  


#_topper {  
 height:200px;
 background-color:#FFF;
} 
#_middle {  
 height:100%;
 #background-color:yellow;
 width:700px;
 margin: 0 auto;
 position:relative;
} 
#_footer {  
 height:200px;
 background-color:#333;
} 

.textmarkergelb {
  background-color:yellow;
}






/* Schriften ****************************************************************************************/

.textmarkerrot {
  background-color:red;
} 
@font-face {
    font-family: 'borgia_probold';
    src: url('<?echo $verz?>/images/fonts/BorgiaPro-Bold-webfont.eot');
    src: url('<?echo $verz?>/images/fonts/BorgiaPro-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('<?echo $verz?>/images/fonts/BorgiaPro-Bold-webfont.woff') format('woff'),
         url('<?echo $verz?>/images/fonts/BorgiaPro-Bold-webfont.ttf') format('truetype'),
         url('<?echo $verz?>/images/fonts/BorgiaPro-Bold-webfont.svg#borgia_probold') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'MuseoSlab500Regular';
    src: url('https://www.ascandur.com/images/fonts/Museo_Slab_500-webfont.eot');
    src: url('https://www.ascandur.com/images/fonts/Museo_Slab_500-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://www.ascandur.com/images/fonts/Museo_Slab_500-webfont.woff') format('woff'),
         url('https://www.ascandur.com/images/fonts/Museo_Slab_500-webfont.ttf') format('truetype'),
         url('https://www.ascandur.com/images/fonts/Museo_Slab_500-webfont.svg#MuseoSlab500Regular') format('svg');
    font-weight: normal;
    font-style: normal;

}

h1 {font-family: MuseoSlab500Regular, Arial, sans-serif;text-transform:none;text-decoration:none;border:hidden;margin:0px;padding:0px}
h2 {font-family:  Arial, sans-serif;font-size:18px;text-transform:none;text-decoration:none;border:hidden;color:#FFF;margin-top:0px;padding-top:0px}



#logo1 {   padding:0px; margin-top:0px; margin:auto;  z-index:2;  }
#logo2 { padding:0px; background-color:#FFF; margin:0px; right:0px;  z-index:3; }

#m1 { position:fixed; background-color:#FFF; opacity:0.5; margin-top:103px; margin-left:auto;right:1px; width:300px; height:50px; z-index:10;  }
#m11 { position:fixed;  margin-top:103px; margin-left:auto;right:1px; width:300px; height:50px; z-index:11;  }

#m2 { position:fixed; background-color:#FFF; opacity:0.5; margin-top:156px; margin-left:auto;right:1px; width:300px; height:50px; z-index:10;  }
#m22 { position:fixed;  margin-top:156px; margin-left:auto;right:1px; width:300px; height:50px; z-index:11;  }

#m3 { position:fixed; background-color:#FFF; opacity:0.5; margin-top:209px; margin-left:auto;right:1px; width:300px; height:50px; z-index:10;  }
#m33 { position:fixed;  margin-top:209px; margin-left:auto;right:1px; width:300px; height:50px; z-index:11;  }

#backcon {   position relativ;margin-top:0px;margin-left: auto;margin-right: auto ; width:40%;   z-index:6;   }

#backroll2 {position:absolute;margin-top:0px;margin-left: auto;margin-right: auto ; width:40%;  z-index:5; opacity:0.9; }
#textroll { padding:10px; margin-top:0px;margin-left: auto;margin-right: auto ; width:40%;   font-family:Arial, Helvetica, sans-serif;text-align:left;opacity:0.9;   background-color:#FFF; }
#textroll a{color:#000;padding:3px;text-decoration:none;;line-height:21px;background-color:#FC0;margin-right:4px}
#textroll a:hover{color:#000;background-color:#fff;opacity:10;}


article{font-family:Arial, Helvetica, sans-serif;text-align:left;}

#textroll_0 { position:absolute;margin-top:0px;margin-left: auto;margin-right: auto ;  width:38%;  z-index:6;  }
#textrollzero { opacity:1 }

#footprint{margin-top:3px; font-size:12px;z-index:9;height:23px}
#footprint a{color:#000;padding:3px;text-decoration:none;;line-height:21px;background-color:#FFF;opacity:0.5}
#footprint a:hover{color:#000;background-color:#fff;opacity:10;}


/****/
/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
/* some CSS here */

}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
/* some CSS here */

}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 725px){
/* some CSS here */


}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1023px){
/* some CSS here */

}
/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1280px){
/* some CSS here */

}
@media screen and (min-width: 0px) and (max-width: 480px){
/* some CSS here */
#board{margin-top:120px;}

#menueC2{width:100%;padding:0px}
#menueC1{width:100%;text-align:center;padding-bottom:5px}
#menueC3{visibility:hidden;width:0px;height:0px;padding:0px}

nav{top:0px;width:300px;}

 
h1 {font-size:22px;}
#navi{font-size:8px;}
#navi a { height:25px;font-size:12px}
#logo2 { height:55px;width:100%;text-align:center }
#logo1 {height:220px;}
#backcon {    top:0px;margin-top:0px;max-width:400px;min-width:300px; height:0;}
#backroll2 {  max-width:400px;min-width:300px;height:4200px;}
#textroll {   max-width:380px;min-width:280px; }


#logowidth{width:150px;}


li#flow1{width:100%;}
li#flow2{width:100%;}

#s1{width:150px}
#s2{width:150px}
#s3{width:150px}
#FL{width:100%}
#FR{width:100%}
}
@media screen and (min-width: 480px) and (max-width: 768px){
/* some CSS here */
#board{margin-top:120px;}
#menueC2{width:100%;padding:0px}
#menueC1{width:100%;text-align:center;padding-bottom:5px}
#menueC3{visibility:hidden;width:0px;height:0px}

nav{top:0px;width:400px;}
h1 {font-size:25px;}
#navi{font-size:10px;}
#navi a { height:30px;font-size:12px}
#logo2 { height:60px;width:100%;text-align:center }
#logo1 {height:240px;}
#backcon {    max-width:500px;min-width:400px; }
#backroll2 {  max-width:500px;min-width:400px;height:3300px;}
#textroll {   max-width:480px;min-width:380px; }


#logowidth{width:150px;}
li#flow1{width:100%;}
li#flow2{width:100%;}

}
@media screen and (min-width: 768px) and (max-width: 1024px){
/* some CSS here */
#menueC3{visibility:hidden;width:0px;height:0px}
h1 {font-size:35px;}
#navi{font-size:12px;}
#navi a { height:40px;font-size:14px;}
#logo2 { height:80px; width:100% }
#logo1 { position:fixed;right:0px;height:500px; }
#backcon {    margin-top:70px;max-width:500px;min-width:400px; }
#backroll2 {  max-width:500px;min-width:400px;height:3500px;}
#textroll {   max-width:500px;min-width:400px; }



#logowidth{width:150px;}
}

@media screen and (min-width: 1024px) and (max-width: 1366px){
/* some CSS here */
h1 {font-size:35px;}
#navi{font-size:12px;}
#navi a { height:50px;font-size:14px;}
#logo2 { height:120px; width:100% }
#logo1 { position:fixed;right:0px;height:500px; }

#backcon {    margin-top:70px;max-width:620px;min-width:520px; }

#textroll {   max-width:620px;min-width:520px; }


#backroll2 {  max-width:500px;min-width:400px;height:3500px;}
#logowidth{width:250px;}
}


/* #### Desktops #### */
@media screen and (min-width: 1367px){
/* some CSS here */


h1 {font-size:45px;}
#navi{font-size:14px;}
#navi a { height:50px;font-size:14px;}
#logo2 { height:120px; width:100% }
#logo1 { position:fixed;right:0px ;height:500px;}

#backcon {    margin-top:90px;max-width:800px;min-width:700px; }

#textroll {   max-width:800px;min-width:700px; }


#backroll2 {  top:0px;max-width:600px;min-width:500px;height:3000px;}

#logowidth{width:300px;}
</style>