/* Eigenständige Grids (ZEntityGrid, Item-Grid): ungescopte Datei, isoliert über das Präfix zeg- und die Wurzel .zeg-host.
   Farben nur über Theme-Tokens (Kundenthemes überschreiben --rz-*). Wird als letztes Stylesheet nach den Themes geladen. */

.zeg-host {
    --zeg-border: var(--rz-border-color, var(--rz-base-300));
    --zeg-surface: var(--rz-grid-background-color, var(--rz-base-background-color));
    --zeg-text: var(--rz-grid-cell-color, var(--rz-on-base));
    --zeg-head-bg: var(--rz-grid-header-background-color, var(--rz-base-100));
    --zeg-head-text: var(--rz-grid-header-color, var(--rz-on-base));
    --zeg-hover-bg: var(--rz-grid-hover-background-color, var(--rz-base-100));
    --zeg-hover-text: var(--rz-grid-hover-color, var(--rz-on-base));
    --zeg-selected-bg: var(--rz-grid-selected-background-color, var(--rz-primary-lighter));
    --zeg-selected-text: var(--rz-grid-selected-color, var(--rz-on-primary-lighter));
    /* Streifen wie der ZGrid: jede zweite Zeile --zeg-stripe-bg, die übrigen --zeg-stripe-odd-bg */
    --zeg-stripe-bg: var(--rz-grid-stripe-background-color, transparent);
    --zeg-stripe-odd-bg: var(--rz-grid-stripe-odd-background-color, transparent);
    --zeg-input-bg: var(--rz-input-background-color, var(--rz-base-background-color));
    --zeg-focus: var(--rz-focus-outline-color, var(--rz-primary));
    --zeg-radius: var(--rz-border-radius, 4px);
    --zeg-cell-pad-y: 0.45rem;
    --zeg-cell-pad-x: 0.6rem;
    --zeg-max-height: 70vh;
    position: relative;
    color: var(--zeg-text);
    font-size: var(--rz-grid-cell-font-size, 0.875rem);
    /* Wurzelwerte ausdrücklich (display und flex-direction stehen im Teil C): trägt die Wurzel zusätzlich äußere Grid-Klassen
       der Komponentenbibliothek (Fassadenbetrieb), ändern deren Theme-Regeln nichts */
    box-sizing: border-box;
    background-color: transparent;
}

.zeg-host.zeg-density-compact {
    --zeg-cell-pad-y: 0.2rem;
    --zeg-cell-pad-x: 0.5rem;
}

.zeg-host .zeg-root {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

/* ---------- Icons und Schaltflächen ---------- */

.zeg-host .zeg-icon {
    width: 1.15em;
    height: 1.15em;
    fill: currentColor;
    flex: 0 0 auto;
    vertical-align: middle;
}

.zeg-host .zeg-iconbtn,
.zeg-host .zeg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    border: 1px solid transparent;
    border-radius: var(--zeg-radius);
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    line-height: 1.2;
}

.zeg-host .zeg-iconbtn {
    width: 2rem;
    height: 2rem;
    padding: 0;
}

.zeg-host .zeg-btn {
    min-height: 2rem;
    padding: 0.25rem 0.65rem;
    border-color: var(--zeg-border);
}

.zeg-host .zeg-small {
    min-height: 1.6rem;
    padding: 0.1rem 0.45rem;
    font-size: 0.8rem;
}

.zeg-host .zeg-iconbtn.zeg-small {
    width: 1.6rem;
    height: 1.6rem;
}

.zeg-host .zeg-iconbtn:hover:not(:disabled),
.zeg-host .zeg-btn:hover:not(:disabled) {
    background: var(--zeg-hover-bg);
    color: var(--zeg-hover-text);
}

.zeg-host .zeg-iconbtn:disabled,
.zeg-host .zeg-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.zeg-host .zeg-primary { color: var(--rz-primary); }
.zeg-host .zeg-danger { color: var(--rz-danger); }
.zeg-host .zeg-danger-outline { color: var(--rz-danger); border-color: var(--rz-danger); }

.zeg-host .zeg-primary-solid,
.zeg-host .zeg-primary-solid:hover:not(:disabled) {
    background: var(--rz-primary);
    color: var(--rz-on-primary);
    border-color: var(--rz-primary);
}

.zeg-host .zeg-danger-solid,
.zeg-host .zeg-danger-solid:hover:not(:disabled) {
    background: var(--rz-danger);
    color: var(--rz-on-danger);
    border-color: var(--rz-danger);
}

