/* ════════════════════════════════════════════════════════════════════════
   PaneScale — FAQ der Startseite (src/pages/home.mjs → faqSection, assets/js/qa.js)
   Links Überschrift + Artikel, rechts Themen-Filter und nummerierte Fragen; eine ist offen.
   Die offene Frage bekommt oben eine Fuge im Markenverlauf, die von links einläuft.
   ════════════════════════════════════════════════════════════════════════ */

.qa-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.45fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    'head main'
    'notes main';
  column-gap: clamp(48px, 7vw, 104px);
}

/* ── Links: Überschrift ──────────────────────────────────────────────── */

.qa-head {
  grid-area: head;
}
.qa-head h2 {
  font-size: var(--fs-h2);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  line-height: 1.04;
  color: var(--display-ink);
}
.qa-sub {
  margin-top: 26px;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.6;
}
.qa-sub a {
  color: var(--text-2);
  text-decoration: underline;
  text-decoration-color: var(--line-3);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.qa-sub a:hover {
  color: #fff;
  text-decoration-color: currentColor;
}

/* ── Links: Artikel ──────────────────────────────────────────────────── */

.qa-notes {
  grid-area: notes;
  align-self: start;
  margin-top: 64px;
}
.qa-notes ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.qa-notes li a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.qa-note-t {
  color: var(--text-2);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  transition: color 0.2s;
}
.qa-notes li a .i {
  grid-row: 1 / 3;
  grid-column: 2;
  font-size: 16px;
  color: var(--ink-accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.qa-notes li a:hover .qa-note-t {
  color: #fff;
}
.qa-notes li a:hover .i,
.qa-notes li a:focus-visible .i {
  opacity: 1;
  transform: none;
}
.qa-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 22px;
  font-size: 14.5px;
  font-weight: 550;
  color: var(--ink-accent);
  transition: color 0.2s;
}
.qa-all .i {
  transition: transform 0.2s var(--ease);
}
.qa-all:hover {
  color: #fff;
}
.qa-all:hover .i {
  transform: translateX(3px);
}

/* ── Rechts: Themen ──────────────────────────────────────────────────── */

.qa-main {
  grid-area: main;
  min-width: 0;
}
.qa-topics {
  display: flex;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 28px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.018);
  overflow-x: auto;
  scrollbar-width: none;
}
.qa-topics[hidden] {
  display: none;
}
.qa-topics::-webkit-scrollbar {
  display: none;
}
.qa-topic {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.2s, background 0.2s, box-shadow 0.2s;
}
.qa-topic span {
  font: 500 11px/1 var(--mono);
  color: var(--faint);
  transition: color 0.2s;
}
.qa-topic:hover {
  color: var(--text);
}
.qa-topic[aria-pressed='true'] {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.qa-topic[aria-pressed='true'] span {
  color: var(--ink-accent);
}

/* ── Rechts: Fragen ──────────────────────────────────────────────────── */

.qa-list {
  border-top: 1px solid var(--line);
}
.qa-item {
  --qa-bleed: 16px; /* höchstens Seitenrand (--gutter) minus Luft */
  position: relative;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.3s;
}
.qa-item[hidden] {
  display: none;
}
/* Fuge im Markenverlauf über der offenen Frage */
.qa-item::before {
  content: '';
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--grad);
  opacity: 0.85;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease);
  pointer-events: none;
}
/* Offene Frage = Glaskarte, die seitlich etwas über die Zeilen hinausragt: Nummer und Knopf haben Luft,
   das Licht endet weich in runden Ecken statt an einer Kante. Die Fuge oben liegt auf ihrer geraden Kante. */
.qa-item::after {
  content: '';
  position: absolute;
  inset: -1px calc(-1 * var(--qa-bleed));
  border-radius: 16px;
  background:
    radial-gradient(55% 120% at 0% 0%, rgba(111, 139, 255, 0.1), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.034), rgba(255, 255, 255, 0.012));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 28px 60px -34px rgba(0, 0, 0, 0.85);
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.45s var(--ease), transform 0.5s var(--ease);
  pointer-events: none;
}
.qa-item[open]:not(.is-closing)::before {
  transform: scaleX(1);
}
.qa-item[open]:not(.is-closing)::after {
  opacity: 1;
  transform: none;
}
/* Trennlinien direkt an der Karte ausblenden, sonst laufen sie in ihren Rand */
.qa-item[open]:not(.is-closing),
.qa-item:has(+ .qa-item[open]:not(.is-closing)) {
  border-bottom-color: transparent;
}
.qa-list {
  transition: border-color 0.3s;
}
.qa-list:has(> .qa-item:first-child[open]:not(.is-closing)) {
  border-top-color: transparent;
}

