Drei Karten nebeneinander, die mittlere dezent hervorgehoben und mit „Empfohlen"-Badge. Häkchen-Liste, ein CTA je Karte — ruhig und direkt vergleichbar. Mobil stapeln sich die Karten automatisch, kein Horizontal-Überlauf.
Basis
Für den Einstieg mit dem Nötigsten.
49 €/ Monat
- 1 Projekt
- E-Mail-Support
- Team-Zugänge
Empfohlen
Komfort
Für alle, die planbar wachsen wollen.
99 €/ Monat
- 10 Projekte
- Priorisierter Support
- 3 Team-Zugänge
Premium
Für höchste Ansprüche ohne Limits.
199 €/ Monat
- Unbegrenzte Projekte
- Persönlicher Ansprechpartner
- Unbegrenzte Team-Zugänge
<section class="pr-klar" aria-label="Preispakete">
<div class="pr-klar-card">
<h3 class="pr-klar-name">Basis</h3>
<p class="pr-klar-desc">Für den Einstieg mit dem Nötigsten.</p>
<p class="pr-klar-price"><b>49 €</b><span>/ Monat</span></p>
<ul class="pr-klar-feat">
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>1 Projekt</li>
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>E-Mail-Support</li>
<li class="off"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg>Team-Zugänge</li>
</ul>
<a class="pr-klar-cta" href="#">Auswählen</a>
</div>
<div class="pr-klar-card pr-klar-card--best">
<span class="pr-klar-badge">Empfohlen</span>
<h3 class="pr-klar-name">Komfort</h3>
<p class="pr-klar-desc">Für alle, die planbar wachsen wollen.</p>
<p class="pr-klar-price"><b>99 €</b><span>/ Monat</span></p>
<ul class="pr-klar-feat">
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>10 Projekte</li>
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Priorisierter Support</li>
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>3 Team-Zugänge</li>
</ul>
<a class="pr-klar-cta pr-klar-cta--fill" href="#">Auswählen</a>
</div>
<div class="pr-klar-card">
<h3 class="pr-klar-name">Premium</h3>
<p class="pr-klar-desc">Für höchste Ansprüche ohne Limits.</p>
<p class="pr-klar-price"><b>199 €</b><span>/ Monat</span></p>
<ul class="pr-klar-feat">
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Unbegrenzte Projekte</li>
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Persönlicher Ansprechpartner</li>
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Unbegrenzte Team-Zugänge</li>
</ul>
<a class="pr-klar-cta" href="#">Auswählen</a>
</div>
</section>
<style>
.pr-klar{display:grid;gap:1.1rem;width:100%;grid-template-columns:1fr;align-items:stretch;color:#e9e9ee}
@media(min-width:720px){.pr-klar{grid-template-columns:repeat(3,1fr);gap:1rem;align-items:center}}
.pr-klar-card{position:relative;display:flex;flex-direction:column;background:#16161a;
border:1px solid #26262c;border-radius:16px;padding:1.6rem 1.4rem;overflow-wrap:break-word}
.pr-klar-card--best{border-color:var(--akzent,#7c87ff);background:#17171b;
box-shadow:0 0 0 1px var(--akzent,#7c87ff)}
@media(min-width:720px){.pr-klar-card--best{transform:scale(1.04);z-index:1}}
.pr-klar-badge{position:absolute;top:-.7rem;left:50%;transform:translateX(-50%);
font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:#0f0f12;background:var(--akzent,#7c87ff);padding:.28rem .7rem;border-radius:99px;white-space:nowrap}
.pr-klar-name{margin:0 0 .3rem;font-size:1rem;font-weight:700;color:#f4f4f5;letter-spacing:.01em}
.pr-klar-desc{margin:0 0 1.1rem;font-size:.82rem;color:#a1a1aa}
.pr-klar-price{display:flex;align-items:baseline;gap:.25rem;margin:0 0 1.3rem;flex-wrap:wrap}
.pr-klar-price b{font-size:2.1rem;font-weight:800;color:#f4f4f5;line-height:1;letter-spacing:-.02em}
.pr-klar-price span{font-size:.8rem;color:#a1a1aa}
.pr-klar-feat{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.7rem;flex:1}
.pr-klar-feat li{display:flex;align-items:flex-start;gap:.6rem;font-size:.86rem;color:#e9e9ee}
.pr-klar-feat svg{flex:none;width:17px;height:17px;margin-top:.1rem;color:var(--akzent,#7c87ff)}
.pr-klar-feat li.off{color:#a1a1aa}
.pr-klar-feat li.off svg{color:#26262c}
.pr-klar-cta{display:block;text-align:center;font-weight:600;font-size:.9rem;padding:.75rem 1rem;
border-radius:10px;border:1px solid #26262c;color:#f4f4f5;background:transparent;
transition:background .22s ease,border-color .22s ease,color .22s ease}
.pr-klar-cta:hover,.pr-klar-cta:focus-visible{background:#1c1c22;border-color:#3a3a45;outline:none}
.pr-klar-cta:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:2px}
.pr-klar-cta--fill{background:var(--akzent,#7c87ff);border-color:var(--akzent,#7c87ff);color:#0f0f12}
.pr-klar-cta--fill:hover,.pr-klar-cta--fill:focus-visible{background:#6a75f0;border-color:#6a75f0;color:#0f0f12}
@media (prefers-reduced-motion:reduce){.pr-klar-cta{transition:none}}
</style>