/* Grid-Wrapper für dnf-form-group */
.dnf-form-grid {
    display: grid;
    grid-template-columns: 1fr 4fr;
    column-gap: 1rem;
    row-gap: 0.5rem;
    align-items: center;
}

    /* Gruppen im Grid "auflösen", damit Label/Feld direkt am Eltern-Grid teilnehmen */
    .dnf-form-grid .dnf-form-group,
    .dnf-form-grid .dnf-form-group-readonly {
        display: contents;
    }

    /* Label links (Spalte 1) */
    .dnf-form-grid label,
    .dnf-form-grid .form-label {
        grid-column: 1;
        justify-self: end;
        text-align: right;
        margin-left: 0;
        white-space: normal; /* darf umbrechen */
    }

    /* Eingaben rechts (Spalte 2) */
    .dnf-form-grid .input-group,
    .dnf-form-grid .form-control,
    .dnf-form-grid .form-select,
    .dnf-form-grid .form-check,
    .dnf-form-grid .form-switch {
        grid-column: 2;
        box-sizing: border-box;
    }

    /* Hilfetexte & Validation unter dem Feld (Spalte 2) */
    .dnf-form-grid .form-text,
    .dnf-form-grid .input-subtext,
    .dnf-form-grid .form-subtext,
    .dnf-form-grid .valid-feedback,
    .dnf-form-grid .invalid-feedback,
    .dnf-form-grid .validation-message {
        grid-column: 2;
        margin-top: 0.25rem;
    }

    /* --- MobileMode: einspaltig, Label über dem Feld --- */
    .dnf-form-grid.mobilemode {
        grid-template-columns: 1fr;
        row-gap: 0; /* kein generelles Grid-Gap mehr */
    }

        /* MobileMode: display: contents rückgängig damit margin möglich ist */
        .dnf-form-grid.mobilemode .dnf-form-group,
        .dnf-form-grid.mobilemode .dnf-form-group-readonly {
            display: block; /* oder flex */
            margin-bottom: 0.75rem;
        }

            .dnf-form-grid.mobilemode .dnf-form-group:last-child,
            .dnf-form-grid.mobilemode .dnf-form-group-readonly:last-child {
                margin-bottom: 0;
            }

        .dnf-form-grid.mobilemode label,
        .dnf-form-grid.mobilemode .form-label {
            grid-column: 1;
            justify-self: start;
            text-align: left;
        }

        .dnf-form-grid.mobilemode .input-group,
        .dnf-form-grid.mobilemode .form-control,
        .dnf-form-grid.mobilemode .form-select,
        .dnf-form-grid.mobilemode .form-check,
        .dnf-form-grid.mobilemode .form-switch,
        .dnf-form-grid.mobilemode .form-text,
        .dnf-form-grid.mobilemode .input-subtext,
        .dnf-form-grid.mobilemode .form-subtext,
        .dnf-form-grid.mobilemode .valid-feedback,
        .dnf-form-grid.mobilemode .invalid-feedback,
        .dnf-form-grid.mobilemode .validation-message {
            grid-column: 1;
        }