html, body {height:100%; }
body {
	margin: 0;
	padding: 0;
}

body,table {
	font-family:verdana, serif;
	font-size:100%;
	/*letter-spacing: 0.5em;*/
	color:#000;
	background-color:#fff;
	}

	
	
.info, .projekte, .bild{font-size:80%;}
	
	
div, p, ul, li, a, img  {margin:0;padding:0;border:0;}
a {text-decoration:none;color:#000;}
.aktiv {color:#000;}
a:hover {color:#000;}

.daten {
	font-size:70%; line-height:20px;
}



td{vertical-align:top;padding-right:10px;padding-bottom:6px;}

h1 { font-weight:bold; font-size:100%; padding: 0;margin:0;margin-bottom:8px; }
h2 { font-weight:bold; font-size:100%; padding: 0;margin:0; margin-bottom:8px;} 
p {margin-bottom:8px;}

#nav, #nav a, #nav2, #nav2 a,  #subnav, #subnav a {color:#7e7980;}
#nav a,  #subnav a  {color:#959197;  border: 1px solid transparent;}
#nav a:hover, #subnav a:hover  {color:#000;/*border:1px solid black;*/}
#nav a.aktiv,  #subnav a.aktiv {color:#000;}

.aktiv {color:#000; }

#rahmen{
/*max-width:1020px;*/
max-width:1120px;
margin: 0 auto;
min-height: 100%; 
height: auto !important; height: 100%; 
overflow: hidden !important; 
padding-top:2%;
padding-right:8%;
padding-left:2%;
}

/*  linke Spalte */
#navi {float:left; width:20%; min-width:120px; height:100%; }
#logo {position:fixed;width:120px;margin-top:10px;padding-right:10px;}
#subnav{float:left;position:fixed;margin-top:200px;margin-left:-2px;font-size:100%;}



/*  rechte Spalte */

#content {float:right; height:100%; font-size:16px; width:76%;/*width:840px;*/ }

#nav {font-size:100%x;  position:absolute;  }
#nav ul {list-style-type:none; list-style-image:none; margin:0px;padding:0px;}
#nav li.topmenu {  float:left;}
.topmenu a {  float:left;  /*width:180px;*/}
.topmenu ul{  display:none;}
.topmenu:hover ul {  display:block;    z-index:500;}
.topmenu ul.aktiv {  display:block;    z-index:500;}


.topmenu a, .submenu a{ padding-right:40px;}


.submenu a{ padding-right:0px;  font-size:80%;  /*width:110px;*/  position:relative;  clear:both; /* special IE6 */}
#nav ul li ul li a.on {  color:#000; border:1px solid #7e7980; /*width:180px;*/}
#nav a:hover { color:#000; border: 1px solid #7e7980;}





#arbeiten {margin-top:88px; }

.bild {float:left;margin-top:40px;/*background-color:#C6CBBB;*/}
.bildtext {text-align:right; margin-top:20px;margin-bottom:20%;line-height:16px;/*border:1px solid red;*/}

.bild {max-width:100%; height:auto; position:relative; display:block; }

.bild img {
width:100% !important;
width: auto;
}

.info {float:left; margin-top:98px;margin-left:120px;max-width:100%;line-height:20px;}


.projekte {margin-top:40px;/*background-color:#C6CBBB;*/max-width:100%;}
.projekte img{margin-right:30px;margin-bottom:20px;}


.kat p{float:left; width:240px;margin-right:40px;}
.kat img{float:left; margin-bottom:40px;}



div.clear{
clear: left;
height: 0;
font-size: 0;
}

.info table{
    overflow-x:auto;
}


/*  ********************************       */

@viewport {
   width: device-width;
}


/* kl. Bildschirmauflösung*/
@media screen and (max-width: 500px){
.info {margin-left:0px;}
}


/* kl. Bildschirmauflösung*/
@media screen and (max-width: 340px){
#logo {position:absolute;}
#subnav {position:relative;}
#navi {width:100%;}
#nav ul li  {width:100%;}
#nav ul li  ul{display:none;}
#nav ul li  ul.aktiv {  display:block; }
#content {float:left;width:100%;}
#arbeiten {margin-top:140px;}
.info {margin-left:0px; margin-top:40px;}
#subnav{margin-top:176px;}
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)  { /*iPad mini*/
#nav {width:800px;
.topmenu a, .submenu a{  padding-right:56px;}
}
}