/* Reset some default browser styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body styling */
body {
  font-family: Arial, Helvetica, sans-serif;
  background: url("/images/bg.webp") center/cover no-repeat fixed;
  color: white;
  margin: 0;
  padding: 0;
  height: 100%;
  position: relative; /* Needed for the pseudo-element positioning */
  z-index: 0;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Adjust the alpha for brightness */
  z-index: -1; /* Make sure it stays behind the content */
}

.container {
  max-width: 960px;
  margin: auto;
  justify-content: space-between;

}

.main-container {
  gap: 2rem;
  margin-top: 2rem;
}

.left,
.right {
  width: 48%; /* or whatever fits your layout */
  padding: 10px;
}

.box {
  margin: 5px 0;
  padding: 10px;
}

.status-bar-field img,
button {
  vertical-align: top; /* Align the image to the top to avoid extra space below */
}

.status-bar-field {
  display: inline-block; /* Try this first */
  padding: 0; /* Reset padding */
  margin: 0; /* Reset margin */
  line-height: 0; /* Sometimes helps with inline alignment */
}
/* Entfernt den Rand der gesamten Menu-Leiste */
menu {
  border: none;
  padding: 0;
}
/* Definiert das Aussehen der Tabs */
menu li {
  list-style: none;
  display: inline-block;
  background-color: #c0c0c0;  /* Hintergrundfarbe für nicht ausgewählte Tabs */
  border-radius: 2px;
  margin-right: 1px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}


menu li a {
  display: block;  /* Ensures the link fills the entire li */
  padding: 2px 3px;  /* Adds padding to the entire link */
  text-decoration: none;  /* Removes the underline from links */
  color: inherit;  /* Inherits the text color from the li */
  transition: background-color 0.3s ease;
}

/* Wenn ein Tab ausgewählt ist */
menu li[aria-selected="true"] {
  background-color: #3498db; /* Hintergrundfarbe für den ausgewählten Tab */
  color: white;  /* Textfarbe des ausgewählten Tabs */
}

/* Wenn ein Tab nicht ausgewählt ist und im Hover-Zustand */
menu li:hover {
  background-color: #ddd;  /* Helle Farbe für Hover-Zustand */
}

/* Entferne den Hintergrund für alle leeren li-Elemente */
menu li:empty {
  display: none;  /* Versteckt leere li-Elemente */
}