Design · Bausteine-Dossier

Seiten-Sektion

FAQ-Sektion

Das Akkordeon nicht nackt, sondern als ganze, gerahmte Seiten-Sektion — mit Eyebrow, Headline und Kontext. Links die ruhige, scanbare Variante für Handwerk & Dienstleistung, rechts die edle mit Akzent-Rand, Aufklapp-Animation und „Noch Fragen?"-Kachel. Beide barrierefrei über natives <details>, copy-paste-fähig.

FAQ-Sektion — klar, zweispaltig

Pol 2 · Klarheit Anlass: Handwerk, Dienstleistung

Links Eyebrow, Headline und ein kurzer Kontakt-Hinweis (sticky), rechts ein natives <details>-Akkordeon mit fünf typischen Fragen. Ruhig und scanbar — Chevron dreht beim Öffnen. Mobil stapelt die Sektion, Fragen brechen sauber um.

Häufige Fragen

Gut zu wissen, bevor Sie anfragen.

Noch Fragen? Melden Sie sich — wir antworten in der Regel am selben Werktag.

Zum Kontakt
Was kostet ein unverbindliches Angebot?

Die Erstberatung und das Angebot sind für Sie kostenlos und ohne Verpflichtung. Sie entscheiden in Ruhe, ob wir zusammenpassen.

Wie schnell bekomme ich einen Termin?

In der Regel innerhalb weniger Werktage. Bei dringenden Fällen finden wir meist kurzfristig eine Lösung — sprechen Sie uns einfach an.

In welchem Umkreis sind Sie tätig?

Wir arbeiten in der Stadt und im Umkreis von rund 50 Kilometern. Ob Ihr Ort dazugehört, klären wir kurz am Telefon.

Übernehmen Sie auch kleine Aufträge?

Ja. Vom kleinen Handgriff bis zum größeren Projekt — jeder Auftrag wird gleich sorgfältig behandelt.

Wie kann ich bezahlen?

Sie zahlen bequem per Überweisung nach Abschluss. Auf Wunsch ist auch Ratenzahlung möglich — das besprechen wir vorab.

<section class="faqk">
  <div class="faqk-intro">
    <p class="faqk-eyebrow">Häufige Fragen</p>
    <h2 class="faqk-title">Gut zu wissen, bevor Sie anfragen.</h2>
    <p class="faqk-hint">Noch Fragen? Melden Sie sich – wir antworten in der Regel am selben Werktag.</p>
    <a class="faqk-link" href="#">Zum Kontakt
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
           stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
    </a>
  </div>
  <div class="faqk-list">
    <details class="faqk-item" name="faqk">
      <summary>
        Was kostet ein unverbindliches Angebot?
        <svg class="faqk-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
             stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
      </summary>
      <p class="faqk-answer">Die Erstberatung und das Angebot sind für Sie kostenlos und ohne
        Verpflichtung. Sie entscheiden in Ruhe, ob wir zusammenpassen.</p>
    </details>
    <!-- weitere <details class="faqk-item" name="faqk"> … analog -->
  </div>
</section>

