.main-container {
  display: flex;
  justify-content: center; /* Zentriert den Content horizontal */
  min-height: 100vh; /* Minimale Höhe auf 100% des Viewport setzen */
  width: 80%;
}

.content {
  width: 80%; /* Breite des Hauptinhalts auf 80% des Elternelements setzen */
  max-width: 1400px; /* Maximale Breite des Inhalts festlegen, um zu große Breiten zu vermeiden */
  text-align: center;
  margin-top: 30px;
}

.location {
  margin-top: 50px;
}

.text {
  line-height: 1.8;
  margin-bottom: 30px;
}

#line {
  display: none;
  height: 2px;
  width: 100%;
  background-color: rgba(98, 118, 80);
  margin-bottom: 30px;
  margin-top: 30px;
  border-radius: 2px;
}

.table-container {
  display: flex;
  flex: 1;
  /* background-color: #f9f9f9;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);*/
  padding: 20px;
  border-radius: 8px;
  min-height: 500px;
  margin-top: 30px;
  width: 100%;
  margin: 0;
}
.table-container h2 {
  margin-bottom: 10px;
}
.table-container input[type="text"] {
  margin-bottom: 10px;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  width: calc(100% - 16px); /* Berücksichtigen Sie die Innenpolsterung */
}
.table-container button {
  margin-top: 10px; /* Abstand zwischen Eingabefeldern und Button */
  padding: 8px 16px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.table-container button:hover {
  background-color: #45a049;
}
.table-container ul {
  list-style-type: none;
  padding: 0;
}
.table-container li {
  margin-bottom: 5px;
  padding: 8px;
  background-color: #fafafa;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
}
.table-container li span {
  flex: 1;
}
.table-container li button {
  background-color: #f44336;
}
.table-container li button:hover {
  background-color: #d32f2f;
}

/* Häppchen-Tabelle */
.table-appetizer,
.table-dessert,
.table-salad {
  display: inline-block;
  width: calc(
    30% - 20px
  ); /* Berechnen Sie die Breite für jede Tabelle mit einem Abstand von 20px dazwischen */
  vertical-align: top; /* Ausrichtung der Tabellen oben */
  margin-right: 50px; /* Abstand zwischen den Tabellen */
  border: 2px solid #ccc;
  border-radius: 8px;
  padding: 20px;
  min-height: 500px;
  background-color: #f9f9f9;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.table-salad:last-child,
.table-appetizer:last-child,
.table-dessert:last-child {
  margin-right: 0; /* Entfernen des Abstands für die letzte Tabelle */
}

.table-appetizer h2,
.table-dessert h2,
.table-salad h2 {
  text-align: center;
  text-decoration: underline;
  margin-bottom: 20px;
  font-size: 16pt;
}

#appetizer,
#appetizer_vorname_nachname,
#dessert,
#dessert_vorname_nachname,
#salad,
#salad_vorname_nachname {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  box-sizing: border-box;
  letter-spacing: 3px;
}

#buttonAppetizer,
#buttonDessert,
#buttonSalad {
  display: block;
  margin: 0 auto;
  padding: 8px 16px;
  background-color: rgba(98, 118, 80);
  color: rgba(255, 215, 0);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: "Great Vibes", cursive;
  letter-spacing: 2px;
}

#buttonAppetizer:hover,
#buttonDessert:hover,
#buttonSalad:hover {
  transform: scale(1.1);
}

#appetizerCounter,
#dessertCounter,
#saladCounter {
  display: block;
  text-align: center;
  margin-top: 10px;
}

.appetizerListsContainer,
.dessertListsContainer,
.saladListsContainer {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  min-height: 400px;
}

.appetizerListsContainer ul,
.dessertListsContainer ul,
.saladListsContainer ul {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px;
}

.appetizerListsContainer li,
.dessertListsContainer li,
.saladListsContainer li {
  list-style-type: none;
  text-align: center;
  margin-bottom: 6px;
  border-bottom: 1px solid #ccc; /* Linie zwischen den einzelnen Elementen */
  padding-bottom: 6px; /* Platz unterhalb der Linie */
}

