.quiqqer-accordion-list {
    --_columns-gap: var(--quiqqer-bricks-accordion-columns-gap, 1rem);
    --_items-gap: var(--quiqqer-bricks-accordion-items-gap, 1rem);
    --_column-min-width: var(--quiqqer-bricks-accordion-column-min-width, 300px);
    --_list-max-width: var(--quiqqer-bricks-accordion-list-maxWidth, var(--_q-controlConf-list-maxWidth, 100%));
    --_border-width: var(--quiqqer-bricks-accordion-border-width, var(--qui-border-width, 1px));
    --_border-style: var(--quiqqer-bricks-accordion-border-style, var(--qui-border-style, solid));
    --_border-color: var(--quiqqer-bricks-accordion-border-color, var(--qui-border-color, inherit));
    --_border-radius: var(--quiqqer-bricks-accordion-border-radius, var(--qui-border-radius, 1rem));
    --_header-padding-block: var(--quiqqer-bricks-accordion-header-padding-block, 0.75rem);
    --_header-padding-inline: var(--quiqqer-bricks-accordion-header-padding-inline, 1rem);
    --_header-font-size: var(--quiqqer-bricks-accordion-header-font-size, 1.125rem);
    --_header-font-weight: var(--quiqqer-bricks-accordion-header-font-weight, 400);
    --_icon-rotate: var(--quiqqer-bricks-accordion-icon-rotate, var(--_q-controlConf-rotate, 180deg));
    --_transition-duration: var(--quiqqer-bricks-accordion-transition-duration, 500ms);

    margin-left: auto;
    margin-right: auto;
    max-width: var(--_list-max-width);
    width: 100%;
}

.quiqqer-accordion-columns {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: var(--_columns-gap);
}

.quiqqer-accordion-column {
    display: grid;
    flex: 1 1 var(--_column-min-width);
    gap: var(--_items-gap);
    min-width: 0;
}

.quiqqer-accordion-item-header {
    align-items: baseline;
    border-radius: var(--_border-radius);
    cursor: pointer;
    display: flex;
    gap: 1rem;
    font-size: var(--_header-font-size);
    font-weight: var(--_header-font-weight);
    list-style: none;
    margin-top: 0;
    margin-bottom: 0;
    padding: var(--_header-padding-block) var(--_header-padding-inline);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.quiqqer-accordion-item-header::-webkit-details-marker {
    display: none;
}

.quiqqer-accordion-item-header-text {
    flex-grow: 1
}

.quiqqer-accordion-list--icon-left .quiqqer-accordion-item-header-icon {
    order: -1;
}

.quiqqer-accordion-item-header-icon {
    line-height: inherit;
    margin-left: auto;
    transition: transform var(--_transition-duration) ease;
}

/* "visually open" == [open]:not(--closing): while JS animates the collapse it
   keeps [open] for the content but adds --closing, so every open-state style
   (icon rotation here, header colors/borders in the variants) reverts right
   away and fades out via its transition. Without JS --closing never appears,
   so this behaves exactly like plain [open]. */
.quiqqer-accordion-item[open]:not(.quiqqer-accordion-item--closing) .quiqqer-accordion-item-header-icon {
    transform: rotate(var(--_icon-rotate));
}

.quiqqer-accordion-item-content-wrapper {
    overflow: hidden;
}

.quiqqer-accordion-item-content {
    overflow: auto;
}

@media (prefers-reduced-motion: reduce) {
    .quiqqer-accordion-item-header-icon {
        transition: none;
    }
}
