Marke + Claim links, daneben Link-Spalten, unten eine Trennzeile mit Copyright und
Social-Icon-Kacheln (Hover färbt zur Akzentfarbe). Das Jahr setzt ein kleines Skript automatisch
([data-year]) — nie wieder veraltet. Vorbild: Bernstein, Hauszeit, NDS.
<footer class="fx-footer">
<div class="fx-footer-grid">
<div class="fx-footer-brand">
<strong>Marke GmbH</strong>
<p>Kurzer Markenclaim in einem Satz.</p>
<div class="fx-footer-social">
<a href="#" aria-label="Instagram"><svg …></svg></a>
<a href="#" aria-label="Facebook"><svg …></svg></a>
<a href="#" aria-label="WhatsApp"><svg …></svg></a>
</div>
</div>
<div class="fx-footer-col"><h4>Leistungen</h4><ul><li><a href="#">Leistung A</a></li>…</ul></div>
<div class="fx-footer-col"><h4>Unternehmen</h4><ul>…</ul></div>
<div class="fx-footer-col"><h4>Rechtliches</h4><ul>…</ul></div>
</div>
<div class="fx-footer-bottom">
<span>© <span data-year>2026</span> Marke GmbH</span>
<span><a href="#">Impressum</a><a href="#">Datenschutz</a></span>
</div>
</footer>
<style>
.fx-footer{background:#101014;border:1px solid #26262c;border-radius:14px;padding:34px 30px 20px;color:#a1a1aa}
.fx-footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding-bottom:26px;border-bottom:1px solid #26262c}
.fx-footer-brand strong{display:block;color:#f4f4f5;font-size:1.05rem;margin-bottom:.5rem}
.fx-footer-brand p{margin:0 0 1rem;font-size:.86rem;max-width:240px;line-height:1.5}
.fx-footer-social{display:flex;gap:9px}
.fx-footer-social a{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;border:1px solid #2a2a33;color:#a1a1aa;
transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease}
.fx-footer-social a svg{width:17px;height:17px}
.fx-footer-social a:hover,.fx-footer-social a:focus-visible{color:#101014;background:var(--akzent, #7c87ff);border-color:var(--akzent, #7c87ff);transform:translateY(-2px);outline:none}
.fx-footer-col h4{color:#f4f4f5;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 .9rem;font-weight:600}
.fx-footer-col ul{list-style:none;margin:0;padding:0}
.fx-footer-col li{margin-bottom:.5rem}
.fx-footer-col a{color:#a1a1aa;text-decoration:none;font-size:.88rem;transition:color .2s ease}
.fx-footer-col a:hover,.fx-footer-col a:focus-visible{color:#f4f4f5}
.fx-footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;padding-top:18px;font-size:.82rem}
.fx-footer-bottom a{color:#a1a1aa;text-decoration:none;margin-left:1.2rem;transition:color .2s ease}
.fx-footer-bottom a:hover,.fx-footer-bottom a:focus-visible{color:#f4f4f5}
@media (max-width:560px){.fx-footer-grid{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.fx-footer-social a{transition:none}.fx-footer-social a:hover{transform:none}}
</style>
<script>
/* Jahr automatisch setzen — nie wieder veraltet */
document.querySelectorAll('[data-year]').forEach(function(el){el.textContent=new Date().getFullYear();});
</script>