/* ===== Häufige Fragen als Frage-Boxen (Klasse faq-boxen im Artikeltext) =====
   Markup im Artikel:
     <h2>Häufige Fragen</h2>
     <p>Mindestens ein Übergangssatz.</p>
     <div class="faq-boxen">
       <details open><summary>Frage?</summary><p>Antwort.</p></details>
       <details><summary>Frage?</summary><p>Antwort.</p></details>
     </div>
   Je Frage ein <details> mit <summary>: Ein Klick klappt die Antwort auf, ganz
   ohne JavaScript. Vorbild sind die Frage-Boxen auf bildergalerie-script.de.
   Farben bewusst dezent, Ton in Ton mit dem Orange des Inhalts: ein leichter
   weißer Schleier statt einer eigenen Fläche, Linien und Plus in gedämpftem
   Braun. Das Plus ist reine Grafik (kein Text, den ein Screenreader vorliest)
   und dreht sich beim Öffnen zum Kreuz. */
.faq-boxen {
    margin: 10px 0 18px;
    border: 1px solid rgba(93, 80, 29, 0.3);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.28);
    overflow: hidden;
}
.faq-boxen details {
    border-bottom: 1px solid rgba(93, 80, 29, 0.16);
}
.faq-boxen details:last-child {
    border-bottom: 0;
}
.faq-boxen summary {
    position: relative;
    display: block;
    padding: 10px 40px 10px 12px;
    color: #3b3212;
    font-weight: bold;
    line-height: 1.45;
    list-style: none;
    cursor: pointer;
}
.faq-boxen summary::-webkit-details-marker {
    display: none;
}
.faq-boxen summary::before,
.faq-boxen summary::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 12px;
    height: 2px;
    margin-top: -1px;
    background: #6b5b26;
    transition: transform 0.2s;
}
.faq-boxen summary::after {
    transform: rotate(90deg);
}
.faq-boxen details[open] summary::before {
    transform: rotate(45deg);
}
.faq-boxen details[open] summary::after {
    transform: rotate(135deg);
}
.faq-boxen summary:hover {
    background: rgba(255, 255, 255, 0.25);
}
.faq-boxen summary:focus-visible {
    outline: 2px solid #5d501d;
    outline-offset: -2px;
}
.faq-boxen details > p {
    margin: 0;
    padding: 0 12px 12px;
    line-height: 1.55;
}
@media (prefers-reduced-motion: reduce) {
    .faq-boxen summary::before,
    .faq-boxen summary::after {
        transition: none;
    }
}