/* Stile für das Hauptinhalt */
main {
    margin-top: 90px; /* Platzieren des Hauptinhalts unter dem Menü */
    padding: 20px;
	 top: 100px;
    box-sizing: border-box;
	 text-align: center; /* Zentriert den Text horizontal */
}

/* Stile für den Footer */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #444; /*//#333;*/
    color: #fff;
    padding: 0px;
    text-align: center;
}

/* Stile für das Header */
header {
    background-color: #333; /* Standard-Hintergrundfarbe */
    color: #fff;
    padding: 10px;
    position: fixed; /* Fixierte Positionierung, damit der Header immer sichtbar bleibt */
    width: 100%;
    top: 0;
    left: 0;
    z-index: 3000; /* Z-Index, um sicherzustellen, dass der Header über anderen Inhalten liegt */
    height: 60px; /* Höhe des Headers */
    margin: 0; /* Entfernen des Standardabstands */
    text-align: center; /* Zentriert den Inhalt horizontal */
}

/* Stile für das Navigationsmenü */
nav {
    position: fixed;
    top: 70px; /* Abstand von oben des Menüs */
    left: 0;
    width: 100%;
    background-color: #333;
    color: #fff;
    padding: 5px;
    box-sizing: border-box;
    z-index: 1000; /* Stelle sicher, dass das Menü über anderen Inhalten liegt */
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex; /* Verwendet Flexbox für die Anordnung der Menüpunkte */
    background-color: #333; /* Hintergrundfarbe des Menüs wie beim Header */
}

nav ul li {
    margin-right: 20px; /* Abstand zwischen den einzelnen Menüpunkten */
}

nav ul li:last-child {
    margin-right: 0; /* Entfernt den Abstand beim letzten Menüpunkt */
}

nav ul li a {
    display: block;
    color: #fff; /* Farbe für den normalen Zustand (Weiß) */
    text-decoration: none;
    padding: 5px;
}

nav ul li a:hover {
    background-color: #555;
}




/* für rezepteauflistung */

/* Stil für den Container */
/*.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Fügt den Abstand zwischen den Spalten hinzu */
    /*width: 100%; /* Container nimmt die volle Breite des Elternelements ein */
    /*height: 100%; /* Container nimmt die volle Höhe des Elternelements ein */
}*/


.rezept {
    width: calc(50% - 10px); /* Setzt die Breite auf 50% des Elternelements mit einem Abstand von 10px */
    margin-bottom: 20px; /* Fügt einen Abstand zwischen den Rezepten hinzu */
    text-align: center;
    box-sizing: border-box; /* Berücksichtigt die Padding- und Border-Werte in der Breite */
    padding: 0 10px; /* Fügt horizontalen Abstand zu den Rezepten hinzu */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Fügt einen Schatten hinzu */
}


.rezept img {
    max-width: 66.666%; /* Maximale Breite auf 2/3 der Bildschirmbreite festlegen */
    max-height: 66.666vh; /* Maximale Höhe auf 2/3 der Bildschirmhöhe festlegen */
    width: auto; /* Automatische Breite, um das Seitenverhältnis beizubehalten */
    height: auto; /* Automatische Höhe, um das Seitenverhältnis beizubehalten */
}


.ingredients {
    font-size: 16px; /* Schriftgröße für die Zutatenliste */
}
/* Stile für die Zutatenliste */
.ingredients {
    font-size: 16px; /* Ändere die Schriftgröße nach Bedarf */
}

/* Weitere Stile für andere Elemente hier... */
/* Stil für den Rahmen mit Schatten um das Bewertungsbild */
.rezeptliste-bewertung-container {
    display: inline-block;
    padding: 5px; /* Abstand um das Bild herum */
    border-radius: 5px; /* Abrundung der Ecken */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Rahmen mit Schatten */
}

/* Stil für das Bewertungsbild innerhalb des Rahmens */
.rezeptliste-bewertung-container img {
    width: 20px; /* Breite des Bewertungsbildes */
    height: auto; /* Automatische Höhe, um das Seitenverhältnis beizubehalten */
}
/* Allgemeine CSS-Formatierung für die Buttons */
#menue01 .button {
    display: block; /* Änderung des display-Attributs auf block */
    width: 200px; /* Setzen einer Breite für die Buttons */
    padding: 10px 20px;
    margin: 10px auto; /* Zentrieren der Buttons horizontal */
    background-color: #3498db;
    color: #fff;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    text-decoration: none;
}

