@charset "UTF-8";
/* CSS Document */


#wrapper-navi {
  position: fixed;
  width:500px;
  left:105px;
  top:180px;
  height:90px;
  padding-right: 0px;
  overflow-y:hidden;
  overflow-x:hidden;
  z-index:1200; 
  margin-top:0px; 
  margin-left:0;
  border: solid blue 0px;
  
}

#wrapper-navi-wide {
  position: fixed;
  width:1000px;
  left:105px;
  top:180px;
  height:90px;
  padding-right: 0px;
  overflow-y:hidden;
  overflow-x:hidden;
  z-index:1200; 
  margin-top:0px; 
  margin-left:0;
  border: solid blue 0px;
  
}


#wrapper-subnavi {
  position: fixed;
  width:500px;
  left:105px;
  top:240px;
  height:20px;
  background-color:rgba(255, 255, 255, 1.0);
  border: solid blue 0px;
  display:block;
}

#wrapper-navi-projekt {
  position: fixed;
  width:500px;
  left:105px;
  top:180px;
  height:90px;
  padding-right: 0px;
  overflow-y:hidden;
  overflow-x:hidden;
  z-index:1200; 
  margin-top:0px; 
  margin-left:0;
  border: solid blue 0px;
}	
	
#wrapper {
  position: fixed;
  width:500px;
  left:105px;
  top:250px;
  max-height:65%;
  padding-right: 0px;
  padding-top: 0px;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  overflow-x:hidden;
  z-index:1200; 
  margin-top:0px; 
  margin-left:0;
  border: solid blue 0px;
  display:block;
}

#wrapper-inner{
     height: calc(100% + 1px);    
    }

#wrapper-projekt {
  position: fixed;
  width:500px;
  left:105px;
  top:240px;
  max-height:65%;
  padding-right: 0px;
  padding-top: 0px;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  overflow-x:hidden;
  z-index:1100; 
  margin-top:0px; 
  margin-left:0;
  border: solid blue 0px;
  display:block;
}

#wrapper-projekt-inner{
     height: calc(100% + 1px);    
    }


#bibliothek {
    position: fixed;
  width:500px;
  height:0px;
  bottom:30px;
	overflow-y:visible;
	
		
			}


#subsection1{
width:100%;}

#subsection2{
width:100%;}


/*FLEX-POSITIONIERUNG*/

.flex-container {
  width:102%;
  padding-top: 0px;
  height:auto;
  margin: 0 auto;
  overflow-x:auto;
  list-style: none;
  display: flex; /* flex | inline-flex */
  display: -webkit-flex;
  flex-direction:row; /* row | row-reverse | column | column-reverse;*/
  -webkit-flex-direction: row;
  flex-wrap:wrap; /* nowrap | wrap | wrap-reverse */
  -webkit-flex-wrap: wrap;
  justify-content: flex-start; /* flex-start | flex-end | center | space-between | space-around */
  align-content:flex-start; /* flex-start | flex-end | center | space-between | space-around | stretch */
  align-items: flex-start; /* flex-start | flex-end | center | baseline | stretch */
  border: solid green 0px;
  background-color:rgba(255, 255, 255, 1.0);
}

