Vier gleichwertige Karten, zentriert, gut scanbar — kein Effekt-Lärm. Avatare als CSS-Verlauf mit Initialen (im Projekt durch <img> ersetzen). Mobil stapeln die Karten, ab Tablet zwei-, am Desktop vierspaltig.
Unser Team
Die Menschen hinter der Arbeit.
Feste Ansprechpartner — vom ersten Anruf bis zur Übergabe.
-
Max Sander
Projektleiter
Plant Abläufe und hält Termine.
-
Lena Krüger
Beratung
Erste Ansprechpartnerin für Anfragen.
-
Tom Berger
Technik
Setzt um, was besprochen wurde.
-
Anna Neumann
Büro & Abrechnung
Kümmert sich um alles Organisatorische.
<section class="tm-klar" aria-labelledby="tm-klar-t">
<div class="tm-klar-head">
<p class="tm-klar-eyebrow">Unser Team</p>
<h2 class="tm-klar-title" id="tm-klar-t">Die Menschen hinter der Arbeit.</h2>
<p class="tm-klar-sub">Feste Ansprechpartner – vom ersten Anruf bis zur Übergabe.</p>
</div>
<ul class="tm-klar-grid">
<li class="tm-klar-card">
<!-- statt Verlauf+Initialen hier ein <img> einsetzen -->
<div class="tm-klar-av a" aria-hidden="true">MS</div>
<div>
<p class="tm-klar-name">Max Sander</p>
<p class="tm-klar-role">Projektleiter</p>
<p class="tm-klar-line">Plant Abläufe und hält Termine.</p>
</div>
</li>
<li class="tm-klar-card">
<div class="tm-klar-av b" aria-hidden="true">LK</div>
<div>
<p class="tm-klar-name">Lena Krüger</p>
<p class="tm-klar-role">Beratung</p>
<p class="tm-klar-line">Erste Ansprechpartnerin für Anfragen.</p>
</div>
</li>
<li class="tm-klar-card">
<div class="tm-klar-av c" aria-hidden="true">TB</div>
<div>
<p class="tm-klar-name">Tom Berger</p>
<p class="tm-klar-role">Technik</p>
<p class="tm-klar-line">Setzt um, was besprochen wurde.</p>
</div>
</li>
<li class="tm-klar-card">
<div class="tm-klar-av d" aria-hidden="true">AN</div>
<div>
<p class="tm-klar-name">Anna Neumann</p>
<p class="tm-klar-role">Büro & Abrechnung</p>
<p class="tm-klar-line">Kümmert sich um alles Organisatorische.</p>
</div>
</li>
</ul>
</section>
<style>
.tm-klar{width:100%;color:#e9e9ee}
.tm-klar-head{margin:0 0 1.6rem;max-width:52ch}
.tm-klar-eyebrow{margin:0 0 .6rem;font-size:.74rem;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--akzent,#7c87ff)}
.tm-klar-title{margin:0 0 .6rem;font-size:clamp(1.4rem,3.2vw,1.95rem);line-height:1.15;
letter-spacing:-.01em;color:#f4f4f5;overflow-wrap:break-word}
.tm-klar-sub{margin:0;font-size:.95rem;color:#a1a1aa}
.tm-klar-grid{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:560px){.tm-klar-grid{grid-template-columns:1fr 1fr}}
@media(min-width:820px){.tm-klar-grid{grid-template-columns:repeat(4,1fr)}}
.tm-klar-card{display:flex;flex-direction:column;align-items:center;text-align:center;
gap:.9rem;padding:1.6rem 1.1rem;background:#16161a;border:1px solid #26262c;
border-radius:16px;transition:border-color .25s ease,background .25s ease}
.tm-klar-card:hover,.tm-klar-card:focus-within{border-color:#34343e;background:#17171b}
.tm-klar-av{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;
font-size:1.25rem;font-weight:800;letter-spacing:.02em;color:#f4f4f5;
border:1px solid rgba(255,255,255,.1)}
.tm-klar-av.a{background:radial-gradient(120% 120% at 30% 20%,#3b3b54 0%,#24242f 55%,#15151b 100%)}
.tm-klar-av.b{background:radial-gradient(120% 120% at 30% 20%,#2b3b46 0%,#20262f 55%,#15151b 100%)}
.tm-klar-av.c{background:radial-gradient(120% 120% at 30% 20%,#463b46 0%,#2a242f 55%,#15151b 100%)}
.tm-klar-av.d{background:radial-gradient(120% 120% at 30% 20%,#3b463f 0%,#24272f 55%,#15151b 100%)}
.tm-klar-name{margin:0;font-size:1rem;font-weight:700;color:#f4f4f5;line-height:1.2;overflow-wrap:break-word}
.tm-klar-role{margin:.2rem 0 0;font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--akzent,#7c87ff)}
.tm-klar-line{margin:.55rem 0 0;font-size:.82rem;color:#a1a1aa;max-width:26ch}
@media (prefers-reduced-motion:reduce){.tm-klar-card{transition:none}}
</style>