/* Block: FAQ-Liste mit Kategoriefilter
   Sollwerte am Figma-Screenshot ausgemessen (.figma-ref/Sprint 2/FAQ*.png
   mit .figma-ref/px.mjs und .figma-ref/ink.mjs), 2026-08-12:

   Filter-Pille  46px hoch · Radius 8px · Innenabstand 20px
                 Text 16px Poppins SemiBold · Icon 14 × 14, 12px Abstand
                 aktiv  Grund #6BE381, Schrift #263864, kein Rahmen
                 inaktiv weiß mit 1px Rahmen #263864
                 Abstand 12px waagerecht, 16px senkrecht; Pillen umbrechen
   Frage         16px/24px Poppins Regular #000000
   Chevron       Kreis 24 × 24, 1,5px Strich #263864, rechtsbündig
   Trennlinie    1px #263864 (aus der Kantenglättung zurückgerechnet)
                 25px unter der Frage, danach 50px bis zur nächsten
   Spalten       ab 1200px zwei Spalten mit 24px Gutter – jede Kategorie hat
                 ihr eigenes Panel, damit das Aufklappen nur die eigene
                 Spalte verlängert. Darunter einspaltig.
   Keine clamp()-Größen – feste Stufen je Breakpoint. */

/* Abstand oberhalb/unterhalb der Sektion: assets/css/section-spacing.css */

/* ── Filter ──────────────────────────────────────────────── */

.faq-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 12px;
    margin-bottom: 52px;
}

.faq-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 0 20px;
    background-color: var(--color-white);
    border: 1px solid var(--color-dark);
    border-radius: 8px;
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-copy-s);               /* 16px */
    line-height: 24px;
    color: var(--color-dark);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.faq-pill:hover {
    background-color: var(--color-surface);
}

/* Aktiv: grüner Grund ohne Rahmen – der Rahmen bleibt transparent stehen,
   damit die Pille beim Umschalten nicht um 2px springt. */
.faq-pill.is-active,
.faq-pill.is-active:hover {
    background-color: var(--color-green);
    border-color: transparent;
}

.faq-pill-icon {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

/* ── Fragen ──────────────────────────────────────────────── */

.faq-panel[hidden] {
    display: none;
}

.faq-item {
    padding-bottom: 25px;
    border-bottom: 1px solid var(--color-dark);
    margin-bottom: 50px;
}

.faq-item-heading {
    /* h3 – Vorgaben aus typography.css zurücksetzen. */
    margin: 0;
    font: inherit;
}

.faq-item-toggle {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
}

.faq-item-question {
    font-family: var(--font-body);
    font-weight: var(--fw-normal);
    font-size: var(--fs-copy-s);               /* 16px */
    line-height: 24px;
    color: var(--color-text);                  /* #000000 */
}

/* Der Kreis sitzt auf Höhe der ERSTEN Zeile, auch wenn die Frage umbricht –
   so zeigt es der Mobil-Screenshot. */
.faq-item-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 24px;
    color: var(--color-dark);
}

/* Das SVG ist nach oben gezeichnet – zugeklappt zeigt der Pfeil nach unten. */
.faq-item-icon .chevron-circle {
    transform: rotate(180deg);
}

.faq-item.is-open .faq-item-icon .chevron-circle {
    transform: rotate(0deg);
}

.faq-item-answer {
    padding-top: 16px;
    font-family: var(--font-body);
    font-size: var(--fs-copy-s);               /* 16px */
    line-height: 1.6;
    color: var(--color-text);
}

.faq-item-answer[hidden] {
    display: none;
}

.faq-item-answer > :last-child {
    margin-bottom: 0;
}