@charset "utf-8";
/* CSS Document */

/* Theme standard3  */

html { 
  box-sizing: border-box; 
} 

*, ::before, ::after { 
  box-sizing: inherit; 
}

html {
	background: #ffffcc;
	color: #663300;	
    font: normal 1em Arial, sans-serif;  /* Mindestschriftgröße wird dem Browser, bzw. dem Nutzer überlassen! */
}

body {
  margin: 0 auto;
  padding: 0;
}

body > * {
  padding: 1em;
  margin: 1em 0;
}

/* header - Seitenkopf */

header {
  margin: 0;
  padding: 0;
}

header h1 {
  display: none
}

/* Navigation */

nav {
}

nav ul {
	list-style-type: none;
	display: grid;
	grid-template-columns: 1fr;  
}

nav a {
	display: block;	
	background: brown;
	color: white;
	text-align: center;
	text-decoration: none;
	padding: 0.5em;
	margin: 0.5em;
}

nav a:hover,
nav a:focus {
	background:#666;
}

nav a[aria-current=page]{
	font-weight: bold;;
}

/* Inhalt */

a {
	color: #008b8b
}

a:hover, a:focus {
	background: #a9a9a9 ;
}

footer {
	background: brown;
	color: white;
	margin: 0;
	padding: 0% 10% 4% 10%;
	display: grid;	
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 20em) { 
	body {
		display: grid;
		grid-template-columns: repeat(2, 1fr);  
	}
	nav {
		background: brown;
	}
	nav ul {
		grid-template-columns: repeat(4, 1fr);  
		max-width: 40em;
		margin: 0 auto;
	}	
	
	nav a {
		margin: 0;
	}
	
	header,
	article,
	footer {
    	grid-column: 1 / 3;
  	}
	
	img {
		max-width: 75%;
		height: auto;
		max-height: 200px;
	}
}
	
@media (min-width: 40em) { 
	body {
		grid-template-columns: 5em 1fr 1fr 1fr 5em;
  		grid-template-rows: 2em auto 2em;
		grid-gap: 1em;
  		min-height: 100vh;
	}
	header {
    	grid-column: 1 / 6;
  	}	
	
	footer {
    	grid-column: 1 / -1;
  	}
	
	article {
    	grid-column: 2 / 5;
    	grid-row:    2 / 2;
  	}
	
	img {
		max-width: 100%;
		margin-bottom: 5px;
		margin-left: auto;
		margin-right: 5px;
		height: 200px;
	}

	#index img {
		width: 50%;
		float: none;
	}
}