/* ==========================================================================
   faq.css: nur für /faq/ (Präfix fq-). Wird nach dem Haupt-Stylesheet
   geladen. Akzent über rgb(var(--dyn-acc)), Dunkelmodus über body.dark.
   Bausteine: Themen-Chips (fq-chips), Akkordeon (lstg-faq), Quellenzeile
   (fq-src), Hilfe-Karte (fq-hilfe).
   ========================================================================== */

/* ---- Bedienbarkeit ---- */
.fq-page .btn { cursor: pointer; }
.fq-page a:focus-visible, .fq-page .btn:focus-visible { outline: 2px solid rgb(var(--dyn-acc)); outline-offset: 3px; border-radius: 4px; }

/* ---- Hero ---- */
.fq-hero .ht-line, .fq-hero .ht-line.long { font-size: clamp(2.3rem, 6.1vw, 5.4rem); white-space: normal; }
.fq-hero .plead { max-width: 590px; }
.plead a { color: var(--txt); text-decoration: none; border-bottom: 1.5px solid rgba(var(--dyn-acc), .55); }
.plead a:hover { border-color: rgb(var(--dyn-acc)); }
.fq-chips { margin-top: 2rem; max-width: 760px; }
.fq-chips ul { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.fq-chips a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--kap-card);
  font: 700 .84rem/1 "Josefin Sans", sans-serif; letter-spacing: .08em; text-transform: lowercase;
  color: var(--txt); text-decoration: none;
  transition: transform .25s cubic-bezier(.2, .85, .3, 1), border-color .25s, background .25s;
}
.fq-chips a:hover { transform: translateY(-2px); border-color: rgba(var(--dyn-acc), .55); background: var(--kap-card-h); }

/* ---- Akkordeon ---- */
.fq-page .lstg-faq { max-width: 840px; margin-top: 1.6rem; }
.fq-page .lstg-faq-item { scroll-margin-top: 7.5rem; }
.fq-page .lstg-faq-q { cursor: pointer; overflow-wrap: anywhere; hyphens: auto; }
.fq-page .lstg-faq-a { max-width: 70ch; }
.fq-page .lstg-faq-a p { margin: .65rem 0 0; }
.fq-page .lstg-faq-a p:first-child { margin-top: 0; }
.fq-page .lstg-faq-a a { color: var(--txt); text-decoration: none; border-bottom: 1.5px solid rgba(var(--dyn-acc), .55); }
.fq-page .lstg-faq-a a:hover { border-color: rgb(var(--dyn-acc)); }
.fq-page .lstg-faq-a .fq-src {
  margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line);
  font: 700 .7rem/1.6 "Josefin Sans", sans-serif; letter-spacing: .1em; text-transform: lowercase; color: var(--txt-sub);
}
.fq-page .lstg-faq-a .fq-src a { font-weight: 700; display: inline-block; padding: .45em 0; margin: -.45em 0; }
.fq-page .lstg-faq-item[open] .lstg-faq-a { animation: fqAuf .4s cubic-bezier(.22, 1, .36, 1); }
@keyframes fqAuf { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---- Hilfe-Karte ---- */
.fq-hilfe {
  max-width: 760px; margin-top: 1.6rem; padding: 1.6rem 1.7rem; border: 1px solid var(--line);
  border-radius: 14px; background: var(--kap-card);
}
.fq-hilfe p { margin: 0 0 1rem; max-width: 52ch; line-height: 1.7; color: var(--txt-sub); }
.fq-hilfe ul { display: flex; flex-wrap: wrap; gap: .4rem 1.8rem; margin: 0; padding: 0; list-style: none; }
.fq-h-link {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px;
  font: 700 1rem/1.2 "Josefin Sans", sans-serif; letter-spacing: .03em; color: var(--txt); text-decoration: none;
}
.fq-h-link svg { flex: none; color: rgb(var(--dyn-acc)); }
.fq-h-link span { border-bottom: 1.5px solid rgba(var(--dyn-acc), .55); transition: border-color .25s; overflow-wrap: anywhere; }
.fq-h-link:hover span { border-color: rgb(var(--dyn-acc)); }

/* ---- CTA-Band: Telefonzeile ---- */
.fq-page .cta-band-tel { margin: 1.3rem 0 0; font-size: .95rem; color: rgba(255, 255, 255, .74); }
.fq-page .cta-band-tel a { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 1.5px solid #69C5B2; }

/* ---- schmal ---- */
@media (max-width: 560px) {
  .fq-hero .ht-line, .fq-hero .ht-line.long { font-size: clamp(2.05rem, 10.4vw, 2.9rem); }
  .fq-chips a { padding: 0 .9rem; font-size: .8rem; }
  .fq-hilfe { padding: 1.3rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fq-chips a { transition: none; }
  .fq-chips a:hover { transform: none; }
  .fq-page .lstg-faq-item[open] .lstg-faq-a { animation: none; }
}