#user-display {
  color: var(--color-accent);
  font-size: var(--font-size-sm);
  margin-left: var(--space-md);
}
#header-spacer {
  transition: height 0.3s ease;
}
#alert-container {
  position: fixed;
  bottom: var(--space-md);
  right: var(--space-md);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  pointer-events: none;
}


#login-modal-content,
#contact-modal-content,
#register-modal-content {
  max-width: 600px;
}
/* Kontaktmodal-Styling */
#contact-modal.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-lightbox-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

/* Buttons */
.modal-buttons {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

/* Dropdown special style */
#contact-form select option {
  background: var(--color-input-background);
  color: var(--color-text);
}

/* Fehlerausgabe / Alert ggf. ergänzbar */
#filter-panel {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-sm);

  flex-direction: row;
}

#avatar-container {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto;
  cursor: pointer;
  padding: var(--space-md);
}

#avatar-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #ccc;
  transition: border-color 0.3s;
}

#avatar-container:hover img {
  border-color: #888;
}

.xp-progress-wrapper {
  margin-top: 1em;
}

.xp-progress-bar {
  width: 100%;
  height: 12px;
  background: #ddd;
  border-radius: 6px;
  overflow: hidden;
}

#xp-progress-inner {
  height: 100%;
  width: 0%;
  background: #4caf50;
  transition: width 0.5s ease;
}

#xp-progress-label, #xp-progress-footer {
  font-size: 0.9em;
  margin-bottom: 0.25em;
}