body 
	{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		margin: 0;
		background-color: #232323;
		/*max-width: 80em; Sonst stoppt Center*/ 
		color: #FFFFFF;
		align-content: space-around;
	
    }
 
	*
	{
		font-family: Arial, sans-serif;
    }
	  
/* Mobile first */

    header 
	{
		background: #353535 url("m-net_logo.png") no-repeat scroll 100% 0%;
		color: #FFFFFF;
		box-shadow: 0em 1em 1em rgba(0,0,0,.8);
		flex: 1 50%;
		margin: 0.6em 0.8em 0.8em 0.8em;		
		padding: 0.1em 0.6em 0.1em 0.6em;	
		min-width: 18em;
		/*max-width: 85em;*/
		
    } 

	footer 
	{
		margin: 0.6em 0.8em 0.8em 0.8em;
		padding: 0.1em 0.2em 0.1em 0.2em;
		min-width: 18em; /* 18 em passt für IPhone */
		/*max-width: 85em;*/
    }
	
	section
	{
		margin: 0.6em 0.8em 0.8em 0.8em;
		padding: 0.1em 0.2em 0.1em 0.2em;
		min-width: 18em; /* 18 em passt für IPhone */
		display: flex;
		max-width: 80em;
    }
	
	article
	{
		margin: 0.6em 0.8em 0.8em 0.8em;
		padding: 0.1em 0.2em 0.1em 0.2em;
		min-width: 16em; /* 18 em passt für IPhone */
    }

	p
	{
		padding: 0.1em 0.2em 0.1em 0.2em;
		margin: 0em 0em 0em 0em;
	}



/* Navigation Buttons */	
  
    nav, nav ul, nav li
	{
		margin: 0;
		padding: 0;
    }
	
	.navtd
	{
	padding-top:0.4em;
	/*width:4em;*/
		}

	.navspacebetween
	{
		display: flex;
		justify-content: space-between;
	}
	
	.navp
	{
		padding: 0.1em;
		margin: 0em;
	}
	
	
	
    nav ul 
	{
        display: flex;
        flex-direction: column;
		align-items: center;
		flex-wrap: wrap;
    }
	  
	nav li 
	{
		list-style-type:none;
    }
	
    nav a 
	{
        display: inline-block;
        background: #e9e9e9;
        border: 0px solid;
		border-color: #ffffff;
        margin: 0.4em;
		padding: 0.4em;
        text-decoration: none;
        text-align: center;
		font-weight:bold;
		min-width:8em;
    }
	  
    nav a:hover, nav a:focus 
	{
        background-color: #606060;
		color: #FFFFFF;
	}
	
/* Linkschriftfarbe */

	a 
	{
		color: #353535;
		text-decoration: none;
	}
	
	.schrift {
	padding: 0.6em 0.6em 0.1em 0.6em;
    text-align: center;
	/*	padding für p in section;*/
	}
	
	.akzent b
	{
        color: #0090D4;
	}
	
