/* field: Formularfeld mit Beschriftung, dazu Auswahl, Kästchen und Schalter. */
.form { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }

.field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }

.field__label { font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: var(--leading-tight); color: var(--color-text); }

.field__required { color: var(--color-danger); margin-left: var(--space-05); }

/* Hinweis unter dem Feld — was erwartet wird, bevor man es falsch macht.
   Enger an das Feld gerückt als der Abstand der Felder untereinander. */
.field__hint {
  margin: calc(var(--space-1) - var(--space-2)) 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.field__error {
  margin: calc(var(--space-1) - var(--space-2)) 0 0;
  display: flex; gap: var(--space-2); align-items: flex-start;
  font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-danger);
}

.input, .textarea, .select__control {
  display: block; width: 100%; min-width: 0; min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface); color: var(--color-text);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-family: inherit; font-size: var(--text-base); line-height: var(--leading-normal);
  transition: border-color 120ms ease;
}

.input::placeholder, .textarea::placeholder { color: var(--color-text-muted); }

@media (hover: hover) {
  .input:hover:not(:disabled), .textarea:hover:not(:disabled), .select__control:hover:not(:disabled) { border-color: var(--color-text-muted); }
}

.input:active:not(:disabled), .textarea:active:not(:disabled), .select__control:active:not(:disabled) { border-color: var(--color-text-muted); }

.input:focus-visible, .textarea:focus-visible, .select__control:focus-visible {
  outline: var(--focus-ring) solid var(--color-focus); outline-offset: var(--focus-offset);
  border-color: var(--color-focus);
}

.input:disabled, .textarea:disabled, .select__control:disabled { background: var(--color-surface-muted); color: var(--color-text-muted); cursor: not-allowed; }

.textarea { resize: vertical; min-height: var(--textarea-min-height); }

.field--invalid .input, .field--invalid .textarea, .field--invalid .select__control { border-color: var(--color-danger); }

.select { position: relative; display: block; min-width: 0; }

.select__control { appearance: none; padding-right: var(--space-7); cursor: pointer; }

.select__icon {
  position: absolute; top: 50%; right: var(--space-3); transform: translateY(-50%);
  width: var(--space-4); height: var(--space-4); pointer-events: none; color: var(--color-text-muted);
}

.check { display: flex; gap: var(--space-3); align-items: center; min-height: var(--tap-min); min-width: 0; cursor: pointer; padding-block: var(--space-2); }

.check__input { flex: none; width: var(--space-5); height: var(--space-5); margin: 0; accent-color: var(--color-primary); cursor: pointer; }

.check__input:focus-visible { outline: var(--focus-ring) solid var(--color-focus); outline-offset: var(--focus-offset); }

.check__body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-05); }

.check__label { min-width: 0; font-size: var(--text-base); line-height: var(--leading-tight); }

.check__input:disabled ~ .check__body { color: var(--color-text-muted); }

/* Der Eingabeknopf liegt unsichtbar unter der Spur; sichtbar ist nur die Spur
   mit ihrem Knopf. Spurhöhe = Knopf plus Rand oben und unten. */
.switch { position: relative; display: flex; gap: var(--space-3); align-items: center; min-height: var(--tap-min); min-width: 0; cursor: pointer; padding-block: var(--space-2); }

.switch__input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.switch__track {
  flex: none; position: relative;
  width: var(--tap-min); height: var(--switch-height); border-radius: var(--radius-full);
  background: var(--color-border-strong);
  transition: background-color 140ms ease;
}

.switch__track::after {
  content: ""; position: absolute; top: var(--switch-inset); left: var(--switch-inset);
  width: var(--switch-thumb); height: var(--switch-thumb); border-radius: var(--radius-full);
  background: var(--color-surface); box-shadow: var(--shadow-sm);
  transition: transform 140ms ease;
}

.switch__input:checked + .switch__track { background: var(--color-primary); }

.switch__input:checked + .switch__track::after { transform: translateX(calc(var(--tap-min) - var(--switch-thumb) - var(--switch-inset) * 2)); }

.switch__input:focus-visible + .switch__track { outline: var(--focus-ring) solid var(--color-focus); outline-offset: var(--focus-offset); }

.fieldset { border: none; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }

.fieldset__legend { padding: 0; margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-medium); }

/* Eingabe, in der eine Zeile je Wert steht (Nährwerte). Nichtproportional,
   damit Zahlen untereinander stehen und man Zeilen zählen kann. */
.textarea--lines {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-sm);
  line-height: 1.7;
}