#modal-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 10000 !important; /* Sehr hoher Z-Index */
}

/* Modal - Grundeinstellungen überschreiben */
.modal {
  display: none 
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.7) !important;
  z-index: 10001 !important;
  pointer-events: auto !important;
}

/* Aktive Modals - SOFORT sichtbar */
.modal.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Zusätzliche Sicherheit für das fahrzeughandel-modal */
#fahrzeughandel-modal.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Modal-Content - Responsive und sichtbar */
.modal-content {
  background: var(--modal-bg-color, var(--clr-surface-a20)) !important;
  border-radius: 12px !important;
  padding: 2rem !important;
  max-width: 90vw !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  border: 1px solid var(--border-color) !important;
  position: relative !important;
  z-index: 10002 !important;

  /* Animation für bessere UX */
  animation: modalFadeIn 0.2s ease-out !important;
  transform: scale(1) !important;
}

/* Modal-Animation */
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Modal-Header */
.modal-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 1.5rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.modal-title {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
}

.modal-close {
  background: none !important;
  border: none !important;
  color: var(--text-secondary) !important;
  font-size: 1.5rem !important;
  cursor: pointer !important;
  padding: 0.5rem !important;
  line-height: 1 !important;
  transition: color 0.2s ease !important;
}

.modal-close:hover {
  color: var(--text-primary) !important;
}

/* Modal-Body */
.modal-body {
  color: var(--text-primary) !important;
  line-height: 1.6 !important;
}

/* Modal-Footer */
.modal-footer {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 1rem !important;
  margin-top: 2rem !important;
  padding-top: 1rem !important;
  border-top: 1px solid var(--border-color) !important;
}

/* Form-Elemente in Modals */
.modal .form-input,
.modal .form-select,
.modal .form-textarea {
  background: var(--clr-surface-a10) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Buttons in Modals */
.modal .btn {
  min-width: 100px !important;
}

/* Scrollbar in Modals */
.modal-content::-webkit-scrollbar {
  width: 8px;
}

.modal-content::-webkit-scrollbar-track {
  background: var(--clr-surface-a10);
  border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
  background: var(--accent-secondary);
}

/* Mobile Optimierung */
@media (max-width: 768px) {
  .modal-content {
    margin: 1rem !important;
    max-width: calc(100vw - 2rem) !important;
    max-height: calc(100vh - 2rem) !important;
  }

  .modal-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }

  .modal-close {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
  }

  .modal-footer {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .modal .btn {
    width: 100% !important;
  }
}

/* Debug-Hilfe - Temporär hinzufügen um zu testen */
.modal-debug {
  border: 3px solid red !important;
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.5) !important;
}

.modal-debug::before {
  content: "MODAL SICHTBAR" !important;
  position: absolute !important;
  top: -30px !important;
  left: 0 !important;
  background: red !important;
  color: white !important;
  padding: 5px 10px !important;
  font-size: 12px !important;
  font-weight: bold !important;
}

/* Overlay-Fix für mehrere Modals */
.modal + .modal {
  z-index: 10003 !important;
}

.modal + .modal .modal-content {
  z-index: 10004 !important;
}

/* Print-Modus - Modals ausblenden */
@media print {
  .modal,
  #modal-container {
    display: none !important;
  }
}