/* Container innerhalb des Summary-Balkens */
.keb-status {
    display: flex;
    gap: 16px;
    align-items: flex-start
}

/* Summary ist nur noch Träger ohne Hintergrund */
.keb-status-panel>summary {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 12px 0
}

/* Farbiger Kopf (nur Textbereich) */
.keb-status-head {
    flex: 1;
    display: flex
;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    flex-direction: column;
}

.keb-status-panel.keb-status--open>summary .keb-status-head {
    background: #e7f9ea;
    border-color: #bce9c6
}

.keb-status-panel.keb-status--closed>summary .keb-status-head {
    background: #fdeaea;
    border-color: #f2c3c3
}

/* SVG Größe */
.keb-status-traffic-light svg {
    width: 32px;
    height: 80px;
    display: block
}

/* Lampenfarben nach Status */
.keb-status--open .status-lights-lamp-green {
    fill: #2ecc71 !important
}

.keb-status--open .status-lights-lamp-red {
    fill: #606060 !important
}

.keb-status--closed .status-lights-lamp-red {
    fill: #e74c3c !important
}

.keb-status--closed .status-lights-lamp-green {
    fill: #606060 !important
}

/* Accordion */
.keb-status-panel {
    margin: 0
}

.keb-status-summary {
    cursor: pointer
}

/* Standard-Disclosure-Marker entfernen */
.keb-status-summary::-webkit-details-marker {
    display: none
}

.keb-status-summary::marker {
    content: ""
}

/* Plus/Minus Kreis rechts (liegt im Kopfbereich) */
.keb-status-head {
    position: relative;
    padding-right: 44px
}

.keb-status-head::after {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #2ecc71;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%)
}

.keb-status-panel.keb-status--closed>summary .keb-status-head::after {
    background: #e74c3c
}

.keb-status-panel[open]>summary .keb-status-head::after {
    content: "−"
}

.keb-status-description {
    margin-top: 8px
}

/* Text nimmt Breite, Icon bleibt rechts */
.keb-status-summary-text {
    font-weight: 600
}

/* Beschreibung nur im offenen Zustand zeigen */
.keb-status-panel:not([open]) .keb-status-description {
    display: none
}