.content h4 {
    cursor: pointer;
    font-size: 125%;
    background-color: #e3e3e3;
    padding: 10px 30px;
    border-radius: 20px;
    transition: border-radius 200ms ease, padding-left 250ms ease;
    margin-bottom: 0;

    /* neu */
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Kreis + Plus */
.content h4::before{
    content: "";
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #3e4448;

    background-image:
        linear-gradient(#fff, #fff),  /* horizontal */
        linear-gradient(#fff, #fff);  /* vertikal */
    background-size:
        12px 2px,
        2px 12px;
    background-position: center, center;
    background-repeat: no-repeat;

    flex-shrink: 0;
    transition: transform 0.3s ease, background-color 0.3s ease, background-size 0.3s ease;
}

.content h4.is-open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Hover: dein bestehender Slide + optional Icon drehen */
.content h4:hover {
}
.content h4:hover::before{
    transform: rotate(180deg);
}

/* OFFEN: Minus anzeigen */
.content h4.is-open::before{
    background-size:
        12px 2px,
        0px 12px; /* vertikale Linie weg */
}




.content .acc-panel {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height 300ms ease, opacity 200ms ease, transform 200ms ease;
    will-change: max-height, opacity, transform;
    margin: 0;
    background-color: #fff7df;
    padding: 0 30px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.content .acc-panel.is-open {
    margin: 0 0 12px 0;
    padding: 10px 30px;
}