body {
			display: -webkit-flex;
			display: flex;
			-webkit-flex-flow: row wrap;
			flex-flow: row wrap;
		}
		p {
			margin:8px;
			
		}
		
		.box { float: left; width: 32%; 
					margin-right: 2%; padding: 20px; 
					/*background: #eee;*/ 
					box-sizing: 		border-box; }
		.box:last-child { margin-right: 0; }
		.box44 { float: left;  
					margin-right: 2%; padding: 20px; 
					vertical-align:middle;
					/*background: #eee;*/ 
					box-sizing: 		border-box; }
		.box44:last-child { margin-right: 0; }
		
		.box31 {width: 8%; margin-right: 2%; padding: 5px;  top:20px;position:relative;}
		.box32 {width: 6%; margin-right: 2%; padding: 5px;  top:20px;position:relative;}
		.box33 {width: 4%; margin-right: 2%; padding: 5px;  top:20px;position:relative;}
		.box34 {width: 35%; margin-right: 2%; padding: 5px; text-align:center; }
		.box35 {width: 10%; margin-right: 2%; padding: 5px;  top:20px;position:relative;}

		.backcolor_0{background-color:#484;}
		.backcolor_1{background-color:#484;}
		.backcolor_sum_monat_fenta{background-color:#a66;}
		.backcolor_sum_monat_meta{background-color:#aa6;} 
		
		/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
	#mitte {
		background-color:yellow;
		padding:5px;
		position:relative;
		height:400px;
	}
			#kalen {
			-webkit-flex: 1 100%;
			flex: 1 100%;		
			height:300px;
			background-color:gray;
		  overflow-x: hidden;
			overflow-y: auto;
			text-align: center;
			padding: 10px;
	}
	#zeitr {
			background-color:orange;
			-webkit-flex: 1 100%;
			flex: 1 100%;		
			height:300px;
			padding: 10px;
	}		

		header,
		nav,
		ufr1,
		nav a,
		article,
		section,
		aside,
		footer {
			border-radius: 0px 0.5em 0.5em;
			border: 1px solid;
			padding: 10px;
			margin: 10px;
			-webkit-flex: 1 100%;
			flex: 1 100%;
		}

		ufr1 {
			background: #f1f3d4;
			border-color: #d5d5b5;
			display: -webkit-flex;
			-webkit-flex-flow: row wrap;
			display: flex;
			flex-flow: row wrap;
		}
		header {
			background: #F1F3F4;
			border-color: #d5d5d5;
			display: -webkit-flex;
			-webkit-flex-flow: row wrap;
			display: flex;
			flex-flow: row wrap;
		}

		header * {
			-webkit-flex: 1 1 0%;
			flex: 1 1 0%;
		}

		header img {
			-webkit-flex: 0 0 150px;
			flex: 0 0 150px;
			margin-right: 20px;
		}

		header nav {
			-webkit-flex: 1 1 100%;
			flex: 1 1 100%;
		}

		nav,
		nav ul,
		nav li {
			margin: 0;
			padding: 0;
			border: none;
		}

		nav ul {
			display: -webkit-flex;
			-webkit-flex-direction: column;
			display: flex;
			flex-direction: column;
		}

		nav li {
			list-style-type: none;
			margin: 1.3em 0;
			-webkit-flex: 1 1 100%;
			flex: 1 1 100%;
		}

		nav a {
			display: inline-block;
			width: 95%;
			background: #fffbf0;
			border: 1px solid #dfac20;
			margin: 0;
			text-decoration: none;
			text-align: center;
		}

		nav a:hover {
			background-color: #dfac20;
		}

		section {
			background: #F1F3F4;
			border-color: slateblue;
		}

		article {
			background: #ffede0;
			border-color: #df6c20;
		}

		aside {
			background: #ebf5d7;
			border-color: #8243;
		}

		footer {
			background: #e4ebf2;
			border-color: #8a9da8;
			display: -webkit-flex;
			-webkit-flex-flow: row wrap;
			display: flex;
			flex-flow: row wrap;
		}

		footer * {
			-webkit-flex: 1 1 0%;
			-webkit-justify-content: space-between;
			flex: 1 1 0%;
			justify-content: space-between;
		}

		footer p {
			text-align: right;
		}
	#mitte {
		background-color:yellow;
		padding:5px;
		position:relative;
		height:600px;
	}	
		#kalen {
			top:20px;
			left:500px;
			width:400px;
			height:200px;
			background-color:blue;
		  overflow-x: hidden;
			overflow-y: auto;
			text-align: center;
			padding: 20px;
			margin: 10px;
		
	}
		#zeitr {
			top:20px;
			left:50px;
			width:400px;
			background-color:orange;
			
			height:300px;
			padding: 10px;
			margin: 10px;
	}		


		/* Smart Phones und Tablets mit mittlerer Auflösung */

		@media all and (min-width: 35em) {
	#mitte {
		background-color:yellow;
		padding:5px;
		position:relative;
		height:400px;
	}
		#kalen {position:absolute;
			top:20px;
			left:500px;
			width:400px;
			height:300px;
			background-color:green;
		  overflow-x: hidden;
			overflow-y: auto;
			text-align: center;
			padding: 20px;
		
	}
	#zeitr {position:absolute;
			top:20px;
			left:50px;
			width:380px;
			background-color:orange;
			
			height:300px;
			padding: 10px;
	}		

			
			
			header img {
				margin-right: 50px;
			}
			nav ul {
				-webkit-flex-direction: row;
				flex-direction: row;
			}
			nav li {
				margin: 0 10px;
				-webkit-flex: 1 1 0%;
				flex: 1 1 0%;
			}
			article {
				webkit-order: 2;
				order: 2;
			}
			#news {
				-webkit-flex: 1 auto;
				-webkit-order: 3;
				flex: 1 auto;
				order: 3;
			}
			aside {
				/* durch auto werden die beiden asides in eine Zeile gesetzt */
				
				-webkit-flex: 1 auto;
				-webikit-order: 4;
				flex: 1 auto;
				order: 4;
			}
			footer {
				webkit-order: 5;
				order: 5;
			}
		}
		/* Large screens */

		@media all and (min-width: 50em) {
			.editcol3 {
				background-color:RGB(220,200,200);font-size:9px;
			}
			.theditcol3 {
				font-size:9px;
			}
			article {
				/* Der Article wird 2.5x so breit wie die beiden asides! */
				
				-webkit-flex: 5 1 0%;
				-webkit-order: 3;
				order: 3;
				flex: 5 1 0%;
			}
			aside {
				-webkit-flex: 2 1 0%;
				flex: 2 1 0%;
			}
			#news {
				-webkit-flex: 2 1 0%;
				-webkit-order: 2;
				-webkit-align-self: center;
				flex: 2 1 0%;
				order: 2;
				align-self: center;
				height: 120px;
			}
		}
		.hilfe {padding: 5px;
			background-color:orange;}
		.hilfe td { font-size: 13px; 
					text-align:center;}



	.highchart { display:none; }
		.container
		{
			width:500px;
			float:left;
			margin: 30px;
			padding:10px;
			background-color:#eee;
			-webkit-box-shadow: 0px 1px 15px rgba(50, 50, 50, 0.75);
			-moz-box-shadow:    0px 1px 15px rgba(50, 50, 50, 0.75);
			box-shadow:         0px 1px 15px rgba(50, 50, 50, 0.75);
		}
		#parent
		{
			margin-left:7%;
			margin-bottom:10%;
		}
		
		
		
		
		
		.over { color:black; font-size: 14px; 
								border:1px solid black;
						width:90%;
						//	height:10px;
							background-color:#466;
							padding:15px;
							margin-top:20px;
						}	
    .monat { color:black; font-size: 16px; 
								border:1px solid black;
						width:75%;
						//	height:10px;
							background-color:#488;
							padding:20px;
							margin:auto;
						}	
	     .tag { color:black; font-size: 16px; 
							width:30px;
							height:15px;
							//background-color:green;
							//padding-top:2px;
							margin:auto;
						}	
			.tagmark {	background-color:orange;
								width:95%;
								//height:90%;
									border-radius:25%;
									vertical-align: middle;
									margin:auto;
								//	padding-top:3px;
							}
			.tagmarkcrit {
								background-color:#e22;
								color:#1cc;
								width:95%;
								//height:90%;
									border-radius:25%;
									vertical-align: middle;
									margin:auto;
								//	padding-top:3px;
							}
			.tagmarkFenta {	background-color:#c44;
								width:95%;
								//height:90%;
									border-radius:25%;
									vertical-align: middle;
									margin:auto;
								//	padding-top:3px;
							}
			.tagmarkMeta {	background-color:#a66;
								width:95%;
								//height:90%;
									border-radius:25%;
									vertical-align: middle;
									margin:auto;
								//	padding-top:3px;
							}
	    .sum { color:black; font-size: 14px; 
								border:1px solid black;
						width:90%;
						//	height:10px;
							background-color:#785;
							padding:10px;
							margin:auto;
							margin-top:20px;
						}	
				td		{
					padding:2px;
				}
				
	


	.bilder {
		position:absolute;
		background-color:#597;
		top:20px;
		left:1100px;
		width:670px;
		height:300px; 
		padding: 20px;
		
	}