.zeg-host .zeg-active {
    background: var(--rz-primary-lighter);
    color: var(--rz-on-primary-lighter);
}

.zeg-host :focus-visible {
    outline: 2px solid var(--zeg-focus);
    outline-offset: 1px;
}

/* ---------- Toolbar, Menüs, Popover ---------- */

.zeg-host .zeg-toolbar,
.zeg-host .zeg-toolbar-detached {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.2rem 0.25rem;
    background: var(--rz-grid-toolbar-background-color, var(--zeg-head-bg));
    color: var(--zeg-head-text);
    border-radius: var(--zeg-radius);
}

.zeg-host .zeg-toolbar-detached { justify-content: flex-end; }

.zeg-host .zeg-toolbar-main,
.zeg-host .zeg-toolbar-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.2rem;
}

.zeg-host .zeg-menu,
.zeg-host .zeg-filter-popup-host {
    position: relative;
    display: inline-flex;
}

.zeg-host .zeg-popover {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    z-index: 30;
    min-width: 13rem;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    background: var(--zeg-surface);
    color: var(--zeg-text);
    border: 1px solid var(--zeg-border);
    border-radius: var(--zeg-radius);
    box-shadow: var(--rz-shadow-3, 0 4px 14px rgba(0, 0, 0, 0.18));
    text-align: left;
    font-weight: normal;
}

.zeg-host .zeg-sidemenu-panel,
.zeg-host .zeg-toolbar-right .zeg-popover {
    left: auto;
    right: 0;
    min-width: 18rem;
    max-height: 70vh;
    overflow: auto;
}

.zeg-host .zeg-popover-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    justify-content: flex-end;
}

.zeg-host .zeg-menuitem {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.35rem 0.5rem;
    border: 0;
    border-radius: var(--zeg-radius);
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.zeg-host .zeg-menuitem:hover:not(:disabled) { background: var(--zeg-hover-bg); color: var(--zeg-hover-text); }
.zeg-host .zeg-menuitem:disabled { opacity: 0.45; cursor: default; }

.zeg-host .zeg-export-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.zeg-host .zeg-export-label { flex: 1 1 auto; white-space: nowrap; }

.zeg-host .zeg-fieldset {
    border: 1px solid var(--zeg-border);
    border-radius: var(--zeg-radius);
    padding: 0.35rem 0.5rem;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
}

.zeg-host .zeg-fieldset legend { font-size: 0.8rem; padding: 0 0.25rem; }
.zeg-host .zeg-radio { display: inline-flex; align-items: center; gap: 0.25rem; cursor: pointer; }

.zeg-host .zeg-picker { flex-direction: column; flex-wrap: nowrap; }

.zeg-host .zeg-picker-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 18rem;
    overflow: auto;
}

.zeg-host .zeg-picker-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.2rem;
    border-radius: var(--zeg-radius);
}

.zeg-host .zeg-picker-item.zeg-dragging { opacity: 0.5; }
.zeg-host .zeg-picker-label { flex: 1 1 auto; display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.zeg-host .zeg-drag-handle { cursor: grab; display: inline-flex; }

/* ---------- Statuszeile ---------- */

.zeg-host .zeg-statusbar { display: flex; flex-direction: column; gap: 0.2rem; }

.zeg-host .zeg-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    border-radius: var(--zeg-radius);
}

.zeg-host .zeg-status-text { flex: 1 1 auto; }
.zeg-host .zeg-status-detail { margin-left: 0.5rem; opacity: 0.85; }
.zeg-host .zeg-status-info { background: var(--rz-info); color: var(--rz-on-info); }
.zeg-host .zeg-status-success { background: var(--rz-success); color: var(--rz-on-success); }
.zeg-host .zeg-status-warning { background: var(--rz-warning); color: var(--rz-on-warning); }
.zeg-host .zeg-status-error { background: var(--rz-danger); color: var(--rz-on-danger); }

/* ---------- Query-Scope und externes Side-Menü ---------- */

.zeg-host .zeg-scopebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    padding: 0.35rem 0.6rem;
    border-radius: var(--zeg-radius);
    background: var(--rz-info-lighter);
    color: var(--rz-on-info-lighter);
}

.zeg-host .zeg-scopebar-text { min-width: 0; overflow-wrap: anywhere; }

