{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "live-uhr-und-standort",
 "name": "Live-Uhr und Standort in Navigation oder Footer",
 "name_en": "Local time and location indicator (studio clock)",
 "kurz": "Live-Ortszeit mit Stadt und Zeitzone in Navigation oder Footer, getaktet auf die volle Sekunde, wahlweise mit mehreren Standorten und Dienststatus.",
 "kategorie": "Navigation",
 "kategorie_slug": "navigation",
 "kategorie_nr": 3,
 "bau_chat": "C3",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 4,
 "stimmung": [
  "editorial",
  "präzise",
  "warm"
 ],
 "stimmung_roh": [
  "persönlich",
  "editorial",
  "technisch",
  "warm"
 ],
 "technik": [
  "vanilla-js",
  "intl",
  "css"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Ein kleines Textelement zeigt Stadt oder Zeitzone und die aktuelle Ortszeit des Teams, etwa „Passau 14:32 MEZ“. Es steht meist monospaced oder in Versalien in der Kopfzeile neben Logo oder Sprachlink oder im Footer neben der Adresse. Die Uhr tickt live, je nach Auflösung im Sekunden- oder Minutentakt, oft mit blinkendem Doppelpunkt. Teams mit mehreren Standorten zeigen mehrere Städte nebeneinander. Manche ergänzen einen Status wie „Support live“ oder „geschlossen“.",
  "warum_es_wirkt": "Die Uhr macht ein digitales Team greifbar: Hier sitzen echte Menschen, und zwar gerade jetzt. Sie zeigt Internationalität und Erreichbarkeit auf einen Blick. Als kleines, sorgfältig gesetztes Detail signalisiert sie Handwerk.",
  "wann_einsetzen": "Studios, Freelancer und Agenturen, verteilte Teams, Software mit Support- oder Rufbereitschaftszeiten, Hotels und Restaurants mit Bezug zu Öffnungszeiten.",
  "wann_nicht": "Wenn der Standort für Besucher keine Rolle spielt und die Uhr nur Dekoration wäre. Wenn die Kopfzeile schon voll ist.",
  "varianten": [
   "Zeitzonenkürzel und Uhrzeit in der Navigation (Obys: „CET …“)",
   "Standorttext im Header ohne Uhr (Locomotive: „Montréal, Quebec“)",
   "Ortszeit im Footer mit „Located in …“ (Dennis Snellenberg)",
   "Uhr-Widget neben der Büroadresse (Ask Phill: Amsterdam)",
   "Mehrere Städte mit Zeiten (Rejouice: San Diego, Paris)"
  ],
  "umsetzung": "Zeit über Intl.DateTimeFormat('de-DE', { timeZone: 'Europe/Berlin', hour: '2-digit', minute: '2-digit', timeZoneName: 'short' }) formatieren; formatToParts liefert Stunde, Minute und Kürzel einzeln für eigenes Markup. Aktualisieren per setTimeout, ausgerichtet auf die nächste volle Sekunde bzw. Minute, statt per setInterval, das driftet. font-variant-numeric: tabular-nums verhindert springende Ziffern. Die erste Zeit serverseitig rendern, damit kein leerer Platzhalter erscheint. In SSR-Frameworks droht ein Hydration-Mismatch: suppressHydrationWarning setzen oder die Zeit erst im Client ersetzen.",
  "mobil": "Im Header oft ausgeblendet, dafür im Menü-Overlay oder im Footer. Alternativ nur Stadt und Uhrzeit ohne Kürzel und Status.",
  "reduzierte_bewegung": "Kein blinkender Doppelpunkt. Minuten statt Sekunden anzeigen und nur einmal pro Minute aktualisieren.",
  "barrierefreiheit": "Die Zeit in <time datetime> setzen und das Attribut bei jedem Takt aktualisieren. Nicht als aria-live markieren, sonst kommen ständig Ansagen. Kontext wie „Ortszeit Passau“ als visuell versteckten Text ergänzen. Ist die Uhr klickbar, als Button mit aria-expanded umsetzen."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "Update alle 1000 oder 60000",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "Schriftgröße meist 11–14 px, Versalien oder Mono, tabular-nums",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": null,
 "gesehen_bei": [
  {
   "seite": "Obys",
   "url": "https://obys.agency",
   "auszeichnung": "",
   "beobachtung": "Zeitzonenlabel „CET 00:00 AM“ in der Navigation (im Textabruf statischer Platzhalter, live per JS vermutet).",
   "art": "website-ungeprueft",
   "browser_gemessen": true
  },
  {
   "seite": "Locomotive",
   "url": "https://locomotive.ca/en",
   "auszeichnung": "Awwwards SOTM 03/2023",
   "beobachtung": "Standorttext „Montréal, Quebec“ neben dem Sprachlink „Français“ im Header.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Dennis Snellenberg",
   "url": "https://dennissnellenberg.com",
   "auszeichnung": "",
   "beobachtung": "Footer mit Ortszeit („09:41 PM CET“), ‚Located in the Netherlands‘ und Version „2022 © Edition“.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Ask Phill",
   "url": "https://askphill.com/",
   "auszeichnung": "",
   "beobachtung": "Amsterdam-Uhr-Widget im Footer neben Adresse und Telefon.",
   "art": "website"
  },
  {
   "seite": "Rejouice",
   "url": "https://www.rejouice.com",
   "auszeichnung": "",
   "beobachtung": "Ortszeiten San Diego und Paris im ‚at a glance‘-Bereich (Platzhalter 00:00:00PM im Textabruf).",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Framer Marketplace: Local Time (Komponente, Referenz für Verbreitung)",
   "url": "https://www.framer.com/marketplace/components/local-time/"
  }
 ],
 "kombinierbar_mit": [
  "vollbild-overlay-menue-bildvorschau",
  "studio-visitenkarte-footer",
  "theme-umschalter-view-transition"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/navigation/live-uhr-und-standort/",
  "meta": "https://cecodesign.de/lab/fundus/navigation/live-uhr-und-standort/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/navigation/live-uhr-und-standort/demo"
 },
 "herkunft": {
  "quelldateien": [
   "navigation.json"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Live-Ortszeit mit Stadt und Zeitzone in Navigation oder Footer, getaktet auf die volle Sekunde, wahlweise mit mehreren Standorten und Dienststatus.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "format": "new Intl.DateTimeFormat('de-DE', { timeZone: 'Europe/Berlin', hour: '2-digit', minute: '2-digit', second: '2-digit', hourCycle: 'h23', timeZoneName: 'short' }).formatToParts(new Date())",
   "takt_ms": 1000,
   "takt_reduziert_ms": 60000,
   "synchronisierung": "setTimeout(tick, takt - (Date.now() % takt) + 8): jeder Schritt landet auf der vollen Sekunde bzw. Minute, kein setInterval-Drift",
   "doppelpunkt": "hart geschaltet, an den Sekundentakt gekoppelt: 500 ms deckend, 500 ms opacity 0.28; bei reduzierter Bewegung fest",
   "zeitzonenkuerzel": "aus timeZoneName 'short' (MEZ/MESZ, für Toronto GMT-5); Footer zusätzlich UTC-Versatz aus der Zone berechnet (MEZ · UTC+1)",
   "datetime_attribut": "ISO-Ortszeit mit Versatz, z. B. 2026-11-01T14:32:07+01:00, bei jedem Takt neu",
   "schrift_nav": "Geist Mono 12px, wght 500, Laufweite 0.06em, tabular-nums; Stadt und Kürzel 11px versal, Laufweite 0.14em bzw. 0.1em, Farbe #8a8f98; Uhrzeit #f7f8f8",
   "schrift_footer": "Geist 500, clamp(4rem, 1.4rem + 9vw, 9.5rem), Laufweite -0.035em, Zeilenhöhe 0.9, tabular-nums; Sekunden in #62676f",
   "uhr_knopf": "32px hoch, Innenabstand 0 12px, Radius 8px; Hover/offen: Rand #242728, Grund #161718, 160 ms",
   "status_punkt": "6px, grün #59d499 (Support live), gelb #ffc533 (Rufbereitschaft), leer = Ring #4a4f55; Hof 3px mit 14 % Deckkraft",
   "rufbereitschaft": "Dienst nach Ortszeit: Passau 7–15, Toronto 9–17, Melbourne 9–17 Uhr (im Winter lückenlos)",
   "popover": "Zeitvergleich mit der Zone des Besuchers (Intl.DateTimeFormat().resolvedOptions().timeZone); öffnet bei Hover nach 150 ms, schließt nach 200 ms, Klick/Tippen schaltet um, Esc schließt; opacity + translateY 4px, 160 ms",
   "easing_ui": "cubic-bezier(0.25, 0.46, 0.45, 0.94) (easeOutQuad, Rezept saas-produkt-praezise)",
   "variantenwechsel": "Deckkraft 0 → 1 und translateY 4px → 0, 180 ms easeOutQuad; Segment-Pille gleitet 180 ms",
   "lupe_vorfuehrung": "Durchmesser 260px, Vergrößerung 2.2, opacity + scale 0.94 → 1, 300 ms cubic-bezier(0.32, 0.72, 0, 1)",
   "vorfuehrung": "Navigation → Drei Orte → Footer, je 4500 ms; Lupe 700 ms nach dem Wechsel, 450 ms vor dem nächsten aus",
   "farben": "Grund #08090a, Panel #101112, Karte #161718, Linie #242728, Text #f7f8f8 / #d0d6e0 / #8a8f98, Markenton #5b9dff"
  },
  "ausloeser": "dauer",
  "touch": "Telefon (390 px): Kopfzeile zeigt nur Stadt und Uhrzeit neben dem Menüknopf, Dienststatus und Zeitzonenkürzel fallen weg. In der Variante Drei Orte bleibt nur die Stadt im Dienst sichtbar, dazu +2. Antippen der Uhr öffnet den Zeitvergleich mittig unter der Uhr, erneutes Tippen oder Tippen daneben schließt ihn. Footer einspaltig mit zweispaltiger Sitemap.",
  "reduziert": "Minutenauflösung: Sekunden ausgeblendet, Takt 60000 ms, synchron zur vollen Minute. Doppelpunkt blinkt nicht. Variantenwechsel, Popover und Lupe nur mit 150 ms Überblenden, ohne Versatz und Skalierung; Sprung zum Footer ohne Smooth Scroll.",
  "korrekturen": {
   "beschreibung": "Ein kleines Textelement zeigt Stadt oder Zeitzone und die aktuelle Ortszeit des Teams, etwa „Passau 14:32 MEZ“. Es steht meist monospaced oder in Versalien in der Kopfzeile neben Logo oder Sprachlink oder im Footer neben der Adresse. Die Uhr tickt live, je nach Auflösung im Sekunden- oder Minutentakt, oft mit blinkendem Doppelpunkt. Teams mit mehreren Standorten zeigen mehrere Städte nebeneinander. Manche ergänzen einen Status wie „Support live“ oder „geschlossen“.",
   "warum_es_wirkt": "Die Uhr macht ein digitales Team greifbar: Hier sitzen echte Menschen, und zwar gerade jetzt. Sie zeigt Internationalität und Erreichbarkeit auf einen Blick. Als kleines, sorgfältig gesetztes Detail signalisiert sie Handwerk.",
   "wann_einsetzen": "Studios, Freelancer und Agenturen, verteilte Teams, Software mit Support- oder Rufbereitschaftszeiten, Hotels und Restaurants mit Bezug zu Öffnungszeiten.",
   "wann_nicht": "Wenn der Standort für Besucher keine Rolle spielt und die Uhr nur Dekoration wäre. Wenn die Kopfzeile schon voll ist.",
   "varianten": [
    "Zeitzonenkürzel und Uhrzeit in der Navigation (Obys: „CET …“)",
    "Standorttext im Header ohne Uhr (Locomotive: „Montréal, Quebec“)",
    "Ortszeit im Footer mit „Located in …“ (Dennis Snellenberg)",
    "Uhr-Widget neben der Büroadresse (Ask Phill: Amsterdam)",
    "Mehrere Städte mit Zeiten (Rejouice: San Diego, Paris)"
   ],
   "umsetzung": "Zeit über Intl.DateTimeFormat('de-DE', { timeZone: 'Europe/Berlin', hour: '2-digit', minute: '2-digit', timeZoneName: 'short' }) formatieren; formatToParts liefert Stunde, Minute und Kürzel einzeln für eigenes Markup. Aktualisieren per setTimeout, ausgerichtet auf die nächste volle Sekunde bzw. Minute, statt per setInterval, das driftet. font-variant-numeric: tabular-nums verhindert springende Ziffern. Die erste Zeit serverseitig rendern, damit kein leerer Platzhalter erscheint. In SSR-Frameworks droht ein Hydration-Mismatch: suppressHydrationWarning setzen oder die Zeit erst im Client ersetzen.",
   "mobil": "Im Header oft ausgeblendet, dafür im Menü-Overlay oder im Footer. Alternativ nur Stadt und Uhrzeit ohne Kürzel und Status.",
   "reduzierte_bewegung": "Kein blinkender Doppelpunkt. Minuten statt Sekunden anzeigen und nur einmal pro Minute aktualisieren.",
   "barrierefreiheit": "Die Zeit in <time datetime> setzen und das Attribut bei jedem Takt aktualisieren. Nicht als aria-live markieren, sonst kommen ständig Ansagen. Kontext wie „Ortszeit Passau“ als visuell versteckten Text ergänzen. Ist die Uhr klickbar, als Button mit aria-expanded umsetzen."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept saas-produkt-praezise, erfundene Marke Dreistrom (Uptime-Monitoring aus Passau), dunkles Linear-Schema mit Geist und Geist Mono, Produkt-UI als HTML. Die Uhr hat hier eine Funktion: Sie zeigt, wer gerade Dienst hat. Drei Varianten per Umschalter: Stadt, Uhrzeit und Kürzel mit Support-Status in der Navigation; drei Städte mit Follow-the-Sun-Rufbereitschaft (Passau, Toronto, Melbourne, die Stadt im Dienst ist hell); Standorttext oben und große Ortszeit im Footer. Klick oder Hover auf die Uhr öffnet einen Zeitvergleich mit der Zone des Besuchers. Die Vorführung wechselt die Varianten und legt eine Lupe über die kleine Uhr, damit das Detail in der Galerie-Vorschau lesbar ist. Alle Zeiten sind echt (Intl), Dienstlogik nach Ortszeit. AD-Review 01.11.2026: Note 4. „Neu“-Chip unter 1100 px auf Inhaltsbreite (lief vorher über die ganze Breite). Zugang 02.11.2026: Sekunden der Footer-Uhr #3c4046 → #62676f (3,5:1); Popover unter 720 px an der Kopfzeile zentriert, Breite min(268px, 100vw − 24px), kein Querscrollen bei 320 px/200 %; Monitor-URLs unter 380 px umbrechend statt gekürzt; Kontrastmodus-Rahmen für Knöpfe."
 }
}