/* Lightbox / Modal — 1:1 aus ERP mage-components.css (MageOverlay), zentriertes Overlay. */
.mage-overlay-backdrop {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.3); z-index: 10000; opacity: 0; transition: opacity 0.2s;
}
.mage-overlay-backdrop.active { display: block; opacity: 1; }
.mage-overlay-panel {
    display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95);
    background: #fff; border-radius: 2px; box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    z-index: 10001; max-height: 70vh; width: 440px; max-width: 92vw; overflow: hidden; flex-direction: column;
    opacity: 0; transition: opacity 0.2s, transform 0.2s;
}
.mage-overlay-panel.active { display: flex; opacity: 1; transform: translate(-50%, -50%) scale(1); }
.mage-overlay-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid #e5e7eb;
}
.mage-overlay-title { font-size: 14px; font-weight: 600; color: #111827; }
.mage-overlay-close {
    background: none; border: none; font-size: 20px; color: #9ca3af;
    cursor: pointer; width: 28px; height: 28px; display: flex;
    align-items: center; justify-content: center; border-radius: 2px;
}
.mage-overlay-close:hover { background: #f3f4f6; color: #333; }
.mage-overlay-body { overflow-y: auto; max-height: 60vh; padding: 18px; }
.mage-overlay-footer { padding: 12px 18px; border-top: 1px solid #f0f0f0; display: flex; justify-content: flex-end; gap: 8px; }