.zeg-host.zeg-sidemenu-host { display: inline-flex; }

/* ---------- Tabelle ---------- */

.zeg-host .zeg-scroll {
    position: relative;
    overflow: auto;
    max-height: var(--zeg-max-height);
    border: 1px solid var(--zeg-border);
    border-radius: var(--zeg-radius);
    background: var(--zeg-surface);
}

.zeg-host .zeg-scroll:focus-visible { outline-offset: -2px; }

/* Offenes Filter-Popover im Spaltenkopf: bei wenigen Zeilen würde der Scroll-Container es abschneiden */
.zeg-host .zeg-scroll-box:has(.zeg-filter-popover, .zeg-op-menu) { min-height: 22rem; }

.zeg-host .zeg-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

.zeg-host .zeg-col-check { width: 2.4rem; }
.zeg-host .zeg-col-expand { width: 2.4rem; }
.zeg-host .zeg-col-fill { width: auto; min-width: 2.5rem; }

.zeg-host .zeg-th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--zeg-head-bg);
    color: var(--zeg-head-text);
    font-weight: var(--rz-grid-header-font-weight, 600);
    text-align: left;
    padding: 0;
    border-bottom: 1px solid var(--zeg-border);
    border-right: 1px solid var(--zeg-border);
    white-space: nowrap;
    user-select: none;
}

.zeg-host .zeg-filter-row .zeg-th { top: 2.1rem; z-index: 1; padding: 0.15rem 0.25rem; }

.zeg-host .zeg-th-inner {
    display: flex;
    align-items: center;
    min-width: 0;
    padding-right: 0.4rem;
}

.zeg-host .zeg-th-btn {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: var(--zeg-cell-pad-y) var(--zeg-cell-pad-x);
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: default;
}

.zeg-host .zeg-sortable .zeg-th-btn { cursor: pointer; }
.zeg-host .zeg-th-text { overflow: hidden; text-overflow: ellipsis; }
.zeg-host .zeg-sort-priority { font-size: 0.7rem; }
.zeg-host .zeg-th-check, .zeg-host .zeg-td-check { text-align: center; }
.zeg-host .zeg-th[data-col] { cursor: grab; }
.zeg-host .zeg-th.zeg-drop-before { box-shadow: inset 3px 0 0 var(--rz-primary); }
.zeg-host .zeg-th.zeg-drop-after { box-shadow: inset -3px 0 0 var(--rz-primary); }
.zeg-host .zeg-th.zeg-dragging { opacity: 0.55; }

.zeg-host .zeg-resize {
    position: absolute;
    top: 0;
    right: -3px;
    width: 7px;
    height: 100%;
    cursor: col-resize;
    z-index: 3;
}

.zeg-host .zeg-resize:hover,
.zeg-host .zeg-resizing .zeg-resize { background: var(--rz-primary-lighter); }

