/* Accordion Container */
.accordion {
    max-width: 100%; /* Breite anpassbar */
    margin: auto;
}

/* Accordion-Styling */
.accordion details {
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 1px auto;
    background: white;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
    list-style: none;
    padding: 0;
}

details::details-content {
    height: 0;
    overflow-y: clip;
    padding: .5em;
    transition: 1s allow-discrete;
}

details[open]::details-content {
    height: 15em;
    /* Interpolation only */
    height: calc-size(auto, size);
}

.accordion summary {
    cursor: pointer;
    padding: 1rem;
    font-weight: bold;
    list-style: none;
}

.accordion summary:focus {
    outline-offset: 2px solid #212121;
    outline-offset: 2px;

}

.accordion .content {
   padding: 1rem;
    border-top: 1px solid #ccc;
    }

/* Responsive Anpassung */
@media (max-width: 500px) {
    .accordion {
        max-width: 100%;
    }
}


.accordion summary {
    position: relative;
    anchor-name: --summary;

    &::marker {
        content: "";
    }

    &::before,
    &::after {
        content: "";
        border-block-start: 3px solid #ccc;
        height: 0;
        width: 1rem;
        margin-right: 20px;

        /* Positions the lines */
        inset-block-start: 50%;
        inset-inline-end: 0;

        /* Anchor the shape to the summary */
        position: absolute;
        position-anchor: --summary;
        position-area: top end;
    }

    /* Rotate just the ::after line to create a "+"" shape */
    &::after {
        transform: rotate(90deg);
        transform-origin: 50%;
    }
}

/* Rotate the line when open */
.accordion details[open] summary::after {
    transform: rotate(0deg);
}

body:has(dialog:modal) { overflow: hidden; }