* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
}

html {
  scroll-behavior: smooth;
}

.patrick-hand sc-regular {
  font-family: "Patrick Hand SC", cursive;
  font-weight: 400;
  font-style: normal;
}

body {
  color: #fff;
  background-color: #3f1c09; /* Dunkles Grün/Braun */ 
  font-family: "Patrick Hand SC", cursive;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #3f1c09; /* Dunkleres Braun */
}
.content .text-image-container {
  display: flex;
  font-family: "Patrick Hand SC", cursive;
  justify-content: space-between; /* Ändere zu space-between für gleichmäßigen Abstand */
  align-items: center;
  margin: 20px 0;
  padding: 0 20px; /* Fügt horizontalen Abstand vom Rand hinzu */
}

.content .text-image-container .text {
	font-family: "Patrick Hand SC", cursive;
  max-width: 45%; /* Anpassung der Breite für Abstand */
  margin-right: 20px; /* Fügt rechten Abstand zum Bild hinzu */
}

.content .text-image-container img {
  max-width: 45%;
  height: auto;
  margin-left: 20px; /* Fügt linken Abstand zum Text hinzu */
}

/* Anpassung für die umgekehrte Reihenfolge im zweiten Container */
.content .text-image-container:nth-child(even) .text {
	font-family: "Patrick Hand SC", cursive;
  margin-left: 20px;
  margin-right: 0; /* Entfernt den rechten Margin, wenn das Bild vor dem Text ist */
}

.content .text-image-container:nth-child(even) img {
  margin-right: 20px;
  margin-left: 0; /* Entfernt den linken Margin, wenn das Bild nach dem Text ist */
}

/* Responsive Design für kleinere Bildschirme */
@media (max-width: 768px) {
  .content .text-image-container {
    flex-direction: column;
    padding: 0; /* Entfernt den Padding in kleineren Ansichten */
  }
  .content .text-image-container .text, .content .text-image-container img {
    max-width: 100%;
    margin: 10px 0; /* Fügt Abstand zwischen Text und Bild hinzu */
  }
  .content .text-image-container .text {
    margin-right: 0; /* Entfernt den rechten Margin für den Text */
  }
  .content .text-image-container img {
    margin-left: 0; /* Entfernt den linken Margin für das Bild */
  }
}


nav ul {
	font-family: "Patrick Hand SC", cursive;
  list-style: none;
  display: flex;
}

nav ul li {
	font-family: "Patrick Hand SC", cursive;
  margin-left: 20px;
}

nav ul li a {
  text-decoration: none;
  color: white;
  font-family: "Patrick Hand SC", cursive;
}
a {
  text-decoration: none;
  color: white;
  font-family: "Patrick Hand SC", cursive;
}

.fullscreen-image {
  position: relative;
  height: 100vh;
  background-image: url('pic/header.jpg');
  background-size: cover;
  background-position: center;
}

.text-overlay {
	font-family: "Patrick Hand SC", cursive;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 24px;
  background-color: rgba(0,0,0,0.5);
  padding: 20px;
}

.content .text-image-container {
	font-family: "Patrick Hand SC", cursive;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 20px 0;
}

.content .text-image-container:nth-child(even) {
	font-family: "Patrick Hand SC", cursive;
  flex-direction: row-reverse;
}

h2 {
	font-family: "Patrick Hand SC", cursive;
	margin-top: 20px;
}

img {
  max-width: 100%;
  height: auto;
}

.form-section {
  padding: 20px;
  background-color: #eec993;
  color: #3f1c09; 
  font-family: "Patrick Hand SC", cursive;
}

form label, form input, form select, form textarea, form button {
	font-family: "Patrick Hand SC", cursive;
  display: block;
  margin-top: 10px;
}

form input, form select, form textarea {
  width: 100%;
  border: none; /* Entfernt die Standard-Border */
  padding: 10px 20px; /* Innenabstand, um den Button größer zu machen */
  border-radius: 15px; /* Abgerundete Ecken */
  font-size: 16px; /* Schriftgröße */
  font-family: "Patrick Hand SC", cursive;
}
.custom-button {
	font-family: "Patrick Hand SC", cursive;
  background-color: #3f1c09; /* Dunkelbraune Hintergrundfarbe */
  color: #eec993; /* Textfarbe */
  border: none; /* Entfernt die Standard-Border */
  padding: 10px 20px; /* Innenabstand, um den Button größer zu machen */
  border-radius: 15px; /* Abgerundete Ecken */
  font-size: 16px; /* Schriftgröße */
  cursor: pointer; /* Ändert den Cursor zum Klick-Symbol, wenn man über den Button hovert */
  transition: background-color 0.3s ease; /* Sanfter Übergang für den Hover-Effekt */
}

.custom-button:hover {
	font-family: "Patrick Hand SC", cursive;
  background-color: #eec993; /* Helle Farbe für den Hover-Effekt */
  color: #3f1c09; /* Dunkle Textfarbe beim Hovern */
}

.seed-categories {
	font-family: "Patrick Hand SC", cursive;
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.category {
	font-family: "Patrick Hand SC", cursive;
  flex: 1; /* Gibt jeder Kategorie die gleiche Breite */
  margin: 0 10px; /* Fügt einen kleinen Abstand zwischen den Kategorien hinzu */
  padding: 20px; /* Innerer Abstand für jede Kategorie */
  background-color: #f5f5f5; /* Hintergrundfarbe für jede Kategorie */
  border-radius: 10px; /* Abgerundete Ecken */
}

.category h2 {
  color: #3f1c09; /* Dunkelbraune Textfarbe für die Überschriften */
  font-family: "Patrick Hand SC", cursive;
}

.category p {
  color: #000; /* Schwarze Textfarbe */
  font-family: "Patrick Hand SC", cursive;
}


.modal {
  display: none; /* Versteckt das Modalfenster standardmäßig */
  position: fixed; /* Bleibt an der gleichen Stelle, auch beim Scrollen */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5); /* Schwarz mit Transparenz */
  z-index: 1; /* Stellt sicher, dass das Modalfenster über anderen Elementen angezeigt wird */
}

.modal-content {
	font-family: "Patrick Hand SC", cursive;
  background-color: #dcad6a;
  margin: 15% auto; /* Zentriert das Modalfenster */
  padding: 20px;
  border-radius: 5px;
  width: 80%; /* Breite des Modalfensters */
  max-width: 600px; /* Maximale Breite */
}

.btn {
	font-family: "Patrick Hand SC", cursive;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  margin: 10px;
}

p {
	font-family: "Patrick Hand SC", cursive;
}

.accept {
	font-family: "Patrick Hand SC", cursive;
  background-color: #4CAF50; /* Grüne Farbe */
  color: white;
}

.decline {
	font-family: "Patrick Hand SC", cursive;
  background-color: #f44336; /* Rote Farbe */
  color: white;
}


footer {
  background-color: #000;
  color: white;
  font-family: "Patrick Hand SC", cursive;
  text-align: center;
  padding: 20px;
}