/* ===========================================================================
   ONLINE-PREDIGT · SCHICHT 4/4 — SEITE: FAQ S25 (Design-v5, E6)
   Rest-Strecke ohne Abgabe-Prototyp (NACHTRAG-EIN-KATALOG §9) — nach System:
   Kategorie-Sidebar (predigten-Muster) + <details>-Aufklapper (frage-Optik).
   =========================================================================== */
@layer seite {
  /* Gesamt-Breite (PO 2026-08-06): volle Behälter-Breite war ~20 % zu breit — 62rem
     (992 px) klemmt Kopf UND Raster an derselben Kante (1232 → 992 px @1280 = −19,5 %;
     dasselbe Muster wie /spenden aus derselben Runde). Der .seiten-kopf-Override ist
     seitenLOKAL — diese Datei lädt nur auf /faq. */
  .seiten-kopf { max-inline-size: 62rem; }
  .faq-raster {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: var(--raum-7);
    align-items: start;
    padding-block-end: var(--raum-8);
    max-inline-size: 62rem;
  }
  .faq-sidebar { display: grid; gap: var(--raum-1); position: sticky; inset-block-start: 6rem; }
  .faq-sidebar-link {
    padding: var(--raum-2) var(--raum-3);
    border-radius: var(--radius-s);
    color: var(--text-2);
    font-size: var(--txt-etikett);
    font-weight: var(--gewicht-halb);
  }
  .faq-sidebar-link:hover { background: var(--flaeche-3); color: var(--text); }
  .faq-spalte { display: grid; gap: var(--raum-6); }
  .faq-gruppe { scroll-margin-block-start: 6rem; }
  .faq-liste { display: grid; gap: var(--raum-2); margin-block-start: var(--raum-3); }
  .faq-liste details {
    background: var(--flaeche-2);
    border: var(--linie-breit) solid var(--linie);
    border-radius: var(--radius-m);
  }
  .faq-liste summary {
    display: block;
    padding: var(--raum-3) var(--raum-4);
    cursor: pointer;
    font-size: var(--txt-klein);
    font-weight: var(--gewicht-halb);
  }
  .faq-liste summary::-webkit-details-marker { display: none; }
  .faq-liste .antwort {
    padding: 0 var(--raum-4) var(--raum-4);
    color: var(--text-2);
    font-size: var(--txt-klein);
    max-inline-size: var(--lese-max);
  }
  .faq-liste .antwort a { color: var(--marke); }
  .faq-kontakt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--raum-3) var(--raum-5);
    background: var(--flaeche-4);
  }
  .faq-kontakt h2 { font-size: var(--txt-gross); }
  .faq-kontakt .hinweis { color: var(--text-2); font-size: var(--txt-etikett); }
  @media (max-width: 48rem) {
    .faq-raster { grid-template-columns: minmax(0, 1fr); }
    .faq-sidebar { position: static; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
  }
}