/* --- FAQ-Akkordeon (39:68) ----------------------------------------------
   Kein eigener Block: WordPress fuehrt core/accordion seit 6.9. Der Kern
   liefert Umschalter, aria-expanded, aria-controls und hidden="until-found"
   ueber die Interactivity-API — der Antworttext bleibt damit auch zugeklappt
   im Markup und findbar, genau wie der Entwurf es verlangt. Hier steht nur
   die Erscheinung: Haarlinie je Zeile, Chevron statt Pluszeichen.
   Klassen und Aufbau sind die des Kerns (wp-includes/blocks/accordion*). */

.epi-faq {
    display: grid;
    gap: var(--wp--preset--spacing--sm);
}

.epi-faq .wp-block-accordion-item {
    border-block-end: 1px solid var(--color-secondary-20);
}

.epi-faq .wp-block-accordion-heading {
    margin: 0;
    font-size: inherit;
}

.epi-faq .wp-block-accordion-heading__toggle {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--md);
    inline-size: 100%;
    min-block-size: var(--touch-min);
    padding: 1rem 0;
    background: none;
    /* appearance:none zusaetzlich zu border:0: manche Browser (v.a. Safari)
       zeichnen bei einem echten <button>-Element einen nativen Fokus-„Glow"
       (weicher blauer Schein statt scharfem Outline), der unabhaengig vom
       outline-Reset in global.css besteht, solange die native Control-
       Erscheinung nicht abgeschaltet ist — genau der „komische enge klare
       Schatten in der blauen Linie" aus der Nutzer-Rueckmeldung. Der
       eigentliche, barrierefreie Fokusring kommt weiterhin ausschliesslich
       aus dem globalen :focus-visible-Token (tokens.generated.css). */
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: start;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: var(--line-height-ui);
    color: var(--color-text);
    min-height: 0;
}

.epi-faq .wp-block-accordion-heading__toggle:hover {
    background: none;
    color: var(--color-accent-dark-wcag);
}

.epi-faq .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle {
    color: var(--color-accent-dark-wcag);
}

.epi-faq .wp-block-accordion-heading__toggle-title {
    flex: 1 1 auto;
}

/* Der Kern setzt ein Pluszeichen als Text. Der Entwurf zeigt ein Chevron in
   text/accent, keine Farbflaeche: Zeichen weg, Chevron als Maske, damit die
   Farbe aus dem Token kommt. Pfad ist das ausgespielte Asset (Knoten 39:65). */
.epi-faq .wp-block-accordion-heading__toggle-icon {
    flex: none;
    inline-size: 24px;
    block-size: 24px;
    font-size: 0;
    background-color: currentColor;
    -webkit-mask-image: url("../../img/chevron.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url("../../img/chevron.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    color: var(--color-accent-dark-wcag);
    transition: rotate var(--motion-state-duration) var(--motion-state-easing);
}

.epi-faq .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon {
    rotate: 180deg;
}

.epi-faq .wp-block-accordion-panel {
    padding-block-end: 1rem;
}

.epi-faq .wp-block-accordion-panel > *:first-child {
    margin-block-start: 0;
}

@media (prefers-reduced-motion: reduce) {
    .epi-faq .wp-block-accordion-heading__toggle-icon {
        transition: none;
    }
}