.qa-item summary {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 32px;
  align-items: center;
  column-gap: 16px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
}
.qa-item summary::-webkit-details-marker {
  display: none;
}
.qa-n {
  font: 500 12.5px/1 var(--mono);
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  transition: color 0.3s;
}
.qa-q {
  font-size: clamp(17px, 1.45vw, 19px);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.35;
  color: var(--text-2);
  transition: color 0.25s;
}
.qa-ic {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  transition: transform 0.45s var(--ease), border-color 0.25s, background 0.25s;
}
.qa-ic::before,
.qa-ic::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.5px;
  margin: -0.75px 0 0 -6px;
  border-radius: 1px;
  background: var(--muted);
  transition: background 0.25s;
}
.qa-ic::after {
  transform: rotate(90deg);
}
.qa-item summary:hover .qa-q {
  color: #fff;
}
.qa-item summary:hover .qa-n {
  color: var(--muted);
}
.qa-item summary:hover .qa-ic {
  border-color: var(--line-3);
  transform: rotate(90deg);
}
.qa-item summary:hover .qa-ic::before,
.qa-item summary:hover .qa-ic::after {
  background: var(--text);
}
.qa-item[open]:not(.is-closing) .qa-q {
  color: #fff;
}
.qa-item[open]:not(.is-closing) .qa-n {
  color: var(--ink-accent);
}
.qa-item[open]:not(.is-closing) .qa-ic {
  transform: rotate(45deg);
  border-color: rgba(111, 139, 255, 0.45);
  background: var(--accent-soft);
}
.qa-item[open]:not(.is-closing) .qa-ic::before,
.qa-item[open]:not(.is-closing) .qa-ic::after {
  background: #c9d4ff;
}
.qa-item summary:focus-visible {
  outline-offset: 6px;
}

.qa-body {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.qa-inner {
  padding: 0 64px 30px;
}
.qa-inner p {
  max-width: 64ch;
  color: rgba(237, 237, 240, 0.7);
  font-size: 16px;
  line-height: 1.72;
}
.qa-inner p a {
  color: var(--text);
  border-bottom: 1px solid var(--line-3);
  transition: border-color 0.2s;
}
.qa-inner p a:hover {
  border-color: currentColor;
}
.qa-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--ink-accent);
  transition: color 0.2s;
}
.qa-more .i {
  transition: transform 0.2s var(--ease);
}
.qa-more:hover {
  color: #fff;
}
.qa-more:hover .i {
  transform: translateX(3px);
}

/* ── Rechts: Fuß ─────────────────────────────────────────────────────── */

.qa-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 30px;
  color: var(--muted);
  font-size: 15px;
}
.qa-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 6px 0 13px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  transition: border-color 0.2s, background 0.2s;
}
.qa-search kbd:first-of-type {
  margin-left: 4px;
}
.qa-search:hover {
  border-color: var(--line-3);
  background: rgba(255, 255, 255, 0.04);
}
.qa-foot > a {
  color: var(--text);
  border-bottom: 1px solid var(--line-3);
  transition: border-color 0.2s;
}
.qa-foot > a:hover {
  border-color: currentColor;
}

/* ── Schmal ──────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .qa-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: 'head' 'main' 'notes';
    row-gap: 40px;
  }
  .qa-notes {
    margin-top: 16px;
  }
}
@media (max-width: 640px) {
  .qa-item {
    --qa-bleed: 10px;
  }
  .qa-item::after {
    border-radius: 13px;
  }
  /* Handy: Themen umbrechen statt angeschnitten seitlich zu scrollen */
  .qa-topics {
    flex-wrap: wrap;
    gap: 6px;
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
  }
  .qa-topic {
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .qa-item summary {
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    column-gap: 12px;
    padding: 20px 0;
  }
  .qa-ic {
    width: 30px;
    height: 30px;
  }
  .qa-inner {
    padding: 0 0 24px 42px;
  }
  .qa-inner p {
    font-size: 15.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qa-item::before,
  .qa-item::after,
  .qa-ic,
  .qa-notes li a .i {
    transition: none;
  }
}