/* responsives Design mit Flexbox 2-spaltig */

	body									{font-family: Verdana, Helvetica, Arial, Geneva, sans-serif; background-color: #00801c; max-width: 40em; margin: 1em auto;}
	h1, #container, #content 				{display: flex; flex-wrap: wrap; margin: 0; text-align: center;}
	h1>*, #container>*, #content>*			{flex: 2 1 22rem;}
	h1>:first-child, #container>:first-child {flex: 1 2 11rem}
	
	h1>a			{display: inline-block; text-align: center; padding-top: 0.5rem; background-color: #4edc5a;}
	img				{max-width: 100%}
	h1>span			{display: block; background-color: #eee; font-family: "Lucida Calligraphy"; color: maroon;}
	nav				{background-color: #4edc5a;}
	main			{background-color: #fff;}
	video			{display: flex; flex-wrap: wrap; max-width: 40rem;}
	#content 		{display: flex; flex-wrap: wrap; background-color: #b2f733; padding: 40px; border: 2px solid black;}
	table, th, td	{display: flexbox; text-align: center; background-color: #fff; border: 2px solid black;}
	#content 		{text-align: left;}
	dt				{font-weight: bold;}

/* responsive Navigation */	
	nav ul	{
			display: flex; /*Flexboxcontainer wird definiert*/
			flex-wrap: wrap; /*Umbruch der Flexboxen erlauben*/
			margin: 0; /*Listeneinrückung entfernen IE*/
			padding: 0; /*Listeneinrückung antfernen andere Browser*/
			list-style-type: none; /*ohne Listenpunkte*/
			}
	nav li	{
			flex: 1 0 9rem; /*grow shrink base*/
			margin: 0.125rem;  /*Abstände zwischen den li*/
			}
	nav a	{
			display: block;	/* Links füllen Elternelemente aus*/
			padding: 0.5rem; /*Abstände um die Links*/
			background: white; /*Hintergrund der Links*/
	}