.Schachtel {
    width: 1200px;
    margin: 0 auto;
    height: 150vh;
    max-width: 1200px;
    display: grid;
    grid-template-columns: 18% 64% 18%;
    grid-template-rows: 10% 40% 40% 10%;
    grid-template-areas:
        "kopf kopf navi"
        "infos artikel navi"
        "infos artikel navi"
        "infos artikel navi";    
	}
.Kopf {
	grid-area: kopf;
	background: #e9e9e9;
	border-bottom-style: ridge;  
	box-shadow: -4px -4px 20px #eeeeee inset;  
	padding: 0.3em;
	background-size: contain;
	background-image: url("../seite/LogoFKSUKtransp.png");
	text-align: center;
	text-shadow: 0px 4px 4px #909090;
	color: black;
	font-size: 2em;
	}
	<!-- farbe ffee99 -->
.Artikel {
	grid-area: artikel;
	padding: 0.5em;
   background: #ffffff;
   color: darkred;
   border-style: dotted; 
	}
.Info {
	grid-area: infos;
	box-shadow: -3px -3px 30px #fefefe inset;
	padding: 0.2em;
   background: #dddddd;
   color: darkred;   
	}



@media screen and (max-width: 900px) {
	.schachtel {
		width: 99vw;
		height: 200vh;
		display: grid;    
		grid-template-columns: 13% 70% 17%;
		grid-template-rows: 15% 85%;
		grid-template-areas:
			"kopf kopf navi"
			"artikel artikel Info"
    }
    .Kopf {
		grid-area: kopf;
		}
	.Artikel {
		grid-area: artikel;
		}
	.Info {
		grid-area: Info;
	}
   
}

@media only screen and (max-width:600px) {
	.menuknopf {display: block;}
	.menuknopf {
		background-color: darkorange;
		display: block;
		position: absolute;
		right: 0;
		top: 0;
		padding: 0.5em;
		color: white;
		cursor: pointer;
		text-decoration: none;
	}
	#steuerung {
		float: left;
		width: 100%;
		display: none;
	}
	#steuerung li {
		width: 100%;
		border-bottom: 2px solid silver;
	}
	.menuknopf:hover {
		color: darkorange;;
		background: darkgrey;
	}
}
<!-- einblenden -->
#nav-menu:target #steuerung {display: block;} 
<!-- Ausblenden -->
#nav-menu:target .menuknopf-auf {display: none;}





aside {	
	border: 1px;	
	padding-right: 0.5em;
	padding-left: 0.5em;
	text-align: center;
	font-family: sans-serif;
	align-self: center;
	text-shadow: 1px 1px 3px hsl(51,100%,50%);
	}
aside a{
	text-decoration: none;
	color: hsl(0, 100%, 27%);
	}
aside li:hover {
	transition: all 500ms;
	background-color: hsl(51,100%,70%);
	color: hsl(0, 100%, 40%);
	box-shadow: inset 2px 2px 8px hsl(51,100%,20%);
	text-shadow: 5px 5px 3px hsl(51,100%,40%);
	}
aside ul {
	padding-left: 0.0em;
	padding-right: 0.0em;
	background-color: #ffff99;
	margin-left: 0.3em;
	margin-right: 0.3em;
	border-color: black;
	border-style: groove;
	box-shadow:  -3px 1px 3px olive;
	}
aside ul li {
	padding: 2px;
	padding-bottom: 0.7em;
	border: 1px;
	border-color: black;
	border-style: groove;
	margin-bottom: 0px;
	list-style-type: none;
	}
aside ul li p {
	margin: 0px;
	margin-bottom: 4px;
	font-size: 1em;
	}
aside h2 {margin-top: 4px;}
aside h3 {margin-top: 4px; margin-bottom: 6px;}