/*
 * Zweck: Page-CSS nur für /faq/
 * Verwendet von: faq.php (dynamisch via $page_css)
 * Abhängigkeiten: base.css (Tokens), sections.css (.faq-list, .faq-item shared)
 */

/* ─── Kategorie-Pill-Navigation oben ─── */
.faq-katnav-section {
  padding: 0.5rem 0 1.5rem;
}
.faq-katnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.faq-katnav a {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  background: var(--bg-white);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  transition: all var(--t);
}
.faq-katnav a:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
/* Mobile: horizontal scroll statt wrap */
@media (max-width: 640px) {
  .faq-katnav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.4rem;
  }
  .faq-katnav a { white-space: nowrap; flex-shrink: 0; }
}

/* ─── Kategorien-Block + Anker-Offset für Sticky-Header ─── */
.faq-kategorien { padding-top: 0.5rem; }
.faq-kategorie {
  padding: 1.5rem 0 2rem;
  scroll-margin-top: 90px;
}
.faq-kategorie + .faq-kategorie {
  border-top: 1px solid var(--line);
}
.faq-kategorie > h2 {
  font-size: 1.35rem;
  margin-bottom: 1rem;
  color: var(--accent);
}
.faq-kategorie-hinweis {
  font-size: 0.92rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Anker-Offset für direkt verlinkte <details> (z.B. /faq/#was-kostet-uebersetzung) */
.faq-item { scroll-margin-top: 90px; }

/* ─── Kontakt-Hint unten ─── */
.faq-kontakt-hint {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding: 1.5rem;
}
.faq-kontakt-hint h2 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}
.faq-kontakt-hint p {
  color: var(--text-soft);
  margin-bottom: 1.25rem;
}
.faq-kontakt-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}