/* Layout */
.faq-accordion {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    width: 100%;
}

/* Tile wächst mit Summary-Inhalt, aber nie über Parent hinaus */
.faq-item {
    align-self: center;
    max-width: 100%;
    min-width: 0;
}

@media (min-width: 768px) {
    .faq-item {
        min-width: 400px;
    }
}

/* Staggered horizontal offset (repeating pattern of 4) */
.faq-item:nth-child(4n+1) { margin-left: 7%; margin-right: 19%; }
.faq-item:nth-child(4n+2) { margin-left: 19%; margin-right: 0%; }
.faq-item:nth-child(4n+3) { margin-left: 3%; margin-right: 24%; }
.faq-item:nth-child(4n+4) { margin-left: 17%; margin-right: 3%; }

/* Summary row */
.faq-summary {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    list-style: none;
}

.faq-summary::-webkit-details-marker {
    display: none;
}

/* Icon button */
.faq-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
}

.faq-icon svg {
    transform: rotate(90deg);
    transition: transform 0.35s ease;
}

.faq-item.is-open .faq-icon svg {
    transform: rotate(270deg);
}

/* Animated body — contain:inline-size verhindert, dass Body-Inhalt die Tile-Breite aufdrückt */
.faq-body {
    contain: inline-size;
    width: 100%;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease;
}

.faq-item.is-open .faq-body {
    max-height: 1000px;
}

.faq-content {
    padding: 0 1.5rem 1.25rem;
}

.faq-item--hidden {
    display: none;
}

/* "Mehr anzeigen" Button */
.faq-more-btn {
    margin-top: 2rem;
}