Kontaktdaten links (Adresse, Telefon, E-Mail, Öffnungszeiten — je mit Inline-SVG-Icon), schlankes Formular rechts. Ruhig, scanbar, conversion-tauglich. Jedes Feld mit verknüpftem <label>, Consent-Checkbox mit Datenschutz-Hinweis, sichtbarer Fokus-Ring. Mobil stapelt alles einspaltig. Kein echter Versand.
Kontakt
Sprechen wir über Ihr Projekt.
Wir melden uns in der Regel innerhalb eines Werktags. Auch telefonisch erreichbar.
-
AdresseMusterstraße 12, 12345 Musterstadt
-
Telefon+49 000 000000
-
E-Mailinfo@beispiel.de
-
ÖffnungszeitenMo–Fr 8–17 Uhr
<section class="ko-klar" aria-labelledby="ko-klar-h">
<div class="ko-klar-info">
<p class="ko-klar-eyebrow">Kontakt</p>
<h2 class="ko-klar-title" id="ko-klar-h">Sprechen wir über Ihr Projekt.</h2>
<p class="ko-klar-text">Wir melden uns in der Regel innerhalb eines Werktags. Auch
telefonisch erreichbar.</p>
<ul class="ko-klar-list">
<li class="ko-klar-item">
<span class="ko-klar-ic" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"><path d="M12 21s-7-5.2-7-11a7 7 0 0 1 14 0c0 5.8-7 11-7 11Z"/><circle cx="12" cy="10" r="2.5"/></svg>
</span>
<div><b>Adresse</b><span>Musterstraße 12, 12345 Musterstadt</span></div>
</li>
<li class="ko-klar-item">
<span class="ko-klar-ic" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"><path d="M4 5c0 8.3 6.7 15 15 15a2 2 0 0 0 2-2v-2.3a1 1 0 0 0-.8-1l-3.3-.7a1 1 0 0 0-1 .3l-1 1.2a12 12 0 0 1-5.7-5.7l1.2-1a1 1 0 0 0 .3-1l-.7-3.3a1 1 0 0 0-1-.8H6a2 2 0 0 0-2 2Z"/></svg>
</span>
<div><b>Telefon</b><a href="tel:+490000000000">+49 000 000000</a></div>
</li>
<li class="ko-klar-item">
<span class="ko-klar-ic" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>
</span>
<div><b>E-Mail</b><a href="mailto:info@beispiel.de">info@beispiel.de</a></div>
</li>
<li class="ko-klar-item">
<span class="ko-klar-ic" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
</span>
<div><b>Öffnungszeiten</b><span>Mo–Fr 8–17 Uhr</span></div>
</li>
</ul>
</div>
<form class="ko-klar-form" novalidate>
<div class="ko-klar-field">
<label for="ko-klar-name">Name</label>
<input class="ko-klar-input" id="ko-klar-name" name="name" type="text"
placeholder="Ihr Name" autocomplete="name">
</div>
<div class="ko-klar-field">
<label for="ko-klar-mail">E-Mail</label>
<input class="ko-klar-input" id="ko-klar-mail" name="email" type="email"
placeholder="ihre@mail.de" autocomplete="email">
</div>
<div class="ko-klar-field">
<label for="ko-klar-msg">Nachricht</label>
<textarea class="ko-klar-area" id="ko-klar-msg" name="nachricht"
placeholder="Worum geht es?"></textarea>
</div>
<label class="ko-klar-consent" for="ko-klar-ok">
<input type="checkbox" id="ko-klar-ok" name="consent">
<span>Ich habe die <a href="#">Datenschutzerklärung</a> gelesen und stimme der
Verarbeitung meiner Angaben zur Bearbeitung meiner Anfrage zu.</span>
</label>
<button class="ko-klar-btn" type="submit">Nachricht senden</button>
</form>
</section>
<style>
.ko-klar{display:grid;gap:2rem;width:100%;grid-template-columns:1fr;
background:#16161a;border:1px solid #26262c;border-radius:18px;padding:1.6rem;color:#e9e9ee}
@media(min-width:720px){.ko-klar{grid-template-columns:.9fr 1.1fr;padding:2.4rem}}
.ko-klar-eyebrow{margin:0 0 .6rem;font-size:.74rem;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--akzent,#7c87ff)}
.ko-klar-title{margin:0 0 .7rem;font-size:clamp(1.4rem,3.2vw,1.9rem);line-height:1.15;
letter-spacing:-.01em;color:#f4f4f5}
.ko-klar-text{margin:0 0 1.5rem;font-size:.95rem;color:#a1a1aa;max-width:40ch}
.ko-klar-list{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.ko-klar-item{display:flex;align-items:flex-start;gap:.9rem}
.ko-klar-ic{flex:0 0 auto;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
color:var(--akzent,#7c87ff);background:#17171b;border:1px solid #26262c}
.ko-klar-ic svg{width:19px;height:19px}
.ko-klar-item b{display:block;font-size:.74rem;font-weight:600;letter-spacing:.05em;
text-transform:uppercase;color:#a1a1aa;margin-bottom:.15rem}
.ko-klar-item span,.ko-klar-item a{font-size:.95rem;color:#f4f4f5;overflow-wrap:break-word}
.ko-klar-item a{border-radius:5px;transition:color .2s ease}
.ko-klar-item a:hover,.ko-klar-item a:focus-visible{color:var(--akzent,#7c87ff)}
.ko-klar-item a:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:3px}
.ko-klar-form{display:grid;gap:1rem}
.ko-klar-field{display:grid;gap:.4rem}
.ko-klar-field label{font-size:.8rem;font-weight:600;color:#e9e9ee}
.ko-klar-input,.ko-klar-area{width:100%;font:inherit;font-size:.92rem;color:#f4f4f5;
background:#17171b;border:1px solid #26262c;border-radius:11px;padding:.75rem .9rem;
transition:border-color .2s ease,box-shadow .2s ease}
.ko-klar-area{resize:vertical;min-height:110px}
.ko-klar-input::placeholder,.ko-klar-area::placeholder{color:#a1a1aa}
.ko-klar-input:focus-visible,.ko-klar-area:focus-visible{outline:none;
border-color:var(--akzent,#7c87ff);box-shadow:0 0 0 3px color-mix(in srgb,var(--akzent,#7c87ff) 30%,transparent)}
.ko-klar-consent{display:flex;align-items:flex-start;gap:.6rem;font-size:.8rem;color:#a1a1aa;line-height:1.45}
.ko-klar-consent input{flex:0 0 auto;width:18px;height:18px;margin-top:.1rem;accent-color:var(--akzent,#7c87ff)}
.ko-klar-consent input:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:2px}
.ko-klar-consent a{color:#f4f4f5;text-decoration:underline;text-underline-offset:2px}
.ko-klar-btn{justify-self:start;font:inherit;font-weight:600;font-size:.92rem;cursor:pointer;
color:#0f0f12;background:var(--akzent,#7c87ff);border:none;border-radius:11px;
padding:.8rem 1.5rem;transition:transform .2s ease,filter .2s ease}
.ko-klar-btn:hover{filter:brightness(1.08)}
.ko-klar-btn:active{transform:translateY(1px)}
.ko-klar-btn:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
.ko-klar-input,.ko-klar-area,.ko-klar-btn,.ko-klar-item a{transition:none}
}
</style>