/* Grid-Wrapper für dnf-form-group */
.dnf-form-grid {
    --rowGap: 0.5rem;
    display: grid;
    /* Labels so schmal wie möglich (max. 20ch) - Rechts wird groß, bleibt aber mindestens brauchbar. */
    grid-template-columns: fit-content(20ch) minmax(16rem, 1fr);
    column-gap: 1rem;
    row-gap: var(--rowGap);
    align-items: center;
}

    /* dnf-form-group(-readonly) im Grid "auflösen" (aus dem Layout entfernen), damit deren Kinder direkt Grid-Items des Eltern-Grids sind. */
    .dnf-form-grid > :is(.dnf-form-group, .dnf-form-group-readonly) {
        display: contents;
    }

        /* Badge in Spalte 2 platzieren und am linken Rand ausrichten, damit es nicht auf die volle Spaltenbreite gestretched wird. */
        .dnf-form-grid > :is(.dnf-form-group, .dnf-form-group-readonly) > .badge {
            grid-column: 2;
            justify-self: start;
        }

        /* Labels links (Spalte 1) – direkt im Grid ODER innerhalb einer Gruppe */
        .dnf-form-grid > :is(label, .form-label),
        .dnf-form-grid > :is(.dnf-form-group, .dnf-form-group-readonly) > :is(label, .form-label) {
            grid-column: 1;
            justify-self: end;
            text-align: right;
            margin-left: 0;
            white-space: normal;
        }

        /* Eingaben rechts (Spalte 2) – direkt im Grid ODER innerhalb einer Gruppe */
        .dnf-form-grid > :is(.input-group, .form-control, .form-select, .form-check, .form-switch),
        .dnf-form-grid > :is(.dnf-form-group, .dnf-form-group-readonly) > :is(.input-group, .form-control, .form-select, .form-check, .form-switch) {
            grid-column: 2;
            box-sizing: border-box;
        }


    .dnf-form-grid .input-group {
        width: auto; /* damit mehrere input-group Elemente in eine gridzeile können ohne dass jedes volle Breite haben will */
    }

    /* 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: calc(0.15rem - (var(--rowGap))) !important;
    }

    /* --- 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;
        }