.flex-container a {font-size:11px;color:#000; text-decoration: none; cursor:pointer;}

.flex-container p {padding:0; padding-right:8px;}


.flex-item  {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0px;
  padding-bottom: 10px;
  margin-left:4px;
  margin-right:4px;
  margin-bottom: 20px;
  width: 154px;
  height:134px;
  overflow:hidden;
  order:2;
  border: solid white 1px;

}

.flex-item-500px  {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0px;
  padding-bottom: 10px;
  margin-left:4px;
  margin-right:4px;
  margin-bottom: 20px;
  width: 500px;
  height:134px;
  overflow:hidden;
  order:2;
  border: solid white 1px;

}

.flex-item-top  {
  padding-left: 0;
  padding-right: 0;
  padding-top: 10px;
  padding-bottom: 0px;
  margin-left:5px;
  margin-right:5px;
  margin-top: 8px;
  margin-bottom: 3px;
  width: 100%;
  height:25px;
  overflow:hidden;
  order:2;
  border: solid green 0px;

}

.flex-item p{font-size:11px;margin-top:0px;margin-bottom:0px;padding-bottom:0px;}

.flex-item:hover{border:solid lightgrey 1px;}

.flex-weiss{background-color:rgba(255, 255, 255, 0.9);}





/*BILDER*/

.text-wrapper {
    position: relative;
    height:44px;
    left:0px;
    margin-top:3px;
    z-index:900;
    overflow:hidden;
    padding-left:2px;
    padding-right:2px;
    }

.text-wrapper p{font-size:11px;margin-left:5px;margin-top:0px;margin-bottom:0px;padding:0px;}




.img-wrapper {
    position: relative;
    height: 96px;
    margin:0px;
    bottom:0px;
    width: 153px;
    top:0px; 
    z-index:800;
    border:solid red 0px;
}



.img-block {width:102%;bottom:0px;left:0px;
display: inline-block;
  vertical-align: bottom;
}




#blackbox-title {font-size:14px;font-weight: bold;color:#fff;}

#blackbox-project-title {font-size:14px;font-weight: bold;color:#fff;}

#blackbox-project-subtitle {font-size:11px; color:#fff;}

#blackbox-project-year {font-size:11px; color:#fff;}


#blackbox-plus {position: absolute; width: 20px; right: 0px; top:0px; font-size:14px;font-weight: bold; color:#fff; display:none; cursor:pointer;}

#blackbox-minus {position: absolute; width: 20px; right: 0px; top:0px; font-size:14px;font-weight: bold; color:#fff; display:block; cursor:pointer; }

#blackbox-navi {margin-bottom: 1px; font-size:11px;}

#blackbox-navi a {color:#fff; cursor:pointer;}




.box-title {font-size:11px;font-weight: bold;line-height: 1.2;}

.box-subtitle {font-size:8px;line-height: 1.0;}

.box-year {font-size:8px;line-height: 1.0;}


.subnavi { 
	width:100%;
	padding: 0 0 0 0;
  	margin: 0 auto;
	z-index:9000;
	overflow:hidden;
	float:left;
	font:400 16px "Helvetica Neue", Helvetica, Arial, sans-serif;
	padding-top:0px;
	padding-bottom:5px;
	padding-left:5px;
	padding-right:0px;
	line-height:auto;
	text-transform:lowercase;
	border:solid 0px green;
				}
				
zitat {
    left:0px;
    width:93%;
    padding-top:10px;
    padding-bottom:25px;
    padding-left:60px;
    padding-right:60px;
    text-align: center;
    font-size:14px;
    font-weight: bold;
    font-style: italic;
border:solid 0px red;
text-transform: lowercase;}
				
	
/* kleiner rechner
	----------------------------*/	
@media only screen and (max-device-height : 1200px) {
  
#wrapper-projekt {
			max-height:55%; } 

#wrapper {
			max-height:55%; }   
}

/* Mobile - portrait
	----------------------------*/	

@media screen and (max-width: 500px) and (orientation: portrait), screen and (max-device-width: 500px) and (orientation: portrait) {
    



#wrapper {
			position:fixed;
			top:280px;
			margin-top:20px;
			width:auto;
			height:auto;
			max-height:80%;
			left:105px;
			right:105px;
			border: 0px solid blue;
			overflow-y:auto;
  			-webkit-overflow-scrolling: touch;
			}

#wrapper-projekt {
			position:fixed;
			top:270px;
			margin-top:20px;
			width:auto;
			height:auto;
			max-height:70%;
			left:105px;
			right:105px;
			border: 0px solid blue;
			overflow-y:auto;
  			-webkit-overflow-scrolling: touch;
			}


#wrapper-navi {
			position:fixed;
			top:160px;
			margin-top:20px;
			width:auto;
			height:auto;
			left:105px;
			right:105px;
			border: 0px solid blue;
			overflow-y:auto;
  			-webkit-overflow-scrolling: touch;
			}


#wrapper-navi-projekt {
			position:fixed;
			top:175px;
			margin-top:20px;
			width:auto;
			height:auto;
			left:105px;
			right:105px;
			border: 0px solid blue;
			overflow-y:auto;
  			-webkit-overflow-scrolling: touch;
			}

			
#bibliothek {
			position:fixed;
			width:0px;
			height:0px;
			left:105px;
			right:105px;
			border: 0px solid blue;
			}


.flex-item  {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0px;
  padding-bottom: 10px;
  margin-left:5px;
  margin-right:5px;
  margin-bottom: 20px;
  width: 248px;
  height:188px;
  overflow:hidden;
  order:2;
  border: solid green 0px;

}


.text-wrapper {
    position: relative;
    height:38px;
    left:2px;
    margin-top:3px;
    z-index:900;
    overflow:hidden;
    }

.img-wrapper {
    position: relative;
    height: 150px;
    margin:0px;
    bottom:0px;
    width: 248px;
    top:0px; 
    z-index:800;
}



