html {   /*! blendet die Scrollleiste permanent ein, auch bei wenig Inhalt !! */
    overflow-y: scroll;
	-ms-overflow-style: scrollbar;
}

/*! BACKGROUND  */
header, main, footer {
	background-color: white;
}
#left, #right {
	background-color: #F1F1F9; /*! old210127 #F4F4FA <- ghostwhite */
}

/*! IMAGES  */
img {
	width:100%;
	height:auto;
} 

/*! PADDING  */	
header, #navMain, main, footer {
	padding-left: 32px;
	padding-left: 2rem;
	padding-right: 32px;
	padding-right: 2rem;
}
.h2main {
	padding-top: 80px;  
	padding-top: 5rem;
	padding-bottom: 48px;   
	padding-bottom: 3rem;
}
.h2subtitle {
	padding-top: 0;  
	padding-top: 0;
	padding-bottom: 48px;   
	padding-bottom: 3rem;
}
#navigationSub2 {
	padding-left: 390px; 
	padding-left: 24.375rem;
}
#navKontakt {
	padding-right: 65px; 
	padding-right: 4.0625rem;
}
#navigationLanguage {
	padding-right: 96px;  
	padding-right: 6rem;
	padding-top: 32px;
	padding-top: 2rem;
}
.imgList1 {
	padding-bottom: 80px;  
	padding-bottom: 5rem;
}
main {
	padding-bottom: 32px;  
	padding-bottom: 2rem;
}
footer {
	padding-top: 48px;
	padding-top: 3rem;
}

/*! FONT  */	
.imgList1 {
	font-size: 12px;
	font-size: 0.75rem;
}
html {
	font-size: 100%;  /*! Browserdefault 16px */
}	
body {
	font-family: 'Montserrat', Arial, sans-serif;
	color: Black;
	font-size: 14px;
	font-size: 0.875rem;
	line-height: 19px;
	line-height: 1.1875rem;
}	
h1 {
	font-family: 'Montserrat:600', Arial, sans-serif;
	font-size: 42px;
	font-size: 2.625rem;
	line-height: 42px;
	line-height: 2.625rem;
	color: Silver; 
}
h2 {
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 26px;
	font-size: 1.625rem;
	color: Silver;
}
#druckwerkeSubtitle h2 {
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 20px;
	font-size: 1.25rem;
	color: Silver;
}

footer {
	font-family:  'Montserrat', Arial, sans-serif;
    font-size: 14px;
	font-size: 0.875rem;  
	line-height: 26px;
	line-height: 1.625rem;
}
/*! TABLE  */
div.table { 
	display: table; 
	border-collapse: collapse; 
}
div.tr { 
	display: table-row; 
}
div.td { 
	display: table-cell; 
	border: ; 
}	

/*! MISC  */	
.texte1, .texte2 {
	width: 720px;
	width: 45rem;
}
hr {
	height : 1px;
	padding : 0;
	border-color : #9999CC;
	border-width : 1px 0 0 0;
	border-style : solid;
}

/*! GRID-LAYOUT  */	
.container {
	display: grid;

	grid-template-areas:
		"sideleft . header header sideright"
		"sideleft . navMain sidemainright sideright"
		"sideleft . content sidemainright sideright"
		"sideleft . footer sidemainright sideright";

	grid-template-columns: 1fr 100px 900px 200px 1fr;
	grid-template-rows: auto auto 1fr auto;
	grid-gap: 0px;

	height: 100vh;
}		
header {
	grid-area: header;
	  
	display: flex;
	justify-content: space-between;
	align-items: center;
}
main {
	grid-area: content;
}
#navMain {
	grid-area: navMain;
}
#mainright {
	grid-area: sidemainright;
}
#left {
	grid-area: sideleft;
}
#right {
	grid-area: sideright;
}
footer {
	grid-area: footer;
}

/*! MEDIA-QUERY  */	
@media (max-width: 1400px) {
#left, #right {
	background-color: white;
}
hr {
	border-color : Gray;
}
}
	
@media (max-width: 1270px) {
#ImgWerkbank {
  	display: none;
}
}

@media (max-width: 1250px) {
.container {
	grid-template-areas:
		" . header header . "
		" . navMain sidemainright . "
		" . content sidemainright . "
		" . footer sidemainright . ";
	
grid-template-columns: 1fr 850px 100px 1fr;
}
#navigationLanguage {
	padding-top: 0;
	padding-top: 0;
	position: absolute;
	top: 32px;
	right: 64px;
}
}    
  
@media (max-width: 1024px) {
img {
	width:90%;
}	
.container {
	grid-template-areas:
	"header ."
	"navMain ."
	"content ."
	"footer .";

	grid-template-columns: 850px 1fr;
	grid-template-rows:
		auto /* Header */
		auto /* Nav */
		1fr /* Content */
		auto; /* Footer */
}
#navigationSub2 {
	padding-left: 304px; 
	padding-left: 19rem;
}
#navKontakt {
	padding-right: 0px; 
	padding-right: 0rem;
}
#navigationLanguage {
	padding-right: 0px;  
	padding-right: 0rem;

}
}

@media (max-width: 850px) {
img {
	width:90%;
}	
.container {
	grid-template-columns: 750px 1fr;
}
}