/* Häufige Fragen – gemeinsames Akkordeon (08.10.2026)
   Schlichte Liste nach Vorbild Fireflies.ai: keine Kästen, Frage als Zeile mit dünner Linie,
   rechts „+", das beim Öffnen zu „×" dreht; Antwort klappt weich auf.
   Markup:
   <div class="akk-liste">
     <div class="akk-eintrag">
       <button type="button" class="akk-frage"><span class="akk-frage-text">Frage</span><span class="akk-zeichen" aria-hidden="true"></span></button>
       <div class="akk-antwort"><div class="akk-antwort-innen"><p>Antwort</p></div></div>
     </div>
   </div>
   Verhalten: js/faq-akkordeon.js (setzt .akk-bereit, aria-expanded/-controls, .offen).
   Ohne JS bleiben alle Antworten sichtbar. */

.akk-liste {
 --akk-navy: #1e3a5f;
 --akk-linie: #dde3ea;
 --akk-text: #5a6472;
 max-width: 820px;
 margin: 0 auto;
 border-top: 1px solid var(--akk-linie);
 text-align: left;
}

.akk-eintrag {
 border-bottom: 1px solid var(--akk-linie);
 scroll-margin-top: 90px;
}

/* optionale Überschrift um den Knopf (Gliederung) – ohne eigenes Aussehen */
.akk-kopf {
 margin: 0;
 padding: 0;
 font: inherit;
 letter-spacing: normal;
 text-transform: none;
}

.akk-frage {
 -webkit-appearance: none;
 appearance: none;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1.5rem;
 width: 100%;
 margin: 0;
 padding: 1.5rem 0;
 background: none;
 border: 0;
 border-radius: 0;
 box-shadow: none;
 font: inherit;
 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 font-size: 1.2rem;
 font-weight: 700;
 line-height: 1.35;
 color: var(--akk-navy);
 text-align: left;
 cursor: pointer;
 transition: color 0.2s ease;
}
.akk-frage:hover { color: #2c5282; }
.akk-frage:focus { outline: none; }
.akk-frage:focus-visible {
 outline: 2px solid var(--akk-navy);
 outline-offset: 4px;
 border-radius: 4px;
}

.akk-frage-text {
 flex: 1 1 auto;
 min-width: 0;
 overflow-wrap: break-word;
}

/* „+" aus zwei Strichen; offen um 45° gedreht = „×" */
.akk-zeichen {
 position: relative;
 flex: 0 0 auto;
 width: 1.1rem;
 height: 1.1rem;
 color: var(--akk-navy);
 transition: transform 0.3s ease;
}
.akk-zeichen::before,
.akk-zeichen::after {
 content: "";
 position: absolute;
 left: 0;
 top: 50%;
 width: 100%;
 height: 2px;
 margin-top: -1px;
 background: currentColor;
 border-radius: 2px;
}
.akk-zeichen::after { transform: rotate(90deg); }
.akk-eintrag.offen .akk-zeichen { transform: rotate(45deg); }

/* Antwort: weiches Aufklappen über grid-template-rows 0fr -> 1fr */
.akk-antwort {
 display: grid;
 grid-template-rows: 1fr;
}
.akk-bereit .akk-antwort {
 grid-template-rows: 0fr;
 visibility: hidden;
 transition: grid-template-rows 0.35s ease, visibility 0s linear 0.35s;
}
.akk-bereit .akk-eintrag.offen .akk-antwort {
 grid-template-rows: 1fr;
 visibility: visible;
 transition: grid-template-rows 0.35s ease, visibility 0s linear 0s;
}
.akk-antwort-innen {
 min-height: 0;
 overflow: hidden;
 padding-right: 2.6rem;
 font-size: 1rem;
 line-height: 1.7;
 color: var(--akk-text);
}
.akk-antwort-innen > :first-child { margin-top: 0; }
.akk-antwort-innen > :last-child { margin-bottom: 1.5rem; }
.akk-antwort-innen p { margin: 0 0 0.85rem; color: inherit; font-size: inherit; line-height: inherit; }
.akk-antwort-innen ul { margin: 0.25rem 0 0.85rem; padding-left: 1.25rem; }
.akk-antwort-innen li { margin-bottom: 0.4rem; }
.akk-antwort-innen strong { color: #3d4652; }
.akk-antwort-innen a { color: var(--akk-navy); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 600px) {
 .akk-frage { font-size: 1.05rem; padding: 1.15rem 0; gap: 1rem; }
 .akk-zeichen { width: 0.95rem; height: 0.95rem; }
 .akk-antwort-innen { padding-right: 0; font-size: 0.975rem; }
 .akk-antwort-innen > :last-child { margin-bottom: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
 .akk-zeichen,
 .akk-bereit .akk-antwort,
 .akk-bereit .akk-eintrag.offen .akk-antwort { transition: none; }
}