/**
 * Formularfeld mit Label, Hilfetext und Fehlermeldung.
 * Struktur: .field > .field__label + .field__input + .field__help / .field__error
 * Eingabe auf eingelassener Fläche, 1 px Kontur, Fokus = Akzentring.
 * Fehlerzustand: .field--invalid am Wrapper, Fehlertext steht immer ausgeschrieben da.
 */
@layer components {
  .field {
    display: grid;
    gap: var(--space-2);
  }

  .field__label {
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-medium);
  }

  .field__input {
    inline-size: 100%;
    min-block-size: 2.25rem;
    padding: var(--space-2) var(--space-3);
    border: var(--border-width-thin) solid var(--theme-field-border);
    border-radius: var(--brand-radius);
    background-color: var(--theme-field-bg);
    color: var(--theme-field-text);
    font-size: var(--font-size-input);
    line-height: var(--line-height-ui);
    transition: border-color var(--motion-duration-ui) var(--motion-ease);
  }

  @media (hover: hover) and (pointer: fine) {
    .field__input:hover {
      border-color: var(--theme-field-border-hover);
    }
  }

  .field__input::placeholder {
    color: var(--theme-field-placeholder);
  }

  .field__input:focus-visible {
    border-color: var(--theme-field-border-focus);
  }

  .field__help {
    color: var(--theme-meta-color);
    font-size: var(--font-size-small);
  }

  .field__error {
    color: var(--theme-error-text);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
  }

  .field--invalid .field__input {
    border-color: var(--theme-error-border);
  }

  @media (max-width: 48.75em) {
    .field__input {
      min-block-size: 2.75rem;
    }
  }
}