/* Responsive Forms CSS */

/* Basis-Formularstil */
.form-group {
  margin-bottom: 1.25rem;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #000000;
}

.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  background-color: #fff;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  font-size: 1rem;
}

.form-input:focus {
  border-color: var(--primary-color, #0066CC);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
  outline: none;
}

.form-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all 0.2s ease;
  background-color: var(--primary-color, #0066CC);
  color: white;
  border: none;
  cursor: pointer;
  min-height: 3rem;
}

.form-button:hover {
  background-color: var(--primary-dark, #0055b3);
}

.form-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Checkbox und Radio Styling */
.form-checkbox, .form-radio {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

.form-checkbox input, .form-radio input {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
}

/* Responsive Anpassungen */
@media (max-width: 640px) {
  .form-input {
    font-size: 16px; /* Verhindert Zoom auf iOS */
    padding: 0.75rem;
  }
  
  .form-button {
    width: 100%;
    min-height: 48px; /* Größeres Touch-Ziel */
  }
  
  .form-group {
    margin-bottom: 1rem;
  }
  
  .form-checkbox input, .form-radio input {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.75rem;
  }
}

/* Optimierung für sehr kleine Bildschirme */
@media (max-width: 320px) {
  .form-input {
    padding: 0.5rem 0.75rem;
  }
  
  .form-button {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }
  
  .form-label {
    font-size: 0.875rem;
  }
}

/* Verbesserte Barrierefreiheit */
.form-input:focus, .form-button:focus {
  outline: 2px solid var(--primary-color, #0066CC);
  outline-offset: 2px;
}

/* Fehlermeldungen */
.form-error {
  color: #e53e3e;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.input-error {
  border-color: #e53e3e;
}

.input-error:focus {
  border-color: #e53e3e;
  box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1);
}

/* Erfolgsmeldungen */
.form-success {
  color: #38a169;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.input-success {
  border-color: #38a169;
}

.input-success:focus {
  border-color: #38a169;
  box-shadow: 0 0 0 3px rgba(56, 161, 105, 0.1);
}

/* Responsive Form Layout */
@media (min-width: 768px) {
  .form-row {
    display: flex;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }
  
  .form-col {
    flex: 1;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* Verbesserte Touch-Ziele für mobile Geräte */
@media (max-width: 768px) {
  .form-checkbox, .form-radio {
    min-height: 44px;
  }
  
  select.form-input {
    height: 48px;
  }
}