/* ==========================================================================
   Baustein: FAQ-Akkordeon (Sektion 10)
   Datei: css/bausteine/faq-akkordeon.css
   Gebraucht auf: index.html, work-zone.html, btp-festpreis.html, karriere.html
   Bauvorschrift: DESIGN.md, Baustein "FAQ-Akkordeon", Fragen nach N10
   Regeln: docs/entwicklung.md. Klassen-Präfix dieser Datei siehe unten,
   Tokens und Rollen kommen aus css/style.css und werden hier nicht neu definiert.
   ========================================================================== */

/* Präfix: .faq-* */
.faq-list { margin-top: 72px; }

.faq-item { border-bottom: 1px solid var(--line); }

.faq-summary {
  display: grid; grid-template-columns: 1fr 24px; gap: 40px; align-items: center;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary > span { color: var(--ink); }

.faq-chevron {
  width: 24px; height: 24px; flex: none;
  color: var(--muted);
  transition: transform var(--t) ease;
}
.faq-item[open] .faq-summary { padding-bottom: 0; }
.faq-item[open] .faq-chevron { transform: rotate(180deg); }

.faq-answer { max-width: 720px; margin-top: 16px; padding-bottom: 24px; }
.faq-answer p + p { margin-top: 16px; }

@media (max-width: 980px) {
  .faq-summary { gap: 28px; }
}

@media (max-width: 640px) {
  .faq-list { margin-top: 48px; }
  .faq-summary { gap: 20px; align-items: start; }
  .faq-chevron { margin-top: 2px; }
}