Zentriertes Abschluss-Band: Eyebrow, Headline, ein Satz, ein Primary- und ein Secondary-Button. Ruhig und fokussiert — genau ein klares Ziel, ein leiser Zweit-Weg. Buttons stapeln mobil automatisch, Headline bricht sauber um.
Bereit anzufangen?
Holen Sie sich Ihr unverbindliches Angebot.
In der Regel meldet sich unser Team innerhalb eines Werktags. Kostenlos, ehrlich kalkuliert und ohne Kleingedrucktes.
<section class="sc-klar" aria-labelledby="sc-klar-h">
<p class="sc-klar-eyebrow">Bereit anzufangen?</p>
<h2 class="sc-klar-title" id="sc-klar-h">Holen Sie sich Ihr unverbindliches Angebot.</h2>
<p class="sc-klar-text">In der Regel meldet sich unser Team innerhalb eines Werktags.
Kostenlos, ehrlich kalkuliert und ohne Kleingedrucktes.</p>
<div class="sc-klar-actions">
<a class="sc-btn sc-btn-primary" href="#">Angebot anfragen
<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>
<a class="sc-btn sc-btn-ghost" href="tel:+490000000">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.6a2 2 0 0 1-.4 2.1L8 9.6a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.4c.8.3 1.7.5 2.6.6a2 2 0 0 1 1.7 2z"/></svg>
Anrufen
</a>
</div>
</section>
<style>
.sc-klar{position:relative;width:100%;text-align:center;
background:#16161a;border:1px solid #26262c;border-radius:20px;
padding:2.4rem 1.6rem;color:#e9e9ee;overflow-wrap:break-word}
@media(min-width:640px){.sc-klar{padding:3.4rem 2.6rem}}
.sc-klar::before{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;
background:radial-gradient(90% 130% at 50% -10%,rgba(124,135,255,.10) 0%,transparent 60%)}
.sc-klar>*{position:relative}
.sc-klar-eyebrow{margin:0 0 .8rem;font-size:.72rem;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--akzent,#7c87ff)}
.sc-klar-title{margin:0 auto .9rem;max-width:20ch;overflow-wrap:break-word;
font-size:clamp(1.55rem,4.4vw,2.3rem);line-height:1.12;letter-spacing:-.02em;color:#f4f4f5}
.sc-klar-text{margin:0 auto 1.9rem;max-width:52ch;font-size:1rem;color:#a1a1aa}
.sc-klar-actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}
.sc-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
font-size:.95rem;font-weight:600;padding:.85rem 1.5rem;border-radius:12px;
border:1px solid transparent;cursor:pointer;line-height:1;
transition:transform .2s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease}
.sc-btn svg{width:18px;height:18px}
.sc-btn-primary{color:#0f0f12;font-weight:700;
background:var(--akzent,#7c87ff);box-shadow:0 10px 24px rgba(124,135,255,.32)}
.sc-btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(124,135,255,.42)}
.sc-btn-primary:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:3px}
.sc-btn-ghost{color:#f4f4f5;background:transparent;border-color:#26262c}
.sc-btn-ghost:hover{transform:translateY(-2px);border-color:#3a3a45;background:#1c1c22}
.sc-btn-ghost:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.sc-btn{transition:none}}
</style>