/*Bodydesign und Gridlayout*/
body{
  min-height: 100vh;
  display: grid;
  margin: 5px auto;
  max-width: 60em;
  font-family: sans-serif;
  color: orange;
  font-size: 16px;
  background-color: black;
  
  display: grid;
  grid: "head head "
        "nav  nav"
        "main main"
        "opt opt"
        "news aside"
        "foot foot"
        / 1fr 1fr;
}
h2 {
	box-shadow: 3px 3px 3px black;
	text-shadow: 2px 2px 2px black;
}
h3,h4 {
	box-shadow: 2px 2px 2px black;
	text-shadow: 2px 2px 2px black;
}
p {
	text-shadow: 1px 1px 1px black;
}
figcaption {
	font-size: 0,65em;
	text-shadow: 1px 1px 1px black;
}
aside a {
	color: black;
	text-shadow: 1px 1px 1px #58D3F7;
}
@media (min-width: 30em) { 
  body{
    grid: "head head head "
          "nav  news aside"
          "main main main"
          "opt opt opt"
          "foot foot foot"
          / 1fr  1fr 1fr;
 }
}

@media (min-width: 50em) { 
  body{
    grid: "head head head head"
          "nav  main main news"
          "nav  opt opt aside"
          "foot foot foot foot" min-content
          / 1fr  1fr  1fr  1fr;
 }

}
header {
	grid-area: head;	
	border-color: transparent;
		}
nav {	
	grid-area: nav;
	font-weight: bold;
	font-size: 1.15em;
	background-color: dimgrey;
	border-radius:  0.1em 0.1em 0.1em 0.1em;
	border: 2px solid;
	padding: 1px;
	margin: 3px;
	border-color: black;
	box-shadow: 10px 10px 10px #484848;
		}
article {
	grid-area: main;
	padding-left: 10px;
	padding-right: 10px;
	font-size: .9em;
	text-align: justify;
	background-color: dimgrey;
	border-radius:  0.1em 0.1em 0.1em 0.1em;
	border: 2px solid;
	margin: 3px;
	border-color: black;
	box-shadow: 10px 10px 10px #484848;
	align-items: center;
}
section {
	grid-area: opt;
	padding-left: 10px;
	padding-right: 10px;
	font-size: .9em;
	text-align: justify;
	background-color: dimgrey;
	border-radius:  0.1em 0.1em 0.1em 0.1em;
	border: 2px solid;
	margin: 3px;
	border-color: black;
	box-shadow: 10px 10px 10px #484848;
		}
section li {
	text-shadow: 1px 1px 1px black;
}
aside {		
	grid-area: aside;
	padding-left: 10px;
	padding-right: 10px;
	font-size: .8em;
	background-color: dimgrey;
	border-radius:  0.1em 0.1em 0.1em 0.1em;
	border: 2px solid;
	margin: 3px;
	border-color: black;
	box-shadow: 10px 10px 10px #484848;
		}		
#news {
	grid-area: news;
	padding-left: 10px;
	padding-right: 10px;
	font-size: .8em;
}
footer {			
	grid-area: foot;
	padding-left: 10px;
	padding-right: 10px;
	font-size: .8em;
	background-color: dimgrey;	
	border-radius:  0.1em 0.1em 0.1em 0.1em;
	border: 2px solid;
	margin: 3px;
	border-color: black;
	box-shadow: 10px 10px 10px #484848;
		}
.imgcenter {
	max-width: 100%;
	height: auto;
	box-shadow: 3px 3px 3px black;
	justify-content: center;
	}
.imgcentercenter {
	display: grid;
	max-width: 98%;
	height: auto;
	box-shadow: 3px 3px 3px black;
	justify-content: center;
	align-items: center;
	}
/*Navigations Bereich*/
/* Skip-Link */
#skip-link { position: absolute; left: 0; top: 0; background: black; color: white; padding: 0.25em; transform: translateY(-100%); transition: 0.2s transform; z-index: 1001 } 
#skip-link:focus { transform: translateY(0); }			

/* Allgemeine Einstellungen und Einstellungen für schmale Viewports */
#sitenav *, #sitenav a { background-color: transparent; color: orange; text-shadow: 3px 3px 3px black;}
#sitenav { top: 1em; left: 2em; }
#sitenav ul { list-style-type: none; margin:0; padding-top:.2em; padding-left:1em;  }
#sitenav ul ul { margin-left: 0.5em; margin-top: 0.01em; padding-left: .01em; }
#sitenav li a { display: grid;}
#sitenav li a, #sitenav li summary { padding: .2em; margin: .3em; line-height: 1.5em; outline: none; box-shadow: 3px 3px 3px black; }
#sitenav li a:hover, #sitenav li summary:hover, #sitenav li a:focus, #sitenav li summary:focus { outline: 2px solid orange }
#sitenav li a { text-decoration: none;}
#sitenav li { padding: 0em; white-space: nowrap; vertical-align: middle; list-style:none; text-decoration:none;}
#sitenav li[aria-current] a[href='#']::before { content: "► "; text-decoration:none;}
#sitenav ul details summary::after {}
#sitenav ul details:not([open]) summary::after { content: ' ►'; }
#sitenav ul details[open] summary::after { content: ' ◄'; }
#sitenav ul summary::before { content: ""; width: 0; }
#sitenav > details:not([open]) > summary::before { content: "☰"; } 
#sitenav > details[open] > summary::before { content: "×";} 
#sitenav > details { border: 1px solid black; border-radius: .2em; max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; padding: .02em; }
#sitenav > details > ul { margin-left: -.5em; margin-top: .3em; }
#sitenav summary { cursor: pointer;}
#sitenav summary::-webkit-details-marker { display: none; }
#sitenav summary { list-style-type:  none;}
#sitenav.withjs > details > ul > li[aria-current] { border-left: 2px solid black; }
#sitenav.withjs { position: absolute; }
#sitenav.withjs ul { position: absolute; }

/* Einstellungen für breite Viewports */
#sitenav.large { top: 0; left: 0; right: 0; }
#sitenav.large > details { border: none; border-radius: 0; padding: 0 } 
#sitenav.large > details > ul , #sitenav.large > details > ul > li { display: inline-block }
#sitenav.large ul details:not([open]) summary::after { content: ' ▼'; }
#sitenav.large ul details[open] summary::after { content: ' ▲'; }
#sitenav.large > details > ul { width: 100%; box-sizing: border-box; }
#sitenav.large > details > ul { margin-left: 0; margin-top: 0; border-radius: 0; }
#sitenav.large > details > ul > li[aria-current] { border-bottom: 2px solid black; border-left: none; }
#sitenav.large ul ul { margin-left: -.5em; margin-top: -.01em; padding-left: .5em; border-radius: 0 0 .5em .5em;}