/* ============================================================
   ACCORDION — Auf-/zuklappbare Inhaltsblöcke
   Wiederverwendbar für jedes Modul, das Accordions braucht.
   ============================================================ */

.accordion-header {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    padding: 8px 14px;
    margin: 2px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(30,30,40,0.85);
    border: 1px solid #1c1e24;
    border-radius: 5px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.6);
    position: relative;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.accordion-header:hover { background-color: rgba(50,50,70,0.85); box-shadow: 0 4px 14px rgba(0,0,0,0.8); }
.accordion-header.active { background-color: rgba(70,70,100,0.9); box-shadow: 0 4px 16px rgba(0,0,0,0.9); }
.accordion-header::after {
    content: "\25BC";
    position: absolute;
    right: 15px;
    transition: transform 0.3s ease;
}
.accordion-header.active::after { transform: rotate(-180deg); }

.accordion-content {
    max-height: 0;
    overflow: hidden;
    background: rgba(20,20,28,0.55);
    border-left: 1px solid #1c1e24;
    border-right: 1px solid #1c1e24;
    border-bottom: 1px solid #1c1e24;
    border-radius: 0 0 5px 5px;
    transition: max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
}
.accordion-active .accordion-content {
    max-height: 500px;
    padding: 10px;
    overflow-y: auto;
}
.accordion-content.open { max-height: 100%; margin-bottom: 20px; }

/* Innerer Inhalts-Wrapper (z.B. Text/Beschreibung) innerhalb des Accordions */
.accordion-body { padding: 10px; }