/* FAQ-Redesign (AP4, WEBSITE_UPDATE_PLAN_2026.md Kap. 8.2)
   Suche + Kategorie-Chips + Top-8 + native <details>-Akkordeons.
   Dark-Mode ueber [data-theme="dark"] (Muster darkmode.css). */

/* ---- Suchfeld ---- */
.faq-suche-feld {
  display: flex;
  align-items: center;
  gap: .6rem;
  border: 1px solid rgba(128, 128, 128, .45);
  border-radius: 50rem;
  padding: .55rem 1.1rem;
  background: #fff;
  max-width: 640px;
}
.faq-suche-feld:focus-within {
  border-color: #FFB500;
  box-shadow: 0 0 0 .2rem rgba(255, 181, 0, .25);
}
.faq-suche-feld i { color: #FFB500; }
.faq-suche-feld input {
  border: 0;
  outline: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1rem;
  background: transparent;
  color: inherit;
}
.faq-suche-feld input::-webkit-search-cancel-button { display: none; }
.faq-suche-reset {
  border: 0;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  opacity: .6;
}
.faq-suche-reset:hover { opacity: 1; }

/* ---- Kategorie-Chips (mobil horizontal scrollbar) ---- */
.faq-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: .5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: .35rem;
}
@media (min-width: 768px) {
  .faq-chips { flex-wrap: wrap; overflow-x: visible; }
}
.faq-chip {
  flex: 0 0 auto;
  border: 1px solid rgba(128, 128, 128, .45);
  border-radius: 50rem;
  background: transparent;
  color: inherit;
  padding: .35rem 1rem;
  font-size: .95rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.faq-chip:hover { border-color: #FFB500; color: #FFB500; }
.faq-chip.active {
  background: #FFB500;
  border-color: #FFB500;
  color: #fff;
  font-weight: 600;
}

/* ---- Top-8-Block ---- */
.faq-top-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem;
  margin-top: .75rem;
}
@media (min-width: 576px) { .faq-top-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .faq-top-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }
.faq-top-karte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  border: 1px solid rgba(128, 128, 128, .35);
  border-radius: 14px;
  padding: .8rem 1rem;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  transition: border-color .15s ease, transform .15s ease;
}
.faq-top-karte:hover {
  border-color: #FFB500;
  text-decoration: none;
  color: inherit;
  transform: translateY(-2px);
}
.faq-top-karte i { color: #FFB500; flex: 0 0 auto; }

/* ---- Kategorien + Details-Akkordeon ---- */
.faq-kat { margin-bottom: 2.5rem; }
.faq-kat-titel {
  font-size: 1.5rem;
  border-left: 5px solid #FFB500;
  padding-left: .75rem;
  margin-bottom: 1rem;
  scroll-margin-top: 110px;
}
.faq-item {
  border: 1px solid rgba(128, 128, 128, .35);
  border-radius: 14px;
  margin-bottom: .6rem;
  background: #fff;
  scroll-margin-top: 110px;
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem 1.1rem;
  font-weight: 600;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: #FFB500; }
.faq-item summary:focus-visible {
  outline: 2px solid #FFB500;
  outline-offset: -2px;
  border-radius: 14px;
}
.faq-chevron { transition: transform .2s ease; color: #FFB500; flex: 0 0 auto; }
.faq-item[open] > summary .faq-chevron { transform: rotate(180deg); }
.faq-item[open] > summary { border-bottom: 1px dashed rgba(128, 128, 128, .35); }
.faq-antwort { padding: 1rem 1.1rem; }
.faq-antwort a { text-decoration: underline; }
.faq-bild {
  display: block;
  max-width: 100%;
  height: auto;
  margin: .75rem 0;
  border-radius: 10px;
}
.faq-anker {
  display: inline-block;
  margin-top: .5rem;
  opacity: .65;
}
.faq-anker:hover { opacity: 1; }
.faq-kat-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}

/* ---- Such-Treffer ---- */
.faq-item mark, .faq-top-karte mark {
  background: #FFB500;
  color: #1a1a2e;
  padding: 0 .1em;
  border-radius: 3px;
}
.faq-versteckt { display: none !important; }

/* ---- Ziel-Hervorhebung bei Deep-Link ---- */
.faq-item:target { border-color: #FFB500; box-shadow: 0 0 0 .15rem rgba(255, 181, 0, .3); }

/* ---- Dark-Mode ---- */
[data-theme="dark"] .faq-suche-feld,
[data-theme="dark"] .faq-item { background: #1f2b47; border-color: #2a3a5c; }
[data-theme="dark"] .faq-top-karte,
[data-theme="dark"] .faq-chip { border-color: #2a3a5c; }
[data-theme="dark"] .faq-chip.active { background: #FFB500; border-color: #FFB500; color: #1a1a2e; }
[data-theme="dark"] .faq-top-karte:hover,
[data-theme="dark"] .faq-chip:hover { border-color: #FFB500; }
[data-theme="dark"] .faq-item[open] > summary { border-bottom-color: #2a3a5c; }