{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "mega-footer-sitemap",
 "name": "Mega-Footer mit Sitemap und Utility-Leiste",
 "name_en": "Mega footer / sitemap footer",
 "kurz": "Mega-Footer mit Sitemap-Spalten, CTA-Streifen und Utility-Leiste (Status, Theme, Sprache, Cookies), der unter 640 px Containerbreite zum Akkordeon wird.",
 "kategorie": "Footer",
 "kategorie_slug": "footer",
 "kategorie_nr": 13,
 "bau_chat": "C6",
 "prioritaet": "A",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 4,
 "stimmung": [
  "präzise"
 ],
 "stimmung_roh": [
  "sachlich",
  "seriös",
  "strukturiert"
 ],
 "technik": [
  "css",
  "grid",
  "details-summary"
 ],
 "technik_gruppen": [
  "css"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Ein großer Footer in drei Ebenen. Oben ein optionaler CTA-Streifen (Testen, Beratung). In der Mitte mehrere betitelte Spalten mit je 5 bis 8 Links in kleiner, ruhiger Schrift, etwa Produkt, Lösungen, Ressourcen, Unternehmen. Unten eine Utility-Leiste mit Logo, Copyright, Rechtlichem, Cookie-Einstellungen, Theme-Auswahl, Sprachwahl und Statusanzeige. Studios ersetzen die Produktspalten durch Menü, Social, externe Projekte (Shop, Schrift, Podcast), Adresse und Newsletter.",
  "warum_es_wirkt": "Wer bis ans Ende scrollt, sucht oft etwas Bestimmtes. Der Footer fängt diese Nutzer auf und zeigt die ganze Struktur der Seite auf einen Blick. Die Utility-Leiste zeigt Sorgfalt: Theme, Status und Cookies sind dort, wo man sie erwartet.",
  "wann_einsetzen": "Produkt- und SaaS-Seiten, Agenturen und Studios mit vielen Bereichen, Institutionen.",
  "wann_nicht": "Kleine One-Pager. Seiten, auf denen die Spalten nur die Hauptnavigation wiederholen würden.",
  "varianten": [
   "Produktspalten mit Utility-Leiste und Theme-Auswahl (Vercel)",
   "Sechs Spalten mit eigener Spalte für Rechtliches (Linear)",
   "Studio-Footer mit Spalte „Extern“ für Shop und eigene Projekte (Locomotive)",
   "Akkordeon-Spalten auf Mobil"
  ],
  "umsetzung": "Spalten als CSS Grid mit repeat(auto-fit, minmax(10rem, 1fr)) und 32 bis 64 px Abstand. Links in <ul>, Spaltentitel als h2 oder h3. Jede Spalte steckt in <details>/<summary>: Unter einer Container-Query (z. B. 640 px) wird sie zum Akkordeon, darüber setzt ein kleines Skript open und blockiert das Zuklappen. Mit dem name-Attribut ist das Akkordeon exklusiv. Utility-Leiste als Flex mit space-between und flex-wrap. Theme-Auswahl als Radiogruppe in einem <fieldset>, Cookie-Einstellungen als Popover. Den Status per Fetch von der Statusseite holen und als Badge mit Punkt und Text zeigen, nie nur über Farbe. Gleiche Linktexte nie zu verschiedenen Zielen führen lassen.",
  "mobil": "Spalten als Akkordeon oder zweispaltig. Kopfzeilen mindestens 44 px hoch. Die Utility-Leiste steht untereinander.",
  "reduzierte_bewegung": "Der Footer selbst ist statisch. Kleine Bewegungen wie Statuspuls, Theme-Pille und Akkordeon-Höhe abschalten.",
  "barrierefreiheit": "<footer> als Landmark contentinfo, die Sitemap in <nav aria-label=\"Fußzeile\">. Zwischen eng gesetzten Links mindestens 24 px Trefferfläche (WCAG 2.2). Theme-Auswahl als echte Radiogruppe mit Legende, Icons mit Textalternative. Status nie nur über Farbe zeigen. <details>/<summary> ist nativ per Tastatur bedienbar."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "Spaltenabstand 32–64 px",
  "sonstiges": "Link-Schriftgröße 13–15 px, Zeilenabstand 1.8–2.2",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": null,
 "gesehen_bei": [
  {
   "seite": "Linear",
   "url": "https://www.linear.app",
   "auszeichnung": "",
   "beobachtung": "Spalten Product, Features, Company, Resources, Connect, Legal; darüber CTA-Reihe Get started / Contact sales / Open app / Download.",
   "art": "website"
  },
  {
   "seite": "Vercel",
   "url": "https://www.vercel.com",
   "auszeichnung": "",
   "beobachtung": "Spalten Products, Build, Learn, Explore, Company, Legal & Trust inkl. Status-Link; Bottom-Bar mit Logo, Cookie Preferences, Theme-Auswahl.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Locomotive",
   "url": "https://locomotive.ca/en",
   "auszeichnung": "Awwwards SOTM 03/2023",
   "beobachtung": "Spalten Menu, Social, External (Store, Locomotive Scroll, Annual trips, Dynasty), Adresse mit Kartenlink, Telefon, Newsletter-Overlay, Store-Produkte direkt über dem Footer.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "darkroom.engineering",
   "url": "https://darkroom.engineering",
   "auszeichnung": "",
   "beobachtung": "Navigation mit Open-Source-Sektion (Lenis, Satus, Hamo, Tempus u. a.), Footer mit Manifesto-Link.",
   "art": "website"
  }
 ],
 "tutorials": [],
 "kombinierbar_mit": [
  "footer-cta-riesen-wortmarke",
  "theme-umschalter-view-transition"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/footer/mega-footer-sitemap/",
  "meta": "https://cecodesign.de/lab/fundus/footer/mega-footer-sitemap/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/footer/mega-footer-sitemap/demo"
 },
 "herkunft": {
  "quelldateien": [
   "navigation.json"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Mega-Footer mit Sitemap-Spalten, CTA-Streifen und Utility-Leiste (Status, Theme, Sprache, Cookies), der unter 640 px Containerbreite zum Akkordeon wird.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "spalten": "grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr))",
   "spaltenabstand": "gap: 32px 48px (Zeile/Spalte)",
   "link_schrift": "14px, line-height 2 (28px Zeilenhöhe, min-height 28px)",
   "spaltentitel": "Geist Mono 11px, versal, letter-spacing .14em, 56 % Deckkraft",
   "leiste_schrift": "Rechtliches 12.5px, Trefferfläche 28px",
   "hover": "opacity .8 → 1 und Unterstrich (text-decoration-color) in 150ms linear",
   "theme_wechsel": "400ms cubic-bezier(0.16, 1, 0.3, 1) auf per @property registrierte Farbvariablen",
   "theme_pille": "translate 600ms cubic-bezier(0.16, 1, 0.3, 1), Segmente 32×28px (Touch 40×34px)",
   "akkordeon_breakpoint": "@container fuss (max-width: 640px)",
   "akkordeon": "details/summary, name-Attribut (exklusiv), ::details-content block-size 0 → auto in 600ms cubic-bezier(0.16, 1, 0.3, 1), interpolate-size: allow-keywords",
   "summary_hoehe": "min-height 56px, Links mobil 15px / 36px",
   "statuspunkt": "8px, Puls scale 1 → 2.8, opacity .7 → 0, 2400ms cubic-bezier(0.16, 1, 0.3, 1), unendlich",
   "variantenwechsel": "opacity 0 → 1, translateY 18px → 0, 900ms cubic-bezier(0.16, 1, 0.3, 1)",
   "radius": "Footer clamp(14px, 1.6vw, 22px), Knöpfe 999px",
   "padding": "clamp(24px, 4vw, 56px) clamp(20px, 4vw, 56px) clamp(18px, 2.4vw, 28px)",
   "farben_dunkel": "#131312 Grund, #f1efe9 Text, Status #4fd18b",
   "farben_hell": "#faf9f5 Grund, #161615 Text, Status #13804a"
  },
  "ausloeser": "hover",
  "touch": "Unter 640 px Containerbreite (Telefon) werden die Spalten zu einem exklusiven Akkordeon mit 56 px hohen Kopfzeilen; Hover-Unterstrich entfällt, Theme-Segmente und Leisten-Elemente wachsen auf 40 px Trefferfläche.",
  "reduziert": "Kein Statuspuls, keine Pillen- und Akkordeon-Animation, Theme wechselt sofort; der Variantenwechsel blendet nur 150 ms über.",
  "korrekturen": {
   "beschreibung": "Ein großer Footer in drei Ebenen. Oben ein optionaler CTA-Streifen (Testen, Beratung). In der Mitte mehrere betitelte Spalten mit je 5 bis 8 Links in kleiner, ruhiger Schrift, etwa Produkt, Lösungen, Ressourcen, Unternehmen. Unten eine Utility-Leiste mit Logo, Copyright, Rechtlichem, Cookie-Einstellungen, Theme-Auswahl, Sprachwahl und Statusanzeige. Studios ersetzen die Produktspalten durch Menü, Social, externe Projekte (Shop, Schrift, Podcast), Adresse und Newsletter.",
   "warum_es_wirkt": "Wer bis ans Ende scrollt, sucht oft etwas Bestimmtes. Der Footer fängt diese Nutzer auf und zeigt die ganze Struktur der Seite auf einen Blick. Die Utility-Leiste zeigt Sorgfalt: Theme, Status und Cookies sind dort, wo man sie erwartet.",
   "wann_einsetzen": "Produkt- und SaaS-Seiten, Agenturen und Studios mit vielen Bereichen, Institutionen.",
   "wann_nicht": "Kleine One-Pager. Seiten, auf denen die Spalten nur die Hauptnavigation wiederholen würden.",
   "varianten": [
    "Produktspalten mit Utility-Leiste und Theme-Auswahl (Vercel)",
    "Sechs Spalten mit eigener Spalte für Rechtliches (Linear)",
    "Studio-Footer mit Spalte „Extern“ für Shop und eigene Projekte (Locomotive)",
    "Akkordeon-Spalten auf Mobil"
   ],
   "umsetzung": "Spalten als CSS Grid mit repeat(auto-fit, minmax(10rem, 1fr)) und 32 bis 64 px Abstand. Links in <ul>, Spaltentitel als h2 oder h3. Jede Spalte steckt in <details>/<summary>: Unter einer Container-Query (z. B. 640 px) wird sie zum Akkordeon, darüber setzt ein kleines Skript open und blockiert das Zuklappen. Mit dem name-Attribut ist das Akkordeon exklusiv. Utility-Leiste als Flex mit space-between und flex-wrap. Theme-Auswahl als Radiogruppe in einem <fieldset>, Cookie-Einstellungen als Popover. Den Status per Fetch von der Statusseite holen und als Badge mit Punkt und Text zeigen, nie nur über Farbe. Gleiche Linktexte nie zu verschiedenen Zielen führen lassen.",
   "mobil": "Spalten als Akkordeon oder zweispaltig. Kopfzeilen mindestens 44 px hoch. Die Utility-Leiste steht untereinander.",
   "reduzierte_bewegung": "Der Footer selbst ist statisch. Kleine Bewegungen wie Statuspuls, Theme-Pille und Akkordeon-Höhe abschalten.",
   "barrierefreiheit": "<footer> als Landmark contentinfo, die Sitemap in <nav aria-label=\"Fußzeile\">. Zwischen eng gesetzten Links mindestens 24 px Trefferfläche (WCAG 2.2). Theme-Auswahl als echte Radiogruppe mit Legende, Icons mit Textalternative. Status nie nur über Farbe zeigen. <details>/<summary> ist nativ per Tastatur bedienbar."
  },
  "geprueft": "31.10.2026",
  "notiz": "Drei Varianten per Umschalter: Produkt (erfundene Software „Planwerk“ für Architekturbüros, vier Spalten, CTA, Status „Alle Systeme laufen“), Studio (erfundenes „Atelier Kranich“, Köln, mit Shop-Karte, Spalte Extern, Newsletter, Ortszeit) und Mobil (derselbe Footer im 390-px-Rahmen, Akkordeon über Container-Query). Theme-Radiogruppe schaltet den Footer wirklich hell, dunkel oder System, Farbwechsel über @property weich. Cookie-Einstellungen als Popover. Die Vorführung zeigt Hover, Theme-Wechsel, Variantenwechsel und das exklusive Akkordeon mit einem gedachten Zeiger. Bilder 01.11.2026: eigene Bilder statt Portfolio. Zugang 02.11.2026: --leise Alpha .55 → .68 (5,6:1 auf #e6e2d9), --f-leise der hellen Themen .58 → .66 (5,7:1). Marken „Neu/3 offen“ in Tinte mit 80 % statt --f-leise, weil sie im Link mit opacity .8 sitzen (wirksam .64 statt .45). Kontrastmodus: Knöpfe mit Rahmen ButtonText."
 }
}