.appetizerListsContainer li span,
.dessertListsContainer li span,
.saladListsContainer li span {
  display: inline-block;
  width: 50%;
}

.appetizerListsContainer li button,
.dessertListsContainer li button,
.saladListsContainer li button {
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
}

.appetizerListsContainer li button:hover,
.dessertListsContainer li button:hover,
.saladListsContainer li button:hover {
  background-color: #d32f2f;
}

.remove-button {
  background-color: #ff0000; /* Hintergrundfarbe */
  color: #fff; /* Textfarbe */
  border: none; /* Keine Rahmen */
  padding: 5px 10px; /* Innenabstand */
  border-radius: 4px; /* Abrundung der Ecken */
  cursor: pointer; /* Zeige Handcursor beim Überfahren */
}

.remove-button:hover {
  background-color: #cc0000; /* Hintergrundfarbe beim Überfahren */
}

@media only screen and (max-width: 600px) {
  .main-container {
    display: flex;
    justify-content: center; /* Zentriert den Content horizontal */
    min-height: 100vh; /* Minimale Höhe auf 100% des Viewport setzen */
    width: 100%;
  }

  .content {
    width: 100%; /* Volle Breite */
    max-width: none; /* Entfernt die maximale Breite Begrenzung */
    text-align: center;
    margin-top: 30px;
  }

  .location {
    margin-top: 50px;
  }

  .text {
    line-height: 1.8;
    margin-bottom: 30px;
    width: 80%;
    margin: auto;
  }

  #line {
    display: block;
    height: 2px;
    width: 100%;
    background-color: rgba(98, 118, 80);
    margin-bottom: 30px;
    margin-top: 30px;
    border-radius: 2px;
  }

  .table-container {
    display: block; /* Ändern Sie die Anzeige auf Block */
    padding: 20px;
    border-radius: 8px;
    min-height: 500px;
    margin-top: 30px;
    width: 90%;
    margin: auto;
  }

  .table-container h2 {
    margin-bottom: 10px;
  }
  .table-container input[type="text"] {
    margin-bottom: 10px;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    width: calc(100% - 16px); /* Berücksichtigen Sie die Innenpolsterung */
  }
  .table-container button {
    margin-top: 10px; /* Abstand zwischen Eingabefeldern und Button */
    padding: 8px 16px;
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  .table-container button:hover {
    background-color: #45a049;
  }
  .table-container ul {
    list-style-type: none;
    padding: 0;
  }
  .table-container li {
    margin-bottom: 5px;
    padding: 8px;
    background-color: #fafafa;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
  }
  .table-container li span {
    flex: 1;
  }
  .table-container li button {
    background-color: #f44336;
  }
  .table-container li button:hover {
    background-color: #d32f2f;
  }

  /* Häppchen-Tabelle */
  .table-appetizer,
  .table-dessert,
  .table-salad {
    width: 100%; /* Die Breite jeder Tabelle auf 100% des Container-Elements setzen */
    margin-bottom: 0px; /* Abstand zwischen den Tabellen hinzufügen */
    border: 2px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    min-height: 100px; /* Setzen Sie die Mindesthöhe auf 100px */
    box-sizing: border-box; /* Stellen Sie sicher, dass das Padding und Border in der Breite enthalten sind */
    margin-right: 0;
    background-color: #f9f9f9;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  }

  .table-salad:last-child,
  .table-appetizer:last-child,
  .table-dessert:last-child {
    margin-right: 0; /* Entfernen des Abstands für die letzte Tabelle */
  }

  .table-appetizer h2,
  .table-dessert h2,
  .table-salad h2 {
    text-align: center;
    text-decoration: underline;
    margin-bottom: 20px;
    font-size: 16pt;
  }

  #appetizer,
  #appetizer_vorname_nachname,
  #dessert,
  #dessert_vorname_nachname,
  #salad,
  #salad_vorname_nachname {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    box-sizing: border-box;
    letter-spacing: 3px;
  }

  #buttonAppetizer,
  #buttonDessert,
  #buttonSalad {
    display: block;
    margin: 0 auto;
    padding: 8px 16px;
    background-color: rgba(98, 118, 80);
    color: rgba(255, 215, 0);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: "Great Vibes", cursive;
    letter-spacing: 2px;
  }

  #buttonAppetizer:hover,
  #buttonDessert:hover,
  #buttonSalad:hover {
    transform: scale(1.1);
  }

  #appetizerCounter,
  #dessertCounter,
  #saladCounter {
    display: block;
    text-align: center;
    margin-top: 10px;
  }

  .appetizerListsContainer,
  .dessertListsContainer,
  .saladListsContainer {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    min-height: 400px;
  }

  .appetizerListsContainer ul,
  .dessertListsContainer ul,
  .saladListsContainer ul {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px;
  }

  .appetizerListsContainer li,
  .dessertListsContainer li,
  .saladListsContainer li {
    list-style-type: none;
    text-align: center;
    margin-bottom: 6px;
    border-bottom: 1px solid #ccc; /* Linie zwischen den einzelnen Elementen */
    padding-bottom: 6px; /* Platz unterhalb der Linie */
  }

  .appetizerListsContainer li span,
  .dessertListsContainer li span,
  .saladListsContainer li span {
    display: inline-block;
    width: 50%;
  }

  .appetizerListsContainer li button,
  .dessertListsContainer li button,
  .saladListsContainer li button {
    background-color: #f44336;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
  }

  .appetizerListsContainer li button:hover,
  .dessertListsContainer li button:hover,
  .saladListsContainer li button:hover {
    background-color: #d32f2f;
  }

  .remove-button {
    background-color: #ff0000; /* Hintergrundfarbe */
    color: #fff; /* Textfarbe */
    border: none; /* Keine Rahmen */
    padding: 5px 10px; /* Innenabstand */
    border-radius: 4px; /* Abrundung der Ecken */
    cursor: pointer; /* Zeige Handcursor beim Überfahren */
  }

  .remove-button:hover {
    background-color: #cc0000; /* Hintergrundfarbe beim Überfahren */
  }
}

