{ "$schema": "../../schema.json", "schema": "fundus/1", "id": "footer-cta-riesen-wortmarke", "name": "Abschluss-Footer mit großem CTA und Riesen-Wortmarke", "name_en": "Big footer / oversized wordmark CTA / Giant wordmark footer (full-bleed brand type) / CTA-led footer (Let’s work together)", "kurz": "Großer Abschluss mit direkter Ansprache, E-Mail zum Kopieren und randloser, unten angeschnittener Wortmarke, die sich aufbaut, aufgedeckt wird oder dem Zeiger folgt.", "kategorie": "Footer", "kategorie_slug": "footer", "kategorie_nr": 13, "bau_chat": "C6", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "website_belege": 6, "stimmung": [ "editorial", "laut", "warm" ], "stimmung_roh": [ "selbstbewusst", "laut", "markenstark", "editorial", "brutal", "persönlich", "warm" ], "technik": [ "css", "svg", "position-sticky", "gsap", "splittext", "text-fit", "scroll-driven-css", "vanilla-js", "clipboard-api" ], "technik_gruppen": [ "css", "js", "gsap", "canvas" ], "leistungskosten": "niedrig", "steckbrief": { "beschreibung": "Die Seite endet mit einer bildschirmfüllenden Abschlusssektion. Oben steht eine große, direkte Ansprache mit der E-Mail-Adresse als riesigem Link und einem klaren Kontakt-Knopf. Daneben liegen kleine Spalten mit Adresse, Telefon, Social-Links und Newsletter. Am unteren Rand läuft die Wortmarke über die volle Breite und ist unten angeschnitten.", "warum_es_wirkt": "Die Seite bekommt einen Schlussakkord. Die Marke tritt am Ende noch einmal groß auf, wie im Abspann eines Films. Der CTA ist unübersehbar, und das Seitenende wird vom Abstellraum zum Konversionspunkt. Typografisch stark, persönlich statt formularhaft und günstig umzusetzen.", "wann_einsetzen": "Bei Studios, Agenturen, Freelancern, Dienstleistern, Schriftanbietern und Events, also überall, wo Kontaktaufnahme das Ziel ist. Am besten mit kurzer, prägnanter Wortmarke.", "wann_nicht": "Bei langen Firmennamen ohne Kurzmarke, die Schrift wird sonst winzig oder bricht um. Bei schwacher Wortmarke. Wenn viele Pflicht-Links nötig sind und der Platz fehlt (dann zweistufig). Bei Shops und Produkten mit anderem Hauptziel, dort Newsletter oder Service-Links nach vorn.", "varianten": [ "Statische Wortmarke, unten angeschnitten", "Buchstaben-Aufbau beim Hereinscrollen (Stagger aus der Kante)", "Vorhang-Footer: klebt hinter dem Inhalt und wird aufgedeckt", "Wortmarke reagiert auf Cursor oder Scroll (Anheben, Gewicht, Breite)", "Outline/Fill-Wechsel beim Hover", "Wortmarke als SVG-Logo statt Text", "Riesige E-Mail-Adresse als CTA, mit Kopieren-Knopf", "Headline, große E-Mail und runder Magnet-Knopf", "Headline, New-Business-E-Mail und Newsletter", "Kontakt-Tabs New Business / Allgemein", "Laufband mit großem CTA im Footer", "Markenclaim als Schlusssatz" ], "umsetzung": "Footer als Grid: oben Ansprache als h2 (clamp(3rem, 10vw, 12rem) oder kleiner), darunter E-Mail-Link und Knopf, daneben Spalten, dann Rechtliches, ganz unten die Wortmarke.\n\nWortmarke randlos: Text per JS auf Breite rechnen (bei 100px messen, font-size = Breite / Messwert × 100, bei Resize neu) oder inline-SVG mit passender viewBox und width: 100%. Alternativ font-size in cqi mit empirischem Faktor je Schrift. Künftig nativ mit text-fit: grow (experimentell, mit @supports absichern). Anschnitt: Container mit overflow: hidden und fester Höhe in em (etwa 0.7 × Schriftgröße).\n\nAufbau: Buchstaben einzeln in Spans, yPercent 100 → 0, expo.out 1000–1400 ms, Stagger 30–60 ms, ScrollTrigger start 'top 85%'. Überschrift mit SplitText lines und mask: 'lines'. Ligaturen prüfen, wenn per Buchstabe geteilt wird.\n\nVorhang: Footer position: sticky; bottom: 0 hinter main, main mit z-index und eigener Hintergrundfarbe. Funktioniert nur, wenn der Footer nicht höher als der Viewport ist.\n\nE-Mail: plus Kopieren-Knopf mit navigator.clipboard.writeText und kurzem „Kopiert“ in aria-live=polite. Mailto allein frustriert Nutzer ohne Mail-Programm. Magnet-Knopf: pointermove-Versatz × 0.3–0.4 mit gsap.quickTo, beim Verlassen elastisch zurück.", "mobil": "Die Wortmarke bleibt randlos und wird klein, ist aber als Bild lesbar. Überschrift 12–16vw, E-Mail umbrechbar (overflow-wrap: anywhere), Knopf volle Breite und mindestens 44 px hoch. Den Vorhang nur einsetzen, wenn der Footer kürzer als der Viewport ist. Bei langen Namen zwei Zeilen oder Bildmarke.", "reduzierte_bewegung": "Wortmarke und Überschrift statisch anzeigen: kein Buchstaben-Aufbau, kein Zeilen-Reveal, kein Magnet, keine Cursor-Reaktion.", "barrierefreiheit": "Die Ansprache ist eine echte Überschrift (h2), nicht h1. Die Wortmarke ist dekorativ und steht im DOM nach den Footer-Inhalten: role=\"img\" mit aria-label, die Buchstaben-Spans aria-hidden, oder ganz aria-hidden, wenn die Marke im Header schon genannt ist. Footer-Links in