body {
	display : grid;
	gap : 0.5em;
}

@media (min-width: 30em) {
	/* Breite beträgt mindestens 30em */
	
	body {
		grid-template-columns : 1fr 1fr;/*3fr*/
		grid-template-rows : auto 1fr 100px;
	}
}

header,
footer {
	grid-column : 1 / -1;
}

header {
	background : #ffffff;
	display : grid;
	/*grid-template-columns: min-content 1fr;*/
}
#headline {
  color : #000;
  font-family: Verdana, Helvetica, sans-serif;
  background-color : #fff;
  background-size : cover;
}
#headline h1 {
  background-color : #fff;
  color : #808080;
  float : left;
  font-weight : 300;
  font-size : 1.2em;
  line-height : 1em;
  padding-top : 5px; 
}

#headline img {
  background-color : #fff;
	float : right;
  margin : 0;
	padding-top : 0;
}   
hr {clear : both; border-top : 1px solid #3399ff;}  
nav{
	clear : both;
  font-family : Arial, sans-serif;
  font-size : 1em;
	margin-bottom : 10px;
	padding-top : 2px;
	width : auto;
	height : 20px;
	background-color : #39f;
}
#menucont {
	color : #39f;
	background-color : transparent;
	width : auto;
	height : 15px;
	position : absolute;
}
.menublock, .display {
	float : left;
	width : 101px;
	background-color : #39f;
}
.subs{
	background-color : #fff;
	margin-top : 4px;
	padding : 2px 0 2px 0;
	border : 1px solid silver;
}
.subs a{
	display : block;
	font-size : 1em;

}
.menublock .subs{
	display : none;
}
a.tl, a.tl:hover, a.tl:active, a.sl, a.sl:hover, a.sl:active { 
	display : block;
	text-decoration : none; 
	color : #000;
	background-color : transparent;
	margin : 0;
	padding : 2px;
	border : none;
	text-align : center;
	font-size : 1em;
	font-weight : normal;
}
a.tl:hover, a.tl:active , a.sl:hover, a.sl:active{ 
	color : #fff;
	text-align : center;
}

a.sl:hover, a.sl:active{
	text-align : center;
	background-color : #fff;
	color : #0074E8;
}

.sidenav {
  height : 100%;
  width : 0;
  position : fixed;
  z-index : 1;
  top : 0;
  left : 0;
  background-color : #565658;
  overflow-x : hidden;
  transition : 0.5s;
  padding-top : 60px;
}
.sidenav a {
  padding : 8px 8px 8px 32px;
  text-decoration : none;
  font-size : 1em;
  color : #fff;
  display : block;
  transition : 0.3s;
}
.sidenav a :hover {
  color : #3399ff;
}
.sidenav .closebtn {
  position : absolute;
  top : 0;
  right : 25px;
  font-size : 36px;
  margin-left : 50px;
}
/*content {
	clear : both;
  margin : 0;
  padding : 5px;	
	height : auto;
	font-weight : 100;
  font : 0.9em Arial, sans-serif;
	color : #000;
}
content img {height : auto;}*/

h2 {font : 1.3em Arial, sans-serif; color : #39f;}
h3 {font : 1.1em Arial, sans-serif; color : #000;}
p {font : 1em Arial, sans-serif; color : #000;}

div.dat {font : 0.9em Arial, sans-serif;}

main {
	background : #ffffff;
	margin : 0 0 0 5px;

}
aside {
	background : #ffffff; 
	margin : 0 5px 0 0;
	
}
css-slides {
	position : relative;
	height : 520px;
	width : 100%;
	padding-top : 20px;
	/*padding-bottom : calc(480/460 * 100%);*/
	overflow : hidden;
	display : block;
}
@keyframes fade {
	0%      { opacity: 0; }  /** fadeIn beginnt            **/
	11.11%  { opacity: 1; }  /** Bild steht                **/
	33.33%  { opacity: 1; }  /** Bild bleibt zwei Sekunden **/
	44.44%  { opacity: 0; }  /** fadeOut beendet           **/
	100%    { opacity: 0; }
}
css-slides img { 
    opacity : 0; 
    animation-name : fade; 
    animation-duration : 9s; 
    animation-iteration-count : infinite; 
    position : absolute; 
    left : 8px; 
    right : 0;
    /*border : 1px solid silver;*/
		box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}
css-slides img:nth-child(1) { animation-delay: 0s; }
css-slides img:nth-child(2) { animation-delay: 3s; }
css-slides img:nth-child(3) { animation-delay: 6s; }

footer {
	background : #ffffff;
 }

footer * {
	text-align : center;
	clear : right;
	margin : 0 0 1em;
}

footer .keywords p {
	clear : both;
  background-color : transparent;
  font-family :  Arial, sans-serif;
  color : #8D8D8D;
  text-align : center;
  padding : 20px 5px 10px 5px;
}
body {
	margin : 5px auto;
	max-width : 60em;
	height : auto;
	border : 1px solid #E8E8E8;
	box-shadow : 10px 10px 20px 2px rgba(128, 128, 128, 0.6);	       		 
  font-family :  Arial, sans-serif;
}

header,
nav,
main,
article,
section,
aside,
footer {
	padding : 5px;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width : 49.99999%;
    margin : 6px 0;
  } 
}  
@media only screen and (max-width: 500px) {
  .responsive {
    width : 80%;
    margin : 0;
    padding : 0;
  }
  	#navibox {visibility : hidden;}
	-ms-webkit-[hidden] { display : none; }
}

.clearfix:after {
  content : "";
  display : table;
  clear : both;
}