/* Responsives Layout: Bei kleinen Browserfenster (< 40 % der Gesamtbreite) wird der Inhalt untereinander, sonst nebeneinander dargestellt

	+++NICHT ÄNDERN - START+++ */
	/*Layoutraster CSS 3.0*/
@media (min-width: 40em) {body {grid-template-columns:  800px; grid-template-rows: 60px 60px 400px 40px;}}
body {display: grid;gap: 0px; margin: 20px auto; max-width: 60em;}
header {grid-column: 1 / -1; padding-bottom:20px;}
nav {grid-column: 1 / -1;text-align: center;}
main{height:400px; overflow:auto; padding-left: 20px;}
footer {grid-column: 1 / -1; padding-top: 10px;}
/*Pseudoklassen Navigation*/
nav ul {list-style-type: none;}
nav li {margin-top:3px; height: 25px; display: inline;}
nav a { text-decoration: none; color: white; padding: 0px 10px;}
nav a:link, nav a:visited {background-color: #666666;}
nav a:hover, nav a:active {background-color: #FF7C3D; color: black;}
/* +++NICHT ÄNDERN - Ende+++ */

/* +++ AB HIER KÖNNEN SIE DIE CSS-DATEI VERÄNDERN */
body {/*Formatierung sichtbarer Bereich*/
	font-family: Verdana;
	}
header { /*Formatierung Kopfbereich*/
	background: #F1F3F4;
	text-align: center;
	}
nav {/*Formatierung Navigation*/
	background: #999999;
	}
main {/*Formatierung Hauptbereich*/
	background: #F1F3F4;
	}
#home{
	background: url("bilder/hg.png");
	}
footer {/*Formatierung Fussbereich*/
	background: #AAAAAA;
	text-align: center;
	}
h1 {
  margin: 10px 0px 10px 0px;
  font-size: 22px;
  color: #3E5EA5;
  text-transform: uppercase;
	}
h2 {
margin: 10px 0px 10px 0px;
  font-size: 18px;
  color: #666666;
  text-transform: uppercase;
	}
p {
  margin: 0px 0px 10px 0px;
	}
img, video, audio{
	border:2px solid #ff5200;
	border-radius:20px;
	width:150px;
	margin-left:20px;
	}
.media_klein{
	border:2px solid #ff5200;
	border-radius:10px;
	width:50px;
	margin-left:20px;
}
table{
	width:100%;
	}
#werkzeuge{
	text-align:center;
	}
#material{
	font-size:14px;
	}
.info{
	background-color:#cccccc;
	color: #666666;
	margin:10px 0px;
	font-size: 13px;
	text-transform: uppercase;
	text-align: center;
}