{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "studio-visitenkarte-footer",
 "name": "Studio-Visitenkarte im Footer (Standorte, Kontakt-Tabs, Ortszeit)",
 "name_en": "Studio info footer (locations, contact tabs, local time)",
 "kurz": "Footer als Visitenkarte einer Interaction-Designerin aus Hannover: Kontakt-Tabs mit rollender E-Mail und Kopier-Rückmeldung, Adresse, Ortszeit je Standort und Ausgabe-Zeile.",
 "kategorie": "Footer",
 "kategorie_slug": "footer",
 "kategorie_nr": 13,
 "bau_chat": "C6",
 "prioritaet": "A",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 5,
 "stimmung": [
  "editorial",
  "präzise",
  "warm"
 ],
 "stimmung_roh": [
  "persönlich",
  "vertrauenswürdig",
  "warm",
  "editorial"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "intl"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Der Footer zeigt das Studio als greifbaren Ort: Adresse mit Kartenlink, Ortszeit je Standort und Telefon. Kontaktwege sind nach Anliegen getrennt, zum Beispiel Neues Projekt, Allgemeines und Vorträge oder Karriere. Als Tabs wechseln sie die sichtbare E-Mail. Dazu kommen eine Ausgabe- oder Versionszeile, Credits und Links zu Nebenprojekten wie Newsletter, Store, Labs oder Open Source.",
  "warum_es_wirkt": "Adresse, Ortszeit und Telefon machen das Studio greifbar und schaffen Vertrauen. Getrennte Ansprechwege senken die Hemmschwelle, weil klar ist, wohin eine Anfrage gehört. Ausgabe-Zeile und Credits zeigen Stolz aufs Handwerk.",
  "wann_einsetzen": "Agenturen, Studios, Büros, Praxen und Freelancer mit festem Standort.",
  "wann_nicht": "Rein digitale Produkte ohne Ortsbezug.",
  "varianten": [
   "Kontakt-Tabs: Anliegen wechseln die sichtbare E-Mail (Unseen: New Business und General)",
   "Zwei Standorte mit eigener Ortszeit (Cuberto: Alexandria und Prag)",
   "Liste ohne Tabs: alle Adressen untereinander, zugleich der Zustand ohne JavaScript",
   "Ausgabe- oder Versionszeile (Dennis Snellenberg: „2022 © Edition“)",
   "Credits und Nebenprojekte (Lusion: Built by Lusion und R&D-Seite; basement.studio: Ventures)",
   "Praxis oder Handwerk: Telefon zuerst, Sprechzeiten mit Live-Status („schließt in 40 Min.“), Anfahrt nach Bus und Bahn, Auto, Barrierefrei, Notfallnummern",
   "Studio-Bühne: Mail-Adresse als Schlagzeile mit Zeichen-Roll, Ansprechpersonen je Anliegen, zwei Studios mit Ortszeit, Wortmarke über die volle Breite",
   "Gastgeber (Hotel, Gasthof, Eventlocation): Adresse mit Anreise in einem Satz, Telefon und E-Mail groß, Check-in- und Check-out-Zeiten mit Schlüssel-Hinweis, Social-Links, Saisonbrief optional"
  ],
  "umsetzung": "Adresse in <address>, Kartenlink erst auf Klick laden. Ortszeit über Intl.DateTimeFormat mit timeZone je Standort, Zeitzonenname über timeZoneName: 'short'. Kontakt-Tabs als ARIA-Tabs (tablist, tab, tabpanel, Pfeiltasten, Pos1/Ende); alle E-Mails stehen als echte mailto:-Links im HTML, ohne JavaScript untereinander. Der Roll: jede Zeile sitzt in einem Fenster mit overflow: clip und einer Zeilenhöhe, die alte fährt um 100 % hinaus, die neue hinein. Kopieren über navigator.clipboard.writeText mit sichtbarer Rückmeldung und aria-live. E-Mail-Adressen nicht per JavaScript zusammensetzen, Spam lieber serverseitig filtern.",
  "mobil": "Spalten untereinander, Telefonnummer als tel:-Link mit großem Tippziel, Kopieren-Knopf immer sichtbar.",
  "reduzierte_bewegung": "Tab-Wechsel ohne Roll, die E-Mail tauscht sofort.",
  "barrierefreiheit": "<address>, tel:- und mailto:-Links, Tabs mit Pfeiltasten oder eine einfache Liste. Inaktive Tafeln sind inert. Kopieren meldet sich über aria-live. Fokus-Ring in der Akzentfarbe."
 },
 "messwerte": {
  "easing": "ease-out",
  "dauer_ms": "Tab-Wechsel 200–300",
  "stagger_ms": "",
  "distanz": "Text-Roll 100 % Zeilenhöhe beim E-Mail-Wechsel",
  "sonstiges": "",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": {
  "bezier": [
   0.165,
   0.84,
   0.44,
   1.0
  ],
  "css": "cubic-bezier(0.165, 0.84, 0.44, 1)",
  "name": "eigene Kurve",
  "dauer_ms": 200
 },
 "gesehen_bei": [
  {
   "seite": "Unseen Studio",
   "url": "https://www.unseen.co",
   "auszeichnung": "",
   "beobachtung": "„Say hello“-Block mit Tabs New Business und General, zwei E-Mails, Büros Bristol und London.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Cuberto",
   "url": "https://cuberto.com",
   "auszeichnung": "",
   "beobachtung": "Footer mit Hauptbüro Alexandria VA und zweitem Büro Prag, Links inkl. Workflow-Subdomain.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Dennis Snellenberg",
   "url": "https://dennissnellenberg.com",
   "auszeichnung": "",
   "beobachtung": "Ortszeit, ‚Located in the Netherlands‘, Versionslabel „2022 © Edition“.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Immersive Garden",
   "url": "https://immersive-g.com",
   "auszeichnung": "Awwwards SOTM 01/2025",
   "beobachtung": "Footer mit Kontakt-E-Mail, Pariser Adresse, Newsletter-Label und Social-Links.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Ask Phill",
   "url": "https://askphill.com/",
   "auszeichnung": "",
   "beobachtung": "Amsterdam-Uhr, Adresse, Telefon, Newsletter „Receipts“ über dem Footer.",
   "art": "website"
  }
 ],
 "tutorials": [],
 "kombinierbar_mit": [
  "live-uhr-und-standort",
  "footer-cta-riesen-wortmarke",
  "mega-footer-sitemap"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/",
  "meta": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo"
 },
 "herkunft": {
  "quelldateien": [
   "navigation.json"
  ],
  "pruefnotizen": [
   "02.11.2026: Priorität C → A (Lückenrecherche K2), weil steht in 12 Rezepten, Priorität C widersprach der tatsächlichen Nutzung."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Footer als Visitenkarte einer Interaction-Designerin aus Hannover: Kontakt-Tabs mit rollender E-Mail und Kopier-Rückmeldung, Adresse, Ortszeit je Standort und Ausgabe-Zeile.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.165, 0.84, 0.44, 1) (easeOutQuart, aus dem Rezept; für alle Bewegungen)",
   "roll_ms": 240,
   "roll_distanz": "100 % Zeilenhöhe; weiter: alte Zeile nach oben, neue von unten; zurück umgekehrt",
   "tab_strich": "transform translateX + scaleX, 240 ms, gleiche Kurve",
   "hinweis_und_kopierknopf": "Deckkraft 240 ms, gleiche Kurve",
   "kopieren_rueckmeldung": "Label rollt „Kopieren“ → „Kopiert“ (100 %, 240 ms), Haken statt Blatt, zurück nach 1600 ms; aria-live-Ansage",
   "hover_ms": 120,
   "ortszeit": "Intl.DateTimeFormat de-DE, hour/minute 2-digit, timeZoneName short (MEZ, WEZ); Europe/Berlin und Europe/Lisbon; Status Mo–Fr 9–18 Uhr „am Schreibtisch“; Takt 15 s",
   "saison": "Variante Zwei Orte: Hannover Apr–Okt, Lissabon Nov–Mär; der Ort außerhalb der Saison wird grau",
   "theme_wechsel": "View Transition 320 ms, gleiche Kurve (ohne Unterstützung sofort)",
   "farben": "#fcfcfc Grund, #0b0b09 Text, #646464 Sekundär, #e8e8e8 Linien, #f0f0f0 Hover-Fläche, #2f5bea Fokus und Link-Hover; dunkel #0b0b09 / #e5e5e5 / #989898 / #252525, Akzent #7d9bff",
   "schrift": "Host Grotesk 400/500 (Text 16 px/1.6, Satz clamp(1.25rem, 1rem + 1vw, 1.5rem) 500, E-Mail clamp(1.125rem, .9rem + 1vw, 1.5rem) 500), Newsreader Italic 1.07em für einzelne Wörter, Geist Mono 11 px Versal .14em für Demo-Labels; Tabellenziffern",
   "raster": "Seite max. 1072 px; Footer 6fr / 3.2fr / 2.8fr, Abstand 48 px × clamp(28px, 4vw, 64px)"
  },
  "ausloeser": "klick",
  "touch": "Tabs, Kopieren und Darstellung sind Tippziele mit mindestens 40–44 px Höhe; die Telefonnummer wird als umrandeter tel:-Knopf gezeigt; Spalten stehen untereinander. Praxis: Reiter und Wege mindestens 44 px, Telefonnummer groß als tel:-Link. Studio-Bühne: Anliegen als Zeilen mit über 44 px, Mail-Roll ohne Hover nicht nötig. Gastgeber: Telefon und E-Mail als große Links, Kontakt steht am Telefon zuerst, Wege und Social-Links 44 px hoch, Eintragen-Knopf volle Breite.",
  "reduziert": "Kein Roll und kein gleitender Tab-Strich: Die E-Mail wechselt sofort, Kopier-Rückmeldung ohne Bewegung, Theme-Wechsel ohne View Transition. Praxis: Status und Anfahrt wechseln ohne Roll und ohne Höhenanimation. Studio-Bühne: Wortmarke blendet 200 ms ein, kein Mail-Roll, Doppelpunkt blinkt nicht. Gastgeber: Status wechselt ohne Roll, Danke-Meldung ohne Versatz.",
  "korrekturen": {
   "beschreibung": "Der Footer zeigt das Studio als greifbaren Ort: Adresse mit Kartenlink, Ortszeit je Standort und Telefon. Kontaktwege sind nach Anliegen getrennt, zum Beispiel Neues Projekt, Allgemeines und Vorträge oder Karriere. Als Tabs wechseln sie die sichtbare E-Mail. Dazu kommen eine Ausgabe- oder Versionszeile, Credits und Links zu Nebenprojekten wie Newsletter, Store, Labs oder Open Source.",
   "warum_es_wirkt": "Adresse, Ortszeit und Telefon machen das Studio greifbar und schaffen Vertrauen. Getrennte Ansprechwege senken die Hemmschwelle, weil klar ist, wohin eine Anfrage gehört. Ausgabe-Zeile und Credits zeigen Stolz aufs Handwerk.",
   "wann_einsetzen": "Agenturen, Studios, Büros, Praxen und Freelancer mit festem Standort.",
   "wann_nicht": "Rein digitale Produkte ohne Ortsbezug.",
   "varianten": [
    "Kontakt-Tabs: Anliegen wechseln die sichtbare E-Mail (Unseen: New Business und General)",
    "Zwei Standorte mit eigener Ortszeit (Cuberto: Alexandria und Prag)",
    "Liste ohne Tabs: alle Adressen untereinander, zugleich der Zustand ohne JavaScript",
    "Ausgabe- oder Versionszeile (Dennis Snellenberg: „2022 © Edition“)",
    "Credits und Nebenprojekte (Lusion: Built by Lusion und R&D-Seite; basement.studio: Ventures)",
    "Praxis oder Handwerk: Telefon zuerst, Sprechzeiten mit Live-Status („schließt in 40 Min.“), Anfahrt nach Bus und Bahn, Auto, Barrierefrei, Notfallnummern",
    "Studio-Bühne: Mail-Adresse als Schlagzeile mit Zeichen-Roll, Ansprechpersonen je Anliegen, zwei Studios mit Ortszeit, Wortmarke über die volle Breite",
    "Gastgeber (Hotel, Gasthof, Eventlocation): Adresse mit Anreise in einem Satz, Telefon und E-Mail groß, Check-in- und Check-out-Zeiten mit Schlüssel-Hinweis, Social-Links, Saisonbrief optional"
   ],
   "umsetzung": "Adresse in <address>, Kartenlink erst auf Klick laden. Ortszeit über Intl.DateTimeFormat mit timeZone je Standort, Zeitzonenname über timeZoneName: 'short'. Kontakt-Tabs als ARIA-Tabs (tablist, tab, tabpanel, Pfeiltasten, Pos1/Ende); alle E-Mails stehen als echte mailto:-Links im HTML, ohne JavaScript untereinander. Der Roll: jede Zeile sitzt in einem Fenster mit overflow: clip und einer Zeilenhöhe, die alte fährt um 100 % hinaus, die neue hinein. Kopieren über navigator.clipboard.writeText mit sichtbarer Rückmeldung und aria-live. E-Mail-Adressen nicht per JavaScript zusammensetzen, Spam lieber serverseitig filtern.",
   "mobil": "Spalten untereinander, Telefonnummer als tel:-Link mit großem Tippziel, Kopieren-Knopf immer sichtbar.",
   "reduzierte_bewegung": "Tab-Wechsel ohne Roll, die E-Mail tauscht sofort.",
   "barrierefreiheit": "<address>, tel:- und mailto:-Links, Tabs mit Pfeiltasten oder eine einfache Liste. Inaktive Tafeln sind inert. Kopieren meldet sich über aria-live. Fokus-Ring in der Akzentfarbe."
  },
  "geprueft": "02.11.2026",
  "notiz": "Rezept freelancer-stille-visitenkarte: erfundene Interaction-Designerin Ida Brenneke, Hannover-Linden, im Winter in Lissabon. Seitenende mit „Jetzt“-Abschnitt, darunter der Footer: Satz in Textgröße, Kontakt-Tabs (Neues Projekt, Allgemeines, Vorträge) mit 240-ms-Roll und Kopier-Rückmeldung, Standort mit Live-Ortszeit und Status, Nebenprojekte, Ausgabe-Zeile, Hell/Dunkel per View Transition. Umschalter: Tabs, Zwei Orte (Saison entscheidet, welcher Ort aktiv ist), Liste. Kurve aus dem Rezept (gemessen), weil die Messwerte des Musters nur typisch sind; 240 ms liegt im Musterbereich 200–300. Referenzen (nur Prinzipien): jhey.dev, makemepulse.com, dennissnellenberg.com, paco.me. AD-Review 01.11.2026: Note 4. Varianten 01.11.2026: Umschalter „Variante“ im Pult (?v=basis|praxis|buehne). Praxis (Rezept praxis-gesundheit-ruhig): erfundene Hausarztpraxis Am Kirchgarten, Bremen-Findorff, Termin-Band, petrolfarbener Footer mit Sprechzeiten und Live-Status (Feiertage, Praxisurlaub mit Vertretung), Telefon zuerst, Anfahrt-Reiter, 116 117 und 112. Studio-Bühne (Rezept kreativstudio-buehne): erfundenes Studio Wucht, Leipzig und Helsinki, Mail mit Zeichen-Roll, Ansprechpersonen, Ortszeiten, Wortmarke auf volle Breite. Vorführung zeigt die gewählte Variante (Praxis mit gedachten Uhrzeiten Do 11.20, Do 18.25, Sa). Zugang 02.11.2026: Raster und Tafel-Fenster mit minmax(0, 1fr), bei ≤ 360 px brechen Adresszeile (Kopieren-Knopf darunter) und Anderswo-Liste um (kein Querscrollen); Knopf-Rahmen im Kontrastmodus. Reiter mit wanderndem tabindex sind richtig so (Hinweis „klickbar, nicht fokussierbar“ ist dort ein Fehlalarm). Varianten 02.11.2026: neue Variante gastgeber (?v=gastgeber, Rezept boutique-hotel-gastgeber, für Hotel, Gasthof, Eventlocation): erfundenes Hotel Rohrdommel in Plau am See, Familie Tiedemann. Newsreader 300 und Mona Sans, Sand #f3eee7, Footer #3e3a37 mit Creme #fef2e3, Hauston #6e5a47. Über dem Footer ein Satz und das Haus als Bildband (medien/hotel-haus-am-see, am Telefon Hochformat). Drei Spalten: Anreise (address, ein Satz Bahn und Auto, Route und Bahnverbindung), Kontakt (Telefon und E-Mail groß, Kopieren mit Roll, Live-Status der Rezeption 7 bis 21 Uhr per Intl Europe/Berlin), Ankommen und Abreisen (dl mit Check-in, Check-out, Rezeption, Frühstück, Schlüsselkasten bei später Anreise). Darunter Saisonbrief (optional, Pult „Saisonbrief mit/ohne“; Prüfung nach dem Verlassen des Felds, Double-Opt-in-Hinweis) und Social-Links, Unterkante mit AGB und Storno. Am Telefon steht Kontakt zuerst. Damit hat die Demo vier Varianten (Ausnahme zu „höchstens 3“, wie bei anderen Demos).",
  "varianten": [
   {
    "id": "basis",
    "name": "Stille Visitenkarte",
    "wann": "Freelancer, kleine Studios und Büros mit einem oder zwei Orten: Kontaktwege nach Anliegen als Tabs, Ortszeit, Nebenprojekte, Text in Lesegröße.",
    "werte": {
     "rezept": "freelancer-stille-visitenkarte",
     "kurve": "cubic-bezier(0.165, 0.84, 0.44, 1)",
     "roll_ms": 240,
     "hover_ms": 120,
     "schrift": "Host Grotesk 400/500, Newsreader Italic für einzelne Wörter",
     "farben": "#fcfcfc / #0b0b09 / #646464, Fokus #2f5bea",
     "kontakt": "Unterumschalter Tabs, Zwei Orte, Liste"
    }
   },
   {
    "id": "praxis",
    "name": "Praxis mit Sprechzeiten und Anfahrt",
    "wann": "Arzt-, Therapie- und Physiopraxen, auch Handwerksbetriebe und Läden mit festen Zeiten: Telefon und Termin zuerst, Sprechzeiten mit Live-Status, Anfahrt nach Verkehrsmittel und Barrierefreiheit, Notfallnummern.",
    "werte": {
     "rezept": "praxis-gesundheit-ruhig",
     "kurve": "cubic-bezier(0.2, 0, 0.38, 0.9)",
     "status": "Intl.DateTimeFormat Europe/Berlin, Takt 30 s; offen, „schließt in N Min.“ ab 45 Min. vor Schluss (Apricot), geschlossen mit nächster Öffnung; Feiertage und Praxisurlaub als Datumsliste",
     "status_roll": "alter Text nach oben, neuer von unten, je 200 ms, mit Deckkraft",
     "heute": "Zeile des aktuellen Wochentags fett mit „· heute“",
     "reiter": "Bus & Bahn, Auto & Rad, Barrierefrei; Farbe 200 ms, Höhe des Fensters 250 ms, Inhalt opacity 0 → 1 und y 8 px → 0 in 400 ms; Pfeiltasten, Home, End",
     "schrift": "Hedvig Letters Serif 400 (opsz 24) für Titel und Telefonnummer clamp(1.625rem, 1.2rem + 1.4vw, 2.125rem), Google Sans Flex 400/500 Text 1rem bis 1.0625rem",
     "farben": "Grund #f5f7f7, Footer #005450, Text #363b3b / #596666, Akzent #ffc776 nur für „bald zu“ und Sonderzeiten",
     "raster": "1.15fr / 0.9fr / 1.1fr, unter 980 px 2 Spalten, unter 640 px 1",
     "touch": "Reiter und Wege mindestens 44 px"
    }
   },
   {
    "id": "buehne",
    "name": "Studio-Bühne mit Riesen-Wortmarke",
    "wann": "Kreativstudios, Agenturen, Film und Fotografie mit Haltung: die Mail-Adresse als Schlagzeile, Ansprechpersonen je Anliegen, zwei Studios mit Ortszeit, die Wortmarke als Abschluss über die volle Breite.",
    "werte": {
     "rezept": "kreativstudio-buehne",
     "kurve": "cubic-bezier(0.16, 1, 0.3, 1)",
     "mail_roll": "jedes Zeichen rollt 400 ms nach oben, 12 ms Versatz je Zeichen, darunter dieselbe Zeile in #ff5a1f",
     "wortmarke": "TikTok Sans 800, font-stretch 75 %, Laufweite -0.03em, Zeilenhöhe .8; Schriftgröße per JS auf volle Spaltenbreite; Buchstaben translateY 105 % → 0, 1100 ms, 70 ms Versatz, Start bei 40 % Sichtbarkeit (IntersectionObserver)",
     "ortszeit": "Europe/Berlin und Europe/Helsinki, Stunden:Minuten in TikTok Sans 800 / 75 %, Doppelpunkt blinkt im Sekundentakt (Deckkraft .25)",
     "anliegen_hover": "Text und Pfeil #ff5a1f, Pfeil translate(4px, -4px), 300 ms",
     "farben": "#0b0b0b / #f2f2f2 / #8a8a8a, Linien #262626, Signal #ff5a1f nur für Hover, Roll und Doppelpunkt",
     "labels": "DM Mono 0.75rem versal +0.04em",
     "reduziert": "Wortmarke nur Deckkraft 200 ms, kein Roll, kein Blinken"
    }
   },
   {
    "id": "gastgeber",
    "name": "Gastgeber (Hotel am See)",
    "knopf": "Gastgeber",
    "wann": "Hotel, Gasthof, Pension, Eventlocation: Anreise in einem Satz, Telefon und E-Mail groß, An- und Abreisezeiten, Social-Links, Saisonbrief nur wenn wirklich verschickt.",
    "werte": {
     "rezept": "boutique-hotel-gastgeber",
     "kurven": "auf 300 ms cubic-bezier(0.16, 1, 0.3, 1), zu 200 ms cubic-bezier(0.7, 0, 0.84, 0), UI 150 ms (token-toggle-asymmetrisch)",
     "farben": "#f3eee7 Sand, #3e3a37 Footer, #fef2e3 Creme, Creme .74 für Nebentext (6,4:1), #6e5a47 Hauston, #646661 Meta auf Sand",
     "schrift": "Newsreader 300 opsz 36–72 (Telefon clamp(2rem, 1.5rem + 1.6vw, 2.75rem), E-Mail clamp(1.375rem, 1.15rem + .7vw, 1.75rem), Adresse 1.375rem); Mona Sans 1.0625rem, Labels wdth 118 % versal .06em",
     "raster": "1.1fr / 1.25fr / .95fr, ≤ 980 px zwei Spalten mit Kontakt zuerst, ≤ 640 px eine",
     "status": "Rezeption 7 bis 21 Uhr, Europe/Berlin, Takt 30 s; letzte 60 Min. „noch X Min.“; danach Schlüsselkasten-Hinweis; Wechsel als Roll 300/200 ms",
     "kopieren": "navigator.clipboard, Label rollt Kopieren → Kopiert, zurück nach 1600 ms, aria-live",
     "saisonbrief": "optional; Prüfung erst nach Verlassen des Felds, danach live; Erfolg ersetzt das Formular (Fokus auf die Meldung), Double-Opt-in-Hinweis",
     "bild": "medien/hotel-haus-am-see.webp, Höhe clamp(200px, 26vw, 340px), am Telefon -hoch"
    }
   }
  ]
 }
}