Logos als gedämpftes Raster, klein überschrieben. Bei Hover oder Fokus hebt sich ein Logo von Grau auf Akzent — ruhig und seriös. Logos sind Inline-SVG-Platzhalter (im Projekt durch echte <img>/<svg> ersetzen).
Partner & Auszeichnungen
Im Einsatz bei über 40 Betrieben
<section class="pt-klar" aria-label="Partner und Auszeichnungen">
<div class="pt-klar-head">
<p class="pt-klar-eyebrow">Partner & Auszeichnungen</p>
<p class="pt-klar-sub">Im Einsatz bei über 40 Betrieben</p>
</div>
<div class="pt-klar-grid">
<!-- je Zelle ein Logo — Platzhalter-SVG, im Projekt durch echtes Logo ersetzen -->
<div class="pt-klar-cell" tabindex="0">
<svg viewBox="0 0 130 34" role="img" aria-label="Partner Nordform">
<g fill="none" stroke="currentColor" stroke-width="2.4"><path d="M10 24V10l12 14V10"/></g>
<text x="30" y="23" font-family="system-ui,sans-serif" font-size="13"
font-weight="700" letter-spacing="1" fill="currentColor">NORDFORM</text>
</svg>
</div>
<div class="pt-klar-cell" tabindex="0">
<svg viewBox="0 0 130 34" role="img" aria-label="Partner Vertika">
<circle cx="17" cy="17" r="8" fill="none" stroke="currentColor" stroke-width="2.4"/>
<circle cx="17" cy="17" r="2.6" fill="currentColor"/>
<text x="32" y="23" font-family="system-ui,sans-serif" font-size="13"
font-weight="600" letter-spacing="1.5" fill="currentColor">VERTIKA</text>
</svg>
</div>
<!-- … weitere Zellen analog … -->
</div>
</section>
<style>
.pt-klar{width:100%;background:#16161a;border:1px solid #26262c;border-radius:18px;
padding:1.6rem;color:#e9e9ee}
@media(min-width:640px){.pt-klar{padding:2.2rem}}
.pt-klar-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
gap:.6rem;margin:0 0 1.4rem}
.pt-klar-eyebrow{margin:0;font-size:.74rem;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--akzent,#7c87ff)}
.pt-klar-sub{margin:0;font-size:.82rem;color:#a1a1aa}
.pt-klar-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
background:#26262c;border:1px solid #26262c;border-radius:14px;overflow:hidden}
@media(min-width:560px){.pt-klar-grid{grid-template-columns:repeat(3,1fr)}}
.pt-klar-cell{display:grid;place-items:center;min-height:88px;padding:1.1rem;
background:#16161a;color:#a1a1aa;transition:color .28s ease,background .28s ease}
.pt-klar-cell svg{width:100%;max-width:130px;height:34px;display:block}
.pt-klar-cell:hover,.pt-klar-cell:focus-visible{color:var(--akzent,#7c87ff);
background:#191922;outline:none}
.pt-klar-cell:focus-visible{box-shadow:inset 0 0 0 2px var(--akzent,#7c87ff)}
@media (prefers-reduced-motion:reduce){.pt-klar-cell{transition:none}}
</style>