/* =========================================================
   FAQ Page Styles — du first
   Accent Purple Theme (match Preise & Blog)
========================================================= */

.faq-page {
  --accent1:#7C4DFF;
  --accent2:#8E5CFF;
  --accent3:#B388FF;
  --border:rgba(255,255,255,.14);
  --glass:rgba(255,255,255,.06);
  --text:#fff;
  --text-dim:rgba(255,255,255,.8);
  --shadow:0 18px 48px rgba(124,77,255,.25);
}

/* ===== Header ===== */
.faq_header {
  text-align: center;
  margin-bottom: clamp(40px,6vw,70px);
}
.faq_header-title {
  font-weight: 1000;
  background: linear-gradient(135deg,#fff,#b388ff,#fff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:.4em;
}
.faq_header-subtitle {
  color: var(--text-dim);
  font-size:1.1rem;
  max-width: 720px;
  margin: 0 auto;
}
.faq_header .search {
  margin-top: 1rem;
}
.faq_header .search .field {
  border-radius:999px;
  border:1px solid var(--border);
  background: var(--glass);
  color:#fff;
  padding:.8rem 1rem .8rem 2.8rem;
  width:100%;
  max-width:620px;
}
.faq_header .search label {
  position: relative;
  left:32px;
  color: var(--accent3);
}

/* ===== Filters ===== */
.faq_content-filters .tags_item {
  border:1px solid var(--border);
  border-radius:999px;
  padding:.5rem 1rem;
  background: var(--glass);
  color:#fff;
  font-weight:700;
  transition:.25s;
}
.faq_content-filters .tags_item:hover {
  border-color: var(--accent3);
  transform:translateY(-2px);
}
.faq_content-filters .tags_item.current {
  border-color: var(--accent2);
  background: linear-gradient(135deg,var(--accent1),var(--accent2));
  box-shadow: var(--shadow);
}

/* ===== Questions Grid ===== */
.questions {
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
  gap: clamp(18px,2vw,26px);
  margin-top: 2rem;
}
.questions_item {
  background: var(--glass);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 12px 28px rgba(0,0,0,.2);
  transition:.25s;
}
.questions_item:hover {
  transform:translateY(-4px);
  border-color: var(--accent2);
  box-shadow: var(--shadow);
}
.questions_item-header {
  padding: 1rem 1rem .5rem;
}
.questions_item-header_title {
  color: var(--accent3);
  font-weight:900;
  margin-bottom:.25rem;
  text-transform: uppercase;
  font-size:.9rem;
}
.questions_item-header_main {
  color: var(--text);
  line-height:1.55;
}
.questions_item-body {
  padding: .75rem 1rem 1rem;
  border-top:1px solid var(--border);
}
.questions_item-body_title {
  color: var(--accent2);
  font-weight:900;
  text-transform: uppercase;
  margin-bottom:.4rem;
  font-size:.85rem;
}
.questions_item-body_main {
  color: var(--text-dim);
  line-height:1.6;
}
.questions_item-body_main .link {
  color: #a5b2ff;
}
.questions_item-body_main .link:hover {
  color:#fff;
}

/* ===== Accordion ===== */
.accordion-item {
  background: var(--glass);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  margin-bottom:12px;
  transition:.25s;
}
.accordion-item:hover {
  border-color: var(--accent3);
  box-shadow: var(--shadow);
}
.accordion-button {
  color:#fff;
  background:transparent;
  padding:1rem;
}
.accordion-button .icon {
  margin-left:auto;
  color: var(--accent3);
  transition:.25s;
}
.accordion-button:not(.collapsed) .icon {
  transform:rotate(180deg);
  color:var(--accent2);
}
.accordion-body {
  color: var(--text-dim);
  padding:1rem;
  border-top:1px solid var(--border);
}

/* ===== Form (sticky) ===== */
.faq_form .wrapper {
  border-radius:16px;
  background: var(--glass);
  border:1px solid var(--border);
  padding:1.2rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.faq_form-title {
  font-weight:900;
  margin-bottom:.8rem;
  color:#fff;
}
.faq_form .field {
  width:100%;
  border:1px solid var(--border);
  border-radius:12px;
  background: rgba(255,255,255,.05);
  color:#fff;
  padding:.7rem 1rem;
  margin-bottom:.7rem;
}
.faq_form .field::placeholder {
  color:rgba(255,255,255,.6);
}
.faq_form .btn.btn--accent {
  border-radius:999px;
  background: linear-gradient(135deg,var(--accent1),var(--accent2));
  color:#fff;
  font-weight:900;
  padding:.9rem 1.4rem;
  box-shadow: var(--shadow);
  transition:.25s;
}
.faq_form .btn.btn--accent:hover {
  transform:translateY(-2px);
  box-shadow:0 20px 56px rgba(124,77,255,.45);
}