/*
╔══════════════════════════════════════════════════════════════════════════════╗
║                                                                              ║
║  ❓ FAQ-ACCORDION COMPONENT                                                  ║
║  Treatment Pages - Collapsible FAQ Section                                   ║
║                                                                              ║
║  Purpose: Accordion-Style FAQ für alle Ratgeber-Artikel                     ║
║  Usage: Wird automatisch von treatment-base.ejs geladen                     ║
║                                                                              ║
╚══════════════════════════════════════════════════════════════════════════════╝

VERWENDUNG:
──────────────────────────────────────────────────────────────────────────────

<div class="faq-accordion">
    <button class="faq-question" onclick="toggleFaq(this)">
        Welche Vorteile bietet eine Zahnzusatzversicherung ohne Wartezeit?
        <span class="faq-icon">▼</span>
    </button>
    <div class="faq-answer">
        <p style="color: var(--gray-700); margin: 0; line-height: 1.6;">
            Eine Zahnzusatzversicherung ohne Wartezeit bietet...
        </p>
    </div>
</div>

WICHTIG:
- JavaScript-Funktion toggleFaq() muss im Artikel enthalten sein
- Schema.org JSON-LD für FAQ MUSS erhalten bleiben (SEO!)
- SEOBot FAQ-Content verwenden, nur HTML-Struktur anpassen

═══════════════════════════════════════════════════════════════════════════════
*/

/* Accordion Container */
.faq-accordion,
.faq-item {
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}

/* Question Button */
.faq-question {
    background: #f8fafc;
    padding: 16px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: none;
    width: 100%;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-800);
    transition: background-color 0.2s ease;
}

.faq-question:hover {
    background: #e2e8f0;
}

.faq-question.active {
    background: #dbeafe;
    border-bottom: 1px solid var(--gray-200);
}

/* Answer Container */
.faq-answer {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    background: white;
}

.faq-answer.active {
    max-height: 500px;
    padding: 20px;
}

/* Icon Animation */
.faq-icon {
    font-size: 20px;
    transition: transform 0.3s ease;
    color: var(--primary-teal);
}

.faq-icon.active {
    transform: rotate(180deg);
}

/* Answer Text Styling */
.faq-answer p {
    color: var(--gray-700);
    margin: 0;
    line-height: 1.6;
}

/*
═══════════════════════════════════════════════════════════════════════════════
JavaScript Toggle Function (muss im Artikel enthalten sein):
═══════════════════════════════════════════════════════════════════════════════

<script>
    function toggleFaq(button) {
        const answer = button.nextElementSibling;
        const icon = button.querySelector('.faq-icon');

        // Close all other accordions
        document.querySelectorAll('.faq-question.active').forEach(activeButton => {
            if (activeButton !== button) {
                activeButton.classList.remove('active');
                activeButton.nextElementSibling.classList.remove('active');
                activeButton.querySelector('.faq-icon').classList.remove('active');
            }
        });

        // Toggle current accordion
        button.classList.toggle('active');
        answer.classList.toggle('active');
        icon.classList.toggle('active');
    }
</script>

═══════════════════════════════════════════════════════════════════════════════
*/