/* ==========================================================================
   Dein Yoga › Deine Stile – FAQ-Akkordeon
   Werte aus "Website (verschoben) 4.pdf" gemessen.
   Bezugsrahmen: Container = x 169.1–1192.1 pt (Breite 1023 pt).

   Layout laut PDF:
     – Titel zentriert (globale h3-Typo)
     – Trennlinie unter dem Titel: 57% Containerbreite, zentriert
       (PDF: x 388.7–971.9)
     – geöffneter Inhalt: 74% Containerbreite, zentriert, Blocksatz
       (PDF: x 301.9–1058.7)

   Markup: section.faq-eintrag-wrapper > .container > .faq-inner
           > .faq-header (h3[data-target] + button.faq-toggle-button)
           + .faq-antwort

   ---------------------------------------------------------------------
   Umbau auf 3 Viewport-Zonen (auf Wunsch):
     Zone 1: @media (max-width: 999px)
     Zone 2: @media (min-width: 1000px) and (max-width: 1600px)
     Zone 3: @media (min-width: 1600px)
   Jede Section bekommt jetzt alle drei Zonen. Wo bisher nur ein Wert
   existierte, wurde er in alle drei Zonen übernommen (identisches
   Erscheinungsbild wie vorher, aber jetzt einzeln pro Zone einstellbar).
   Rein optische Regeln (Farbe, Textausrichtung einzeln, font-size,
   display:none) ohne erkennbaren Zonenbezug bleiben unskaliert direkt
   unter der jeweiligen Section stehen, um unnötige Verdopplung zu
   vermeiden.
   ========================================================================== */


/* --- Layout in 3 Zonen ---------------------------------------------------- */

@media (max-width: 999px) {
    .faq-eintrag-wrapper {
        padding: 0;
    }

    .faq-eintrag-wrapper .container {
        position: relative;
        width: calc(100% - 3 * var(--gutter));
        max-width: 1000px;
        margin: 0 auto;
    }

    .faq-eintrag-wrapper .faq-header {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        padding: 3rem 0 0;
    }

    .faq-eintrag-wrapper .faq-inner {
        display: flex;
        flex-direction: column;
    }

    .faq-eintrag-wrapper .faq-inner::after {
        content: "";
        display: block;
        width: 57%;
        margin: 3rem auto 0;
        border-bottom: 1px solid var(--brand-primary);
        order: 2;
    }

    .faq-eintrag-wrapper .faq-header  { order: 1; }
    .faq-eintrag-wrapper .faq-antwort { order: 2; }

    .faq-eintrag-wrapper .faq-antwort {
        width: 74%;
        margin: 0 auto;
        padding: 2.4rem 0 0.8rem;
    }
    article section:last-of-type {
padding-bottom: 5rem;
position: relative;
}
}

@media (min-width: 1000px) and (max-width: 1600px) {
    .faq-eintrag-wrapper {
        padding: 0;
    }

    .faq-eintrag-wrapper .container {
        position: relative;
        width: calc(100% - 3 * var(--gutter));
        max-width: 1000px;
        margin: 0 auto;
    }

    .faq-eintrag-wrapper .faq-header {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        padding: 5rem 0 0;
    }

    .faq-eintrag-wrapper .faq-inner {
        display: flex;
        flex-direction: column;
    }

    .faq-eintrag-wrapper .faq-inner::after {
        content: "";
        display: block;
        width: 57%;
        margin: 5rem auto 0;
        border-bottom: 1px solid var(--brand-primary);
        order: 2;
    }

    .faq-eintrag-wrapper .faq-header  { order: 1; }
    .faq-eintrag-wrapper .faq-antwort { order: 2; }

    .faq-eintrag-wrapper .faq-antwort {
        width: 74%;
        margin: 0 auto;
        padding: 2.4rem 0 0.8rem;
    }
}

@media (min-width: 1600px) {
    .faq-eintrag-wrapper {
        padding: 0;
    }

    .faq-eintrag-wrapper .container {
        position: relative;
        width: calc(100% - 3 * var(--gutter));
        max-width: 1000px;
        margin: 0 auto;
    }

    .faq-eintrag-wrapper .faq-header {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        padding: 5rem 0 0;
    }

    .faq-eintrag-wrapper .faq-inner {
        display: flex;
        flex-direction: column;
    }

    .faq-eintrag-wrapper .faq-inner::after {
        content: "";
        display: block;
        width: 57%;
        margin: 5rem auto 0;
        border-bottom: 1px solid var(--brand-primary);
        order: 2;
    }

    .faq-eintrag-wrapper .faq-header  { order: 1; }
    .faq-eintrag-wrapper .faq-antwort { order: 2; }

    .faq-eintrag-wrapper .faq-antwort {
        width: 74%;
        margin: 0 auto;
        padding: 2.4rem 0 0.8rem;
    }


}


/* --- Kopf: Titel + Toggle-Button, zentriert ------------------------------ */

.faq-eintrag-wrapper .faq-header h3 {
    margin: 0;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
    color:var(--brand-primary);
}

.faq-eintrag-wrapper .faq-header h3:hover {
    color: var(--brand-olive);
}

/* Toggle-Button: nur Chevron, kein Button-Look */
.faq-eintrag-wrapper .faq-toggle-button {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--brand-primary);
    font-size: 1.2rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

/* Icon-Zustände: zu = Chevron down, offen = Chevron up */
.faq-eintrag-wrapper .icon-open   { display: none; }
.faq-eintrag-wrapper .icon-closed { display: inline-block; }

.faq-eintrag-wrapper.offen .icon-open   { display: inline-block; }
.faq-eintrag-wrapper.offen .icon-closed { display: none; }


/* --- Antwort: Typografie -------------------------------------------------- */

.faq-eintrag-wrapper .faq-antwort p {
    text-align: justify;
    margin: 0 0 1.5em;
}

.faq-eintrag-wrapper .faq-antwort p:last-child {
    margin-bottom: 0;
}

/* Einträge ohne Antwort (value2 leer): Chevron ausblenden, kein Pointer */
.faq-eintrag-wrapper.ohne-antwort .faq-toggle-button { display: none; }
.faq-eintrag-wrapper.ohne-antwort .faq-header h3 {
    cursor: default;
}
.faq-eintrag-wrapper.ohne-antwort .faq-header h3:hover {
    color: var(--brand-primary);
}