/* ==========================================================================
   110 faq · Owner: wdf-section-builder (Auftrag P7-110)
   Neun Fragen als Aufklapper (faq-eintrag, base.css `.disclosure`, Bedienung ui.js).
   Zustände (hover, active, focus, offen) kommen aus base.css; hier nur Anordnung.
   Mobil eine Spalte: Kopf → Liste → Schlusszeile. Ab 1024: Kopf links stehend, Liste rechts.
   Nur Tokens (style-lock § 0 Regel 8); grid-column nur ab 1024 (Regel 9).
   ========================================================================== */

.faq__grid { min-width: 0; }
.faq__head, .faq__list, .faq__more { min-width: 0; }

/* Liste: obere Haarlinie schließt den ersten Eintrag ab (jeder Eintrag trägt seine untere Linie) */
.faq__list { border-top: 1px solid var(--color-line); }

/* Längenbudget (style-lock § 13): zweizeilige Fragen mit --s-2 statt --s-3 Innenabstand (60 px statt 68 px je Zeile,
   Zielfläche weiter ≥ 56 px durch min-height der Komponente) */
.faq .disclosure__btn { padding-block: var(--s-2); }

/* Frage darf umbrechen, das Zeichen bleibt in der Zeile (Texte 30 % länger, 320 px) */
.faq .disclosure__btn > span:first-child { min-width: 0; text-wrap: pretty; overflow-wrap: break-word; }
.faq .disclosure__panel { overflow-wrap: break-word; }

/* Schlusszeile: eigene Gruppe nach der Liste */
.faq__more { padding-top: var(--s-2); }

@media (min-width: 1024px) {
  .faq__head {
    grid-column: 1 / span 4;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + var(--s-6));
  }
  .faq__list { grid-column: 5 / span 8; }
  .faq__more { grid-column: 5 / span 8; padding-top: var(--s-3); }
}

/* Ohne JavaScript stehen alle Antworten offen und sofort lesbar: kein Einblenden beim Laden (@starting-style der Aufklapper-Panels in base.css greift sonst beim ersten Aufbau) */
html:not(.js) .disclosure__panel { transition: none; }