@font-face {
	font-display: swap; 
	font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url('./googlefonts/roboto-v32-latin-regular.woff2') format('woff2');
}
*,
::before,
::after {
	box-sizing : border-box;
}
body {
 	margin : 10px auto;
	padding : 0px;
	max-width : 45em;					
  font-family : Roboto, sans-serif;
}
header {
	margin : 0;
	padding : 20px 10px 10px 10px;
	background-color : #fff;
}
#headline {
  color : #000;
  font-family : Roboto, sans-serif;
  background-color : #fff;
  /*background-size : cover;*/
  text-align : center;
}
#headline h1 {
  background-color : #fff;
  color : #000;
  text-align : center;
  font-weight : 400;
  font-size : 2em;
  line-height : 1em;
}
header img {
  background-color : #fff;
	position : center;
  margin : 2px 0px 10px 0px;
	padding-top : 0;
	border-radius : 50%;
}  
nav{
	clear : both;
  font-family : Roboto, sans-serif;
  font-size : 1em; 
  text-align : center;
	margin : -10px 0px 30px 0px;
	padding : 0;
	width : auto;
	height : 20px;
}
nav a {font-size : 1em; color : #000;}
nav a:hover {color : #333; border-bottom : 1px solid #333;}

main {
	display : grid;
	gap : 2rem;
	grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
	margin-top : 5px;
	color : black;
  font-family : Roboto, sans-serif;
	font-size : 0.9em; 
	padding: 0 5px 0 10px;
}
main > section {
	margin : 0 5px 0 5px;
	/*padding : 1rem;*/
	background : #fff;
}

h2 {
	margin : 0.8rem 0 1rem;
	padding : 4px 0 0 0;
	font-size : 1em;
	line-height: 1em;
	color : #000;
}							
main > section .Artikel1 {
	float : left;
  width : 50%;
  height : auto;
 }	

main > section .Artikel2 {
	float : right;
  width : 50%;
  height : auto;
 }
main > section a {
 	color : #000;
}
main > section a:hover {
	color : #8d8d8d;
}    

footer {
	clear : both;
 	background-color : #fff;
  color : #000;
  font-family : Roboto, sans-serif;
  font-weight : 100;
  font-size : 0.9em;
  text-align : center;
  margin : 0;
  padding : 10px 20px 5px 20px;
  height : auto; 
}
footer p, a {color : #000; text-decoration : none;
}
footer a:hover {
 	color : #666;
 	text-decoration : none;
 	border-bottom : 1px solid #666;
}

/*@media only screen and (max-width: 700px) {
  .responsive {
    width : 49.99999%;
    margin : 10px;
  }
	content h2, p {margin : 0 10px 0 10px;}

	section h2 {padding-left : 20px;}
	section p {padding : 0 0 0 20px;}	
	section img {float : left;}
}
@media only screen and (max-width: 500px) {
  .responsive {
  	width : 100%;
  }
	section h2 {padding-left : 20px;}
	section p {padding : 0 0 0 10px;}
 }*/
	
.clearfix:after {
  content : "";
  display : table;
  clear : both;
}