/* Haupt-Logo Größe anpassen */
.logo 		{
			width: 100%;
			height: auto;
			}
/* Links */
a 				{ font-family:arial,helvetica,sans-serif;
				  text-decoration:none; }
a:link, a:active 		{ color:#DBF4F5; }
a:visited 			{ color:#DBF4F5; }
a:hover 			{ color:#00FF00; 
					  font-weight:bold;	}			
/* HTML Einstellungen für den BODY anpassen */
body 		{
			margin: 0 auto;
			max-width: 56em;
			background-color: #102020;
			}
p			{
			font-family:tahoma,arial,helvetica,sans-serif;
			font-weight:bold;	
			color:#DBF4F5
			}
cite		{
			font-family:tahoma,arial,helvetica,sans-serif;
			font-size:1em;
			font-weight:bold;	
			color:#102020
			}
.zitate		{
			padding: 2em;
			}
.rezept		{
			font-size:1em;
			font-weight:bold;	
			color:#102020;
			padding: 1em;
			}
			
/* HTML Überschriften */			

h1, h2, h3, h4, h5, h6 {
			font-family:tahoma,arial,helvetica,sans-serif;
			font-weight:bold;
			}
h1			{
			font-size:1em;
			color: #CBE4E5;
			}
h2			{
			font-size:2em;
			color: #CBE4E5;
			}
h3 			{
			font-size:1em;
			color:#DBF4F5; 
			border-bottom:2px solid #000000;
			text-align:left; 
			}
h4 			{ 
			font-size:1.5em;
			color:#DBF4F5; 
			border-bottom:4px solid #000000;
			text-align:left;
			}
h5			{
			font-size:1em;
			color: #000000;
			}				  

/* HTML Hintergrundfarben */
			  
.bg0				{ background-color:#102020;}
.bg1				{ background-color:#162A2A;}
.bg2				{ background-color:#213F3F;}
.bg3				{ background-color:#325D5E;}
.bg4				{ background-color:#437B7D;}
.bg5				{ background-color:#6EB0B2;}
.bg6				{ background-color:#8DC1C3;}
.bg7				{ background-color:#ACD3D4;}
.bg8				{ background-color:#CBE4E5;}
.bg9				{ background-color:#D8EBEC;}			  
				  
				  
				  
/* Grit anpassen für*/			
.grid		{
			display: grid;
			grid-template-columns: auto;
			grid-template-rows: auto auto 100% auto;
			grid-gap: 2px;
			background-color: #162A2A;
			}
			
header		{
			grid-column: 1 / 4;
			background: #162A2A;
			padding: 0em;
			}
			
footer		{
			grid-column: 1 / 4;
			background: #325D5E;
			padding: 0em;
			}
article
			{
			background: #437B7D;
			font-family:tahoma,arial,helvetica,sans-serif;	
			color:#FFFFFF;
			padding: 0.5em;		
			}
aside
			{
			background: #325D5E;
			padding: 0em;
			}
ul			{
			grid-column: 1 / 4;
			list-style-type: none;
			overflow: hidden;
			background: #213F3F;
			padding: 0em;
			margin : 0;
			}	

li 			{
			font-family:tahoma,arial,helvetica,sans-serif;
			font-weight:bold;
			float: left;
			}

li a		{
			display: block;
			color: #CBE4E5;
			text-align: center;
			padding: 1em 1em;
			text-decoration: none;
			}

li a, .dropbtn
			{
			display: inline-block;
			text-decoration: none;
			}

li a:hover, .dropdown:hover, .dropbtn
			{
			background-color: #213F3F;
			color: #CBE4E5;
			}

li a:hover:not(.active)
			{
			background-color: #000000;
			}

.active
			{
			background-color: #10AA66;
			}

li.dropdown {
			display: inline-block;
			}

/* Dropdown Content (Hidden by Default) */

.dropdown-content 
			{
			display: none;
			position: absolute;
			background-color: #8DC1C3;
			min-width: 160px;
			box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
			z-index: 1;
			}

/* Links inside the dropdown */

.dropdown-content a 
			{
			color: black;
			padding: 12px 16px;
			text-decoration: none;
			display: block;
			text-align: left;
			}

.dropdown-content a:hover 
			{
			background-color: #f1f1f1;
			}

.dropdown:hover .dropdown-content 
			{
			display: block;
			}

/* Hauptbefehle für dynamische Bildergallerie */	

div.gallery {
			border: 2px solid #102020;
			}

div.gallery:hover {
			border: 2px solid #10AA66;
			}

div.gallery img {
			width: 100%;
			height: auto;
			}

div.desc {
			padding: 2px 2px;
			background-color: #213F3F;
			font-family:tahoma,arial,helvetica,sans-serif;
			font-size:1em;
			font-weight:bold;
			text-align: left;
			color: #CBE4E5;
			}

* {
			box-sizing: border-box;
			}

.responsive {
			padding: 4px;
			float: left;
			width: 24.99999%;
			}

@media only screen and (max-width: 700px) {
.responsive {
			width: 49.99999%;
			margin: 4px 0;
			}
			}

@media only screen and (max-width: 500px) {
.responsive {
			width: 100%;
			}
			}

.clearfix:after {
			content: "";
			display: table;
			clear: both;
			}