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

/* alle Ränder auf 0 setzen */
* {
	margin:0;
	padding:0;
	border:none;
}

/* Seiten-Aufbau (Layout) */
html {
	height:99%;
}
body {
	overflow:auto;
}

.container {
	width: 1200px;
	margin-right:auto;
	margin-left:auto;
	background-color: rgba(255, 255, 255, 0.7);
	/*	border:1px solid orange;	*/
}

header, main, footer {
	padding:8px;
	display:flex;
}


header {
	min-height:36px;
	/*border:1px solid blue;	*/
}

main {
	flex-direction:column;
}


footer {
	flex-direction:column;	
}

nav {
	display:flex;
	flex-direction:column;
	padding:8px;
	border:1px solid #ccc;
	border-radius:8px;
	margin:4px;
	min-width:120px;
}

nav ul {
	margin:0;
	padding:0;

}

nav ul li {
	margin: 4px 0px 4px 0px;
	padding:0px;
	list-style:none;
	background-image:none;
}

nav ul li a {
	text-decoration:none;
}


section {
	display:flex;
	flex-direction:row;
	align-items: flex-start;
}

article {
	border:1px solid #bbb;
	border-radius:8px;
	margin: 4px;
	display:flex;
	flex-direction:column;
	padding:8px;
}



aside {
	display:flex;
	flex-direction:column;
}

/*
	über 1024 Pixel = Standard
    bis zu 1024 Pixel (1024 : 16 = 64em)
    bis zu 800 Pixel (800 : 16 = 50em)
    bis zu 480 Pixel (480 : 16 = 30em)
*/


@media screen and (max-width: 1199px) {
	body {
	  font-size: 90%;
	}
	.container {
		max-width: 960px;
		margin-right:auto;
		margin-left:auto;
		/* border: 1px solid yellow; */
	}
	section {
		display:flex;
		flex-direction:row;
		align-items: flex-start;
	}
}

@media screen and (max-width: 959px) {
	body {
	   font-size: 75%;
	}
	.container {
		max-width: 800px;
		margin-right:auto;
		margin-left:auto;
		border: 1px solid green;
	}   	
   	section {
		display:flex;
		flex-direction:row;
		align-items: flex-start;
	}

}


@media screen and (max-width: 799px) {
	body {
	   font-size: 75%;
	}
	.container {
		max-width: 480px;
		margin-right:auto;
		margin-left:auto;
		border: 1px solid pink;
	}   	
   	section {
		display:flex;
		flex-direction:column;
		align-items: flex-start;
	}

}
@media screen and (max-width: 480px) {
	body {
		font-size: 50%;
	}
	.container {
		width: 99%;
		min-width:400px;
		margin-right:auto;
		margin-left:auto;
		border: 1px solid blue;
	}  	
  	section {
		display:flex;
		flex-direction:column;
		align-items: flex-start;
	}
}