/* FAQ Accordion */

.efa-faq-accordion,
.efa-faq-accordion * {
    box-sizing: border-box;
}

/* Elementor schrumpft den Widget-Wrapper in Flex-Containern/Columns ohne
   align-items:stretch auf die Inhaltsbreite – hier erzwingen wir volle Breite. */
.elementor-widget-efa_faq_accordion,
.elementor-widget-efa_faq_accordion > .elementor-widget-container {
    width: 100%;
}

.efa-faq-accordion {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--efa-item-gap, 12px);
    margin: 0;
    padding: 0;
}

.efa-faq-item {
    border: 1px solid #e2e5ea;
    border-radius: var(--efa-radius-top, 10px) var(--efa-radius-right, 10px) var(--efa-radius-bottom, 10px) var(--efa-radius-left, 10px);
    padding: var(--efa-item-padding-top, 0) var(--efa-item-padding-right, 0) var(--efa-item-padding-bottom, 0) var(--efa-item-padding-left, 0);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.efa-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: var(--efa-question-padding-top, 18px) var(--efa-question-padding-right, 22px) var(--efa-question-padding-bottom, 18px) var(--efa-question-padding-left, 22px);
    background-color: var(--efa-question-bg-color, #1e293b);
    color: var(--efa-question-text-color, #ffffff);
    font-family: var(--efa-question-font-family, inherit);
    font-size: var(--efa-question-font-size, inherit);
    font-weight: var(--efa-question-font-weight, inherit);
    font-style: var(--efa-question-font-style, inherit);
    line-height: var(--efa-question-line-height, inherit);
    letter-spacing: var(--efa-question-letter-spacing, inherit);
    word-spacing: var(--efa-question-word-spacing, inherit);
    text-transform: var(--efa-question-text-transform, inherit);
    text-decoration: var(--efa-question-text-decoration, inherit);
    text-align: left;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    /* Default-Werte, entsprechen Elementors Rahmenradius-Control-Default.
       Elementor ueberschreibt das bei Bedarf per {{WRAPPER}}-Selektor mit
       hoeherer Spezifitaet; Gutenberg setzt dieselben Werte per CSS-Variablen. */
    border-radius: var(--efa-radius-top, 10px) var(--efa-radius-right, 10px) var(--efa-radius-bottom, 10px) var(--efa-radius-left, 10px);
}

.efa-faq-question:hover {
    background-color: var(--efa-question-hover-bg-color, #29405c);
    color: var(--efa-question-hover-text-color, var(--efa-question-text-color, #ffffff));
}

.efa-faq-question:focus-visible {
    outline: 2px solid #7dd3fc;
    outline-offset: -2px;
}

.efa-faq-question[aria-expanded="true"] {
    background-color: var(--efa-question-active-bg-color, #2563eb);
    color: var(--efa-question-active-text-color, var(--efa-question-text-color, #ffffff));
    border-radius: var(--efa-radius-top, 10px) var(--efa-radius-right, 10px) 0 0;
}

/* Plus/Minus Icon – folgt der Textfarbe der Frage */
.efa-faq-icon {
    flex-shrink: 0;
    display: inline-block;
    width: 18px;
    height: 18px;
    position: relative;
}

.efa-faq-icon::before,
.efa-faq-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: currentColor;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Horizontale Linie (immer sichtbar) */
.efa-faq-icon::before {
    width: 100%;
    height: 2px;
    transform: translate(-50%, -50%);
}

/* Vertikale Linie (wird bei open ausgeblendet) */
.efa-faq-icon::after {
    width: 2px;
    height: 100%;
    transform: translate(-50%, -50%);
}

.efa-faq-question[aria-expanded="true"] .efa-faq-icon::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
}

/* Benutzerdefiniertes Icon (statt Plus/Minus) – Swap statt Rotation */
.efa-faq-icon-wrap {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

.efa-faq-icon-open {
    display: none;
}

.efa-faq-question[aria-expanded="true"] .efa-faq-icon-closed {
    display: none;
}

.efa-faq-question[aria-expanded="true"] .efa-faq-icon-open {
    display: inline-flex;
}

/* Elementors eigene Icon-Groessenregeln greifen nicht in unserem Markup,
   deshalb Groesse/Farbe hier explizit setzen statt uns darauf zu verlassen. */
.efa-faq-icon-custom svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.efa-faq-icon-custom .efa-faq-icon-svg {
    fill: none;
    stroke: currentColor;
}

.efa-faq-icon-custom i {
    font-size: 18px;
    line-height: 1;
    color: currentColor;
}

/* Antwort */
.efa-faq-answer {
    background-color: var(--efa-answer-bg-color, #f8fafc);
    border-radius: 0 0 var(--efa-radius-bottom, 10px) var(--efa-radius-left, 10px);
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 var(--efa-answer-padding-right, 22px) 0 var(--efa-answer-padding-left, 22px);
}

.efa-faq-answer:not([hidden]) {
    max-height: 2000px;
    padding: var(--efa-answer-padding-top, 18px) var(--efa-answer-padding-right, 22px) var(--efa-answer-padding-bottom, 18px) var(--efa-answer-padding-left, 22px);
}

/* hidden-Attribut überschreiben damit CSS-Transition greift */
.efa-faq-answer[hidden] {
    display: block !important;
    max-height: 0;
    padding: 0 var(--efa-answer-padding-right, 22px) 0 var(--efa-answer-padding-left, 22px);
}

.efa-faq-answer-inner {
    color: var(--efa-answer-text-color, #1e293b);
    font-family: var(--efa-answer-font-family, inherit);
    font-size: var(--efa-answer-font-size, inherit);
    font-weight: var(--efa-answer-font-weight, inherit);
    font-style: var(--efa-answer-font-style, inherit);
    line-height: var(--efa-answer-line-height, inherit);
    letter-spacing: var(--efa-answer-letter-spacing, inherit);
    word-spacing: var(--efa-answer-word-spacing, inherit);
    text-transform: var(--efa-answer-text-transform, inherit);
    text-decoration: var(--efa-answer-text-decoration, inherit);
}

.efa-faq-answer-inner p {
    margin: 0 0 10px;
}

.efa-faq-answer-inner p:last-child {
    margin-bottom: 0;
}