/** Formatierungen für mobile Ansicht **/

/** Navigation wird als vertikale Liste Ueber die komplette Breite dargestellt **/

nav {
	display: none;
}

nav ul {
 	padding: 0px;
 	margin: 0px;
 	width: 100%;
}
 
nav ul li {
	list-style: none;
	padding: 20px 10px;
	border:1px solid #aaa;
	background: #0d4906; /* Old browsers */
	background: -moz-linear-gradient(top, #0d4906 0%, #9dbc32 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0d4906), color-stop(100%,#77a82d)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #0d4906 0%,#9dbc32 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #0d4906 0%,#9dbc32 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #0d4906 0%,#9dbc32 100%); /* IE10+ */
	background: linear-gradient(to bottom, #0d4906 0%,#9dbc32 100%); /* W3C */
}


/** Anpassungen Checkbox+Label (Button) **/

input#open-menu {
	display: none;
}

input[type=checkbox]:checked ~ nav {
    display: block;
}
	
label.open-menu-label {
	background: #0d4906; /* Old browsers */
	background: -moz-linear-gradient(top, #0d4906 0%, #9dbc32 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0d4906), color-stop(100%,#77a82d)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #0d4906 0%,#9dbc32 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #0d4906 0%,#9dbc32 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #0d4906 0%,#9dbc32 100%); /* IE10+ */
	background: linear-gradient(to bottom, #0d4906 0%,#9dbc32 100%); /* W3C */
	padding: 20px 10px;
	border: 1px solid #aaa;
	display: block;

}


/** Formatierung für Tablet und Desktopansicht **/

@media only screen and (min-width: 760px) {

	/** Navigation wird als einfarbiger, horizontaler Balken dargestellt **/
	
	nav {
	display: block;
	text-align: center;
	padding: 20px;
	background: #0d4906; /* Old browsers */
	background: -moz-linear-gradient(top, #0d4906 0%, #9dbc32 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0d4906), color-stop(100%,#77a82d)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #0d4906 0%,#9dbc32 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #0d4906 0%,#9dbc32 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #0d4906 0%,#9dbc32 100%); /* IE10+ */
	background: linear-gradient(to bottom, #0d4906 0%,#9dbc32 100%); /* W3C */
	}
	
	nav ul li {
		display:inline;
		width: 25%;
		border: 1px solid #aaa; /* kann auch entfernt werden wenn Rahmenfaebe gleich */
		border-radius: 5px;
		background: #0d4906; /* Old browsers */
		background: -moz-linear-gradient(top, #0d4906 0%, #9dbc32 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0d4906), color-stop(100%,#77a82d)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #0d4906 0%,#9dbc32 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #0d4906 0%,#9dbc32 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #0d4906 0%,#9dbc32 100%); /* IE10+ */
		background: linear-gradient(to bottom, #0d4906 0%,#9dbc32 100%); /* W3C */
	}
	
	/** Label wird ausgeblendet **/
	label.open-menu-label {
		display: none;
	}
}

/** zur Definition reaktionsfähiger Blöcke **/
#tabelle {
display: table;
border-collapse: separate;
border-spacing: 5px;
table-layout: fixed;
text-align: justify;
width: 100%;
}
.zelle {
	border: 1px solid #aaa;
	border-radius: 5px;
 	padding-left: 0.5%;
 	padding-right:0.5%;
	display: table-cell;
	vertical-align: top;
	width: 50%;
	background-color:white
}  

@media screen and (max-width: 760px) {
#tabelle; {
     display: block;
     }
    .zelle {
     display: block;
     width: 98.5%;
	}
}

@media screen and (max-width: 430px) {
#tabelle; {
	display: block;
	}
	.zelle {
	display: block;
	color:white;
	background-color: black;
	}
}



/* für mehr unteren Rand auf Klasse umstellen (Raute gegen Punkt und id in Klasse), oder über Größenangabe ändern */
.responsiveContainer {
	 position: relative;
	  padding-bottom: 56%;
	  height: 0;
	  overflow: hidden;
}
	 
.responsiveContainer iframe {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
}