/* ============================================================
   bt-faq-v2.css — FAQ V2 UI 
   Zweck: Styles für SideNav + Accordion + Sticky Mobile Bar
   Patch: 2026-02-24 (V2 Start)
============================================================ */

.bt-faq-v2 {
  max-width: 1475px;
  margin: 24px auto;
  padding: 10px 0 40px;

  /* falls der Content-Wrapper schon genug Abstand gibt */
  margin-top: 0;
  padding-top: 0;
}

.bt-faq-v2__inner {
  display: grid;
  gap: 18px;
}

/* ============================================================
   Content Cards
============================================================ */

.bt-faq-v2__section {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  background: #fff;
  padding: 20px 18px;
  margin-bottom: 40px;

  /* Anchor-Offset für Hash-Navigation (Browser-Scroll ohne JS) */
  scroll-margin-top: 90px;
}

.bt-faq-v2__title {
  margin: 0 0 12px;
  font-weight: 600;
}

.bt-faq-v2__item {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  overflow: clip;
  background: #fff;
}

/* ============================================================
   Accordion
============================================================ */

.bt-faq-v2__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;

  color: #414544;
  width: 100%;
  text-align: left;

  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.04);

  /* Hinweis: Original evtl. Tippfehler ("10px 10 0 0") */
  border-radius: 10px 10px 0 0;

  cursor: pointer;
  margin-bottom: 20px;
}

.bt-faq-v2__btn:hover {
  color: #414544;
  background: rgba(0, 0, 0, 0.09);
}

.bt-faq-v2__icon {
  width: 10px;
  height: 10px;

  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;

  transform: rotate(45deg);
  transition: transform 0.18s ease;
  opacity: 0.7;
}

.bt-faq-v2__btn[aria-expanded="true"] .bt-faq-v2__icon {
  transform: rotate(-135deg);
}

.bt-faq-v2__panel {
  overflow: hidden;
  transition: opacity 0.2s ease;
}

