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

/*//Farben

hellgrau: #f2f2f2
dimgrey: #696969
red:

//bildgrößen: breite 100%/

Schrift allgemein: Niveau Grotesk, Adobe Typekit



/* Reset * * * * * * * * */
* {
	margin: 0;
	padding: 0;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
html {
	font-size: 110%;
	font-size: 1.1em;/* Browserstandard: 16px */
	height: 100%;
	scroll-behavior: smooth;
}

img {
	width: 100%;

	

	
}




body {width:100%;
	height: 100%;
	font: 300 'niveau-grotesk', Helvetica, Arial, sans-serif;
	font-size:0.938em;
	line-height:1.375em;
	background: black;

	
}




.wrapper{
width: 100%;
margin: 0 auto;
overflow:hidden;
margin-bottom:1%;
margin-top:2%;
background:black;
padding-right:8%;
padding-left:10%;
}



.wrapper-neg{
width: 100%;
height:100%;
margin: 0 auto;
overflow:hidden;
margin-bottom:1%;
margin-top:-0%;
padding-left:10%;
padding-right:8%;
background: url("../images/Info_Rauch.jpg") no-repeat; 
background-position:bottom;
background-size:cover;



}


.column-left{
background-color:none;
position:fixed;
margin-top:20%;
width:25%;
padding: 0 0 1200px 0;
}


.column-right{
background-color:none;
margin-top:12%;
margin-right: 0;
float:right;
width:33%;
}




.background-imprint{
background: white;
color:black;
padding:2% 2% 2% 2%;
margin: 0 40% 20px 0;


}

/*typo allgemein*/

h1, h2, h3, h4, h5, h6, p{
font-family: niveau-grotesk, helvetica, sans-serif;
font-weight: 300;
font-style: normal;
color:white;
padding: 0 0 4px 0;
}




h1 {
font-weight: 700;
font-size:2.3em;
line-height:3em;
color:white;


}

/*h1 für Header*/
header h1{
font-weight: 700;
font-size: 1.6em;
line-height:1.375em;
padding: 0 0 0 0;
color:white;

}



/*h2 Headlines*/
h2 {
	font-weight: 700;
	font-size: 24px;
	font-size: 1.5em;
	font-size: 150%;
line-height:22px;
line-height:1.375em;
line-height:137.5%;
padding:0 0 4% 0;
color:black;
}

/*h3 HL index und Projekte/Mouseover*/
h3 {
	font-weight: 700;
	font-size:40px;
	font-size:2.5em;
	font-size:250%;
	line-height:40px;
	line-height:2.5em;
	line-height:250%;
	color:white;
	padding:0 0 0 0;

	
	}
	
h3 a{
color:white;
z-index: 1; 
text-decoration:none;
padding: 0 0 0 2%;
opacity:1;
}

h3 a:hover{
color:white;
z-index: 1; 

}
	
	
	/*h4 zwischenheadlines*/
h4 {
	font-weight: 700;
	font-style: normal;
font-size:1.063em;
line-height:1.375em;
color:black;
padding:5px 0 0 0;
	}
	
	
h4 a:hover{
color:red;
}	
	
	
	/*h6 Footer negativ*/
h6 {
	font-weight: 700;
	font-size:12px;
	font-size:0.75em;
	font-size:75%;
	line-height: 28px;
	line-height: 1.75em;
	line-height: 175%;
	color: white;
	}
		
		
h6 a{color:white;
text-decoration:none;}

h6 a:hover{
color:red;
}
	
	
	/*p Fließtexte*/
p {
font-size:1em;
line-height:1.375em;
color:black;

	}
	
strong{
font-weight:300;
}


em{
font-style:italic;
letter-spacing:1;
}


i{
font-style:italic;
}
	
	
p a:hover{
color:red;
text-decoration:none;
font-weight: 700;

}	






blockquote a{
	font-family: niveau-grotesk, helvetica, sans-serif;
	font-weight: 300;
	font-style: italic;
	text-decoration:none;
	font-size:2em;
line-height:1.375em;
	color: #f2f2f2;
	padding: 20px 0px;
 opacity: 0;
  transition: 4s;
}

blockquote a:hover{
display:visible;
color: white;
opacity:1;

}
	
	
	/*p Links allgemein*/	
	
a {
color:black;
text-decoration:underline;	
line-height:1.876em;
}
	
	
	
	
	
	
	
	
/*Header*/	
	header{
	height: 12%;
	background-color:none;
	width:100%;
	z-index: 99;
	position:absolute;
	top:0;
	display:block;
	
	

	}
	
	header h1 a {color: white;
	position: absolute;
	margin-left: 0%;
	margin-top: 0%;
	text-decoration: none;
	z-index: 1;}

	
	
	

nav {
background:black;
}


ul{
width:80%;
background:none;
margin: 0 auto;
position: absolute;
margin-right: 5%;
height:5%;
color:white;


}



	


		
		
	/*Navigation*/		
	
li {
	font-family: niveau-grotesk, helvetica, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 1.6em;
	line-height: 1.75em;
	color: white;
	display:inline;
	float: right;
	text-align: right;
	list-style: none;
	margin: 0% 0 0 3%;	
}	


	
li a{text-decoration: none;
color: white;
}	
	
	
li a:hover {
color:  #696969;
text-decoration:underline;
}	

.active{
color:red;
text-decoration: none;
}


	
	/*Main*/		
	
#main{
background: white;
width: 100%;
margin: 0 auto;
margin-top:10%;
}
	

	
#main-index{
	background: url("../images/Schmuckader.jpg") no-repeat; 
		height:100%;
	background-position:center;
	  background-size: cover; 
   width: 100vw;
   display: flex; 
	
	
	
}


