/* ==========================================================================
FAQ: Liste aufklappbarer Fragen auf Basis von <details>/<summary> (kein JS).

Markup:
  <div class="faq">
    <details class="faq-item">
      <summary>Frage?</summary>
      <p>Antwort …</p>
    </details>
    …
  </div>

Der Marker (+ / −) wird per ::after erzeugt, der native Marker ausgeblendet.
========================================================================== */

.faq {
    margin-top: 2.5rem;
    border-top: 1px solid var(--line);
}

details.faq-item {
    border-bottom: 1px solid var(--line);

    summary {
        list-style: none;
        cursor: pointer;
        padding: 1.15rem 2.5rem 1.15rem 0;
        position: relative;

        font-weight: 500;
        font-size: 1.05rem;
        color: var(--title);

        &::-webkit-details-marker {
            display: none;
        }

        &:after {
            content: '+';
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.4rem;
            font-weight: 300;
            line-height: 1;
            transition: transform 0.2s ease;
        }
    }

    &[open] summary:after {
        content: '\2212';
    }

    p {
        margin: 0 0 1.15rem;
        max-width: 52rem;
        text-align: left;
    }
}