/**
 * KRYA Fragen und Antworten in Seiteninhalten.
 * Eigene Datei statt style.css, damit sie nur auf Seiten mit einem Fragenblock
 * mitkommt (geladen von faq-content.php).
 *
 * Kein JavaScript: <details> und <summary> bringen das Auf- und Zuklappen mit,
 * inklusive Tastatur und Vorlesehilfen. Der Text steht auch zugeklappt im HTML.
 */

.krya-faq {
    display: grid;
    gap: 1rem;
    margin: 2rem 0;
}

.krya-faq__item {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--white);
    box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease;
}

.krya-faq__item:hover { box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1)); }
.krya-faq__item[open] { border-color: var(--sage); }

.krya-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.15rem 1.5rem;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}

/* Den Standardpfeil des Browsers abschalten, auch in Safari */
.krya-faq__q::-webkit-details-marker { display: none; }
.krya-faq__q::marker { content: ""; }

.krya-faq__q:hover { color: var(--sage-dark); }
.krya-faq__q:focus-visible { outline: 3px solid var(--sage); outline-offset: 2px; border-radius: var(--radius-sm); }

/* Zeichen zum Auf- und Zuklappen: ein gedrehtes Winkelzeichen aus zwei Strichen */
.krya-faq__q::after {
    content: "";
    flex: none;
    width: 11px;
    height: 11px;
    margin-right: 4px;
    border-right: 2.5px solid var(--sage);
    border-bottom: 2.5px solid var(--sage);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.25s ease;
}

.krya-faq__item[open] .krya-faq__q::after { transform: rotate(-135deg) translate(-3px, -3px); }

.krya-faq__a {
    padding: 0 1.5rem 1.35rem;
    color: var(--ink);
    line-height: 1.65;
}

.krya-faq__a > :first-child { margin-top: 0; padding-top: 1.15rem; border-top: 1px solid var(--line); }
.krya-faq__a > :last-child { margin-bottom: 0; }
.krya-faq__a a { color: var(--sage-dark); }

@media (max-width: 640px) {
    .krya-faq__q { padding: 1rem 1.1rem; gap: 1rem; font-size: 1rem; }
    .krya-faq__a { padding: 0 1.1rem 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .krya-faq__item, .krya-faq__q::after { transition: none; }
}