/* Kleine Monitore */
body {
	margin: 0.2em;
	font-family: Segoe UI light, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	color: gray;
}
img {
	width: 100%;
	height: auto;
	max-width: 200px;
	max-height: 200px
}

a {
	text-decoration: none;
	color:dimgray
}
a:hover {
	color: red;
}
hr
{
  background-color:#ccc;
  color:#ccc;
  border:#ccc;
  height:1px;

}

h1{
	margin-top: 0;
	font-size: 2em;
}
article {
	padding: 0.2em;
}
#main {
	
	max-width: 1280px;
	margin: 1em auto;
	border: 1px dotted grey;
	background-color: white;
	display: flex;
}





#holzfee{
width: 50%;
text-align: right;
padding: 0.5em;
background-color: #F3F3F3;

}
#holzfee .rahmen{
display: flex;
flex-direction: row;
justify-content: space-between;	
}



#grohoga{
width: 50%;
text-align: left;	
padding: 0.5em;
}
#grohoga .rahmen{
display: flex;
flex-direction: row-reverse;
justify-content: space-between;	
}









footer{
	max-width: 1280px;
	margin: 1em auto;
}










@media screen and (max-width:900px) {
#main {
display: flex;
flex-direction: column-reverse;
}	
article {
width: auto;
}

h2{
text-align: center;
}	
	
#holzfee{
width: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
}

	
#grohoga{
width: auto;
display: flex;
flex-direction: column-reverse;
justify-content: space-between;

}


.rahmen{
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
	}

#holzfee .rahmen{
flex-direction: row-reverse;
text-align: left
	
	}
	
}