/* klasse knopf um z.B: Artikel zum Knopf umzubauen*/
 
	.knopf 
	{
		background: #ffffff;
		border-radius: 0px;
		border: 0px solid;
		border-color: #ffffff;
		color: #000000;
		flex:1 1 0em;
		padding: 0.1em 0.2em 0.1em 0.2em;
		margin: 0.2em 0.2em 0.2em 0.2em;
		max-width: 22em;
		flex-direction: column;
	}
	
	.knopfbild 
	{
		background: #e9e9e9;
		border-radius: 0px;
		border: 0px solid;
		border-color: #ffffff;
		color: #000000;
		padding: 0.1em 0.2em 0.1em 0.2em;
		margin: 0.2em 0.2em 0.2em 0.2em;
		min-width: 12em;
		max-width: 17.5em;
	}
	
	.knopfs 
	{
		background: #e9e9e9;
		border-radius: 0px;
		border: 1px solid;
		border-color: #F08A00;
		color: #000000;
		flex: 1 1 95%;
		padding: 0.1em 0.2em 0.1em 0.2em;
		margin: 0.2em 0.2em 0.2em 0.2em;
		min-width: 12em;
		max-width: 26em;
		
		max-height:8em;
	}
	
	.knopfsm 
	{
		background: #e9e9e9;
		border-radius: 0px;
		border: 0px solid;
		border-color: #Ffffff;
		color: #000000;
		flex: 1 1 95%;
		padding: 0.1em 0.2em 0.1em 0.2em;
		margin: 0.2em 0.2em 0.2em 0.2em;
		min-width: 4em;
		max-width: 18em;
		max-height:2em;
	}
	
	.knopfs article
	{
	color: #000000;
	border: 0px solid;
	padding: 0em 0em 0em 0em;
	margin: 0em 0em 0em 0em;
	min-height: 6em;
	}
	
	.knopfsm article
	{
	color: #000000;
	border: 0px solid;
	padding: 0em 0em 0em 0em;
	margin: 0em 0em 0em 0em;
	    display: flex;
    flex-flow: row;
    align-content: flex-start;
    justify-content: center;
    align-items: center;
	}
	
	.knopfs h3 
	{
	color: #F08A00;
	border: 0px;
	flex: 1 1 95%;
	min-width: 8em;
	}
	
	.knopfsm h3 
	{
	color: #0090D4;
	border: 0px;
	}

	.knopf article 
	{
	color: #000000;
	border: 0px solid;
	padding: 0em 0em 0em 0em;
	margin: 0em 0em 0em 0em;
	align-content: normal;
	justify-content: normal;
	align-items: normal;
	}
	
	.knopf header 
	{
	border: 0px;
	}
	
	.knopfs header 
	{
	border: 0px;
	}

	a .knopf 
	{
	color: #000000;
	}

	.knopf h3 
	{
	color: #000000;
	border: 0px;
	flex: 1 1 95%;
	min-width: 5em;
	max-width: 10em;
	}

	.knopf p
	{
	padding: 0em 0.1em 0em 0.4em;
	margin: 0.2em 0.1em 0.2em 0.1em;
	border: 0px solid;
	}
	
	
	a:hover .knopf 
	{
	color: #FFFFFF;
	border: 0px solid;
	background-color: #474747;
	}

	.knopf:hover
	{
	border: 0px solid;
	border-color: #0090D4;
	background-color: #474747;
	color: #ffffff;
	}
	
	a:hover .knopfs
	{
	color: #ffffff;
	border: 0px solid;
	background-color: #606060;
	}

	.knopfs:hover
	{
	border: 1px solid;
	border-color: #F08A00;
	background-color: #606060;
	color: #ffffff;
	}
	
	a:hover .knopfsm
	{
	color: #ffffff;
	border: 0px solid;
	background-color: #474747;
	}

	.knopfsm:hover
	{
	border: 0px solid;
	border-color: #F08A00;
	background-color: #474747;
	color: #ffffff;
	}

/* klasse für kreis*/
	.numberCircle 
	{
	font: 0.8em Arial, sans-serif;
	width: 2em;
	height: 2em;
	/*box-sizing: initial;*/
	background: #f59b10;
	color: #efefef;
	text-align: center;
	border-radius: 50%;
	line-height: 2em;
	/*box-sizing: content-box;*/
	min-width: 2em;
	margin: 0.2em 0.2em 0.2em 0em;
	}
	
	article .bildchen 
	{
    width: 95%;
	border: 1px solid;
	box-shadow: 0.2em 0.1em 0.8em rgba(0,0,0,.2);
	border-color: #f9f9f9;
	border-radius: 0.2em 0.2em;
	margin: 0.6em 0.2em 0.2em 0.2em;
	padding: 0.4em 0.4em 0.4em 0.4em;
	background: #f9f9f9;
    }
	
	article .bildchen2 
	{
    max-width: 18em;
	border: 1px solid;
	box-shadow: 0.2em 0.1em 0.8em rgba(0,0,0,.2);
	border-color: #f9f9f9;
	border-radius: 0.2em 0.2em;
	margin: 0.6em 0.2em 0.2em 0.2em;
	padding: 0.4em 0.4em 0.4em 0.4em;
	background: #f9f9f9;
    }
	
	article .bildchen3 
	{
    max-width: 16em;
	border: 1px solid;
	box-shadow: 0.2em 0.1em 0.8em rgba(0,0,0,.2);
	border-color: #f9f9f9;
	border-radius: 0.2em 0.2em;
	margin: 0.6em 0.2em 0.2em 0.2em;
	padding: 0.4em 0.4em 0.4em 0.4em;
	background: #f9f9f9;
    }
	
	article .bildchen4 
	{
    max-width: 12em;
	border: 1px solid;
	box-shadow: 0.2em 0.1em 0.8em rgba(0,0,0,.2);
	border-color: #f9f9f9;
	border-radius: 0.2em 0.2em;
	margin: 0.6em 0.2em 0.2em 0.2em;
	padding: 0.4em 0.4em 0.4em 0.4em;
	background: #f9f9f9;
    }
	
	article .hinweis 
	{
    /*width: 95%;*/
	border: 2px solid;
	box-shadow: 0.2em 0.1em 0.8em rgba(0,0,0,.2);
	border-color: #f9f9f9;
	border-radius: 0.8em 0.8em;
	margin: 0.6em 0.2em 0.2em 0.2em;
	padding: 0.4em 0.4em 0.4em 0.4em;
	background: #f9f9f9;
    }
	
	article .hinweis2 
	{
    width: 95%;
	border: 2px solid;
	box-shadow: 0.2em 0.1em 0.8em rgba(0,0,0,.2);
	border-color: #f9f9f9;
	border-radius: 0.2em 0.2em;
	margin: 0.6em 0.2em 0.2em 0.2em;
	padding: 0.4em 0.4em 0.4em 0.4em;
	background: #f9f9f9;
    }
	
