Gerahmte Sektion mit Kopfzeile, darunter vier nummerierte Schritte in einer Reihe, verbunden durch eine dünne Linie. Ruhig und scanbar — kein Effekt-Lärm. Auf Mobil stapeln die Schritte vertikal mit kurzer Führungslinie.
Ablauf
In vier Schritten zum Ergebnis
Klarer Weg, keine Überraschungen — Sie wissen jederzeit, woran Sie sind.
-
1
Anfrage
Sie schildern uns Ihr Vorhaben — telefonisch oder über das Formular.
-
2
Vor-Ort-Termin
Wir sehen uns alles an und klären offene Fragen direkt bei Ihnen.
-
3
Angebot
Sie erhalten ein festes Angebot mit klaren Positionen und Preisen.
-
4
Umsetzung
Wir arbeiten sauber und zum vereinbarten Termin — Abnahme inklusive.
<section class="ab-klar">
<div class="ab-klar-head">
<p class="ab-klar-eyebrow">Ablauf</p>
<h2 class="ab-klar-title">In vier Schritten zum Ergebnis</h2>
<p class="ab-klar-sub">Klarer Weg, keine Überraschungen – Sie wissen jederzeit, woran Sie sind.</p>
</div>
<ol class="ab-klar-row">
<li class="ab-klar-step">
<span class="ab-klar-num">1</span>
<h3>Anfrage</h3>
<p>Sie schildern uns Ihr Vorhaben – telefonisch oder über das Formular.</p>
</li>
<li class="ab-klar-step">
<span class="ab-klar-num">2</span>
<h3>Vor-Ort-Termin</h3>
<p>Wir sehen uns alles an und klären offene Fragen direkt bei Ihnen.</p>
</li>
<li class="ab-klar-step">
<span class="ab-klar-num">3</span>
<h3>Angebot</h3>
<p>Sie erhalten ein festes Angebot mit klaren Positionen und Preisen.</p>
</li>
<li class="ab-klar-step">
<span class="ab-klar-num">4</span>
<h3>Umsetzung</h3>
<p>Wir arbeiten sauber und zum vereinbarten Termin – Abnahme inklusive.</p>
</li>
</ol>
</section>
<style>
.ab-klar{width:100%;background:#16161a;border:1px solid #26262c;border-radius:18px;
padding:1.6rem;color:#e9e9ee}
@media(min-width:720px){.ab-klar{padding:2.4rem}}
.ab-klar-head{margin:0 0 1.9rem;max-width:52ch}
.ab-klar-eyebrow{margin:0 0 .6rem;font-size:.74rem;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--akzent,#7c87ff)}
.ab-klar-title{margin:0 0 .7rem;font-size:clamp(1.35rem,3vw,1.85rem);line-height:1.15;
letter-spacing:-.01em;color:#f4f4f5;overflow-wrap:break-word}
.ab-klar-sub{margin:0;font-size:.94rem;color:#a1a1aa}
.ab-klar-row{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem;
grid-template-columns:1fr;position:relative}
@media(min-width:720px){
.ab-klar-row{grid-template-columns:repeat(4,1fr);gap:1rem}
.ab-klar-row::before{content:"";position:absolute;top:19px;left:12.5%;right:12.5%;height:1px;
background:linear-gradient(90deg,transparent,#33333c 12%,#33333c 88%,transparent);z-index:0}
}
.ab-klar-step{position:relative;z-index:1;text-align:left}
@media(min-width:720px){.ab-klar-step{text-align:center}}
.ab-klar-num{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
border-radius:50%;font-size:.9rem;font-weight:700;color:#f4f4f5;margin-bottom:.85rem;
background:#17171b;border:1px solid #33333c}
@media(min-width:720px){.ab-klar-num{margin-left:auto;margin-right:auto}}
.ab-klar-step h3{margin:0 0 .35rem;font-size:.98rem;color:#f4f4f5;overflow-wrap:break-word}
.ab-klar-step p{margin:0;font-size:.85rem;color:#a1a1aa;line-height:1.55;max-width:26ch}
@media(min-width:720px){.ab-klar-step p{margin-left:auto;margin-right:auto}}
@media(max-width:719px){
.ab-klar-step{padding-left:3.4rem}
.ab-klar-num{position:absolute;left:0;top:0;margin:0}
.ab-klar-step:not(:last-child)::before{content:"";position:absolute;left:18px;top:38px;bottom:-1.6rem;
width:1px;background:#33333c}
}
</style>