/* ================================================
   Accordion / FAQ Block – Frontend Styles
   Unterstützt: .accordion-block-frontend (neu)
                .faq-block-frontend (Rückwärtskompatibilität)
   ================================================ */

.accordion-block-frontend,
.faq-block-frontend {
    width: 100%;
}

/* Item */
.accordion-block-frontend .accordion-item,
.faq-block-frontend .faq-item {
    margin-bottom: var(--acc-margin, var(--faq-margin, 10px));
    border: 1px solid var(--acc-border-color, var(--faq-border-color, #ccc));
    border-radius: var(--acc-border-radius, var(--faq-border-radius, 0px));
    overflow: hidden;
    width: 100%;
}

/* Frage */
.accordion-block-frontend .accordion-question,
.faq-block-frontend .faq-question {
    background-color: var(--acc-bg-question, var(--faq-bg-question, #f2f2f2));
    color: var(--acc-color-question, var(--faq-color-question, #333));
    font-size: var(--acc-font-size-question, var(--faq-font-size-question, inherit));
    padding: var(--acc-padding, var(--faq-padding, 10px));
    width: 100%;
    box-sizing: border-box;
    user-select: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease, color 0.3s ease;
    outline: none;
}

/* Fokus: native outline entfernen, eigene Darstellung über :focus-visible (CSS-Fallback ohne JS)
   und zusätzlich über .has-focus (JS-gesteuert, für ältere Browser) */
.accordion-question:focus,
.faq-question:focus {
    outline: none;
}
.accordion-question:focus-visible,
.faq-question:focus-visible {
    outline: 2px solid #1C2C24;
    outline-offset: 3px;
}
.accordion-item.has-focus,
.faq-item.has-focus {
    outline: 2px solid #1C2C24;
    outline-offset: 3px;
}

/* Hover – funktioniert im geöffneten und geschlossenen Zustand */
.accordion-block-frontend .accordion-question:hover,
.faq-block-frontend .faq-question:hover {
    background-color: var(--acc-bg-hover-question, var(--faq-bg-hover-question, #e0e0e0)) !important;
    color: var(--acc-color-hover-question, var(--faq-color-hover-question, #000)) !important;
}

/* Aktiv (Item geöffnet) – fällt auf normale Fragefarbe zurück wenn keine Active-Farbe gesetzt */
.accordion-block-frontend .accordion-item.open .accordion-question,
.faq-block-frontend .faq-item.open .faq-question {
    background-color: var(--acc-bg-active-question, var(--faq-bg-active-question, var(--acc-bg-question, var(--faq-bg-question, #f2f2f2))));
    color: var(--acc-color-active-question, var(--faq-color-active-question, var(--acc-color-question, var(--faq-color-question, #333))));
}

/* Icon + / − */
.accordion-block-frontend .accordion-question span,
.faq-block-frontend .faq-question span {
    user-select: none;
    display: inline-block;
    font-size: var(--acc-icon-size, var(--faq-icon-size, inherit));
    width: 1em;
    margin-right: 8px;
    font-weight: bold;
    flex-shrink: 0;
    line-height: 1;
}

/* Antwort – smooth via CSS grid-Trick */
.accordion-block-frontend .accordion-answer,
.faq-block-frontend .faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
    background-color: var(--acc-bg-answer, var(--faq-bg-answer, transparent));
    overflow: hidden;
}

.accordion-block-frontend .accordion-answer > *,
.faq-block-frontend .faq-answer > * {
    overflow: hidden;
    padding: 0 var(--acc-padding, var(--faq-padding, 10px));
    transition: padding 0.35s ease;
}

/* Geöffnet */
.accordion-block-frontend .accordion-item.open .accordion-answer,
.faq-block-frontend .faq-item.open .faq-answer {
    grid-template-rows: 1fr;
}
.accordion-block-frontend .accordion-item.open .accordion-answer > *,
.faq-block-frontend .faq-item.open .faq-answer > * {
    padding: var(--acc-padding, var(--faq-padding, 10px));
}

/* Letzten Absatz-Abstand entfernen */
.accordion-answer p:last-of-type,
.faq-answer p:last-of-type {
    margin-bottom: 0 !important;
}