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 KontaktWas 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>