body 
	{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		margin: 0;
		background-color: #232323;
		max-width: 120em;
		color: #FFFFFF;
		align-content: space-around;
    }
 
	*
	{
		font-family: Arial, sans-serif;
    }
	  
/* Mobile first */
        
	header, article, section, aside, footer 
	{
		margin: 0.6em 0.8em 0.8em 0.8em;
		padding: 0.1em 0.2em 0.1em 0.2em;
		min-width: 20em; /* 18 em passt für IPhone */
    }
	
	p
	{
		padding: 0.1em 0.2em 0.1em 0.2em;
		margin: 0em 0em 0em 0em;
	}

    header 
	{
		background: #5F5F5F url("https://www-static-2.m-online.net/~cloudcom/cchilfe_version1/bilder/m-net_logo.png") no-repeat scroll 100% 0%;
		color: #FFFFFF;
		box-shadow: 0em 1em 1em rgba(0,0,0,.8);
		flex: 1 50%;	
		padding: 0.1em 0.6em 0.1em 0.6em;	
    }

/* Navigation Buttons */	
  
    nav, nav ul, nav li
	{
		margin: 0;
		padding: 0.1em 0.2em 0.1em 0.2em;
    }
	  
    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;
		color: #000000;
        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: #474747;
		color: #FFFFFF;
		border-color: #F08A00;
    }
	
/* 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;
		min-width: 20em;
		max-width: 100%;
    }
	  
/* Überschrift für section */

    section header 
	{
		color: #FFFFFF;
		background: #474747;
		flex: 1 1 100%;
		min-width: 18.5em;	
		box-shadow: 0 0px 0px;	
		margin: 0em 0em 0em 0em;
		padding: 0.1em 0.1em 0.1em 0.4em;		
	}
	
/* 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: #ffffff;
	}

/* Article Video*/

	article
	{
        background: #000000;
		border: 1px solid;
		border-color: #000000;
		padding: 0.em 0.em 0.em 0.em;
		margin: 0em 0em 0em 0em;
	}
	
	article b 
	{
		color: #F08A00;
    }
		
	article li
	{
		display: flex;
		flex-flow: row;
		min-width: 15em;
		flex: 1 1 100%;
    }
	
/*xxxxxxxxxxxxx FOOTER XXXXXXXXXXXXXXX*/
  
    footer 
	{
        background: #5F5F5F;
        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
	{
        box-shadow: 0 0px;
		min-width: 1em;
    }
	
	footer a 
	{
		color: #FFFFFF;
		text-align: left;
		padding: 0em 0em 0em 0em;
		margin: 0em 0em 0em 0em;
	}
	
	footer a:hover, a:focus 
	{
		color: #F08A00;
    }
	
	.linkes
	{
        text-align: left;
    }
	
	.rechtes
	{
        text-align: right;
    }
	
     
	 /* ab mittlerer Auflösung Menü nebeneinander */
    @media all and (min-width: 30em) 
	{
		nav ul 
		{
			display:flex;
			flex-direction: row;
			flex:auto;
			justify-content: space-between;
			align-content: space-around;
		}

		section li 
		{   
			flex-flow: row wrap;
		}
			    
	section 
	{
		max-width: 90%;
    }
	footer 
	{
		max-width: 90%;
    }
	}
      
	  
	 /* große Auflösung Video reduzieren */
    @media all and (min-width: 60em) 
	{    
	section 
	{
		max-width: 80%;
    }
	footer 
	{
		max-width: 80%;
    }
	}