.zeg-host .zeg-td {
    padding: var(--zeg-cell-pad-y) var(--zeg-cell-pad-x);
    border-bottom: 1px solid var(--zeg-border);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.zeg-host .zeg-row { cursor: default; background: var(--zeg-stripe-odd-bg); }
.zeg-host .zeg-row.zeg-alt { background: var(--zeg-stripe-bg); }
.zeg-host .zeg-row:hover { background: var(--zeg-hover-bg); color: var(--zeg-hover-text); }
.zeg-host .zeg-row.zeg-selected,
.zeg-host .zeg-row.zeg-checked { background: var(--zeg-selected-bg); color: var(--zeg-selected-text); }
.zeg-host .zeg-row.zeg-editing { background: var(--zeg-surface); color: var(--zeg-text); box-shadow: inset 3px 0 0 var(--rz-primary); }
.zeg-host .zeg-row.zeg-editing .zeg-td { overflow: visible; white-space: normal; padding-top: 0; padding-bottom: 0; }
/* Editoren füllen genau die Zeilenhöhe der Ansicht: Virtualize rechnet mit fester Zeilenhöhe, eine höhere Editierzeile lädt das Fenster neu */
.zeg-host .zeg-row.zeg-editing .zeg-input,
.zeg-host .zeg-row.zeg-editing .zeg-select,
.zeg-host .zeg-row.zeg-editing .zeg-iconbtn { font: inherit; height: calc(1lh + 2 * var(--zeg-cell-pad-y)); padding-top: 0; padding-bottom: 0; }
.zeg-host .zeg-row.zeg-editing .zeg-iconbtn { width: calc(1lh + 2 * var(--zeg-cell-pad-y)); }
.zeg-host .zeg-row.zeg-editing .zeg-step { font: inherit; height: calc(0.5lh + var(--zeg-cell-pad-y)); }
.zeg-host .zeg-row-placeholder .zeg-td,
.zeg-host .zeg-row-placeholder td { height: 1.9rem; }

.zeg-host .zeg-empty td { padding: 1rem; text-align: center; opacity: 0.8; }

.zeg-host .zeg-al-left { text-align: left; }
.zeg-host .zeg-al-right { text-align: right; }
.zeg-host .zeg-al-center { text-align: center; }

.zeg-host .zeg-bool { display: inline-flex; vertical-align: middle; width: 1.1rem; height: 1.1rem; align-items: center; justify-content: center; border: 1px solid currentColor; border-radius: 3px; opacity: 0.85; }
.zeg-host .zeg-bool-null { opacity: 0.35; }
.zeg-host .zeg-link { color: var(--rz-primary); text-decoration: underline; }

.zeg-host .zeg-row-actions { display: inline-flex; gap: 0.15rem; }

.zeg-host .zeg-detail-cell:focus { outline: none; }
.zeg-host .zeg-detail-cell {
    white-space: normal;
    overflow: visible;
    background: var(--rz-grid-detail-template-background-color, var(--zeg-surface));
    padding: 0.5rem 0.75rem;
}

.zeg-host .zeg-detail-actions { display: flex; gap: 0.35rem; margin-bottom: 0.5rem; }

.zeg-host .zeg-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rz-grid-loading-indicator-background-color, transparent);
    pointer-events: none;
}

.zeg-host .zeg-spinner {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--rz-primary-lighter);
    border-top-color: var(--rz-primary);
    border-radius: 50%;
    animation: zeg-spin 0.8s linear infinite;
}

@keyframes zeg-spin {
    to { transform: rotate(360deg); }
}

/* ---------- Pager ---------- */

.zeg-host .zeg-pager {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.15rem 0.25rem;
}

.zeg-host .zeg-pager-pages,
.zeg-host .zeg-pager-summary { padding: 0 0.4rem; white-space: nowrap; }
.zeg-host .zeg-pager-summary { margin-left: auto; opacity: 0.85; }
.zeg-host .zeg-pager .zeg-pager-size { width: auto; min-width: 5rem; }

/* ---------- Editoren und Filter ---------- */

.zeg-host .zeg-input,
.zeg-host .zeg-select,
.zeg-host .zeg-checkbox {
    font: inherit;
    color: var(--zeg-text);
    background: var(--zeg-input-bg);
    border: 1px solid var(--zeg-border);
    border-radius: var(--zeg-radius);
}

.zeg-host .zeg-input,
.zeg-host .zeg-select {
    width: 100%;
    min-width: 0;
    padding: 0.2rem 0.4rem;
    box-sizing: border-box;
}

.zeg-host .zeg-input:disabled,
.zeg-host .zeg-select:disabled { opacity: 0.6; }

.zeg-host .zeg-invalid { border-color: var(--rz-danger); box-shadow: 0 0 0 1px var(--rz-danger); }

.zeg-host .zeg-row.zeg-editing .zeg-td { position: relative; }

.zeg-host .zeg-cell-error {
    position: absolute;
    left: 0.25rem;
    top: calc(100% - 0.1rem);
    z-index: 20;
    min-width: 12rem;
    max-width: 22rem;
    padding: 0.2rem 0.4rem;
    font-size: 0.75rem;
    white-space: normal;
    border-radius: var(--zeg-radius);
    background: var(--rz-danger);
    color: var(--rz-on-danger);
    box-shadow: var(--rz-shadow-2, 0 2px 8px rgba(0, 0, 0, 0.25));
}

.zeg-host .zeg-mob-field .zeg-cell-error { position: static; max-width: none; margin-top: 0.15rem; }

