/* ============================================================================
   FAQ-Seite (pages/faq.html)

   Die Fragen folgen demselben Muster wie die FAQ auf ki-sichtbarkeit.html
   (.lp-faq): <details>/<summary>, Trennlinie, Plus und Minus rechts. Die
   Antworten stehen vollständig im HTML und sind ohne JavaScript aufklappbar.
   Die Werte von .lp-faq sind hier übernommen, weil jene Regeln an den
   Variablen der Landingpage (.lp) hängen.
   ============================================================================ */

.faq-wrap { max-width: var(--container-narrow); }

/* Kopf: linksbündig wie der Lesetext darunter */
.faq-hero { padding-block: var(--space-16) var(--space-8); border-bottom: none; }
.faq-hero h1 { margin-bottom: var(--space-4); }
.faq-intro { font-size: var(--text-md); }
.faq-intro a,
.faq-list a { color: var(--text-strong); text-underline-offset: 3px; }
.faq-stand { margin-top: var(--space-4); color: var(--text-muted); font-size: var(--text-sm); }

/* Sprungmarken zu den Themen */
.faq-themen ul { list-style: none; padding: 0; margin: var(--space-8) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.faq-themen a {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    color: var(--text-body);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.faq-themen a:hover { border-color: var(--border-strong); color: var(--text-strong); }
.faq-themen a:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 2px; }

/* Themenblöcke */
.faq-section { padding-block: var(--space-8); border-bottom: none; }
.faq-section h2 { text-align: left; margin-bottom: var(--space-2); }

/* Der Kopf ist sticky: Sprungziele sonst unter ihm verdeckt */
.faq-section h2,
.faq-list details { scroll-margin-top: var(--space-24); }

/* Fragen, Werte wie .lp-faq */
.faq-list details { border-bottom: 1px solid rgba(159, 179, 217, .18); padding-block: var(--space-4); }
.faq-list summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); color: var(--text-strong); font-weight: var(--weight-bold); font-size: var(--text-md); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--accent); font-size: 1.4rem; line-height: 1; }
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list summary:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 4px; border-radius: var(--radius-sm); }
.faq-list details p { margin-top: var(--space-3); max-width: none; }

/* Handlungsaufforderung am Ende: Baustein .contact-section */
.faq-cta h2 { margin-bottom: var(--space-4); }