/* Akkordeon — 1:1 aus ERP mage-components.css (.mage-accordion). Nur diese Komponente. */
.mage-accordion { display: flex; flex-direction: column; gap: 0; }
.mage-accordion-item { border: 1px solid #e5e7eb; border-radius: 2px; margin-bottom: 8px; overflow: hidden; }
.mage-accordion-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; background: #fafafa; cursor: pointer; user-select: none;
    transition: background 0.15s;
}
.mage-accordion-header:hover { background: #f3f4f6; }
.mage-accordion-title { font-size: 13px; font-weight: 600; color: #111827; display: flex; align-items: center; }
.mage-accordion-badge {
    display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 6px;
    border-radius: 2px; color: #fff; margin-left: 8px;
}
.mage-accordion-arrow { font-size: 12px; color: #9ca3af; transition: transform 0.2s; }
.mage-accordion-item.open > .mage-accordion-header .mage-accordion-arrow { transform: rotate(180deg); }
.mage-accordion-body { display: none; padding: 16px; }
.mage-accordion-item.open > .mage-accordion-body { display: block; }

/* Verschachtelt */
.mage-accordion-nested .mage-accordion-item { border-color: #f0f0f0; margin-bottom: 4px; }
.mage-accordion-nested .mage-accordion-header { padding: 8px 12px; background: #f9fafb; }
.mage-accordion-nested .mage-accordion-title { font-size: 12px; }
.mage-accordion-nested .mage-accordion-body { padding: 12px; }