/* FnInput / FnSelect / FnTextArea / FnFormRow — DIE eine geteilte Formular-Geometrie
   (KONZEPT-Design-Komponenten-Standard, Teilaufgabe 1). Tokens-only.
   Module definieren KEINE eigenen *-input/*-select/*-field-Klassen mehr
   (Gate Check-ComponentStandard.ps1; Bestand in scripts/component-standard-baseline.json). */

.fn-field {
    font-family: var(--fn-font);
    font-size: 12.5px;
    color: var(--fn-text);
    background: var(--fn-input-bg);
    border: 1px solid var(--fn-border);
    border-radius: 8px;
    padding: 7px 11px;
    outline: none;
    transition: border-color .15s;
    width: 100%;
    box-sizing: border-box;
}

.fn-field:focus {
    border-color: var(--fn-primary);
}

.fn-field:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.fn-field::placeholder {
    color: var(--fn-text-tertiary);
}

.fn-field-invalid,
.fn-field-invalid:focus {
    border-color: var(--fn-danger);
}

.fn-select {
    cursor: pointer;
}

.fn-textarea {
    resize: vertical;
    min-height: 64px;
    line-height: 1.5;
}

/* Eine Geometrie für Label + Feld + Fehlzeile. */
.fn-form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.fn-form-row-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--fn-text-secondary);
}

.fn-form-row-required {
    color: var(--fn-danger);
}

.fn-form-row-hint {
    font-size: 11.5px;
    color: var(--fn-text-tertiary);
}

.fn-form-row-error {
    font-size: 11.5px;
    color: var(--fn-danger);
}