﻿.e-accordion .e-acrdn-item .e-acrdn-header {
    padding: 8px 16px;
    height: 38px;
}

    .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
        font-size: 1rem;
        font-weight: 600;
    }

.e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header:hover .e-acrdn-header-content, .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header:hover .e-acrdn-header-content {
    color: #005858;
    font-size: 1rem;
    font-weight: 600;
}

.e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header .e-acrdn-header-icon, .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header .e-acrdn-header-content, .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header .e-acrdn-header-icon, .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header .e-acrdn-header-content {
    color: black;
    font-size: 1rem;
    font-weight: 600;
}

.e-accordion .e-acrdn-item.e-selected > .e-acrdn-header > .e-acrdn-header-content {
    color: black;
}

.e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover:focus .e-acrdn-header-content {
    color: #005858;
}

/* Rundungen für geschlossenes und geöffnetes Accordion */
.e-accordion .e-acrdn-item {
    border-radius: 8px;
    overflow: hidden; /* wichtig, damit abgerundete Ecken nicht vom Inhalt überlagert werden */
    border: 1px solid #ccc; /* optional, falls du Border manuell setzt */
    /*margin-bottom: 8px;*/
}

    /* Body (Inhalt) ebenfalls abrunden bei geöffnetem Zustand */
    .e-accordion .e-acrdn-item.e-select.e-expand-state .e-acrdn-panel {
        border-top: 1px solid #ccc;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        background-color: white; /* falls nötig */
    }

    /* Optional: Header oben abrunden */
    .e-accordion .e-acrdn-item .e-acrdn-header {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

/* Verhindert, dass abgerundete Ecken durch Inneninhalte „ausbluten“ */
.e-acrdn-panel {
    overflow: hidden;
}

.e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header, .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header {
    background: white;
}

.e-accordion .e-acrdn-item.e-item-focus.e-select.e-selected.e-expand-state .e-acrdn-header:hover:focus {
    background: white;
}

    .e-accordion .e-acrdn-item.e-item-focus.e-select.e-selected.e-expand-state .e-acrdn-header:hover:focus .e-acrdn-header-content {
        color: #005858;
    }

/* Deaktiviert blauen Hintergrund beim selektierten Accordion-Header */
.e-accordion .e-acrdn-item.e-select.e-selected > .e-acrdn-header {
    background-color: white !important;
}

    /* Optional: Auch Hover-Effekt neutralisieren */
    .e-accordion .e-acrdn-item.e-select.e-selected > .e-acrdn-header:hover {
        background-color: white !important;
    }

.e-accordion .e-acrdn-header:focus {
    outline: none !important;
    box-shadow: none !important;
}

.e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover .e-acrdn-header-content {
    color: #005858;
}

.accordionHeaderWrapper {
    display: flex;
    align-items: center;
    width: 100%;
}

    .accordionHeaderWrapper > span {
        font-weight: 600;
    }

.accordionImageWrapper {
    position: absolute;
    top: 8px;
    right: 50px;
    display: flex;
    gap: 10px;
    align-items: center;
}

    .accordionImageWrapper > button {
        width: 25px;
        height: 25px;
        padding: 0;
        margin-left: -4px;
        margin-top: -1px;
        background: white;
        box-shadow: none;
    }

        .accordionImageWrapper > button > img {
            width: 25px;
            height: 25px;
        }