#menue01 .button:hover {
    background-color: #2980b9;
}
/* Stil für das Anmeldeformular */
.anmeldeformular-container {
    width: 300px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.anmeldeformular-label {
    margin-bottom: 10px;
}

.anmeldeformular-input {
    width: 100%;
    padding: 5px;
    box-sizing: border-box; /* Um Padding in der Breite einzubeziehen */
}

.anmeldeformular-submit {
    width: 100%;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}



/* Eindeutige Klasse für den zentrierten Container auf der Seite rezept_bearbeiten */
.rezept-bearbeiten-zentriert {
    display: flex;
    justify-content: center;
/*    align-items: center;
/*    height: 100vh; /* 100% der Bildschirmhöhe, um den Inhalt vertikal zentriert zu halten */
}
/* CSS-Stil für das Auswahlfeld auf der Seite rezept_bearbeiten */
.rezept-bearbeiten-auswahl {
    max-width: 20%; /* Maximale Breite auf 100% des verfügbaren Platzes begrenzen */
}
.rezept-bearbeiten-tabelle {
    margin: 0 auto; /* Zentriert die Tabelle */
}



/* CSS-Stile für das Rezeptbearbeiten-Formular */

/* Zentriert den gesamten Inhalt */
/*.rezept-bearbeiten-zentriert {
    text-align: center;
    margin-top: 20px;
}

/* Stile für die Auswahlliste */
/*.rezept-bearbeiten-auswahl {
    width: 200px;
    padding: 5px;
    margin-bottom: 10px;
}*/

/* CSS für das Auswahlformular */
.rezept-bearbeiten-zentriert {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Nach oben ausrichten */
    flex-direction: column;
}

/* CSS für das Anzeigeformular */
.rezept-bearbeiten-tabelle {
    margin-top: 20px; /* Abstand zum Auswahlformular */
    margin-bottom: 20px; /* Abstand nach unten */
}




/* Stile für Text- und Textareafelder */
#form1 textarea,
#form1 input[type="text"],
#form1 input[type="number"] {
    width: 400px;
    padding: 5px;
    margin-bottom: 10px;
}

/* Stile für die Bilder */
#form1 img {
    margin-bottom: 10px;
}

/* Stile für Links */
#form1 a {
    color: blue;
    text-decoration: underline;
}

/* Stile für Zahlenfelder */
#form1 input[type="number"] {
    width: 50px;
    padding: 5px;
    margin-bottom: 10px;
}

/* Stile für Auswahlfelder */
#form1 select {
    width: 100px;
    padding: 5px;
    margin-bottom: 10px;
}
// für einkauf
/* Stil für das Popup-Fenster */
#popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border: 1px solid black;
}

/* Stil für das Einkaufslisten-Auswahlmenü */
form {
  display: inline-block;
  margin: 20px;
}

select {
  font-size: 16px;
  padding: 5px;
}

input[type="submit"],
input[type="button"] {
  font-size: 16px;
  padding: 5px 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
}

input[type="submit"]:hover,
input[type="button"]:hover {
  background-color: #3e8e41;
}

input[type="submit"]:focus,
input[type="button"]:focus {
  outline: none;
}

/* Stil für das Popup-Formular */
label {
  display: inline-block;
  width: 100px;
  font-size: 16px;
  margin-bottom: 5px;
}

input[type="text"],
input[type="date"] {
  font-size: 16px;
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #ccc;
  width: 250px;
}

input[type="text"]:focus,
input[type="date"]:focus {
  outline: none;
  border: 1px solid #4CAF50;
}

input[type="submit"][name="submit"] {
  background-color: #008CBA;
}

input[type="submit"][name="submit"]:hover {
  background-color: #006080;
}

/* Neue Stile für die Hauptseite-Buttons */
button {
  font-size: 16px;
  padding: 5px 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
}

button:hover {
  background-color: #3e8e41;
}

button:focus {
  outline: none;
}
table {
border-collapse: collapse;
}

th, td {
text-align: center;
padding: 8px;
border: 1px solid black;
}

th {
background-color: #4CAF50;
color: white;
}
/* Neue Stile für mobile Geräte */
@media only screen and (max-width: 600px) {
  /* Zentrieren der Formularelemente */
  form,
  #popup form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  /* Vergrößern der Schriftgröße */
  label,
  input,
  select,
  button {
    font-size: 18px;
  }

  /* Vergrößern der Abstände */
  form,
  #popup form {
    margin: 10px;
  }
  
  input,
  select,
  button {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  /* Verkleinern der Breite der Formularelemente */
  input[type="text"],
  input[type="date"],
  select {
    width: 200px;
  }
/* Zentrieren des Popup-Fensters */
#popup {
top: 40%;
}
}
.bearbeitungszeiten_h1 {
    text-align: center;
}

.bearbeitungszeiten_form {
    text-align: center;
}

.bearbeitungszeiten_label {
    display: block;
}

.bearbeitungszeiten_input-group {
    display: inline-block;
}

.bearbeitungszeiten_input[type='text'] {
    width: 100px;
    margin: 0 auto;
}