/* FAQ-Liste (Vorlage urbanstudio.de: Fragen als Akkordeon mit Plus-Zeichen, eine Antwort offen). Markup: js/faq.js */
.faq-section { margin: 32px 0 8px; }
.faq-section > h2 { margin: 0 0 16px; font-weight: 600; }
.faq-list { position: relative; overflow: hidden; }
.faq-list::after { position: absolute; bottom: 0; left: 0; width: 100%; content: ''; height: 0; z-index: 10; border-top: 1px solid var(--us-stroke-weak, rgba(0,0,0,.15)); }
.faq-list .faq-item { position: relative; }
.faq-list .faq-item::before { position: absolute; top: 0; left: 0; width: 100%; content: ''; height: 0; z-index: 10; border-top: 1px solid var(--us-stroke-weak, rgba(0,0,0,.15)); }
.faq-list .faq-item .faq-question {
  display: block; position: relative; width: 100%; text-align: left; background: none; border: 0; border-radius: 0; cursor: pointer;
  font: inherit; font-size: 1rem; line-height: 1.5; font-weight: 400; margin: 0; padding: 16px 40px 16px 0;
  color: var(--us-textcolor, var(--us-text-strong)); transition: var(--us-transition, all .2s ease-in-out);
}
.faq-list .faq-item .faq-question:focus-visible { outline: none; text-decoration: underline; box-shadow: none; }
.faq-list .faq-item .faq-question::after {
  position: absolute; top: 50%; right: 0; font-family: 'Font Awesome 7 Pro', 'Font Awesome 6 Pro'; font-weight: 300; content: '+';
  text-align: center; transform: translate(-50%, -50%); transition: var(--us-transition, all .2s ease-in-out);
}
.faq-list .faq-item .faq-answer { max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; transition: var(--us-transition, all .2s ease-in-out); }
.faq-list .faq-item.open { background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 5%, rgba(255,255,255,.33) 15%, rgba(255,255,255,.2) 35%, rgba(255,255,255,0) 100%); }
body.dark .faq-list .faq-item.open { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 5%, rgba(0,0,0,.1) 15%, rgba(0,0,0,.066) 35%, rgba(0,0,0,0) 100%); }
.faq-list .faq-item.open .faq-question { font-weight: 600; }
.faq-list .faq-item.open .faq-question::after { transform: translate(-50%, -50%) rotate(45deg); }
.faq-list .faq-item.open .faq-answer { max-height: 10000px; opacity: 1; pointer-events: all; padding: 0 0 24px 0; }
.faq-list .faq-item .faq-answer p { margin: 0 0 16px; }
.faq-list .faq-item .faq-answer > *:last-child { margin-bottom: 0; }
.faq-list .faq-item .faq-answer ul, .faq-list .faq-item .faq-answer ol { margin: 0 0 16px; padding-left: 1.4em; }
@media (min-width: 835px) { .faq-list .faq-item .faq-answer { padding-right: 64px; } .faq-list .faq-item .faq-question { padding: 20px 48px 20px 0; } }
@media (prefers-reduced-motion: reduce) { .faq-list .faq-item .faq-question, .faq-list .faq-item .faq-answer, .faq-list .faq-item .faq-question::after { transition: none; } }
