/* ============================================================
   faq.css – FAQ-Sektion (Accordion)
   Verwendet in: template-parts/faq.php
   Abhängig von: tokens.css, base.css (nutzt .container, .ht-eyebrow, .ht-title-dim)
   ============================================================ */

/* .ht-faq – Sektion mit hellem Grund. */
.ht-faq{background:var(--gray);color:var(--ink);padding:10rem 0}
/* .ht-faq__intro – zentrierte Einleitung. */
.ht-faq__intro{text-align:center;max-width:42.5rem;margin:0 auto 1.75rem}
/* .ht-faq__title – H2 der Sektion. */
.ht-faq__title{font-size:clamp(1.875rem,3.6vw,2.875rem);font-weight:700;line-height:1.1;letter-spacing:-.02em;margin:0;color:#0a0a0a}

/* .faq-grid – zwei Spalten mit Fragen. */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:4.5rem}

/* .faq-item – eine Frage-Antwort-Einheit mit Trennlinie. */
.faq-item{border-bottom:1px solid rgba(10,10,10,.12)}
/* .faq-q – die anklickbare Frage (Button). */
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:none;border:none;padding:1.5rem 0;cursor:pointer;text-align:left;font-size:1.0625rem;font-weight:600;color:#0a0a0a;font-family:var(--font);transition:color .2s ease}
.faq-q:hover{color:var(--orange)}
/* .faq-ic – Plus-/Schließen-Symbol; .is-open kehrt die Farben um. */
.faq-ic{flex:none;width:1.875rem;height:1.875rem;border-radius:0;border:1.5px solid var(--orange);color:var(--orange);display:flex;align-items:center;justify-content:center;font-size:1.25rem;line-height:1;transition:transform .3s ease,background .3s ease,color .3s ease}
.faq-ic.is-open{background:var(--orange);color:#fff}
/* .faq-a – aufklappbarer Antwortbereich (Höhe per JS animiert). */
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.2,.7,.2,1)}
/* .ht-faq__answer – Fließtext der Antwort. */
.ht-faq__answer{font-size:0.9375rem;line-height:1.7;color:var(--muted-light);margin:0 0 1.5rem}

/* ---------- Responsive ---------- */
@media(max-width:1024px){ .ht-faq{padding:6rem 0} }
@media(max-width:600px){
  .faq-grid{grid-template-columns:1fr}
  .ht-faq{padding:4.5rem 0}
}