Reines HTML/CSS, kein Skript — daher barrierearm und auch ohne JS bedienbar. Drei austauschbare Marker: Chevron dreht 180°, Plus wird zum × (45°), Dreieck dreht 90°. Mehrere können gleichzeitig offen sein. Vorbild: Bernstein (Chevron), Hauszeit (Plus→×), NDS (▸).
Wie läuft eine Küchenmontage ab?
Nach kurzer Aufnahme vor Ort erhalten Sie einen festen Termin. Die Montage erledigen wir an einem Tag, sauber und mit Aufmaß.
Was kostet ein unverbindliches Angebot?
Das Angebot ist für Sie kostenlos. Sie zahlen erst, wenn Sie sich für die Umsetzung entscheiden.
In welchem Umkreis sind Sie tätig?
Im gesamten Stadtgebiet und im direkten Umland. Größere Aufträge auf Anfrage auch darüber hinaus.
<div class="fx-faq">
<details open>
<summary>Wie läuft eine Küchenmontage ab?<svg class="fx-chev" viewBox="0 0 24 24" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg></summary>
<div class="fx-faq-a"><p>Nach kurzer Aufnahme vor Ort erhalten Sie einen festen Termin. Die Montage erledigen wir an einem Tag, sauber und mit Aufmaß.</p></div>
</details>
<details>
<summary>Was kostet ein unverbindliches Angebot?<span class="fx-plus" aria-hidden="true">+</span></summary>
<div class="fx-faq-a"><p>Das Angebot ist für Sie kostenlos. Sie zahlen erst, wenn Sie sich für die Umsetzung entscheiden.</p></div>
</details>
<details>
<summary>In welchem Umkreis sind Sie tätig?<span class="fx-tri" aria-hidden="true">▸</span></summary>
<div class="fx-faq-a"><p>Im gesamten Stadtgebiet und im direkten Umland. Größere Aufträge auf Anfrage auch darüber hinaus.</p></div>
</details>
</div>
<style>
.fx-faq{display:flex;flex-direction:column;gap:10px;width:100%;max-width:520px}
.fx-faq details{background:#16161a;border:1px solid #26262c;border-radius:12px;overflow:hidden;
transition:border-color .2s ease}
.fx-faq details[open]{border-color:#3a3a45}
.fx-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;
padding:15px 18px;font-weight:600;font-size:.95rem;color:#f4f4f5}
.fx-faq summary::-webkit-details-marker{display:none}
.fx-faq summary:focus-visible{outline:2px solid var(--akzent, #7c87ff);outline-offset:2px;border-radius:8px}
.fx-faq .fx-faq-a{padding:0 18px 16px;color:#a1a1aa;font-size:.88rem;line-height:1.7}
.fx-faq .fx-faq-a p{margin:0}
/* Variante A · Chevron dreht 180° */
.fx-faq .fx-chev{flex:0 0 auto;width:18px;height:18px;stroke:var(--akzent, #7c87ff);stroke-width:2;fill:none;
transition:transform .25s cubic-bezier(.4,0,.2,1)}
.fx-faq details[open] .fx-chev{transform:rotate(180deg)}
/* Variante B · Plus wird zum × (rotate 45°) */
.fx-faq .fx-plus{flex:0 0 auto;font-size:1.4rem;line-height:1;color:var(--akzent, #7c87ff);font-weight:300;
transition:transform .25s cubic-bezier(.4,0,.2,1)}
.fx-faq details[open] .fx-plus{transform:rotate(45deg)}
/* Variante C · Dreieck ▸ dreht 90° */
.fx-faq .fx-tri{flex:0 0 auto;color:var(--akzent, #7c87ff);font-size:.8rem;display:inline-block;
transition:transform .25s cubic-bezier(.4,0,.2,1)}
.fx-faq details[open] .fx-tri{transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){
.fx-faq .fx-chev,.fx-faq .fx-plus,.fx-faq .fx-tri,.fx-faq details{transition:none}
}
</style>