#main-index h3{
color:white;
font-size:48px;
font-size:3em;
font-size:300%;
line-height:24px;
line-height:1.5em;
line-height:150%;
padding:45% 10% 0% 10%;
position:fixed;


}


	/*Content-Grid*/	
	

#info-left{
width:31%;
float:left;
margin-right: 2%;



}
	


#info-middle{
width:31%;
float:left;
margin-right: 2%;

}
	
	
	
#info-right{
width:31%;
float:right;
margin-right: 3%;

}
	

/*Texte: einspaltig*/	
.content-text{
width:100%;
height:auto;
padding: 2% 2% 3% 2%;
background-color:white;
margin-bottom: 24px;




}


/*Texte: einspaltig Roter Fond*/	
.content-text-rot{
width:100%;
height:auto;
padding: 2% 2% 3% 2%;
background-color:red;
margin-bottom: 24px;
	border-radius:20px;
	
	
	
}
/*Überschrift im roten Kasten*/	

.content-text-rot h2{
	color:white;
}

/*kleiner TExt und Link im roten Kasten*/	

.content-text-rot h4{
	color:white;
	font-weight:400;
}
	
	
.content-text-rot h4 a{
	color:white;
}
	
		
.content-text-rot h4 a:hover{
	color:greenyellow;
}




	
	/*projekttrennlinie*/		
	
hr{
width:100%;
border:white 1px solid;
display:block;
z-index: 0;
}	
	
	
	/*Footer*/		
	
footer{
background: black;
position:relative;
bottom: 0;
width:100%;
padding:0% 10%;
margin-top:-0%;
}

.address-01{
width: 22%;
display:inline-block;
margin:0 0% 0 0;
}

.datenschutz{
float: right;
padding: 0 0 3% 0;
}




		/*nach oben button*/	


#myBtn{
display:none;
position:fixed;
bottom:3%;
right:2%;
background-color: transparent;
border:none;
 outline: none;
color:red;


}


#myBtn:hover{
background-color: red;
color:black;

}






@media (min-width: 2000px){




	
	
/*Header*/	
	header{
	height: 12%;
	background-color:none;
	width:100%;
	z-index: 99;
	position:absolute;
	top:0;
	display:block;
	
	

	}
	
	header h1 a {color: white;
	position: absolute;
	margin-left: 0%;
	margin-top: 0%;
	text-decoration: none;
	z-index: 1;}

	




#main{
background: white;
width: 100%;
margin:0% 20%;
margin: 0 auto;
margin-top:8%;
}
	



.wrapper{
width: 100%;
margin: 0 auto;
overflow:hidden;
margin-bottom:1%;
margin-top:2%;
background:black;
padding-right:8%;
padding-left:20%;
}



.wrapper-neg{
width: 100%;
height:100%;
margin: 0 auto;
overflow:hidden;
margin-bottom:0%;
margin-top:-0%;
padding-left:20%;
padding-right:18%;
background: url("../images/Info_Rauch.jpg") no-repeat; 
background-size:cover;



}



.column-left{
background-color:none;
position:fixed;
margin-top:15%;
width:20%;
padding: 0;
}




ul{
width:55%;
background:none;
margin: 0 auto;
position: absolute;
margin-left: 5%;
height:5%;


}





footer {
    background: black;
    position: relative;
    bottom: 0;
    width: 100%;
    padding: 1% 20%;
    margin-top: -0%;
}



}


@media (max-width: 1200px){






}

	
@media (max-width: 600px){




	header{
	color:white;
	height: 100px;
	opacity: 0.94;
	z-index: 99;
	top:0;
	display:block;

	}
	
	

	
	header .wrapper {
	width:100%;
	height:100px;
	padding:20px 4%;



	
	}
	





.wrapper{
background:orange;
width: 100%;
margin: 0 auto;
overflow:hidden;
margin-bottom:1%;
margin-top:2%;
padding-right:0%;
padding-left:0%;

}



 
.wrapper-neg{
width: 100%;
height:100%;
overflow:hidden;
margin-bottom:1%;
margin-top:0%;
margin-left:0;
background: none;
padding-top:10px;




}


	
	/*Main*/		
	
#main{
background: white;
width: 100%;
margin: 0 auto;
margin-top:100px;
}
	

footer{
display:none;
}	



.main-index h3{
color:white;
font-size:48px;
font-size:3em;
font-size:300%;
line-height:24px;
line-height:1.5em;
line-height:150%;
padding:45% 10% 0% 10%;
position:fixed;


}



.column-left{
background-color:none;
position:fixed;
margin-top:20%;
width:100%;
padding: 0 0 1200px 0;
}


.column-right{
background-color:none;
margin-top:12%;
margin-right: 0;
margin-left: 0;
float:left;
width:100%;
}




.background-imprint{
width: 97%;
margin:0 auto;







}



blockquote{
display:none;
}











}