/* --- 1. Status-Meldung: Erfolg / Fehler --- */
#statusMessage {
  margin-top: 1rem;
  font-size: 0.95rem;
  padding: 1rem;
  border-radius: 0.5rem;
  display: none;
  transition: all 0.3s ease;
}

#statusMessage.success {
  background-color: #ecfdf5;
  color: #065f46;
  border: 1px solid #10b981;
  display: block;
}

#statusMessage.error {
  background-color: #fef2f2;
  color: #991b1b;
  border: 1px solid #ef4444;
  display: block;
}

/* --- 2. Fokus-Stil für Inputs --- */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
  transition: 0.2s ease;
}

/* --- 3. Button-Zustände --- */
button:disabled {
  background-color: #d1d5db;
  cursor: not-allowed;
  opacity: 0.6;
}

button:active {
  transform: scale(0.98);
}

/* --- 4. Visuelle Gruppierung --- */
form label:first-of-type {
  margin-top: 0;
}

form label {
  margin-top: 1.5rem;
  font-weight: 600;
}

form hr {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 2rem 0 1rem;
}

/* --- 5. Feinjustierung für mobil --- */
@media (max-width: 480px) {
  .button-group {
    flex-direction: column;
    align-items: stretch;
  }

  button {
    width: 100%;
  }

  .container {
    padding: 1.25rem;
  }
}
button.danger {
  background-color: #ef4444;
  color: white;
}

button.danger:hover {
  background-color: #dc2626;
}