#blackbox-plus {position: absolute; width: 20px; right: 8px; top:5px; font-size:34px;font-weight: bold; color:#fff; display:none; cursor:pointer;}

#blackbox-minus {position: absolute;  width: 20px; right: 8px; top:5px; font-size:34px;font-weight: bold; color:#fff; display:block; cursor:pointer; }

#blackbox-title {font-size:28px;font-weight: bold;color:#fff;}

#blackbox-project-title {font-size:28px;font-weight: bold;color:#fff;padding-left:10px;}

#blackbox-project-subtitle {font-size:18px; color:#fff;padding-left:10px;}

#blackbox-project-year {font-size:18px; color:#fff;padding-left:10px;}

zitat {display:block;
left:0;
    right:0;
    width:auto;
border:solid 0px red;}

.flex-container {
 display: block;}

#wrapper-projekt p{
			padding-top:8px;			
			padding-left:8px;
			padding-right:8px;
			}


}
			
			

/* Mobile - landscape
	----------------------------*/	
	
@media screen and (max-device-width: 768px) and (orientation: landscape) {
    
 

    #wrapper {
			position:fixed;
			top:20px;
			bottom:20px;
			margin-top:0px;
			width:auto;
			max-height:100%;
			left:105px;
			right:105px;
			border: 0px solid blue;
			overflow-y:auto;
  			-webkit-overflow-scrolling: touch;
			}

    #wrapper-projekt {
			top:1000px;
			display:none;
			}

#wrapper-navi {
			display:none;
			}


#wrapper-navi-projekt {
			position:fixed;
			top:0px;
			margin-top:0px;
			width:100%;
			padding-left:0px;
			padding-right:0px;
			padding-bottom:20px;
			left:0px;
			right:0px;
			border: 0px solid blue;
			overflow-y:auto;
  			-webkit-overflow-scrolling: touch;
			z-index:5001;
			}


			
#bibliothek {
			position:fixed;
			width:0px;
			height:0px;
			left:105px;
			right:105px;
			border: 0px solid blue;
			z-index:5001;
			}


#project-title-projekte {
top:0px;
padding-top:20px;	
height: 119px;
	width:100%;
	color:#000;
	background-color:#fff;
				}

.flex-item  {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0px;
  padding-bottom: 10px;
  margin-left:5px;
  margin-right:5px;
  margin-bottom: 20px;
  width: 248px;
  height:188px;
  overflow:hidden;
  order:2;
  border: solid green 0px;

}


.text-wrapper {
    position: relative;
    height:38px;
    left:2px;
    margin-top:3px;
    z-index:5001;
    overflow:hidden;
    }

.img-wrapper {
    position: relative;
    height: 150px;
    margin:0px;
    bottom:0px;
    width: 248px;
    top:0px; 
    z-index:800;
}



#blackbox-plus {display:none; opacity:0;}

#blackbox-minus {display:none; opacity:0; }

#blackbox-title { font-size:28px;font-weight: bold;color:#000;z-index:5000;}

#blackbox-project-title {font-size:28px;font-weight: bold;color:#000;padding-left:120px;}

#blackbox-project-subtitle {font-size:18px; color:#000;padding-left:120px;}

#blackbox-project-year {font-size:18px; color:#000;padding-left:120px;}




		
				}


/* iPad 1 & 2 in portrait
	----------------------------*/	



@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {
    
 #wrapper-projekt {
			max-height:75%; } 

#wrapper {
			max-height:75%; } 
 
 #wrapper-navi {
  position: fixed;
  left:105px;
  right:105px;
  top:180px;
  max-height:75%;
border:solid red 0px;
display:inline;  
}

#blackbox-navi {margin-bottom: 1px; width:100%; font-size:11px; display:inline;}

#blackbox-navi a {color:#fff; cursor:pointer; display:inline;}

.box-title {font-size:10px;line-height: 1.2;}

.box-subtitle {font-size:7px;line-height: 1.0;}	

			
			 }
			 



/* iPad 1 & 2 in landscape
	----------------------------*/	
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) {
    
 #wrapper-projekt {
			max-height:55%; }

 
#wrapper {
			max-height:55%; }  
 

 
 #wrapper-navi {
  position: fixed;
  left:105px;
  right:105px;
  top:180px; 
  max-height:75%;
border:solid red 0px;
display:inline;  
}

#blackbox-navi {margin-bottom: 1px; width:100%; font-size:11px; display:inline;}

#blackbox-navi a {color:#fff; cursor:pointer; display:inline;}

.box-title {font-size:10px;line-height: 1.2;}

.box-subtitle {font-size:7px;line-height: 1.0;}			
			 }