/* Anpassungen für Tablets, mittelgroße Bildschirme */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
  .main-container {
    display: flex;
    justify-content: center; /* Zentriert den Content horizontal */
    min-height: 100vh; /* Minimale Höhe auf 100% des Viewport setzen */
    width: 100%;
  }

  .content {
    width: 100%; /* Volle Breite */
    max-width: none; /* Entfernt die maximale Breite Begrenzung */
    text-align: center;
    margin-top: 30px;
  }

  .location {
    margin-top: 50px;
  }

  .text {
    line-height: 1.8;
    margin-bottom: 30px;
    width: 80%;
    margin: auto;
  }

  #line {
    display: block;
    height: 2px;
    width: 100%;
    background-color: rgba(98, 118, 80);
    margin-bottom: 30px;
    margin-top: 30px;
    border-radius: 2px;
  }

  .table-container {
    display: block; /* Ändern Sie die Anzeige auf Block */
    padding: 20px;
    border-radius: 8px;
    min-height: 500px;
    margin-top: 30px;
    width: 70%;
    margin: auto;
  }
  .table-container h2 {
    margin-bottom: 10px;
  }
  .table-container input[type="text"] {
    margin-bottom: 10px;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    width: calc(100% - 16px); /* Berücksichtigen Sie die Innenpolsterung */
  }
  .table-container button {
    margin-top: 10px; /* Abstand zwischen Eingabefeldern und Button */
    padding: 8px 16px;
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  .table-container button:hover {
    background-color: #45a049;
  }
  .table-container ul {
    list-style-type: none;
    padding: 0;
  }
  .table-container li {
    margin-bottom: 5px;
    padding: 8px;
    background-color: #fafafa;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
  }
  .table-container li span {
    flex: 1;
  }
  .table-container li button {
    background-color: #f44336;
  }
  .table-container li button:hover {
    background-color: #d32f2f;
  }

  /* Häppchen-Tabelle */
  .table-appetizer,
  .table-dessert,
  .table-salad {
    width: 100%; /* Die Breite jeder Tabelle auf 100% des Container-Elements setzen */
    margin-bottom: 0px; /* Abstand zwischen den Tabellen hinzufügen */
    border: 2px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    min-height: 100px; /* Setzen Sie die Mindesthöhe auf 100px */
    box-sizing: border-box; /* Stellen Sie sicher, dass das Padding und Border in der Breite enthalten sind */
    margin-right: 0;
    background-color: #f9f9f9;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  }

  .table-salad:last-child,
  .table-appetizer:last-child,
  .table-dessert:last-child {
    margin-right: 0; /* Entfernen des Abstands für die letzte Tabelle */
  }

  .table-appetizer h2,
  .table-dessert h2,
  .table-salad h2 {
    text-align: center;
    text-decoration: underline;
    margin-bottom: 20px;
    font-size: 16pt;
  }

  #appetizer,
  #appetizer_vorname_nachname,
  #dessert,
  #dessert_vorname_nachname,
  #salad,
  #salad_vorname_nachname {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    box-sizing: border-box;
    letter-spacing: 3px;
  }

  #buttonAppetizer,
  #buttonDessert,
  #buttonSalad {
    display: block;
    margin: 0 auto;
    padding: 8px 16px;
    background-color: rgba(98, 118, 80);
    color: rgba(255, 215, 0);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: "Great Vibes", cursive;
    letter-spacing: 2px;
  }

  #buttonAppetizer:hover,
  #buttonDessert:hover,
  #buttonSalad:hover {
    transform: scale(1.1);
  }

  #appetizerCounter,
  #dessertCounter,
  #saladCounter {
    display: block;
    text-align: center;
    margin-top: 10px;
  }

  .appetizerListsContainer,
  .dessertListsContainer,
  .saladListsContainer {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    min-height: 400px;
  }

  .appetizerListsContainer ul,
  .dessertListsContainer ul,
  .saladListsContainer ul {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px;
  }

  .appetizerListsContainer li,
  .dessertListsContainer li,
  .saladListsContainer li {
    list-style-type: none;
    text-align: center;
    margin-bottom: 6px;
    border-bottom: 1px solid #ccc; /* Linie zwischen den einzelnen Elementen */
    padding-bottom: 6px; /* Platz unterhalb der Linie */
  }

  .appetizerListsContainer li span,
  .dessertListsContainer li span,
  .saladListsContainer li span {
    display: inline-block;
    width: 50%;
  }

  .appetizerListsContainer li button,
  .dessertListsContainer li button,
  .saladListsContainer li button {
    background-color: #f44336;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
  }

  .appetizerListsContainer li button:hover,
  .dessertListsContainer li button:hover,
  .saladListsContainer li button:hover {
    background-color: #d32f2f;
  }

  .remove-button {
    background-color: #ff0000; /* Hintergrundfarbe */
    color: #fff; /* Textfarbe */
    border: none; /* Keine Rahmen */
    padding: 5px 10px; /* Innenabstand */
    border-radius: 4px; /* Abrundung der Ecken */
    cursor: pointer; /* Zeige Handcursor beim Überfahren */
  }

  .remove-button:hover {
    background-color: #cc0000; /* Hintergrundfarbe beim Überfahren */
  }
}

