/**
 * @file forms.css
 * Formular-Elemente. Mobile-first, touch-freundliche Zielgrößen (>= 44px),
 * sichtbare Labels und Fokuszustände.
 */

.form-item {
  margin-bottom: var(--space-md);
}

.form-item__label,
label {
  display: block;
  margin-bottom: var(--space-3xs);
  font-weight: 600;
}

.form-required::after {
  content: " *";
  color: var(--color-primary);
}

:is( input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], input[type="date"], textarea, select ) {
    width: 100%;
    min-height: 2.75rem;
    padding: var(--space-2xs) var(--space-xs);
    font: inherit;
    color: var(--color-black);
    background: #f9f1fb;
    border: 1px solid #5a2a68;
    border-radius: var(--radius-md);
}

textarea {
  min-height: 8rem;
  resize: vertical;
}

:is(input, textarea, select):focus-visible {
  border-color: var(--color-primary);
  outline: 3px solid var(--color-focus);
  outline-offset: 1px;
}

.form-item__description {
  margin-top: var(--space-3xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Fehlerzustände eindeutig kennzeichnen (nicht nur farblich). */
:is(
  .form-item--error input,
  .form-item--error textarea,
  .form-item--error select,
  input.error,
  textarea.error
) {
  border-color: #c0392b;
  border-width: 2px;
}

.form-item__error-message {
  margin-top: var(--space-3xs);
  color: #c0392b;
  font-size: var(--font-size-sm);
  font-weight: 600;
}

/* Buttons (inkl. input[type=submit] etc.) sind zentral in base.css definiert. */