/*standard.css*/
/*Standard Umgebung */

html {
	/* scrollbar fix (prevent ugly left pull for lower content sites) */
	overflow-y: scroll;
	box-sizing: border-box;
}

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

body {
background-color: #fff;
color:#070707;
font-family:Arial, Helvetica, sans serif;
font-size:100%;
line-height:150%;
box-sizing:border-box;
}


p,li,input,label {font-size:1.3rem;}
input {padding:5px;}
h1 {font-size:2.5rem;}
h2 {font-size:2.0rem;}

#screen {
    background:rgba(255,255,255,1);
    height: auto;
    margin: 20px auto;
	padding:0;
    z-index:2;
	width:100%;
	max-width:1050px;
}
#navigation,#suche,#logo,.content,.sidebar-1,.sidebar-2, footer {
	border:1px solid #cfcfcf; background-color:#d4dbe0;
	width:100%;}

/*Struktur Flexbox*/
header {order:1;
width: 100%;
margin-bottom: 10px;
}
.content {order:2; }
.sidebar-1 {order:3;}
.sidebar-2 {order:4;}
footer {order:5;}

#logo {background-image:url(./images/pixelprogramm.svg); background-size:contain; background-repeat:no-repeat;height:40px;}

.container {
	border:1px solid #565656;width:100%;
	display:flex;
	align-content:stretch;
	flex-direction:row;
	justify-content:space-between;
	flex-wrap:wrap;
}
@media only screen and (min-width: 760px) {
#navigation,#suche,#logo,.content,.sidebar-1,.sidebar-2, footer {width:auto;}
header {order:1;}
#logo {width:20%; }
#navigation {width:65%; text-align:center;float:left;}
#suche {width:15%;float:right;}
.content {order:2; }
.sidebar-1 {order:3;}
.sidebar-2 {order:4;}
footer {order:5;}
header {
	width:100%;
	margin-bottom:10px;
}
.content {
	width:70%; padding:20px; margin:0 1%;

}
.sidebar-1 {
	width:30%; padding:20px;

}
.sidebar-2 {
	width:30%; padding:20px;

}
footer {

	width:100%;
	text-align:center;
	margin-top:10px;
}

}
@media only screen and (min-width: 760px) {
	#logo {width:20%; float:left;}
	#navigation {width:60%; float:left; text-align:center;}
	#suche { width:20%;}
	.content {order:3; }
	.sidebar-1 {order:2;}
	.sidebar-2 {order:4;}
	.content {
		width:48%; padding:20px; margin:0 1%;
		
	}
	.sidebar-1 {
		width:25%; padding:20px;
		
	}
	.sidebar-2 {
		width:25%; padding:20px;
		
	}
}