@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;
}

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


header {
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
}

.header-title {
    flex: 1;
}

.header-nav {
    margin-left: auto;
}



main {
	flex-direction:column;
	padding:12px;
}

footer {
	flex-direction:column;	
}


.wrapper {
	display:block;
	width: 1200px;
	margin: 0 auto;
	background-color: rgba(255, 255, 255, 0.3);
	/* border:1px solid orange;	*/
}



.flexcontainer {
	display:flex;
	flex-direction:row;
}

.flexitem {
	flex-basis: left;
	margin-right: 8px;
	border:1px solid #ccc;
	border-radius:8px;
	padding:4px;
}

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

article {
	border:1px solid #bbb;
	border-radius:4px;
	margin: 4px;
	display:flex;
	flex-direction:column;
	padding:2px 8px 2px 8px;
	min-width:50%;
	background-color:#e8e8e8;
}

.prozent50 {
	width:50%;
}

.media-wrapper, .pagesize-wrapper {
    display: flex;
    gap: 20px;              /* Abstand zwischen Filter und Select */
    align-items: flex-start;
}

.media-filter, .pagesize-filter, .media-select, pagesize-select {
	display: flex;
    flex-direction: column; /* Label über Input/Select */
}

.prozent100 {
	width:1184px;
}


/*
	ü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:column;
		align-items: flex-start;
	}
	.prozent50 {
		width:90%;

	.prozent100 {
		width:844px;
	}
}

@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:column;
		align-items: flex-start;
	}
	.prozent50 {
		width:380px;
	}

	.prozent100 {
		width:774px;
	}

}


@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;
	}
	.prozent50 {
		width:456px;
	}

	.prozent100 {
		width:456px;
	}

}
@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;
	}
	.prozent50, .prozent100 {
		width:392px;
	}


}