/* Startseite · faq (Owner: wdf-section-builder, Auftrag P7-home-100) — 1:1 aus wdf/directions/B/hero.html (Stand P4-B15), nur Tokens.
   Das Akkordeon (.faq-liste, .faq-item, .faq-frage, .faq-plus, .faq-antwort, .faq-innen) steht als Komponente faq-eintrag in base.css,
   Bedienung in ui.js. Hier nur das Raster des Abschnitts und die Kontaktzeile unter dem Kopf.
   Mobil zuerst: Kopf über der Liste. Ab 1024 px links Kopf (4, klebt unter der Kopfzeile), rechts Liste (7).
   Bewegung (Fragen gestaffelt, Wolke folgt der offenen Frage) baut P8 darauf; statisch ist alles lesbar, ohne JS stehen alle Antworten offen. */

/* ---------- Raster: mobil Kopf → Liste ---------- */
.faq-raster { display: grid; gap: var(--space-48); }
.faq-mehr { color: var(--color-text-tertiary); font-size: var(--font-size-small); line-height: var(--leading-loose); }
.faq-mehr span { display: flex; flex-wrap: wrap; gap: 0 var(--space-24); }
.faq-mehr a {
  display: inline-block; padding: var(--space-6) 0; color: var(--color-text-secondary);
  text-decoration-color: var(--color-line-strong); text-underline-offset: var(--space-4);
}

/* ---------- ab 1024 px: links Kopf (klebt), rechts Fragen ---------- */
@media (min-width: 1024px) {
  .faq-raster { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--gap-story2); align-items: start; }
  .faq-kopf { position: sticky; top: calc(var(--kopf-h) + var(--space-48)); }
}