/* Variante: normal (editierbar) */
.dnf-form-group {
    --form-field-bg-editable: #FFFFFF;
    --form-field-color-editable: var(--bs-body-color);
    --form-field-border-editable: var(--bs-border-color, #CCCCCC);
    --form-field-bg-readonly: #F5F5F5;
    --form-field-color-readonly: var(--bs-secondary-color, #666666);
    --form-field-border-readonly: var(--bs-border-color, #E0E0E0);
    --form-field-bg-disabled: #EAEAEA;
    --form-field-color-disabled: #999999;
    --form-field-border-disabled: var(--bs-border-color, #E0E0E0);
    --form-field-bg-valid: #E8F5E9;
    --form-field-border-valid: #2E7D32;
    --form-field-bg-invalid: #FFEBEE;
    --form-field-border-invalid: #D32F2F;
    --form-field-border-radius: 0; /* alles eckig */
    --form-field-border-focus: #2684FF;
    --form-field-focus-ring: rgba(38,132,255,.2);
    --form-label-color: var(--bs-secondary);
    --form-label-font-size: 85%;
    --form-validation-color-valid: #2E7D32;
    --form-validation-color-invalid: var(--bs-danger);
    --form-help-color: var(--bs-secondary-color);
    --form-help-font-size: 80%;
}

/* Variante: readonly als Grundoptik */
.dnf-form-group-readonly {
    --form-field-bg-editable: #F5F5F5; /* Basisoptik = grau */
    --form-field-color-editable: var(--bs-secondary-color, #666666);
    --form-field-border-editable: var(--bs-border-color, #E0E0E0);
    --form-field-bg-readonly: #F5F5E5;
    --form-field-color-readonly: var(--bs-secondary-color, #666666);
    --form-field-border-readonly: var(--bs-border-color, #E0E0E0);
    --form-field-bg-disabled: #EAEAEA;
    --form-field-color-disabled: #999999;
    --form-field-border-disabled: var(--bs-border-color, #E0E0E0);
    --form-field-bg-valid: #E8F5E9;
    --form-field-border-valid: #2E7D32;
    --form-field-bg-invalid: #FFEBEE;
    --form-field-border-invalid: #D32F2F;
    --form-field-border-radius: 0;
    --form-field-border-focus: #2684FF;
    --form-field-focus-ring: rgba(38,132,255,.2);
    --form-label-color: var(--bs-secondary);
    --form-label-font-size: 85%;
    --form-validation-color-valid: #2E7D32;
    --form-validation-color-invalid: var(--bs-danger);
    --form-help-color: var(--bs-secondary-color);
    --form-help-font-size: 80%;
}

    /* Gemeinsame Regeln für beide Varianten */

    /* Inputs & Addons */
    .dnf-form-group .form-control,
    .dnf-form-group .input-group-text,
    .dnf-form-group-readonly .form-control,
    .dnf-form-group-readonly .input-group-text {
        background-color: var(--form-field-bg-editable);
        color: var(--form-field-color-editable);
        border: 1px solid var(--form-field-border-editable);
        border-radius: var(--form-field-border-radius) !important;
    }

        /* Fokus */
        .dnf-form-group .form-control:focus,
        .dnf-form-group-readonly .form-control:focus {
            border-color: var(--form-field-border-focus);
            outline: none;
            box-shadow: 0 0 0 2px var(--form-field-focus-ring);
        }

        /* Readonly */
        .dnf-form-group .form-control[readonly],
        .dnf-form-group-readonly .form-control[readonly] {
            background-color: var(--form-field-bg-readonly);
            color: var(--form-field-color-readonly);
            border: 1px solid var(--form-field-border-readonly);
            cursor: default;
        }

        /* Disabled */
        .dnf-form-group .form-control:disabled,
        .dnf-form-group-readonly .form-control:disabled {
            background-color: var(--form-field-bg-disabled);
            color: var(--form-field-color-disabled);
            border: 1px solid var(--form-field-border-disabled);
            cursor: not-allowed;
        }

        /* Validierung (über Klassen am Input) */
        .dnf-form-group .form-control.is-valid,
        .dnf-form-group-readonly .form-control.is-valid {
            border-color: var(--form-field-border-valid);
            background-color: var(--form-field-bg-valid);
        }

        .dnf-form-group .form-control.is-invalid,
        .dnf-form-group-readonly .form-control.is-invalid {
            border-color: var(--form-field-border-invalid);
            background-color: var(--form-field-bg-invalid);
        }

    /* Buttons in Form-Gruppen: immer eckig */
    .dnf-form-group .btn,
    .dnf-form-group-readonly .btn {
        border-radius: var(--form-field-border-radius) !important;
        margin: 0;
    }

    /* Labels & Texte */

    /* Kompaktes Label = Standard */
    .dnf-form-group label,
    .dnf-form-group .form-label,
    .dnf-form-group-readonly label,
    .dnf-form-group-readonly .form-label {
        display: block;
        margin-left: 0.25rem;
        margin-bottom: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--form-label-color);
        font-size: var(--form-label-font-size);
    }

    /* Ausnahme: mehr Abstand, normaler Umbruch */
    .dnf-form-group .form-label-spaced,
    .dnf-form-group-readonly .form-label-spaced {
        margin-bottom: .5rem;
        white-space: normal;
    }

    /* Hilfetexte (Bootstrap .form-text und eigene .input-subtext (deprecated: .form-subtext)) */
    .dnf-form-group .form-text,
    .dnf-form-group-readonly .form-text,
    .dnf-form-group .input-subtext,
    .dnf-form-group-readonly .input-subtext
    .dnf-form-group .form-subtext,
    .dnf-form-group-readonly .form-subtext {
        color: var(--form-help-color);
        font-size: var(--form-help-font-size);
        margin-left: 0.25rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Validation Feedback */

    /* Bootstrap-kompatibel */
    .dnf-form-group .valid-feedback,
    .dnf-form-group-readonly .valid-feedback {
        color: var(--form-validation-color-valid);
        font-size: var(--form-help-font-size);
    }

    .dnf-form-group .invalid-feedback,
    .dnf-form-group-readonly .invalid-feedback {
        color: var(--form-validation-color-invalid);
        font-size: var(--form-help-font-size);
    }

    /* Eigene einfache Validation-Messages */
    .dnf-form-group .validation-message,
    .dnf-form-group-readonly .validation-message {
        width: 100%;
        margin-left: 0.25rem !important;
        margin-top: 0.2rem;
        font-size: var(--form-help-font-size, 0.875em);
        line-height: 1rem; /* kompakter */
        color: var(--form-validation-color-invalid, var(--bs-danger));
    }

/* Validation Summary (global einsetzbar ohne dnf-form-group aussenrum) */
.validation-errors {
    --ve-color: var(--form-validation-color-invalid, var(--bs-danger, #DC3545));
    --ve-gap: 0.25rem;
    color: var(--ve-color);
    padding-left: 1rem;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
    margin: 0;
    display: grid;
    row-gap: var(--ve-gap);
}

    .validation-errors .validation-message {
        width: 100%;
        margin-left: 0.25rem !important;
        margin-top: 0.2rem;
        font-size: var(--form-help-font-size, 0.875em);
        line-height: 1rem;
        color: var(--ve-color);
    }