body { margin-left:50px; margin-right:30px; margin-top:50px; margin-bottom:50px; background-color: #e9e0c8 }
p    { color: #666; font-weight: normal; font-size: 2em; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; width: 800px;  }
li   { color: #666; font-weight: normal; font-size: 2em; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; width: 800px;  }
a    { color: #66b; font-weight: normal; font-size: 1em; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; hover: FF00FF  }
h1   { color: #666; font-weight: bold; font-size: 1em; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular  }
h2   { color: #666; font-weight: bold; font-size: 2em; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular  }
h3   { color: #666; font-weight: bold; font-size: 3em; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular  }
h4   { color: #666; font-weight: bold; font-size: 4em; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none  }
h5   { color: #666; font-weight: bold; font-size: 4em; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; line-height:1em;  }
td   { text-align: center; color: #666; font-weight: bold; font-size: 12px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; hover: FF00FF  }

audio {width: 250px; height: 20px }

#main{
	position:relative;
}

div#first{
    position: absolute;
    background: url('images/entenbrust.jpg');
	background-attachment:fixed;
	background-repeat: no-repeat;
    opacity: 0.3;
	width: 1440px;
	height: 2080px;
}
div#second{
	width: 100%;
	height: 100%;
	position: absolute;top: 0;
	left: 0;
}


tr {
}
tr:nth-child(even) {
  #background: #D8D8D8;
  background: #e0e1c9;
}

td {
  color: black;
}
td:nth-child(even) {
  color: #6A6A6A;
}

.label {
  max-width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.label img {
  max-width: 15%;
    margin: auto;
    display: block;
  align-items: left;
}

.headline {
	text-align: center;
	padding-left: 20px;
	padding-right: 20px;
	border: 0px solid;
	color: #666;
	font-weight: bold;
	font-size: 3em;
	font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
	text-decoration: none;
	line-height:1em;
	background-color: rgba(233,233,201, 0.6);
}

p.menu123 {
font-size: 2em;
display : flex;
align-items : center;
height: 40px;
}

.box {
	display : flex;
	box-sizing: border-box;
	width: 40%;
	height: 3em;
	align-items : center;
	font-size: 1.5em;
	float: left;
	margin-right: 1%;
	margin-top: 1%;
	padding: 20px;
	background-color: rgba(233,233,201, 0.5);
	opacity: 0;
    transition: opacity .6s ease-in-out;
}

.box:last-child { float: left; }

.booooox:last-child { float: left; width: 32%; margin-right: 2%; padding: 20px; background: #eee; box-sizing: border-box; }

.boxb {
	display : flex;
	box-sizing: border-box;
	width: 45%;
	height: 500px;
	align-items : center;
	font-size: 2em;
	float: left;
	margin-right: 1%;
	margin-top: 1%;
	padding: 20px;
	background-color: rgba(233,233,201, 0.5);
	opacity: 0;
    transition: opacity .45s ease-in-out;
}

.visible {
   opacity: 1; 
}

.pgrid {
    display: grid;
    /* Definition der 3 Spalten: 
       1. Spalte: passt sich dem Label an
       2. Spalte: nimmt den restlichen Platz ein (oder feste Breite)
       3. Spalte: passt sich dem Button an */
    grid-template-columns: max-content 200px max-content;
    gap: 10px; /* Abstand zwischen Spalten und Zeilen */
    align-items: center; /* Richtet Text und Felder vertikal mittig aus */	
	color: #666; 
	font-weight: normal; 
	font-size: 2em; 
	font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; 
	text-decoration: none; 
	width: 800px;
}

/* Label-Styling */
.labelgrid {
    grid-column: 1; /* Festlegung auf Spalte 1 */
}

/* Input-Styling */
.inputgrid {
    grid-column: 2; /* Festlegung auf Spalte 2 */
	background-color: #f9f0d9;
	color: #666;
	font-size:1em;
    padding: 5px;
	text-align: right;
	width: 150px;
}

/* Button-Styling */
.button {
    grid-column: 3; /* Festlegung auf Spalte 3 */
    background-color: #f9f0d9;
	color: #666;
    cursor: pointer;
	font-size:1em;
	padding: 5px 15px;
}
/* Label-Oregano-Styling */
.labelgridoregano {
    grid-column: 3; /* Festlegung auf Spalte 3 */
}

button:active {
 padding-bottom: 2px;
 background-color: #e9e0c9;
}

.footer { 
	display : inline-block;
	box-sizing: border-box;
	width: 80%;
	padding: 20px;
	margin-top: 5%;
	text-align: center;
	color: #666;
	font-size: 1em;
	font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular
}

@keyframes bgcolor {
    0% {
        background-color: #45a3e5
    }

    30% {
        background-color: #66bf39
    }

    60% {
        background-color: #eb670f
    }

    90% {
        background-color: #f35
    }

    100% {
        background-color: #864cbf
    }
}

h6 {
    -webkit-animation: bgcolor 30s infinite;
    animation: bgcolor 30s infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
	color: #ffffff;
}

/* Grundstil für das eigene Tag */
/* 	display: block;          /* damit es sich wie ein <p>-Block verhält */
/* 
pc {
    display: block;
    padding: 8px 12px;
    margin: 0;
    font-family: Arial, sans-serif;
}
*/

/* pc    { display: block; color: #666; font-weight: normal; font-size: 2em; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; width: 800px;  }
*/


/* Ungerade Zeilen
.recipe:nth-of-type(odd) {
    background-color: #f9f0d9;
	margin: 10px 0 10px 0;
} */

/* Gerade Zeilen
.recipe:nth-of-type(even) {
    background-color: #f7f7d7;
	margin: 10px 0 10px 0;
} */

/* ungerade Listenelemente */
.recipe li:nth-child(odd) {
  background-color: #f5e6c8; /* beige */
  margin: 10px 0 10px 0;
}

/* gerade Listenelemente */
.recipe li:nth-child(even) {
  background-color: #fbf2df; /* hellbeige */
  margin: 10px 0 10px 0;
}