Visual links, Text rechts, drei Mini-Kennzahlen als Beleg. Ruhig und scanbar — kein Effekt-Lärm. Mobil stapelt sich die Sektion automatisch. Bild als CSS-Verlauf angedeutet (im Projekt durch <img> ersetzen).
Seit 2008
Über uns
Handwerk, auf das man sich verlassen kann.
Wir sind ein Familienbetrieb aus der Region. Was wir anfangen, bringen wir sauber zu Ende — ohne Überraschungen auf der Rechnung.
Jeder Auftrag wird vom Meister abgenommen. Erst wenn alles sitzt, sind wir fertig.
- 16Jahre Erfahrung
- 1.200+Projekte
- 4,9 ★Bewertung
<section class="au-klar">
<div class="au-klar-media">
<!-- statt Verlauf hier ein <img> einsetzen -->
<span class="au-klar-badge">Seit 2008</span>
</div>
<div class="au-klar-body">
<p class="au-klar-eyebrow">Über uns</p>
<h2 class="au-klar-title">Handwerk, auf das man sich verlassen kann.</h2>
<p class="au-klar-text">Wir sind ein Familienbetrieb aus der Region. Was wir
anfangen, bringen wir sauber zu Ende – ohne Überraschungen auf der Rechnung.</p>
<p class="au-klar-text">Jeder Auftrag wird vom Meister abgenommen. Erst wenn alles
sitzt, sind wir fertig.</p>
<ul class="au-klar-stats">
<li><b>16</b><small>Jahre Erfahrung</small></li>
<li><b>1.200+</b><small>Projekte</small></li>
<li><b>4,9 ★</b><small>Bewertung</small></li>
</ul>
<a class="au-klar-link" href="#">Mehr über uns
<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>
</section>
<style>
.au-klar{display:grid;gap:2rem;align-items:center;width:100%;
grid-template-columns:1fr;background:#16161a;border:1px solid #26262c;border-radius:18px;
padding:1.6rem;color:#e9e9ee}
@media(min-width:720px){.au-klar{grid-template-columns:1.05fr .95fr;padding:2.4rem}}
.au-klar-media{position:relative;min-height:230px;border-radius:14px;overflow:hidden;
border:1px solid #26262c;
background:radial-gradient(120% 100% at 75% 15%,#34344a 0%,#23232f 45%,#15151b 100%)}
.au-klar-badge{position:absolute;left:1rem;bottom:1rem;font-size:.74rem;font-weight:700;
letter-spacing:.04em;color:#f4f4f5;padding:.5rem .9rem;border-radius:10px;
background:rgba(15,15,18,.55);border:1px solid rgba(255,255,255,.14);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.au-klar-eyebrow{margin:0 0 .7rem;font-size:.74rem;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--akzent,#7c87ff)}
.au-klar-title{margin:0 0 1rem;font-size:clamp(1.4rem,3.2vw,1.95rem);line-height:1.15;
letter-spacing:-.01em;color:#f4f4f5}
.au-klar-text{margin:0 0 1rem;font-size:.95rem;color:#a1a1aa;max-width:46ch}
.au-klar-stats{list-style:none;display:flex;flex-wrap:wrap;gap:1.8rem;margin:1.5rem 0 1.4rem;padding:0}
.au-klar-stats b{display:block;font-size:1.5rem;font-weight:800;color:#f4f4f5;line-height:1}
.au-klar-stats small{display:block;margin-top:.3rem;font-size:.74rem;color:#a1a1aa}
.au-klar-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}
.au-klar-link svg{width:18px;height:18px;transition:transform .25s ease}
.au-klar-link:hover svg,.au-klar-link:focus-visible svg{transform:translateX(4px)}
.au-klar-link:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.au-klar-link svg{transition:none}}
</style>