/* Anpassungen für Tablets, mittelgroße Bildschirme */
@media only screen and (min-width: 1024px) and (max-width: 1489px) {
  .main-container {
    display: flex;
    justify-content: center; /* Zentriert den Content horizontal */
    min-height: 100vh; /* Minimale Höhe auf 100% des Viewport setzen */
    width: 70%;
  }

  .content {
    width: 100%; /* Volle Breite */
    max-width: none; /* Entfernt die maximale Breite Begrenzung */
    text-align: center;
    margin-top: 30px;
  }

  .location {
    margin-top: 50px;
  }

  #line {
    display: block;
    height: 2px;
    width: 100%;
    background-color: rgba(98, 118, 80);
    margin-bottom: 30px;
    margin-top: 30px;
    border-radius: 2px;
  }

  .table-container {
    display: block; /* Ändern Sie die Anzeige auf Block */
    padding: 20px;
    border-radius: 8px;
    min-height: 500px;
    margin-top: 30px;
    width: 60%;
    margin: auto;
  }
  .table-container h2 {
    margin-bottom: 10px;
  }
  .table-container input[type="text"] {
    margin-bottom: 10px;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    width: calc(100% - 16px); /* Berücksichtigen Sie die Innenpolsterung */
  }
  .table-container button {
    margin-top: 10px; /* Abstand zwischen Eingabefeldern und Button */
    padding: 8px 16px;
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  .table-container button:hover {
    background-color: #45a049;
  }
  .table-container ul {
    list-style-type: none;
    padding: 0;
  }
  .table-container li {
    margin-bottom: 5px;
    padding: 8px;
    background-color: #fafafa;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
  }
  .table-container li span {
    flex: 1;
  }
  .table-container li button {
    background-color: #f44336;
  }
  .table-container li button:hover {
    background-color: #d32f2f;
  }

  /* Häppchen-Tabelle */
  .table-appetizer,
  .table-dessert,
  .table-salad {
    width: 100%; /* Die Breite jeder Tabelle auf 100% des Container-Elements setzen */
    margin-bottom: 0px; /* Abstand zwischen den Tabellen hinzufügen */
    border: 2px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    min-height: 100px; /* Setzen Sie die Mindesthöhe auf 100px */
    box-sizing: border-box; /* Stellen Sie sicher, dass das Padding und Border in der Breite enthalten sind */
    margin-right: 0;
    background-color: #f9f9f9;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  }

  .table-salad:last-child,
  .table-appetizer:last-child,
  .table-dessert:last-child {
    margin-right: 0; /* Entfernen des Abstands für die letzte Tabelle */
  }

  .table-appetizer h2,
  .table-dessert h2,
  .table-salad h2 {
    text-align: center;
    text-decoration: underline;
    margin-bottom: 20px;
    font-size: 16pt;
  }

  #appetizer,
  #appetizer_vorname_nachname,
  #dessert,
  #dessert_vorname_nachname,
  #salad,
  #salad_vorname_nachname {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    box-sizing: border-box;
    letter-spacing: 3px;
  }

  #buttonAppetizer,
  #buttonDessert,
  #buttonSalad {
    display: block;
    margin: 0 auto;
    padding: 8px 16px;
    background-color: rgba(98, 118, 80);
    color: rgba(255, 215, 0);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: "Great Vibes", cursive;
    letter-spacing: 2px;
  }

  #buttonAppetizer:hover,
  #buttonDessert:hover,
  #buttonSalad:hover {
    transform: scale(1.1);
  }

  #appetizerCounter,
  #dessertCounter,
  #saladCounter {
    display: block;
    text-align: center;
    margin-top: 10px;
  }

  .appetizerListsContainer,
  .dessertListsContainer,
  .saladListsContainer {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    min-height: 400px;
  }

  .appetizerListsContainer ul,
  .dessertListsContainer ul,
  .saladListsContainer ul {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px;
  }

  .appetizerListsContainer li,
  .dessertListsContainer li,
  .saladListsContainer li {
    list-style-type: none;
    text-align: center;
    margin-bottom: 6px;
    border-bottom: 1px solid #ccc; /* Linie zwischen den einzelnen Elementen */
    padding-bottom: 6px; /* Platz unterhalb der Linie */
  }

  .appetizerListsContainer li span,
  .dessertListsContainer li span,
  .saladListsContainer li span {
    display: inline-block;
    width: 50%;
  }

  .appetizerListsContainer li button,
  .dessertListsContainer li button,
  .saladListsContainer li button {
    background-color: #f44336;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
  }

  .appetizerListsContainer li button:hover,
  .dessertListsContainer li button:hover,
  .saladListsContainer li button:hover {
    background-color: #d32f2f;
  }

  .remove-button {
    background-color: #ff0000; /* Hintergrundfarbe */
    color: #fff; /* Textfarbe */
    border: none; /* Keine Rahmen */
    padding: 5px 10px; /* Innenabstand */
    border-radius: 4px; /* Abrundung der Ecken */
    cursor: pointer; /* Zeige Handcursor beim Überfahren */
  }

  .remove-button:hover {
    background-color: #cc0000; /* Hintergrundfarbe beim Überfahren */
  }
}