.faq {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap, 1rem);
    row-gap: 2.5rem;
    /* erlaubt die Höhen-Animation des Accordions nach block-size: auto */
    interpolate-size: allow-keywords;
}

.faq__head,
.faq__content {
    grid-column: 1 / -1;
}

.faq__content {
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .faq__head {
        grid-column: 1 / span 4;
    }
    .faq__content {
        grid-column: 7 / span 4;
    }
}

.faq__item {
    border-block-end: 1px solid var(--color-border-muted);
    margin-block: 0;
    padding-block: 0;
}

.faq__question {
    cursor: pointer;
    color: var(--color-text);
}

.faq__answer {
    /* margin-block-start raus → Antwort näher an der Frage. */
    padding-block: 0 1rem;
    color: var(--color-text-muted);
    font-size: var(--type-h4);
    line-height: var(--leading-h4);
}

.faq__answer > * {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/* Weiches Auf-/Zuklappen (progressive enhancement: ältere Browser snappen). */
.faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.28s ease, content-visibility 0.28s ease allow-discrete;
}

.faq__item[open]::details-content {
    block-size: auto;
}

.faq__summary {
    position: relative;
    /* padding-block hebt das Touch-Target der Frage auf >=44px (WCAG). */
    padding-block: 0.75rem;
    padding-inline-end: 2rem;
    list-style: none;
}

.faq__summary::-webkit-details-marker {
    display: none;
}

.faq__summary::marker {
    content: '';
}

/* Lucide chevron-down — SVG als mask-image für currentColor.
 * Rotiert um 180° wenn das FAQ-Item geöffnet ist (= chevron-up). */
.faq__summary::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 1.25rem;
    height: 1.25rem;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    transform: translateY(-50%);
    transition: transform 0.2s ease;
}

.faq__item[open] .faq__summary::after {
    transform: translateY(-50%) rotate(180deg);
}