/**
 * Forms Component
 *
 * Enthält:
 * - Form Groups (Label + Input Container)
 * - Form Controls (Input, Textarea, Select)
 * - Form States (Focus, Error)
 * - Responsive Styles
 *
 * Dependencies:
 * - base.css (CSS Variables)
 *
 * Extrahiert aus ui-elements.css: Zeilen 217-276
 * Datei-Größe: ~59 Zeilen
 *
 * @package SLV_Transporte
 * @version 1.0.0
 */

/* ============================================
   FORMULARE
   ============================================ */

/**
 * Form Group - Container für Label + Input
 */
.form-group {
  margin-bottom: var(--slv-space-m);
}

.form-label {
  display: block;
  margin-bottom: var(--slv-space-xs);
  font-weight: 600;
  color: var(--slv-text-dark);
}

/**
 * Form Controls
 */
.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--slv-space-xs) var(--slv-space-s);
  border: 1px solid var(--slv-border-light);
  border-radius: var(--slv-radius-s);
  font-family: var(--slv-font-body);
  font-size: var(--slv-font-m);
  transition: border-color var(--slv-transition-fast);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--slv-primary-blue);
  box-shadow: 0 0 0 3px rgba(92, 184, 233, 0.1);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

/**
 * Form Error State
 */
.form-input.is-error,
.form-textarea.is-error {
  border-color: #ef4444;
}

.form-error {
  color: #ef4444;
  font-size: var(--slv-font-s);
  margin-top: var(--slv-space-xs);
}