.zeg-host .zeg-checkbox {
    width: 1.3rem;
    height: 1.3rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.zeg-host .zeg-checkbox[aria-checked="true"] { background: var(--rz-primary); color: var(--rz-on-primary); border-color: var(--rz-primary); }
.zeg-host .zeg-check { width: 1rem; height: 1rem; accent-color: var(--rz-primary); cursor: pointer; }

.zeg-host .zeg-number,
.zeg-host .zeg-date,
.zeg-host .zeg-fk { position: relative; display: flex; align-items: center; gap: 0.1rem; width: 100%; }

.zeg-host .zeg-stepper { display: inline-flex; flex-direction: column; }
.zeg-host .zeg-step { border: 0; background: transparent; color: inherit; padding: 0; height: 0.95rem; width: 1.1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.zeg-host .zeg-native-picker { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }

.zeg-host .zeg-fk-list {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    z-index: 40;
    min-width: 100%;
    max-width: 36rem;
    max-height: 18rem;
    overflow: auto;
    background: var(--zeg-surface);
    color: var(--zeg-text);
    border: 1px solid var(--zeg-border);
    border-radius: var(--zeg-radius);
    box-shadow: var(--rz-shadow-3, 0 4px 14px rgba(0, 0, 0, 0.18));
}

.zeg-host .zeg-fk-table { border-collapse: collapse; width: 100%; }
.zeg-host .zeg-fk-table th { text-align: left; padding: 0.25rem 0.5rem; background: var(--zeg-head-bg); color: var(--zeg-head-text); position: sticky; top: 0; }
.zeg-host .zeg-fk-table td { padding: 0.25rem 0.5rem; white-space: nowrap; cursor: pointer; }
.zeg-host .zeg-fk-table tr:hover td,
.zeg-host .zeg-fk-table tr.zeg-fk-active td { background: var(--zeg-selected-bg); color: var(--zeg-selected-text); }
.zeg-host .zeg-fk-info { padding: 0.5rem; opacity: 0.85; }

.zeg-host .zeg-filter-inline { display: flex; align-items: center; gap: 0.15rem; }
.zeg-host .zeg-filter-th { overflow: visible; }
.zeg-host .zeg-op-symbol { font-family: inherit; font-size: 0.85rem; min-width: 1rem; text-align: center; }
.zeg-host .zeg-th-filter { width: 1.6rem; height: 1.6rem; flex: 0 0 auto; }
.zeg-host .zeg-field-label { font-size: 0.8rem; font-weight: 600; }
.zeg-host .zeg-required { color: var(--rz-danger); }

/* ---------- Dialog ---------- */

.zeg-host .zeg-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rz-dialog-mask-background-color, rgba(0, 0, 0, 0.4));
}

.zeg-host .zeg-dialog {
    width: min(42rem, 94vw);
    max-height: 90vh;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--rz-dialog-background-color, var(--zeg-surface));
    color: var(--zeg-text);
    border-radius: var(--rz-dialog-border-radius, var(--zeg-radius));
    box-shadow: var(--rz-dialog-shadow, 0 8px 28px rgba(0, 0, 0, 0.3));
}

.zeg-host .zeg-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.zeg-host .zeg-dialog-title { margin: 0; font-size: 1.1rem; }
.zeg-host .zeg-dialog-message { margin: 0; white-space: pre-line; }
.zeg-host .zeg-dialog-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; }

.zeg-host .zeg-conflict-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.zeg-host .zeg-conflict-table th,
.zeg-host .zeg-conflict-table td { text-align: left; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--zeg-border); }
.zeg-host .zeg-conflict-info { margin: 0; opacity: 0.85; }

/* ---------- Mobile ---------- */

.zeg-host .zeg-mobile { display: flex; flex-direction: column; gap: 0.5rem; }
/* ZItemGrid in einem Container fester Höhe: die Kartenliste scrollt im Grid, statt über den folgenden Inhalt zu laufen.
   Nur die Liste scrollt: Topbar (Hamburger-Popover, klebt beim Seitenscrollen) und Pager bleiben außerhalb der Scrollfläche */
.zeg-host.zeg-item > .zeg-mobile { flex: 1 1 auto; min-height: 0; }
.zeg-host.zeg-item > .zeg-mobile > .zeg-mob-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.zeg-host.zeg-item > .zeg-mobile > .zeg-mob-list > * { flex-shrink: 0; }

.zeg-host .zeg-mob-topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.4rem;
    background: var(--zeg-head-bg);
    color: var(--zeg-head-text);
    border-radius: var(--zeg-radius);
}

.zeg-host .zeg-mob-search { display: flex; align-items: center; gap: 0.35rem; }
.zeg-host .zeg-mob-actions { display: flex; align-items: center; gap: 0.3rem; justify-content: flex-end; }
.zeg-host .zeg-mob-actions .zeg-iconbtn { width: 2.5rem; height: 2.5rem; }
.zeg-host .zeg-mob-hamburger { left: auto; right: 0; }