.bt-faq-v2__panel[hidden] {
  display: block;
  height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.bt-faq-v2__panel:not([hidden]) {
  height: auto;
  opacity: 1;
  margin-top: 10px;
}

.bt-faq-v2__answer {
  padding: 14px 16px;
  background: #fafafa;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.bt-faq-v2__intro {
  margin: 0 0 14px;
  opacity: 0.85;
}

/* ============================================================
   Page Intro (unter H1)
============================================================ */

.bt-faq-v2__page-intro {
  margin: 0 0 22px;
  max-width: 980px;
  opacity: 0.9;
  line-height: 1.55;
}

.bt-faq-v2__item + .bt-faq-v2__item {
  margin-top: 10px;
}

/* ============================================================
   Active States
============================================================ */

.bt-faq-v2__btn[aria-expanded="true"] {
  background: #3f4047;
  color: #fff;
}

.bt-faq-v2__btn[aria-expanded="true"] .bt-faq-v2__icon {
  opacity: 1;
}

/* PATCH 2026-02-25
   Zweck: Geschlossene Fragen dürfen durch Focus/Active nicht "wie offen" aussehen
   Warum: Fokus bleibt nach Klick, verschwindet erst bei Tabwechsel/Konsole -> wirkt wie Bug */
.bt-faq-v2__btn[aria-expanded="false"]:focus,
.bt-faq-v2__btn[aria-expanded="false"]:focus-visible,
.bt-faq-v2__btn[aria-expanded="false"]:active {
  background: rgba(0, 0, 0, 0.04);
  color: #414544;
}

.bt-faq-v2__section.is-active-section {
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

/* ============================================================
   Layout
============================================================ */

.bt-faq-v2__layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: start;
  margin-top: 70px;
}

.bt-faq-v2__content {
  min-width: 0;
}

/* ============================================================
   SideNav
============================================================ */

.bt-faq-v2__sidenav {
  position: sticky;
  top: 100px;

  /* SideNav kann intern scrollen (links), ohne Page-Scroll zu beeinflussen */
  max-height: calc(100vh - 120px);
  overflow: auto;
  overscroll-behavior: auto;

  /* ==========================================================
     PATCH 2026-02-25
     Zweck:
       scrollIntoView() soll aktive Kategorie nicht
       direkt an den oberen Rand "knallen".
     Warum:
       Ohne scroll-padding wird das aktive Element
       exakt an die Containerkante gescrollt.
       Mit scroll-padding bleibt oben/unten Luft.
  ========================================================== */
  scroll-padding-top: 14px;
  scroll-padding-bottom: 14px;

  padding-right: 6px; /* Platz für Scrollbar */

  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  background: #fff;
  padding: 14px;

  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(0, 0, 0, 0.28) transparent; /* Firefox */

  /* Reserviert Platz, damit nichts "springt" wenn die Scrollbar erscheint */
  scrollbar-gutter: stable;
}

.bt-faq-v2__navtitle {
  margin: 0 0 10px;
  font-size: 16px;
}

.bt-faq-v2__navlist,
.bt-faq-v2__sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bt-faq-v2__navlist {
  display: grid;
  gap: 8px;
}

.bt-faq-v2__navitem {
  border: 0;
  background: transparent;
  padding: 0;
}

.bt-faq-v2__catlink {
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;

  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #1a1a1a;
  font-weight: 400;

  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}

.bt-faq-v2__catlink:hover {
  background: rgba(0, 0, 0, 0.04);
  text-decoration: none;
}

.bt-faq-v2__catlink.is-active {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  font-weight: 650;
}

/* ============================================================
   SideNav Sublist — sanftes Auf-/Zuklappen (Desktop)
   Zweck: Kein "BAM" beim Scrollspy-Wechsel
   Warum: display:none ist nicht animierbar; wir nutzen max-height + opacity (nur im Nav)
============================================================ */
/* Default: geschlossen */
.bt-faq-v2__sublist {
  display: grid;
  max-height: 0;
  opacity: 0;
  overflow: hidden;

  /* CLOSED: keine Lücken */
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  padding-left: 12px;
  list-style: none;
  gap: 6px;

  /* CLOSE (Default): darf etwas direkter sein 
  Feineinstellung*/
  transition:
    max-height 400ms cubic-bezier(0.4, 0, 0.2, 1),
    /*der Kasten schrumpft*/ opacity 240ms cubic-bezier(0.4, 0, 0.2, 1),
    /*Inhalt blendet aus*/ margin 240ms cubic-bezier(0.4, 0, 0.2, 1); /*Abstand oben/unten fährt aus*/
}

/* Offen (Layout + Zielhöhe + Sichtbarkeit) */
.bt-faq-v2__navitem.is-open .bt-faq-v2__sublist {
  margin-top: 10px;
  margin-bottom: 18px;
  /* echte Höhe kommt aus JS (scrollHeight) */
  max-height: var(--btFaqV2SubH, 520px);
  opacity: 1;
  /* OPEN: langsameres "Anfahren", damit es nicht runterknallt
  Feineinstellung*/
  transition:
    max-height var(--btFaqV2SubDur, 700ms) cubic-bezier(0.3, 0, 0.2, 1),
    /*der Kasten wächst*/ opacity 240ms cubic-bezier(0.3, 0, 0.2, 1),
    /*Inhalt blendet ein*/ margin 240ms cubic-bezier(0.3, 0, 0.2, 1); /*Abstand oben/unten fährt rein*/
}

/* Mobile: Tap-only, keine Animation */
@media (max-width: 920px) {
  .bt-faq-v2__sublist {
    transition: none;
  }
}

/* Motion-Safety */
@media (prefers-reduced-motion: reduce) {
  .bt-faq-v2__sublist {
    transition: none;
  }
}

.bt-faq-v2__sublink {
  display: block;
  padding: 6px 10px;
  border-radius: 10px;
  text-decoration: none;

  margin-left: 14px;
  margin-bottom: 6px;

  border: 1px solid rgba(0, 0, 0, 0.05);
  color: #1a1a1a;

  font-size: 13px;
  line-height: 1.25;

  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}

.bt-faq-v2__sublink:hover {
  background: rgba(0, 0, 0, 0.04);
  text-decoration: none;
}

.bt-faq-v2__sublink.is-active {
  background: #3f4047;
  color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.bt-faq-v2__sublink.is-active:hover {
  background: #3f4047;
  color: #fff;
}

/* ============================================================
   Breakpoint (≤920px)
============================================================ */

@media (max-width: 920px) {
  .bt-faq-v2__layout {
    grid-template-columns: 1fr;
    gap: 5rem;
  }

  .bt-faq-v2__sidenav {
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .bt-faq-v2__sublist {
    margin-bottom: 10px;
  }
}

/* ============================================================
   Sticky Mobile Bar (≤920px)
============================================================ */

.bt-faq-v2__sticky-mobile {
  position: fixed;

  top: 75px;
  left: 42px;
  right: 42px;

  z-index: 999;

  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.bt-faq-v2__sticky-btn {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 16px;
  background: transparent;
  cursor: pointer;

  text-align: left;
  color: #414544;

  border-radius: 18px 18px 0 0;
}

.bt-faq-v2__sticky-btn:hover {
  background: transparent;
}

.bt-faq-v2__sticky-btn:focus,
.bt-faq-v2__sticky-btn:active {
  background: transparent;
  outline: none;
}

/* Label */
.bt-faq-v2__sticky-label {
  display: block;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  color: #414544;

  font-size: 13px;
  opacity: 0.8;
}

.bt-faq-v2__sticky-label strong {
  font-size: 16px;
  font-weight: 600;
  opacity: 1;
}

/* Der aktuelle Kategoriename darf nie weiß werden */
.bt-faq-v2__sticky-label strong,
.bt-faq-v2__sticky-label [data-bt-faq-v2-sticky-current] {
  color: #414544;
}

/* Safety: Farben bleiben stabil */
.bt-faq-v2__sticky-btn:hover .bt-faq-v2__sticky-label,
.bt-faq-v2__sticky-btn:focus .bt-faq-v2__sticky-label,
.bt-faq-v2__sticky-btn:active .bt-faq-v2__sticky-label,
.bt-faq-v2__sticky-btn:hover .bt-faq-v2__sticky-label strong,
.bt-faq-v2__sticky-btn:focus .bt-faq-v2__sticky-label strong,
.bt-faq-v2__sticky-btn:active .bt-faq-v2__sticky-label strong {
  color: #414544;
}

.bt-faq-v2__sticky-icon {
  /* PATCH 2026-02-26
     Zweck: Icon exakt 3px kürzer (optische Feinjustierung)
     Warum: Wirkt aktuell minimal zu dominant neben dem Text */
  width: 17px; /* 20px → 17px */
  height: 20px;
  position: relative;
  display: inline-block;

  border: 0;
  opacity: 0.95;
}

.bt-faq-v2__sticky-icon::before,
.bt-faq-v2__sticky-icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;

  height: 3px; /* bleibt kräftig */
  background: #414544;
  border-radius: 999px;

  transition:
    transform 0.18s ease,
    top 0.18s ease;
}

/* obere Linie */
.bt-faq-v2__sticky-icon::before {
  top: 4px;
}

/* untere Linie (mehr Abstand) */
.bt-faq-v2__sticky-icon::after {
  top: 14px; /* +4px Abstand */
}

/* Open → X (zentriert) */
.bt-faq-v2__sticky-mobile.is-open .bt-faq-v2__sticky-icon::before {
  top: 9px;
  transform: rotate(45deg) scaleX(1.18); /* optisch ~3px länger */
}

.bt-faq-v2__sticky-mobile.is-open .bt-faq-v2__sticky-icon::after {
  top: 9px;
  transform: rotate(-45deg) scaleX(1.18); /* optisch ~3px länger */
}

/* Safety gegen Theme Active/Hover */
.bt-faq-v2__sticky-btn:hover .bt-faq-v2__sticky-icon,
.bt-faq-v2__sticky-btn:focus .bt-faq-v2__sticky-icon,
.bt-faq-v2__sticky-btn:active .bt-faq-v2__sticky-icon {
  border-right: #414544;
  border-bottom: #414544;
}

/* Dropdown offen (Hamburger->X handled via ::before/::after) */
.bt-faq-v2__sticky-mobile.is-open .bt-faq-v2__sticky-icon {
  opacity: 1;
}

.bt-faq-v2__sticky-dropdown {
  padding: 10px 12px 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.bt-faq-v2__sticky-dropdown a {
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;

  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #1a1a1a;

  margin-top: 8px;
}

.bt-faq-v2__sticky-dropdown a:hover {
  background: rgba(0, 0, 0, 0.04);
  text-decoration: none;
}

.bt-faq-v2__sticky-dropdown a.is-active {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  font-weight: 650;
}

/* Desktop: nie anzeigen */
@media (min-width: 921px) {
  .bt-faq-v2__sticky-mobile {
    display: none !important;
  }
}

/* ============================================================
   Sticky Sentinel (IO Target)
============================================================ */

.bt-faq-v2__sticky-sentinel {
  height: 1px;
  width: 100%;
}