/* =====================================================================
   Секция «Häufige Fragen» — FAQ-аккордеон.
   Слева заголовок, справа список вопросов. Mobile: в стопку.
   ===================================================================== */

.faq { background: #fff; padding: clamp(48px, 7vw, 96px) 0; }

.faq__grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.faq__title { font-size: clamp(30px, 3.6vw, 46px); font-weight: 700; letter-spacing: -0.03em; font-family: "SF Pro Display", "SF UI Display", "Inter", -apple-system, BlinkMacSystemFont, sans-serif; }
.faq__title .dot { color: var(--orange); }

.faq__list { display: flex; flex-direction: column; }

.faq-item { border-bottom: 1px solid #dcdce3; }
.faq-item__q {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 4px; text-align: left;
  font-size: 26; font-weight: 600; color: var(--ink); font-family: "SF Pro Display", "SF UI Display", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 126%;
}
.faq-item__icon { flex: none; position: relative; width: 22px; height: 22px;     margin: 6px 0 auto 0; transition: transform .3s ease; }

/*.faq-item__icon::before,
.faq-item__icon::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--ink);
}
.faq-item__icon::before { width: 22px; height: 4px; }        
.faq-item__icon::after  { width: 4px; height: 22px; }         */
.faq-item.is-open .faq-item__icon { transform: rotate(45deg); }

.faq-item__a {
  overflow: hidden; max-height: 0;
  transition: max-height .3s ease;
  color: var(--muted); font-size: 16px; line-height: 1.6; font-family: "SF Pro Display", "SF UI Display", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}
.faq-item__a-inner { 
  padding: 0 25px 24px 0;
  font-size: 17px;
    line-height: 119%; 
}

.faq__more { margin-top: 32px; }
.faq__more .btn { background: #000; color: #fff; }

@media (max-width: 820px) {
  .faq__grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .faq { padding: 40px 16px; }
  .faq__grid { gap: 24px; }
  .faq-item__q { font-size: 18px; padding: 20px 0; }
  .faq__title { font-size: 32px; }
  .faq__more { margin-top: 24px; text-align: center; }
  .faq__more .btn { width: 100%; }
}