/* section */

    section 
	{
        background: #5F5F5F;
		flex-direction: column;  /* Mobile view spalte */	
		box-shadow: 0em 0.5em 1em 0.1em rgb(0 0 0 / 0.9);
		padding: 0em 0em 0em 0em;
		/*display: flex;*/
    }
	  
/* Überschrift für section */

    section header 
	{
		color: #FFFFFF;
		background: #474747;
		flex: 1 1 95%;
		box-shadow: 0 0px 0px;	
		margin: 0em 0em 0em 0em;
		padding: 0.1em 0.1em 0.1em 0.4em;	
		display: flex;
		flex-flow: row;	
		align-content: flex-start;
		justify-content: center;
		align-items: center;		
	}
	
/* margin der Überschriften reduzieren, sodass der Headline Balken nicht zu dick wird*/	
	h1, h2
	{ 
		margin: 0.2em 0.2em 0.1em 0em;
		padding: 0.1em 0.2em 0.1em 0.2em;
	}
	
	h3
	{ 
		margin: 0.2em 0.2em 0.1em 0.2em;
		padding: 0.1em 0.2em 0.1em 0.2em;
		color: #000000;
	}

/* Liste für section Container um die Artikel unterschiedlich zur Section anzuordnen */

	section li
	{
		display: flex;
		flex-flow: column wrap;
		padding: 0.2em 0.2em 0.2em 0.2em;
		justify-content: center;
		align-items: center;
	}

	article
	{
        background: #e9e9e9;
		border-radius: 0px 0em 0em;
		border: 1px solid;
		border-color: #ffffff;
		color: #000000;
		padding: 0.2em 0.4em 0.2em 0.4em;
		margin: 0.2em 0.2em 0.2em 0.2em;
		min-width: 18em;
		max-width: 35em;
		display:flex;
		flex: 30%;
		flex-flow:row;		
		flex-wrap: wrap;
		align-content: flex-start;
		justify-content: center;
		align-items: center;
	}
	
	article b 
	{
		color: #0090D4;
    }
	
	article p
	{
		padding: 0.6em 0.6em 0.1em 0.6em;
	}
	
	article header 
	{
        background-color: #e9e9e9;
		color: #FFFFFF;
		display: flex;
		flex-flow: row;
		/*border: 1px solid;*/
		box-shadow: 0em 0.1em 0em #ffffff;
		border-color: #e9e9e9;
		padding: 0.2em 0.4em 0.2em 0.4em;
		margin: 0.2em 0.2em 0.2em 0.2em;
		min-width: 16em;
	}
	
	
	article li
	{
		display: flex;
		flex-flow: row;
		min-width: 15em;
		flex: 1 1 100%;
    }

/*xxxxxxxxxxxxx FOOTER XXXXXXXXXXXXXXX*/
    footer 
	{
        background: #353535;
        display: flex;
        flex-flow: row wrap;

		flex: auto;
		justify-content: space-between;
		box-shadow: 0em 0.5em 1em 0.1em rgb(0 0 0 / 0.9);
    }
	
	footer section
	{
	background: #353535;
	box-shadow: 0 0px;
	min-width: 1em;
    }
  
	footer a 
	{
		color: #FFFFFF;
		text-align: left;
		padding: 0em 0em 0em 0em;
		margin: 0em 0em 0em 0em;
		text-decoration: underline;
	}
	
	footer a:hover, a:focus 
	{
		color: #F08A00;
    }
	
	.linkes
	{
        text-align: left;
    }
	
	.rechtes
	{
        text-align: right;
    }
     
	 /* mittlerer Auflösung */
    @media all and (min-width: 32em) 
	{
		nav ul 
		{
			display:flex;
			flex-direction: row;
			flex:auto;
			align-content: space-around;
		}

		section li 
		{   
			flex-flow: row wrap;
			align-items: normal;
		}
		
		section
		{
			min-width: 25em;
		}
		
		article .bildchen2 
		{
		max-width: 24em;
		}
      }