.zeg-host .zeg-mob-list { display: flex; flex-direction: column; gap: 0.4rem; }

.zeg-host .zeg-mob-card {
    border: 1px solid var(--zeg-border);
    border-radius: var(--zeg-radius);
    background: var(--zeg-surface);
    color: var(--zeg-text);
}

.zeg-host .zeg-mob-card.zeg-selected { box-shadow: inset 3px 0 0 var(--rz-primary); }

.zeg-host .zeg-mob-card-head {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0.5rem 0.75rem;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.zeg-host .zeg-mob-card-headmain { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.zeg-host .zeg-mob-card-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeg-host .zeg-mob-card-line:first-child { font-weight: 600; }
.zeg-host .zeg-mob-card-body { padding: 0 0.75rem 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.zeg-host .zeg-mob-details { margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.zeg-host .zeg-mob-detail { display: flex; justify-content: space-between; gap: 0.75rem; }
.zeg-host .zeg-mob-detail dt { opacity: 0.85; }
.zeg-host .zeg-mob-detail dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.zeg-host .zeg-mob-card-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.zeg-host .zeg-mob-card-actions .zeg-btn { min-height: 2.5rem; }
.zeg-host .zeg-mob-form { display: flex; flex-direction: column; gap: 0.5rem; }
.zeg-host .zeg-mob-field { display: flex; flex-direction: column; gap: 0.15rem; }
.zeg-host .zeg-mob-field .zeg-input,
.zeg-host .zeg-mob-field .zeg-select { min-height: 2.5rem; }
.zeg-host .zeg-mob-empty { padding: 1rem; text-align: center; opacity: 0.85; }
.zeg-host .zeg-mob-pager { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.zeg-host .zeg-mob-filter { display: flex; flex-direction: column; gap: 0.5rem; }
.zeg-host .zeg-mob-filter-row { display: flex; align-items: center; gap: 0.4rem; }
.zeg-host .zeg-mob-filter-add { display: flex; flex-direction: column; gap: 0.3rem; }

/* ---------- Teil C: Höhe im Flex-Elternteil, fixierte Spalten, Fußzeile, Kontextmenü, Mobile-Teile ---------- */

/* Füllt die Höhe eines Flex-Elternteils und scrollt intern (Seiten- und Dialog-Layouts mit fester Höhe) */
.zeg-host {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.zeg-host .zeg-root {
    flex: 1 1 auto;
    min-height: 0;
}

/* Hülle des Scrollbereichs: nimmt in einem Flex-Elternteil mit fester Höhe die ganze Resthöhe. Dort gilt min-height:100% am
   Scrollbereich und hebt die Grenze --zeg-max-height auf (min schlägt max); ohne feste Höhe bleibt der Prozentwert wirkungslos
   und die Grenze gilt. */
.zeg-host .zeg-scroll-box {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.zeg-host .zeg-scroll {
    flex: 1 1 auto;
    min-height: 100%;
}

/* Fixierte Spalten: Offsets als --zeg-frz-n vom JS-Modul, eigener Hintergrund, Schatten an der letzten fixierten Spalte */
.zeg-host .zeg-td.zeg-frozen {
    position: sticky;
    z-index: 1;
    background: linear-gradient(var(--zeg-stripe-odd-bg), var(--zeg-stripe-odd-bg)), var(--zeg-surface);
}

.zeg-host .zeg-row.zeg-alt .zeg-td.zeg-frozen { background: linear-gradient(var(--zeg-stripe-bg), var(--zeg-stripe-bg)), var(--zeg-surface); }
.zeg-host .zeg-row:hover .zeg-td.zeg-frozen { background: linear-gradient(var(--zeg-hover-bg), var(--zeg-hover-bg)), var(--zeg-surface); }
.zeg-host .zeg-row.zeg-selected .zeg-td.zeg-frozen,
.zeg-host .zeg-row.zeg-checked .zeg-td.zeg-frozen { background: linear-gradient(var(--zeg-selected-bg), var(--zeg-selected-bg)), var(--zeg-surface); }
.zeg-host .zeg-row.zeg-editing .zeg-td.zeg-frozen { background: var(--zeg-surface); }
.zeg-host .zeg-th.zeg-frozen { z-index: 4; }
.zeg-host .zeg-filter-row .zeg-th.zeg-frozen { z-index: 3; }
.zeg-host .zeg-frozen-last { box-shadow: 2px 0 3px -1px var(--zeg-border); }
.zeg-host .zeg-th.zeg-frozen-last { box-shadow: 2px 0 3px -1px var(--zeg-border); }
/* Ziel-Linie beim Verschieben an der letzten fixierten Spalte: zusammen mit deren Schatten */
.zeg-host .zeg-th.zeg-frozen-last.zeg-drop-before { box-shadow: inset 3px 0 0 var(--rz-primary), 2px 0 3px -1px var(--zeg-border); }
.zeg-host .zeg-th.zeg-frozen-last.zeg-drop-after { box-shadow: inset -3px 0 0 var(--rz-primary), 2px 0 3px -1px var(--zeg-border); }

/* Fußzeile (Aggregate, FooterTemplate) bleibt beim Scrollen unten sichtbar */
.zeg-host .zeg-tf {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: var(--zeg-cell-pad-y) var(--zeg-cell-pad-x);
    background: var(--zeg-head-bg);
    color: var(--zeg-head-text);
    border-top: 1px solid var(--zeg-border);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zeg-host .zeg-tf.zeg-frozen { z-index: 3; }
.zeg-host .zeg-agg { display: inline-flex; align-items: baseline; gap: 0.35rem; }
.zeg-host .zeg-agg-label { font-weight: 400; font-size: 0.75rem; opacity: 0.75; }

/* Kontextmenü: eigenes Popover an der Mausposition (Viewport), Hintergrund schließt beim Klick */
.zeg-host .zeg-ctx-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.zeg-host .zeg-popover.zeg-ctx-menu {
    position: fixed;
    z-index: 1001;
    min-width: 14rem;
    max-height: 80vh;
    overflow: auto;
}

.zeg-host .zeg-ctx-sep { height: 1px; margin: 0.2rem 0; background: var(--zeg-border); }
.zeg-host .zeg-ctx-group { display: flex; flex-direction: column; }
.zeg-host .zeg-ctx-grouplabel { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.6rem; font-size: 0.8rem; opacity: 0.8; }
.zeg-host .zeg-ctx-sub { padding-left: 1.6rem; }

/* Picker: gesperrte Spalten (Reorderable=false) */
.zeg-host .zeg-picker-item.zeg-locked .zeg-drag-handle { cursor: default; opacity: 0.6; }

/* Icon-Schrift des Hosts für Menüpunkte mit Symbolnamen (z. B. ZGridMenuItem.Icon) */
.zeg-host .zeg-font-icon {
    font-family: "Material Symbols";
    font-weight: normal;
    font-style: normal;
    font-size: 1.15em;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    direction: ltr;
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
}

/* Mobile-Teile (Topbar und Liste getrennt gerendert) */
.zeg-host.zeg-mobile-part { gap: 0.5rem; }
.zeg-host.zeg-sidemenu-host,
.zeg-host.zeg-mobile-part { flex: 0 0 auto; }

/* ---------- Teil C: Zweitfilter ---------- */

.zeg-host .zeg-filter-second { display: flex; flex-direction: column; gap: 0.3rem; border-top: 1px solid var(--zeg-border); padding-top: 0.3rem; }
.zeg-host .zeg-filter-second-body { display: flex; flex-direction: column; gap: 0.3rem; }
.zeg-host .zeg-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    max-width: 100%;
    padding: 0.05rem 0.15rem 0.05rem 0.5rem;
    border: 1px solid var(--zeg-border);
    border-radius: 999px;
    background: var(--zeg-head-bg);
    color: var(--zeg-head-text);
    font-size: 0.8rem;
    white-space: nowrap;
}
.zeg-host .zeg-filter-chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.zeg-host .zeg-mob-filter-conditions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; flex: 1 1 auto; min-width: 0; }
.zeg-host .zeg-mob-filter-logical { font-size: 0.8rem; opacity: 0.85; }

/* ---------- Teil D: Pseudo-Zielspalte beim Verschieben einer Spalte ---------- */

/* Das JS-Modul verbreitert die Zielspalte um die Breite der gezogenen Spalte (--zeg-drop-w am Tabellenelement) und markiert
   ihre Zellen: der leere Streifen links (before) bzw. rechts (after) zeigt Position und Breite, im Kopf mit dem Titel. */
.zeg-host .zeg-drop-slot {
    background-image:
        linear-gradient(var(--rz-primary), var(--rz-primary)),
        linear-gradient(var(--rz-primary), var(--rz-primary)),
        linear-gradient(var(--rz-primary-lighter), var(--rz-primary-lighter));
    background-repeat: no-repeat;
    background-size: 2px 100%, 2px 100%, var(--zeg-drop-w) 100%;
}

.zeg-host .zeg-drop-slot-before { background-position: left 0 top 0, left calc(var(--zeg-drop-w) - 2px) top 0, left 0 top 0; }
.zeg-host .zeg-drop-slot-after { background-position: right calc(var(--zeg-drop-w) - 2px) top 0, right 0 top 0, right 0 top 0; }

.zeg-host .zeg-td.zeg-drop-slot-before,
.zeg-host .zeg-tf.zeg-drop-slot-before { padding-left: calc(var(--zeg-drop-w) + var(--zeg-cell-pad-x)); }
.zeg-host .zeg-td.zeg-drop-slot-after,
.zeg-host .zeg-tf.zeg-drop-slot-after { padding-right: calc(var(--zeg-drop-w) + var(--zeg-cell-pad-x)); }
.zeg-host .zeg-th.zeg-drop-slot-before { padding-left: var(--zeg-drop-w); }
.zeg-host .zeg-th.zeg-drop-slot-after { padding-right: var(--zeg-drop-w); }
.zeg-host .zeg-filter-row .zeg-th.zeg-drop-slot-before { padding-left: calc(var(--zeg-drop-w) + 0.25rem); }
.zeg-host .zeg-filter-row .zeg-th.zeg-drop-slot-after { padding-right: calc(var(--zeg-drop-w) + 0.25rem); }

.zeg-host .zeg-th[data-zeg-drop-title]::before {
    content: attr(data-zeg-drop-title);
    position: absolute;
    top: 0;
    left: 0;
    width: var(--zeg-drop-w);
    box-sizing: border-box;
    padding: var(--zeg-cell-pad-y) var(--zeg-cell-pad-x);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    color: var(--rz-on-primary-lighter);
    pointer-events: none;
}

.zeg-host .zeg-th.zeg-drop-slot-after[data-zeg-drop-title]::before { left: auto; right: 0; }

/* Gezogene Spalte: an der alten Stelle ausgeblendet, solange die Pseudo-Zielspalte steht (zusammen mit ihrem col-Element) */
.zeg-host .zeg-drag-source { display: none; }

/* ---------- Item-Grid: Untermenüs, Schnellsuche, Pager-Ausrichtung, Tastaturfokus ---------- */

/* Untermenü eines Menüpunkts (Toolbar): erste Ebene unter der Schaltfläche, tiefere Ebenen rechts daneben */
.zeg-host .zeg-menu-pop { min-width: 12rem; padding: 0.25rem; gap: 0.1rem; }
.zeg-host .zeg-submenu { display: flex; width: 100%; }
.zeg-host .zeg-submenu-pop { top: 0; left: 100%; }
.zeg-host .zeg-menu-caret { margin-left: auto; opacity: 0.7; }
.zeg-host .zeg-btn .zeg-menu-caret { margin-left: 0; }

.zeg-host .zeg-quicksearch { display: inline-flex; align-items: center; gap: 0.3rem; }
.zeg-host .zeg-quicksearch .zeg-input { width: 12rem; }

.zeg-host .zeg-pager.zeg-pager-left { justify-content: flex-start; }
.zeg-host .zeg-pager.zeg-pager-center { justify-content: center; }
.zeg-host .zeg-pager.zeg-pager-right { justify-content: flex-end; }
.zeg-host .zeg-pager.zeg-pager-justify { justify-content: space-between; }
.zeg-host .zeg-pager.zeg-pager-center .zeg-pager-summary,
.zeg-host .zeg-pager.zeg-pager-right .zeg-pager-summary,
.zeg-host .zeg-pager.zeg-pager-left .zeg-pager-summary { margin-left: 0; }

/* Aktuelle Zeile ohne Auswahl (Tastaturfokus bei Mehrfachauswahl) */
.zeg-host .zeg-row.zeg-focused > .zeg-td { box-shadow: inset 0 1px 0 var(--zeg-focus), inset 0 -1px 0 var(--zeg-focus); }

.zeg-host .zeg-mob-card-detail { margin-top: 0.5rem; }