Footer — Design-Bausteine

Multi-Spalten-Footer + Social + auto-Jahr

Pol 2 · Klarheit Anlass: Standard-Seitenabschluss

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>

Schlanker, zentrierter Footer

Pol 2 · Klarheit Anlass: Onepager, kleine Seiten

Für kompakte Seiten: Marke links, zentrierte Navigation, Copyright rechts — am Handy sauber gestapelt mit großen Tap-Zielen (≥44 px). Vorbild: Silver Mountain.

<footer class="fx-footer-slim">
  <strong>Marke GmbH</strong>
  <nav aria-label="Footer"><a href="#">Start</a><a href="#">Leistungen</a><a href="#">Kontakt</a><a href="#">Impressum</a></nav>
  <span>© <span data-year>2026</span></span>
</footer>

<style>
.fx-footer-slim{background:#101014;border:1px solid #26262c;border-radius:14px;padding:22px 26px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#a1a1aa;font-size:.86rem}
.fx-footer-slim strong{color:#f4f4f5}
.fx-footer-slim nav{display:inline-flex;gap:1.3rem}
.fx-footer-slim nav a{color:#a1a1aa;text-decoration:none;transition:color .2s ease}
.fx-footer-slim nav a:hover,.fx-footer-slim nav a:focus-visible{color:var(--akzent, #7c87ff)}
@media (max-width:560px){.fx-footer-slim{flex-direction:column;text-align:center}
  .fx-footer-slim nav a{padding:6px 0;display:inline-block;min-height:44px;line-height:32px}}
@media (prefers-reduced-motion:reduce){.fx-footer-slim nav a{transition:none}}
</style>

<script>document.querySelectorAll('[data-year]').forEach(function(el){el.textContent=new Date().getFullYear();});</script>

Personal-Brand-Footer: Kontakt-Spalte + Zurück-nach-oben

Pol 1 · Craft Anlass: Personal Brand, dunkler Auftritt

Vier Spalten: Logotype + Claim + runde Social-Kacheln, zwei Link-Spalten und eine echte Kontakt-Spalte (Mail, Telefon, Ort). Akzent-Linie oben, Akzentfarbe für die Spalten-Titel, unten Copyright + Rechtliches + runder Zurück-nach-oben-Knopf. Akzent über --akzent. Vorbild: Personal-Brand-Seiten.

<footer class="fx-pbf">
  <div class="fx-pbf-grid">
    <div>
      <div class="fx-pbf-mark">Marke</div>
      <p class="fx-pbf-claim">Kurzer Claim in ein, zwei Sätzen.</p>
      <div class="fx-pbf-social">
        <a href="#" aria-label="Instagram"><svg …></svg></a>
        <a href="#" aria-label="TikTok"><svg …></svg></a>
        <a href="#" aria-label="YouTube"><svg …></svg></a>
      </div>
    </div>
    <div class="fx-pbf-col"><h4>Navigation</h4><ul><li><a href="#">Startseite</a></li>…</ul></div>
    <div class="fx-pbf-col"><h4>Angebot</h4><ul><li><a href="#">Auftritte</a></li>…</ul></div>
    <div class="fx-pbf-col fx-pbf-contact">
      <h4>Kontakt</h4>
      <a href="mailto:kontakt@marke.de">kontakt@marke.de</a>
      <a href="tel:+490000000000">0123 456789</a>
      <span>Standort / Ort</span>
      <span>Ansprechpartner:in</span>
    </div>
  </div>
  <div class="fx-pbf-bottom">
    <span>© <span data-year>2026</span> Marke — Alle Rechte vorbehalten.</span>
    <span class="fx-pbf-legal">
      <a href="#">Impressum</a><a href="#">Datenschutz</a>
      <button type="button" class="fx-pbf-top" aria-label="Nach oben"><svg …></svg></button>
    </span>
  </div>
</footer>

<style>
.fx-pbf{position:relative;background:#0d0d10;border:1px solid #26262c;border-radius:14px;padding:40px 34px 18px;color:#a1a1aa}
.fx-pbf::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--akzent, #7c87ff),transparent);opacity:.7}
.fx-pbf-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:34px;padding-bottom:26px}
.fx-pbf-mark{font-family:Georgia,serif;font-size:1.5rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#f4f4f5}
.fx-pbf-claim{margin:.9rem 0 1.1rem;font-size:.9rem;line-height:1.6;max-width:250px}
.fx-pbf-social{display:flex;gap:11px}
.fx-pbf-social a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid #33333d;color:#cfcfd6;transition:.2s}
.fx-pbf-social a:hover,.fx-pbf-social a:focus-visible{color:#0d0d10;background:var(--akzent, #7c87ff);border-color:var(--akzent, #7c87ff);transform:translateY(-2px);outline:none}
.fx-pbf-col h4{color:var(--akzent, #7c87ff);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 1rem;font-weight:700}
.fx-pbf-col ul{list-style:none;margin:0;padding:0}.fx-pbf-col li{margin-bottom:.62rem}
.fx-pbf-col a,.fx-pbf-contact a{color:#c2c2ca;text-decoration:none;font-size:.9rem;transition:color .2s ease}
.fx-pbf-col a:hover{color:#fff}
.fx-pbf-contact a,.fx-pbf-contact span{display:block;margin-bottom:.62rem;font-size:.9rem}
.fx-pbf-contact a:hover{color:var(--akzent, #7c87ff)}
.fx-pbf-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-top:18px;border-top:1px solid #26262c;font-size:.82rem}
.fx-pbf-legal{display:inline-flex;align-items:center}
.fx-pbf-legal a{color:#a1a1aa;text-decoration:none;margin-left:1.4rem}.fx-pbf-legal a:hover{color:#f4f4f5}
.fx-pbf-top{margin-left:1.4rem;width:40px;height:40px;border-radius:50%;border:1px solid #33333d;background:transparent;color:#cfcfd6;display:grid;place-items:center;cursor:pointer;transition:.2s}
.fx-pbf-top:hover,.fx-pbf-top:focus-visible{color:var(--akzent, #7c87ff);border-color:var(--akzent, #7c87ff);transform:translateY(-2px);outline:none}
@media (max-width:820px){.fx-pbf-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fx-pbf-grid{grid-template-columns:1fr}.fx-pbf-bottom{flex-direction:column;text-align:center;align-items:center}}
@media (prefers-reduced-motion:reduce){.fx-pbf-social a,.fx-pbf-top{transition:none}.fx-pbf-social a:hover,.fx-pbf-top:hover{transform:none}}
</style>

<script>
document.querySelectorAll('[data-year]').forEach(function(el){el.textContent=new Date().getFullYear();});
document.querySelectorAll('.fx-pbf-top').forEach(function(b){b.addEventListener('click',function(){window.scrollTo({top:0,behavior:'smooth'});});});
</script>

Lokales-Handwerk-Footer: Einsatzgebiet + Social-Reihe

Pol 2 · Klarheit Anlass: Lokales Gewerbe, Handwerk

Für lokale Betriebe: Logo + Marke + Claim, Leistungs- und Unternehmens-Spalten und eine Einsatzgebiet-Spalte mit Orts-Raster (gut für lokales SEO). Darunter eine eigene „Folgen Sie uns"-Reihe mit Social-Kacheln, unten Copyright + Claim-Zeile. Akzent über --akzent. Vorbild: Handwerker-/Dienstleister-Seiten.

<footer class="fx-lof">
  <div class="fx-lof-grid">
    <div>
      <div class="fx-lof-brand">
        <span class="fx-lof-logo"><svg …></svg></span>
        <strong>Marke E&amp;B</strong>
      </div>
      <p class="fx-lof-claim">Mehrere Gewerke aus einer Hand für die Region.</p>
    </div>
    <div class="fx-lof-col"><h4>Leistungen</h4><ul><li><a href="#">Leistung A</a></li>…</ul></div>
    <div class="fx-lof-col"><h4>Marke E&amp;B</h4><ul><li><a href="#">Referenzen</a></li>…</ul></div>
    <div class="fx-lof-area">
      <strong>Einsatzgebiet</strong>
      <p class="fx-lof-area-note">Hauptort + 100 km Umkreis</p>
      <div class="fx-lof-area-grid"><span>Ort 1</span><span>Ort 2</span>…</div>
    </div>
  </div>
  <div class="fx-lof-social-row">
    <span class="lbl">Folgen Sie uns</span>
    <div class="fx-lof-social">
      <a href="#" aria-label="Facebook"><svg …></svg></a>
      <a href="#" aria-label="Instagram"><svg …></svg></a>
      <a href="#" aria-label="Google"><svg …></svg></a>
    </div>
  </div>
  <div class="fx-lof-bottom">
    <span>© <span data-year>2026</span> Marke E&amp;B, Ort.</span>
    <em>„Ihre Zufriedenheit ist unser Erfolg."</em>
  </div>
</footer>

<style>
.fx-lof{background:#0d0d10;border:1px solid #26262c;border-radius:14px;padding:36px 34px 18px;color:#a1a1aa}
.fx-lof-grid{display:grid;grid-template-columns:1.5fr 1.1fr 1fr 1fr;gap:34px;padding-bottom:24px}
.fx-lof-brand{display:flex;align-items:center;gap:12px;margin-bottom:1rem}
.fx-lof-logo{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:#16161a;border:1px solid #2a2a33;color:var(--akzent, #7c87ff)}
.fx-lof-brand strong{color:#f4f4f5;font-size:1.15rem;font-weight:700}
.fx-lof-claim{margin:0;font-size:.9rem;line-height:1.6;max-width:260px}
.fx-lof-col h4{color:#f4f4f5;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;margin:0 0 1rem;font-weight:600}
.fx-lof-col ul{list-style:none;margin:0;padding:0}.fx-lof-col li{margin-bottom:.6rem}
.fx-lof-col a{color:#c2c2ca;text-decoration:none;font-size:.9rem;transition:color .2s ease}
.fx-lof-col a:hover{color:var(--akzent, #7c87ff)}
.fx-lof-area strong{display:block;color:#f4f4f5;font-size:.92rem;margin-bottom:.4rem}
.fx-lof-area-note{margin:0 0 .9rem;color:#f4f4f5;font-weight:600;font-size:.9rem}
.fx-lof-area-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1.1rem;font-size:.88rem;color:#c2c2ca}
.fx-lof-social-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding:18px 0;border-top:1px solid #26262c;border-bottom:1px solid #26262c}
.fx-lof-social-row .lbl{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:#a1a1aa;font-weight:600}
.fx-lof-social{display:flex;gap:11px}
.fx-lof-social a{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:#16161a;border:1px solid #2a2a33;color:#cfcfd6;transition:.2s}
.fx-lof-social a:hover,.fx-lof-social a:focus-visible{color:#0d0d10;background:var(--akzent, #7c87ff);border-color:var(--akzent, #7c87ff);transform:translateY(-2px);outline:none}
.fx-lof-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding-top:16px;font-size:.82rem}
.fx-lof-bottom em{font-style:italic;color:#c2c2ca}
@media (max-width:820px){.fx-lof-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fx-lof-grid{grid-template-columns:1fr}.fx-lof-bottom,.fx-lof-social-row{flex-direction:column;text-align:center;align-items:center}}
@media (prefers-reduced-motion:reduce){.fx-lof-social a{transition:none}.fx-lof-social a:hover{transform:none}}
</style>

<script>document.querySelectorAll('[data-year]').forEach(function(el){el.textContent=new Date().getFullYear();});</script>

Newsletter-Footer: Anmelde-Band + Link-Spalten

Pol 2 · Klarheit Anlass: E-Mail-Aufbau, Shop, Magazin

Oben ein deutliches Anmelde-Band mit E-Mail-Feld (Fokus-Ring, Icon, Absenden), darunter die klassischen Link-Spalten und eine Copyright-Zeile. Die Demo zeigt eine Erfolgsmeldung nach dem Absenden (kein echter Versand). Feld und Knopf stapeln am Handy sauber untereinander.

<footer class="fx-nlf">
  <div class="fx-nlf-cta">
    <div class="fx-nlf-cta-txt">
      <strong>Nichts verpassen</strong>
      <p>Neuigkeiten und Angebote direkt ins Postfach. Jederzeit abbestellbar.</p>
    </div>
    <form class="fx-nlf-form" novalidate>
      <label class="fx-nlf-field">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M4 7l8 6 8-6"/></svg>
        <input type="email" name="email" placeholder="E-Mail-Adresse" aria-label="E-Mail-Adresse" required>
      </label>
      <button type="submit" class="fx-nlf-btn">Anmelden</button>
      <p class="fx-nlf-ok" hidden>Danke! Bitte bestätigen Sie die E-Mail in Ihrem Postfach.</p>
    </form>
  </div>
  <div class="fx-nlf-grid">
    <div class="fx-nlf-brand"><strong>Marke GmbH</strong><p>Kurzer Markenclaim in einem Satz.</p></div>
    <div class="fx-nlf-col"><h4>Produkte</h4><ul><li><a href="#">Kategorie A</a></li>…</ul></div>
    <div class="fx-nlf-col"><h4>Service</h4><ul>…</ul></div>
    <div class="fx-nlf-col"><h4>Unternehmen</h4><ul>…</ul></div>
  </div>
  <div class="fx-nlf-bottom">
    <span>© <span data-year>2026</span> Marke GmbH</span>
    <span><a href="#">Impressum</a><a href="#">Datenschutz</a><a href="#">AGB</a></span>
  </div>
</footer>

<style>
.fx-nlf{background:#0d0d10;border:1px solid #26262c;border-radius:14px;padding:0 0 18px;color:#a1a1aa;overflow:hidden}
.fx-nlf-cta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:22px;padding:30px 34px;border-bottom:1px solid #26262c;
  background:radial-gradient(120% 160% at 100% 0%,rgba(124,135,255,.14),transparent 60%)}
.fx-nlf-cta-txt strong{display:block;color:#f4f4f5;font-size:1.15rem;margin-bottom:.3rem}
.fx-nlf-cta-txt p{margin:0;font-size:.88rem;max-width:340px;line-height:1.5}
.fx-nlf-form{display:flex;gap:10px;flex-wrap:wrap;flex:1 1 300px;max-width:440px;min-width:0}
.fx-nlf-field{flex:1 1 180px;min-width:0;display:flex;align-items:center;gap:.6rem;background:#16161a;border:1px solid #2a2a33;border-radius:10px;padding:0 .9rem;
  transition:border-color .2s ease,box-shadow .2s ease}
.fx-nlf-field:focus-within{border-color:var(--akzent, #7c87ff);box-shadow:0 0 0 3px rgba(124,135,255,.22)}
.fx-nlf-field svg{flex:0 0 auto;width:17px;height:17px;color:#a1a1aa}
.fx-nlf-field input{flex:1 1 auto;min-width:0;background:transparent;border:0;color:#f4f4f5;font-size:.9rem;padding:.72rem 0;font-family:inherit}
.fx-nlf-field input::placeholder{color:#7d7d87}
.fx-nlf-field input:focus{outline:none}
.fx-nlf-btn{flex:0 0 auto;border:0;cursor:pointer;border-radius:10px;padding:.72rem 1.3rem;background:var(--akzent, #7c87ff);color:#fff;font-weight:600;font-size:.9rem;font-family:inherit;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.fx-nlf-btn:hover,.fx-nlf-btn:focus-visible{transform:translateY(-2px);box-shadow:0 8px 22px -8px var(--akzent, #7c87ff);outline:none}
.fx-nlf-btn:focus-visible{outline:2px solid #f4f4f5;outline-offset:2px}
.fx-nlf-ok{margin:.6rem 0 0;flex:1 0 100%;font-size:.84rem;color:var(--akzent, #7c87ff);font-weight:600}
.fx-nlf-ok[hidden]{display:none}
.fx-nlf-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding:28px 34px 22px}
.fx-nlf-brand strong{display:block;color:#f4f4f5;font-size:1.05rem;margin-bottom:.5rem}
.fx-nlf-brand p{margin:0;font-size:.86rem;max-width:230px;line-height:1.5}
.fx-nlf-col h4{color:#f4f4f5;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 .9rem;font-weight:600}
.fx-nlf-col ul{list-style:none;margin:0;padding:0}.fx-nlf-col li{margin-bottom:.5rem}
.fx-nlf-col a{color:#a1a1aa;text-decoration:none;font-size:.88rem;transition:color .2s ease}
.fx-nlf-col a:hover,.fx-nlf-col a:focus-visible{color:#f4f4f5}
.fx-nlf-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;padding:16px 34px 0;border-top:1px solid #26262c;font-size:.82rem}
.fx-nlf-bottom a{color:#a1a1aa;text-decoration:none;margin-left:1.2rem;transition:color .2s ease}
.fx-nlf-bottom a:hover,.fx-nlf-bottom a:focus-visible{color:#f4f4f5}
@media (max-width:640px){.fx-nlf-grid{grid-template-columns:1fr 1fr}
  .fx-nlf-cta,.fx-nlf-bottom{flex-direction:column;text-align:center;align-items:center}.fx-nlf-form{max-width:none}}
@media (max-width:440px){.fx-nlf-grid{grid-template-columns:1fr}.fx-nlf-field{flex:1 0 100%}.fx-nlf-btn{flex:1 0 100%}}
@media (prefers-reduced-motion:reduce){.fx-nlf-field,.fx-nlf-btn{transition:none}.fx-nlf-btn:hover,.fx-nlf-btn:focus-visible{transform:none}}
</style>

<script>
document.querySelectorAll('[data-year]').forEach(function(el){el.textContent=new Date().getFullYear();});
document.querySelectorAll('.fx-nlf-form').forEach(function(f){
  f.addEventListener('submit',function(e){
    e.preventDefault();
    var ok=f.querySelector('.fx-nlf-ok');
    if(f.reportValidity&&!f.reportValidity())return;
    if(ok)ok.hidden=false;
    f.reset();
  });
});
</script>

Zentrierter Groß-Logo-Footer

Pol 1 · Craft Anlass: Portfolio, Marken-Abschluss

Große zentrierte Wortmarke als Blickfang (Verlaufsfüllung im Text), darunter zentrierte Navigation mit Unterstrich-Animation, runde Social-Kacheln und eine feine Trennlinie mit Copyright. Ein „großer Abschluss" statt einer schmalen Zeile. Akzent über --akzent.

<footer class="fx-clf">
  <div class="fx-clf-mark">Marke</div>
  <p class="fx-clf-tag">Ein Satz, der die Marke auf den Punkt bringt.</p>
  <nav class="fx-clf-nav" aria-label="Footer">
    <a href="#">Start</a><a href="#">Arbeiten</a><a href="#">Über</a><a href="#">Journal</a><a href="#">Kontakt</a>
  </nav>
  <div class="fx-clf-social">
    <a href="#" aria-label="Instagram"><svg …></svg></a>
    <a href="#" aria-label="LinkedIn"><svg …></svg></a>
    <a href="#" aria-label="E-Mail"><svg …></svg></a>
  </div>
  <div class="fx-clf-rule"></div>
  <div class="fx-clf-bottom">
    <span>© <span data-year>2026</span> Marke</span>
    <a href="#">Impressum</a><a href="#">Datenschutz</a>
  </div>
</footer>

<style>
.fx-clf{background:#0d0d10;border:1px solid #26262c;border-radius:14px;padding:44px 30px 22px;color:#a1a1aa;text-align:center}
.fx-clf-mark{font-family:Georgia,serif;font-weight:800;letter-spacing:.02em;line-height:1;font-size:clamp(2.4rem,9vw,4.6rem);
  background:linear-gradient(180deg,#f4f4f5 30%,#8a8a95);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.fx-clf-tag{margin:.9rem auto 0;font-size:.9rem;line-height:1.6;max-width:420px}
.fx-clf-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:.4rem 2rem;margin:26px 0 22px}
.fx-clf-nav a{position:relative;color:#c2c2ca;text-decoration:none;font-size:.9rem;padding:.35rem .1rem;transition:color .2s ease}
.fx-clf-nav a::after{content:"";position:absolute;left:0;right:0;bottom:.05rem;height:1px;background:var(--akzent, #7c87ff);
  transform:scaleX(0);transform-origin:center;transition:transform .25s ease}
.fx-clf-nav a:hover,.fx-clf-nav a:focus-visible{color:#f4f4f5;outline:none}
.fx-clf-nav a:hover::after,.fx-clf-nav a:focus-visible::after{transform:scaleX(1)}
.fx-clf-social{display:flex;justify-content:center;gap:12px;margin-bottom:26px}
.fx-clf-social a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid #33333d;color:#cfcfd6;
  transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease}
.fx-clf-social a:hover,.fx-clf-social a:focus-visible{color:#0d0d10;background:var(--akzent, #7c87ff);border-color:var(--akzent, #7c87ff);transform:translateY(-2px);outline:none}
.fx-clf-rule{height:1px;background:linear-gradient(90deg,transparent,#26262c 20%,#26262c 80%,transparent);margin:0 0 16px}
.fx-clf-bottom{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.4rem 1.4rem;font-size:.82rem}
.fx-clf-bottom a{color:#a1a1aa;text-decoration:none;transition:color .2s ease}
.fx-clf-bottom a:hover,.fx-clf-bottom a:focus-visible{color:#f4f4f5}
@media (prefers-reduced-motion:reduce){.fx-clf-nav a,.fx-clf-nav a::after,.fx-clf-social a{transition:none}
  .fx-clf-nav a:hover::after,.fx-clf-nav a:focus-visible::after{transform:scaleX(1)}
  .fx-clf-social a:hover,.fx-clf-social a:focus-visible{transform:none}}
</style>

<script>document.querySelectorAll('[data-year]').forEach(function(el){el.textContent=new Date().getFullYear();});</script>