/*
  Basis-Stile für das gesamte Dokument
  - Setzt eine dunkle Hintergrundfarbe
  - Stellt sicher, dass der Inhalt mittig ausgerichtet ist
*/
body {
  font-family: Arial, sans-serif;
  background-color: #121212;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  color: #e0e0e0;
  /* Helle Textfarbe für gute Lesbarkeit */
}

/* Stil für die Hauptüberschrift */
h1 {
  margin-bottom: 20px;
  color: #90caf9;
  /* Blaue Akzentfarbe */
  text-align: center;
}

/* Formular-Styling */
form {
  background: #1e1e1e;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
  width: 90%;
  max-width: 400px;
}

/* Beschriftungen innerhalb des Formulars */
label {
  font-weight: bold;
  display: block;
  margin-top: 10px;
  color: #bdbdbd;
}

/* Styling für Dropdowns und Buttons */
select,
button {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border-radius: 5px;
  border: 1px solid #424242;
  background: #2e2e2e;
  color: #e0e0e0;
  font-size: 14px;
}

/* Textarea-Stil */
textarea {
  width: 96%;
  padding: 10px;
  margin-top: 5px;
  border-radius: 5px;
  border: 1px solid #424242;
  background: #2e2e2e;
  color: #e0e0e0;
  font-size: 14px;
  resize: vertical;
}

/* Button-Stil */
button {
  background-color: #90caf9;
  color: #121212;
  border: none;
  cursor: pointer;
  font-weight: bold;
  margin-top: 15px;
}

/* Hover-Effekt für Buttons */
button:hover {
  background-color: #42a5f5;
}

/* Stil für Code-Blöcke */
pre {
  background: #263238;
  border-radius: 10px;
  padding: 15px;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 14px;
  max-height: 150px;
  overflow-y: hidden;
  transition: max-height 0.3s ease-in-out;
  color: #cfd8dc;
}

/* Erweiterter Code-Block-Stil */
pre.expanded {
  max-height: 500px;
  overflow-y: auto;
}

/* Container für API-Antworten */
.response-container {
  margin-top: 20px;
  margin-bottom: 20px;
  width: 90%;
  max-width: 600px;
}

/* Styling für Buttons innerhalb der Antwort-Container */
.response-container button {
  width: auto;
  margin-top: 10px;
  background-color: #90caf9;
  color: #121212;
}

/* Hover-Effekt für Buttons im Antwort-Container */
.response-container button:hover {
  background-color: #42a5f5;
}

/* Stil für Ladeanzeige */
.loading {
  display: none;
  margin-top: 10px;
  text-align: center;
  font-size: 14px;
  color: #90caf9;
}

/* Header-Container für Navigationsmenü */
.header-container {
  position: relative;
  width: 100%;
  /* Passt sich an kleinere Bildschirme an */
  max-width: 450px;
  /* Begrenzte Maximalbreite */
  margin: 40px auto 20px auto;
  /* Zentrierung und Abstand */
}

/* Menü-Container für Navigation */
.menu-container {
  position: relative;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  z-index: 1000;
}

/* Hamburger-Menü-Stil */
.hamburger {
  font-size: 24px;
  cursor: pointer;
  color: #e0e0e0;
  user-select: none;
  padding: 5px;
}

/* Aktuelle Seite Titel-Stil */
#current-page {
  font-size: 16px;
  margin-left: 5px;
  color: #e0e0e0;
}

/* Dropdown-Menü für Navigation */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 35px;
  left: 0;
  background: #1e1e1e;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}

/* Styling für Links im Dropdown-Menü */
.dropdown-menu a {
  display: block;
  color: #e0e0e0;
  padding: 8px;
  text-decoration: none;
}

/* Hover-Effekt für Links im Dropdown-Menü */
.dropdown-menu a:hover {
  background: #2e2e2e;
}

/* Footer-Stil */
.footer {
  margin-top: 15px;
  font-size: 16px;
  color: #bdbdbd;
  text-align: center;
  margin: 10px 0 20px 0;
}

.disclaimer {
  font-size: 0.9em;
  color: #666;
  margin-top: 10px;
  text-align: center;
  /* Mittige Ausrichtung des Textes */
}