/* ============== Grid ============== */
.dnfGrid {
    display: grid;
    grid-template-columns: 1fr;
    /* z.B. */
    /* grid-template-columns: 8rem minmax(0,1fr) minmax(0,1fr) 7rem; */
    row-gap: 0;
}

/* Kopfzeile */
.dnfGridHead {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--dnf-flowwer-head-bg);
    box-shadow: 0 1px 2px rgba(0,0,0,.05); /* dezenter Schatten für Layering */
    font-weight: 600;
    font-size: 95%; /* etwas kleiner als groupHeading */
    color: #1e1b4b; /* dunkler Akzent */
}

    .dnfGridHead.heavy {
        font-weight: 700;
        text-transform: uppercase; /* optional: wirkt „tabellarischer“ */
        letter-spacing: .04em;
    }

    .dnfGridHead > * {
        text-align: center;
        padding: .5rem .75rem; /* mehr Luft */
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.dnfGrid .groupHeadingRow {
    grid-column: 1 / -1;
    overflow: hidden;

    background: #f7f7fb; /* zarter Ton */
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    padding: .375rem .75rem;
    font-weight: 500;
    letter-spacing: .02em;
    color: #2b2f36;
}

/* Row (Form + Grid) */
.dnfGridRow {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: unset;
    grid-auto-rows: min-content;
    grid-column: 1 / -1;
    padding: .25rem 0;
    border-bottom: 1px solid #e5e7eb;
    
    border-inline-start: .25rem solid transparent;
    transition: background-color .15s ease, border-color .15s ease;
}

    /* Zellblock: zwei Zeilen */
    .dnfGridRow > .dnfGridCell {
        display: grid;
        grid-template-rows: auto auto;
        row-gap: 0.125rem;
        grid-row: 1 / span 2;
        padding: .25rem .75rem;
        min-width: 0;
    }

        /* Standard: Beide Zeilen truncaten (dnfGridCell selbst nicht, damit dropdowns nicht abgeschnitten werden) */
        .dnfGridRow > .dnfGridCell > .firstLine,
        .dnfGridRow > .dnfGridCell > .secondLine {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* secondLine mit kleinerem Text */
        .dnfGridRow > .dnfGridCell > .secondLine {
            font-size: 90%;
        }

    /* Zusatzzeile über volle Breite */
    .dnfGridRow > .dnfGridCellFullWidth {
        grid-row: 3;
        grid-column: 1 / -1;
        padding: .375rem .75rem;
        font-size: 80%;
        border-top: 1px dashed #e5e7eb;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: flex;
        gap: 1rem;
    }

/* Medien/Inputs sicher skalieren */
.dnfGridCell img,
.dnfGridCellFullWidth img,
.dnfGridCell input,
.dnfGridCellFullWidth input,
.dnfGridCell a {
    max-width: 100%;
    min-width: 0;
}

/* Zebra & Hover: nicht auf aktive Zeilen anwenden */
.dnfGridRow:nth-of-type(even):not(.active) {
    background: #fcfcfc;
}

.dnfGridRow:not(.active):hover {
    background: #f7f7f7;
}

/* Active-Status: flächiger Hintergrund + Primärbalken links */
.dnfGridRow.active,
.dnfGridRow[aria-selected="true"],
.dnfGridRow.is-active {
    background: var(--bs-primary-bg-subtle);
    border-inline-start-color: var(--bs-primary);
}

    /* optional: beim Hover aktiv nicht überblenden */
    .dnfGridRow.active:hover {
        background: var(--bs-primary-bg-subtle);
    }

/* ============== Utility-Klasse für optionales Wrap ============== */
.wrap {
    white-space: normal !important; /* überschreibt nowrap */
    overflow-wrap: break-word;
    word-break: break-word;
}