body {
  font-family: Arial, sans-serif;
  background-color: #382d3d;
  color: #ffffff;
  margin: 0;
  padding: 2px;
}

/* Stil für den Event-Kasten */
details {
  background-color: #eeeeee; /* Helles Grau für den zusammengeklappten Zustand */
  margin-bottom: 5px; /* Abstand zwischen den Event-Kästen */
  border-radius: 5px; /* Abgerundete Ecken */
  padding: 5px; /* Innenabstand innerhalb des details Elements */
  border: 1px solid #ccc; /* Leichter Rahmen um das Element */
}

/* Stil für den aufklappbaren Teil des Event-Kastens */
summary {
  font-weight: bold;
  color: #382d3d; /* Dunkle Schrift für den Event-Titel */
  cursor: pointer;
}

pre {
  background-color: #ffffff; /* Weißer Hintergrund für JSON-Inhalte */
  color: #382d3d; /* Dunkle Schriftfarbe für JSON-Inhalte */
  border: none; /* Entfernt jeglichen Rahmen */
  overflow-x: auto; /* Ermöglicht horizontales Scrollen bei langen Zeilen */
  white-space: pre-wrap; /* Ermöglicht den Zeilenumbruch bei Bedarf */
  padding: 5px; /* Innenabstand für bessere Lesbarkeit */
}

/* Farben und Stil für die Eigenschaftsnamen innerhalb des JSON-Objekts */
.json-property-name {
  color: #fe6845; /* Farbe für die Eigenschaftsnamen */
  font-weight: bold;
}

/* Stil für die Werte innerhalb des JSON-Objekts, wenn benötigt */
.json-property-value {
  color: #382d3d;
}

.container {
  max-width: 600px;
  margin: auto;
  background: #382d3d;
  padding: 5px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  min-width: 300px;
}

.label {
  font-weight: bold;
  color: #fe6845;
}

.value {
  color: #ffffff;
}

.events, .channels {
  margin-top: 10px;
}

.event-details, .channel-details {
  color: #382d3d;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.event-details summary, .channel-details summary {
  cursor: pointer;
  font-weight: bold;
  color: #382d3d; /* Dunkelviolett für Event-Namen */
}

.event-details pre, .channel-details pre {
  background: #fff;
  color: #382d3d;
  padding: 10px;
  border-radius: 4px;
  overflow: auto;
  max-height: 200px;
  font-family: monospace; /* Schriftart für bessere Lesbarkeit von JSON */
}

.event-details pre .key, .channel-details pre .key {
  color: #fe6845; /* Orange für JSON-Schlüssel/Eigenschaftsnamen */
}

.event-details pre .string, .event-details pre .number, .channel-details pre .string, .channel-details pre .number {
  color: #382d3d; /* Dunkelviolett für Werte im JSON */
}

#options-link {
    position: absolute;  /* Absolut positioniert, relativ zum nächstgelegenen positionierten Vorfahren */
    top: 5px;           /* Abstand von oben */
    right: 5px;         /* Abstand von rechts */
    color: #ccc7aa;      /* Linkfarbe */
    padding: 5px 5px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: normal; /* Entfernt fettgedrucktes Styling */
    font-size: 10px;
}

#options-link:hover {
    background-color: #fe6845;
    color: #382d3d;
}