<style>
.faqk{display:grid;gap:2rem;align-items:start;width:100%;
  grid-template-columns:1fr;background:#16161a;border:1px solid #26262c;border-radius:18px;
  padding:1.6rem;color:#e9e9ee}
@media(min-width:720px){.faqk{grid-template-columns:.85fr 1.15fr;gap:2.6rem;padding:2.4rem}}
.faqk-intro{position:sticky;top:96px}
.faqk-eyebrow{margin:0 0 .7rem;font-size:.74rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--akzent,#7c87ff)}
.faqk-title{margin:0 0 1rem;font-size:clamp(1.4rem,3.2vw,1.95rem);line-height:1.15;
  letter-spacing:-.01em;color:#f4f4f5}
.faqk-hint{margin:0 0 1.2rem;font-size:.95rem;color:#a1a1aa;max-width:34ch}
.faqk-link{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.92rem;
  color:var(--akzent,#7c87ff);padding:.3rem .1rem;border-radius:6px}
.faqk-link svg{width:18px;height:18px;transition:transform .25s ease}
.faqk-link:hover svg,.faqk-link:focus-visible svg{transform:translateX(4px)}
.faqk-link:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:3px}
.faqk-list{display:flex;flex-direction:column;gap:.7rem}
.faqk-item{border:1px solid #26262c;border-radius:12px;background:#17171b;overflow:hidden}
.faqk-item>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:1rem 1.15rem;font-size:.96rem;font-weight:600;
  color:#f4f4f5;overflow-wrap:break-word;transition:background .2s ease}
.faqk-item>summary::-webkit-details-marker{display:none}
.faqk-item>summary:hover{background:#1c1c22}
.faqk-item>summary:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:-2px;border-radius:12px}
.faqk-ic{flex:0 0 auto;width:20px;height:20px;color:var(--akzent,#7c87ff);transition:transform .25s ease}
.faqk-item[open] .faqk-ic{transform:rotate(180deg)}
.faqk-answer{margin:0;padding:0 1.15rem 1.1rem;font-size:.92rem;color:#a1a1aa;overflow-wrap:break-word}
@media (prefers-reduced-motion:reduce){.faqk-link svg,.faqk-ic{transition:none}}
</style>

FAQ-Sektion — Craft, gerahmt mit CTA-Kachel

Pol 1 · Craft Anlass: Marke, Premium, Dienstleistung

Gerahmtes Akkordeon: Akzent-Rand plus Akzent-Balken am geöffneten Item, sanftes Aufklappen über grid-template-rows: 0fr → 1fr mit Fade, Plus→X-Morph des Icons. Daneben eine „Noch Fragen?"-Kachel mit ruhendem Glow. Natives <details> — kein JS nötig. Alle Bewegungen ruhen bei prefers-reduced-motion.

Häufige Fragen

Antworten, bevor Sie fragen.

Wie läuft die Zusammenarbeit ab?

Erst hören wir zu, dann planen wir. Sie erhalten ein klares Angebot mit festem Rahmen — und einen festen Ansprechpartner von Anfang bis Abnahme.

Gibt es eine Gewährleistung?

Selbstverständlich. Auf unsere Arbeit gilt die gesetzliche Gewährleistung, und bei Rückfragen sind wir auch danach für Sie da.

Bleibt der Preis wie besprochen?

Ja. Was im Angebot steht, gilt. Sollte sich unterwegs etwas ändern, sprechen wir es vorher mit Ihnen ab — nie erst auf der Rechnung.

Kann ich einzelne Leistungen buchen?

Sie buchen genau das, was Sie brauchen — vom einzelnen Baustein bis zum Rundum-Paket. Wir beraten Sie, was in Ihrem Fall sinnvoll ist.

<section class="faqc">
  <div class="faqc-main">
    <p class="faqc-eyebrow">Häufige Fragen</p>
    <h2 class="faqc-title">Antworten, <span>bevor</span> Sie fragen.</h2>
    <div class="faqc-list">
      <details class="faqc-item" name="faqc" open>
        <summary class="faqc-q">
          Wie läuft die Zusammenarbeit ab?
          <span class="faqc-morph" aria-hidden="true"></span>
        </summary>
        <div class="faqc-wrap"><div class="faqc-inner">
          <p class="faqc-a">Erst hören wir zu, dann planen wir. Sie erhalten ein klares
            Angebot mit festem Rahmen – und einen festen Ansprechpartner bis zur Abnahme.</p>
        </div></div>
      </details>
      <!-- weitere <details class="faqc-item" name="faqc"> … analog -->
    </div>
  </div>
  <aside class="faqc-cta">
    <span class="faqc-cta-glow" aria-hidden="true"></span>
    <span class="faqc-cta-mark" aria-hidden="true">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
           stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
    </span>
    <h3>Noch Fragen?</h3>
    <p>Ihre Frage ist nicht dabei? Schreiben Sie uns – wir melden uns persönlich zurück.</p>
    <a class="faqc-btn" href="#">Frage stellen
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
           stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
    </a>
  </aside>
</section>

<style>
.faqc{position:relative;display:grid;gap:1.8rem;align-items:start;width:100%;
  grid-template-columns:1fr;overflow:hidden;
  background:radial-gradient(130% 120% at 0% 0%,#1c1c28 0%,#141319 55%,#101014 100%);
  border:1px solid #26262c;border-radius:20px;padding:1.8rem;color:#e9e9ee}
@media(min-width:820px){.faqc{grid-template-columns:1.25fr .75fr;gap:2.2rem;padding:2.4rem}}
.faqc-main{min-width:0}
.faqc-eyebrow{margin:0 0 .8rem;display:inline-flex;align-items:center;gap:.6em;font-size:.74rem;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--akzent,#7c87ff)}
.faqc-eyebrow::before{content:"";width:26px;height:1px;background:var(--akzent,#7c87ff)}
.faqc-title{margin:0 0 1.4rem;font-size:clamp(1.6rem,3.6vw,2.15rem);line-height:1.1;
  letter-spacing:-.02em;color:#f4f4f5}
.faqc-title span{color:var(--akzent,#7c87ff)}
.faqc-list{display:flex;flex-direction:column;gap:.65rem}
.faqc-item{position:relative;border:1px solid #26262c;border-radius:14px;background:#17171b;
  transition:border-color .3s ease,background .3s ease}
.faqc-item::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;
  background:var(--akzent,#7c87ff);opacity:0;transform:scaleY(.4);transform-origin:center;
  transition:opacity .3s ease,transform .3s ease}
.faqc-item[open]{border-color:color-mix(in srgb,var(--akzent,#7c87ff) 55%,#26262c);background:#191922}
.faqc-item[open]::before{opacity:1;transform:scaleY(1)}
.faqc-q{list-style:none;cursor:pointer;display:flex;align-items:center;gap:1rem;
  padding:1.05rem 1.2rem;font-size:.97rem;font-weight:600;color:#f4f4f5;overflow-wrap:break-word}
.faqc-q::-webkit-details-marker{display:none}
.faqc-q:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:-2px;border-radius:14px}
.faqc-item[open] .faqc-q{color:var(--akzent,#7c87ff)}
/* Plus → X-Morph aus zwei Strichen */
.faqc-morph{flex:0 0 auto;position:relative;width:20px;height:20px;margin-left:auto}
.faqc-morph::before,.faqc-morph::after{content:"";position:absolute;left:50%;top:50%;
  width:14px;height:2px;border-radius:2px;background:currentColor;
  transform:translate(-50%,-50%);transition:transform .3s cubic-bezier(.34,1.4,.5,1)}
.faqc-morph::after{transform:translate(-50%,-50%) rotate(90deg)}
.faqc-item[open] .faqc-morph::before{transform:translate(-50%,-50%) rotate(135deg)}
.faqc-item[open] .faqc-morph::after{transform:translate(-50%,-50%) rotate(45deg)}
/* sanftes Aufklappen: Höhe + Fade über grid-rows */
.faqc-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s ease}
.faqc-item[open] .faqc-wrap{grid-template-rows:1fr}
.faqc-inner{overflow:hidden;min-height:0}
.faqc-a{margin:0;padding:0 1.2rem 1.15rem 1.2rem;font-size:.93rem;color:#a1a1aa;
  opacity:0;transform:translateY(-4px);transition:opacity .3s ease .04s,transform .3s ease .04s;
  overflow-wrap:break-word}
.faqc-item[open] .faqc-a{opacity:1;transform:none}
/* CTA-Kachel mit Glow */
.faqc-cta{position:relative;align-self:start;overflow:hidden;border-radius:16px;
  border:1px solid rgba(255,255,255,.1);padding:1.5rem 1.4rem;
  background:radial-gradient(120% 120% at 20% 0%,#1e1e2b 0%,#161620 60%,#131318 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px rgba(0,0,0,.35)}
.faqc-cta-glow{position:absolute;width:180px;height:180px;top:-60px;right:-50px;border-radius:50%;
  filter:blur(52px);opacity:.5;z-index:0;pointer-events:none;
  background:radial-gradient(circle,var(--akzent,#7c87ff) 0%,transparent 70%);
  animation:faqc-pulse 6s ease-in-out infinite alternate;will-change:opacity,transform}
@keyframes faqc-pulse{0%{opacity:.35;transform:scale(1)}100%{opacity:.6;transform:scale(1.15)}}
.faqc-cta>*{position:relative;z-index:1}
.faqc-cta-mark{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  margin-bottom:1rem;color:#fff;background:linear-gradient(135deg,var(--akzent,#7c87ff),#42466e);
  box-shadow:0 8px 20px rgba(0,0,0,.35)}
.faqc-cta-mark svg{width:22px;height:22px}
.faqc-cta h3{margin:0 0 .45rem;font-size:1.1rem;color:#f4f4f5;letter-spacing:-.01em}
.faqc-cta p{margin:0 0 1.1rem;font-size:.88rem;color:#a1a1aa}
.faqc-btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.9rem;
  color:#fff;padding:.7rem 1.15rem;border-radius:10px;
  background:linear-gradient(135deg,var(--akzent,#7c87ff),#5a63d6);
  box-shadow:0 8px 22px color-mix(in srgb,var(--akzent,#7c87ff) 35%,transparent);
  transition:transform .2s ease,box-shadow .2s ease}
.faqc-btn svg{width:16px;height:16px;transition:transform .25s ease}
.faqc-btn:hover,.faqc-btn:focus-visible{transform:translateY(-2px);
  box-shadow:0 12px 28px color-mix(in srgb,var(--akzent,#7c87ff) 45%,transparent);outline:none}
.faqc-btn:hover svg,.faqc-btn:focus-visible svg{transform:translateX(3px)}
.faqc-btn:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .faqc-item,.faqc-item::before,.faqc-wrap,.faqc-a,.faqc-morph::before,.faqc-morph::after,
  .faqc-btn,.faqc-btn svg{transition:none}
  .faqc-cta-glow{animation:none}
}
</style>

FAQ-Sektion — zentriert, schmal

Pol 2 · Klarheit Anlass: Landingpage, schmale Inhaltsspalte

Eine ruhige, mittig gesetzte FAQ-Spalte (max. 720 px) mit Eyebrow, Headline und Lead darüber, darunter ein Linien-Akkordeon ohne Kacheln. Runder Plus/Minus-Indikator rechts, sanftes Aufklappen über grid-template-rows: 0fr → 1fr. Natives <details> — kein JS. Passt in jede zentrierte Sektion.

Häufige Fragen

Alles Wichtige auf einen Blick.

Die häufigsten Fragen kurz beantwortet. Ist Ihre nicht dabei, schreiben Sie uns einfach.

Wie lange dauert die Umsetzung?

Das hängt vom Umfang ab. Kleinere Aufträge sind oft in wenigen Tagen erledigt, größere planen wir gemeinsam mit einem festen Zeitrahmen.

Fallen Kosten für die Beratung an?

Nein. Das erste Gespräch und das Angebot sind kostenlos und unverbindlich — Sie gehen keinerlei Verpflichtung ein.

Kann ich später noch Änderungen anmelden?

Ja. Solange wir noch nicht in der Umsetzung sind, passen wir den Umfang jederzeit an. Danach besprechen wir Änderungen offen und transparent.

Wie erreiche ich Sie bei Rückfragen?

Am schnellsten per Telefon oder E-Mail. Sie haben einen festen Ansprechpartner, der Ihre Anfrage vom Anfang bis zum Abschluss begleitet.

<section class="faqz">
  <p class="faqz-eyebrow">Häufige Fragen</p>
  <h2 class="faqz-title">Alles Wichtige auf einen Blick.</h2>
  <p class="faqz-lead">Die häufigsten Fragen kurz beantwortet. Ist Ihre
    nicht dabei, schreiben Sie uns einfach.</p>
  <div class="faqz-list">
    <details class="faqz-item" name="faqz">
      <summary class="faqz-q">
        Wie lange dauert die Umsetzung?
        <span class="faqz-sign" aria-hidden="true"></span>
      </summary>
      <div class="faqz-wrap"><div class="faqz-inner">
        <p class="faqz-a">Das hängt vom Umfang ab. Kleinere Aufträge sind
          oft in wenigen Tagen erledigt, größere planen wir gemeinsam.</p>
      </div></div>
    </details>
    <!-- weitere <details class="faqz-item" name="faqz"> … analog -->
  </div>
</section>

<style>
.faqz{width:100%;max-width:720px;margin-inline:auto;text-align:center;
  background:#16161a;border:1px solid #26262c;border-radius:20px;
  padding:2rem 1.4rem;color:#e9e9ee}
@media(min-width:720px){.faqz{padding:2.8rem 2.4rem}}
.faqz-eyebrow{margin:0 0 .7rem;font-size:.74rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--akzent,#7c87ff)}
.faqz-title{margin:0 0 .7rem;font-size:clamp(1.5rem,3.4vw,2rem);line-height:1.15;
  letter-spacing:-.015em;color:#f4f4f5}
.faqz-lead{margin:0 auto 1.8rem;max-width:46ch;font-size:.96rem;color:#a1a1aa}
.faqz-list{display:flex;flex-direction:column;gap:.6rem;text-align:left}
.faqz-item{border-bottom:1px solid #26262c}
.faqz-item:first-child{border-top:1px solid #26262c}
.faqz-q{list-style:none;cursor:pointer;display:flex;align-items:center;gap:1rem;
  padding:1.05rem .4rem;font-size:.98rem;font-weight:600;color:#f4f4f5;
  overflow-wrap:break-word;transition:color .2s ease}
.faqz-q::-webkit-details-marker{display:none}
.faqz-q:hover{color:var(--akzent,#7c87ff)}
.faqz-q:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:2px;border-radius:8px}
.faqz-item[open] .faqz-q{color:var(--akzent,#7c87ff)}
/* runder Plus/Minus-Indikator rechts */
.faqz-sign{flex:0 0 auto;position:relative;width:26px;height:26px;margin-left:auto;
  border:1px solid #33333d;border-radius:50%}
.faqz-sign::before,.faqz-sign::after{content:"";position:absolute;left:50%;top:50%;
  width:11px;height:2px;border-radius:2px;background:currentColor;
  transform:translate(-50%,-50%);transition:transform .3s cubic-bezier(.34,1.4,.5,1),opacity .3s ease}
.faqz-sign::after{transform:translate(-50%,-50%) rotate(90deg)}
.faqz-item[open] .faqz-sign{border-color:var(--akzent,#7c87ff)}
.faqz-item[open] .faqz-sign::after{opacity:0;transform:translate(-50%,-50%) rotate(0)}
/* sanftes Aufklappen über grid-rows */
.faqz-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s ease}
.faqz-item[open] .faqz-wrap{grid-template-rows:1fr}
.faqz-inner{overflow:hidden;min-height:0}
.faqz-a{margin:0;padding:0 .4rem 1.1rem;font-size:.93rem;color:#a1a1aa;overflow-wrap:break-word}
@media (prefers-reduced-motion:reduce){
  .faqz-q,.faqz-sign::before,.faqz-sign::after,.faqz-wrap{transition:none}
}
</style>

FAQ-Sektion — Tabs, kategorisiert

Pol 1 · Craft Anlass: viele Fragen, Themen-Bündelung

Viele Fragen nach Themen sortiert: eine Tab-Leiste mit gleitendem Akzent-Indikator schaltet zwischen Frage-Gruppen um, das aktive Panel blendet sanft ein. Barrierefrei über role="tablist"/aria-selected, Pfeiltasten wechseln die Tabs. Innerhalb jeder Gruppe natives <details>-Akkordeon.

Häufige Fragen

Wonach suchen Sie?

Was bieten Sie genau an?

Wir begleiten Sie von der ersten Idee bis zum fertigen Ergebnis — mit persönlicher Beratung und einem festen Ansprechpartner.

In welchem Gebiet sind Sie tätig?

In der Stadt und im Umkreis von rund 50 Kilometern. Ob Ihr Ort dazugehört, klären wir kurz vorab.

<section class="faqt">
  <p class="faqt-eyebrow">Häufige Fragen</p>
  <h2 class="faqt-title">Wonach suchen Sie?</h2>
  <div class="faqt-tabs" role="tablist" aria-label="Fragen-Kategorien">
    <span class="faqt-ind" aria-hidden="true"></span>
    <button class="faqt-tab" role="tab" id="faqt-t1" aria-selected="true"
            aria-controls="faqt-p1" type="button">Allgemein</button>
    <button class="faqt-tab" role="tab" id="faqt-t2" aria-selected="false"
            aria-controls="faqt-p2" tabindex="-1" type="button">Ablauf</button>
    <button class="faqt-tab" role="tab" id="faqt-t3" aria-selected="false"
            aria-controls="faqt-p3" tabindex="-1" type="button">Kosten</button>
  </div>

  <div class="faqt-panel is-active" role="tabpanel" id="faqt-p1" aria-labelledby="faqt-t1">
    <div class="faqt-list">
      <details class="faqt-item" name="faqt-p1" open>
        <summary class="faqt-q">Was bieten Sie genau an?
          <svg class="faqt-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor"
               stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
               aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
        </summary>
        <p class="faqt-a">Wir begleiten Sie von der ersten Idee bis zum fertigen
          Ergebnis – mit einem festen Ansprechpartner.</p>
      </details>
      <!-- weitere <details class="faqt-item" name="faqt-p1"> … analog -->
    </div>
  </div>
  <!-- weitere Panels (faqt-p2, faqt-p3) analog, mit hidden -->
  <div class="faqt-panel" role="tabpanel" id="faqt-p2" aria-labelledby="faqt-t2" hidden>…</div>
  <div class="faqt-panel" role="tabpanel" id="faqt-p3" aria-labelledby="faqt-t3" hidden>…</div>
</section>

<style>
.faqt{width:100%;background:radial-gradient(120% 130% at 100% 0%,#1b1b26 0%,#141319 55%,#101014 100%);
  border:1px solid #26262c;border-radius:20px;padding:1.8rem;color:#e9e9ee}
@media(min-width:720px){.faqt{padding:2.4rem}}
.faqt-eyebrow{margin:0 0 .8rem;display:inline-flex;align-items:center;gap:.6em;font-size:.74rem;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--akzent,#7c87ff)}
.faqt-eyebrow::before{content:"";width:26px;height:1px;background:var(--akzent,#7c87ff)}
.faqt-title{margin:0 0 1.6rem;font-size:clamp(1.5rem,3.4vw,2.05rem);line-height:1.1;
  letter-spacing:-.02em;color:#f4f4f5}
/* Tab-Leiste mit gleitendem Indikator */
.faqt-tabs{position:relative;display:flex;flex-wrap:wrap;gap:.3rem;
  padding:.35rem;margin:0 0 1.5rem;border:1px solid #26262c;border-radius:12px;background:#141418}
.faqt-tab{position:relative;z-index:1;flex:1 1 auto;border:0;cursor:pointer;
  padding:.6rem 1rem;border-radius:9px;background:transparent;color:#a1a1aa;
  font-size:.9rem;font-weight:600;white-space:nowrap;transition:color .25s ease}
.faqt-tab:hover{color:#e9e9ee}
.faqt-tab[aria-selected="true"]{color:#fff}
.faqt-tab:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:2px}
.faqt-ind{position:absolute;z-index:0;top:.35rem;bottom:.35rem;left:0;width:0;
  border-radius:9px;background:linear-gradient(135deg,var(--akzent,#7c87ff),#5a63d6);
  box-shadow:0 6px 18px -6px color-mix(in srgb,var(--akzent,#7c87ff) 60%,transparent);
  transition:transform .32s cubic-bezier(.34,1.1,.5,1),width .32s cubic-bezier(.34,1.1,.5,1)}
/* Panels */
.faqt-panel{display:none}
.faqt-panel.is-active{display:block;animation:faqt-fade .35s ease}
@keyframes faqt-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.faqt-list{display:flex;flex-direction:column;gap:.6rem}
.faqt-item{border:1px solid #26262c;border-radius:12px;background:#17171b;transition:border-color .25s ease}
.faqt-item[open]{border-color:color-mix(in srgb,var(--akzent,#7c87ff) 45%,#26262c)}
.faqt-q{list-style:none;cursor:pointer;display:flex;align-items:center;gap:1rem;
  padding:.95rem 1.1rem;font-size:.95rem;font-weight:600;color:#f4f4f5;overflow-wrap:break-word}
.faqt-q::-webkit-details-marker{display:none}
.faqt-q:hover{color:var(--akzent,#7c87ff)}
.faqt-q:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:-2px;border-radius:12px}
.faqt-ic{flex:0 0 auto;width:18px;height:18px;margin-left:auto;color:var(--akzent,#7c87ff);
  transition:transform .25s ease}
.faqt-item[open] .faqt-ic{transform:rotate(180deg)}
.faqt-item[open] .faqt-q{color:var(--akzent,#7c87ff)}
.faqt-a{margin:0;padding:0 1.1rem 1rem;font-size:.92rem;color:#a1a1aa;overflow-wrap:break-word}
@media (prefers-reduced-motion:reduce){
  .faqt-tab,.faqt-ind,.faqt-item,.faqt-ic{transition:none}
  .faqt-panel.is-active{animation:none}
}
</style>

<script>
document.querySelectorAll('.faqt').forEach(function(root){
  var tabs=Array.prototype.slice.call(root.querySelectorAll('[role="tab"]'));
  var ind=root.querySelector('.faqt-ind');
  if(!tabs.length) return;
  function move(tab){
    if(!ind) return;
    ind.style.width=tab.offsetWidth+'px';
    ind.style.transform='translateX('+(tab.offsetLeft-tab.parentElement.clientLeft)+'px)';
  }
  function select(tab){
    tabs.forEach(function(t){
      var on=t===tab;
      t.setAttribute('aria-selected',on?'true':'false');
      t.tabIndex=on?0:-1;
      var panel=document.getElementById(t.getAttribute('aria-controls'));
      if(panel){panel.classList.toggle('is-active',on);panel.hidden=!on;}
    });
    move(tab);
  }
  tabs.forEach(function(tab,i){
    tab.addEventListener('click',function(){select(tab);});
    tab.addEventListener('keydown',function(e){
      var next;
      if(e.key==='ArrowRight'||e.key==='ArrowDown') next=tabs[(i+1)%tabs.length];
      else if(e.key==='ArrowLeft'||e.key==='ArrowUp') next=tabs[(i-1+tabs.length)%tabs.length];
      if(next){e.preventDefault();next.focus();select(next);}
    });
  });
  // Indikator initial platzieren (auch bei Resize)
  var active=root.querySelector('[role="tab"][aria-selected="true"]')||tabs[0];
  move(active);
  window.addEventListener('resize',function(){
    move(root.querySelector('[role="tab"][aria-selected="true"]')||tabs[0]);
  });
});
</script>