{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "standortfinder-liste",
 "name": "Standortfinder als Liste",
 "name_en": "Location finder list with opening status and opt-in distance",
 "kurz": "Standorte als Liste mit Öffnungsstatus; erst nach Klick auf „Meinen Standort verwenden“ oder nach PLZ-Eingabe kommen Entfernungen dazu und die Liste ordnet sich nach Nähe, die Karte lädt erst nach einem zweiten Klick.",
 "kategorie": "Sektionen & Funktionen",
 "kategorie_slug": "sektionen",
 "kategorie_nr": 16,
 "bau_chat": "D",
 "prioritaet": "D",
 "trendstatus": "etabliert",
 "belegstatus": "teilbelegt",
 "website_belege": 1,
 "stimmung": [
  "ruhig",
  "präzise"
 ],
 "stimmung_roh": [
  "ruhig",
  "vertrauenswürdig",
  "funktional"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "geolocation",
  "intl-datetimeformat",
  "svg"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "canvas"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Mehrere Standorte stehen als Liste mit Adresse, Telefon und Öffnungsstatus („Geöffnet bis 19:00“, „Schließt in 20 Min.“, „Öffnet morgen 8:00“). Entfernungen kommen erst nach einer Handlung dazu: Knopf „Meinen Standort verwenden“ (der Browser fragt erst dann) oder Postleitzahl. Danach ordnet sich die Liste nach Nähe. Eine selbst gezeichnete Übersicht zeigt die Lage ohne Daten an Dritte; die Karte des Anbieters lädt erst nach einem zweiten Klick.",
  "warum_es_wirkt": "Die Liste beantwortet die eigentlichen Fragen: Welcher Standort ist nah, hat er jetzt offen, wie rufe ich an. Niemand wird beim Laden nach seinem Standort gefragt, und der Kartenanbieter bekommt erst Daten, wenn jemand die Karte wirklich will.",
  "wann_einsetzen": "Praxen, Ketten, Gastronomie und Makler mit drei oder mehr Standorten; überall, wo Menschen den nächsten offenen Ort suchen.",
  "wann_nicht": "Bei einem einzigen Standort (dann Anfahrt mit Karte per 2-Klick, siehe karte-zwei-klick). Bei sehr vielen Standorten (über 50) braucht es eine Suche mit Server und Kartenclustern statt einer Liste.",
  "varianten": [
   "Liste mit gezeichneter Übersicht und Karte per 2-Klick",
   "Nur Liste (zwei bis vier Standorte), Entfernung und Status bleiben",
   "Mit Filter nach Leistung oder „Jetzt geöffnet“"
  ],
  "umsetzung": "Standorte als Daten (Name, Adresse, lat/lon, Telefon, Wochenzeiten in Minuten, Sonderzeiten). Öffnungsstatus aus der Ortszeit: Intl.DateTimeFormat mit timeZone Europe/Berlin, Feiertage des Bundeslands als Liste; „schließt bald“ ab 30 Minuten vor Schluss; die Statuszeile hat eine feste Mindestbreite, mit echter Zeit jede Minute neu. Ortung nur im Click-Handler per navigator.geolocation.getCurrentPosition() (nur über HTTPS), Ablehnung und Fehler mit Text und Rückfall auf die PLZ. PLZ über eine kleine Tabelle PLZ → Mittelpunkt. Entfernung per Haversine als Luftlinie. Umordnen per FLIP (Web Animations API, 250 ms). Übersicht als eigene SVG mit Markern, die den Listeneintrag hervorheben. Die Karte des Anbieters erst nach Klick auf „Karte laden“ als iframe einsetzen (in der Demo nachgebildet), mit „Karte entfernen“. Standort nicht speichern. Datenschutztext und Kartenanbieter vom Kunden prüfen lassen.",
  "mobil": "Ortung und PLZ oben, Liste darunter, Übersicht unter der Liste. Telefon als tel:-Link, Route als geo:-Link für die Karten-App, Ziele mindestens 44 px.",
  "reduzierte_bewegung": "Liste ordnet sich ohne Gleiten um; Marker und Karte erscheinen ohne Bewegung.",
  "barrierefreiheit": "Liste als <ol> mit Überschrift je Standort. Nach dem Sortieren meldet eine role=\"status\"-Zeile „Sortiert nach Entfernung von 31134“. Öffnungsstatus als Text, Farbe nur zusätzlich. Ortungsknopf ist ein echter <button>, Fehler werden als Text gemeldet. Die SVG-Übersicht ist ergänzend (aria-hidden oder mit Text-Alternative); alle Infos stehen auch in der Liste."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.2, 0, 0.38, 0.9)",
  "dauer_ms": "150 Zustände, 250 Umordnen der Liste, 400 Einblendung der Karte",
  "stagger_ms": "",
  "distanz": "Einblendung höchstens 8 px",
  "sonstiges": "Kurve und Dauern aus dem Rezept praxis-gesundheit-ruhig (Token tech-praezise; HelloBetter .15s, One Medical .25s)",
  "herkunft": "eigene Festlegung",
  "quelle": "Rezept praxis-gesundheit-ruhig"
 },
 "kurve": {
  "bezier": [
   0.2,
   0.0,
   0.38,
   0.9
  ],
  "css": "cubic-bezier(0.2, 0, 0.38, 0.9)",
  "name": "eigene Kurve",
  "dauer_ms": 250
 },
 "gesehen_bei": [
  {
   "seite": "Tend Dental",
   "url": "https://www.hellotend.com/",
   "auszeichnung": "",
   "beobachtung": "Laut Rezept praxis-gesundheit-ruhig (live geprüft 31.10.2026): Sektion „Dental studios across the US“ mit Standortliste als h3 (Hell's Kitchen, Park Slope …).",
   "art": "website"
  },
  {
   "seite": "Storepoint Docs: Automatic Geolocation",
   "url": "https://storepoint.co/docs/features/geolocation",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 01.11.2026: zwei Wege, Ortung beim Laden oder nur per Knopf; beim Knopf fragt der Browser erst beim Klick. Bei Ablehnung Rückfall auf Standardansicht und manuelle Suche; Ergebnisse nach Entfernung sortiert.",
   "art": "artikel"
  },
  {
   "seite": "Storemapper: 10 store locator best practices",
   "url": "https://storemapper.com/blog/10-store-locator-best-practices-to-help-people-find-your-business",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 01.11.2026: Öffnungszeiten je Standort zeigen, Ortung mit Suche kombinieren (nicht nur PLZ), 5 bis 10 Standorte auf einmal, Telefonnummern als Link, Routen-Link in die Karten-App.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "MDN: Geolocation API",
   "url": "https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API"
  },
  {
   "titel": "MDN: Intl.DateTimeFormat",
   "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat"
  }
 ],
 "kombinierbar_mit": [
  "karte-zwei-klick",
  "termin-buchung-zwei-klick",
  "akkordeon-hoehe-auto",
  "toggle-switch",
  "flip-zustandswechsel"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/",
  "meta": "https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/demo"
 },
 "herkunft": {
  "quelldateien": [
   "DEF-Recherche 01.11.2026"
  ],
  "pruefnotizen": [
   "DEF-Recherche 01.11.2026 (D2): Standorte als Liste mit Entfernung nur nach Klick, Öffnungsstatus, Karte per 2-Klick für gastro, praxis, immobilien, luxus.",
   "Tend-Beleg stammt aus dem Rezept (31.10.2026), die Standortseite selbst war hier nicht abrufbar. Zwei Fachartikel (Storepoint, Storemapper) am 01.11.2026 abgerufen.",
   "Koordinaten und PLZ-Mittelpunkte in der Demo sind Näherungen."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Standorte als Liste mit Öffnungsstatus; erst nach Klick auf „Meinen Standort verwenden“ oder nach PLZ-Eingabe kommen Entfernungen dazu und die Liste ordnet sich nach Nähe, die Karte lädt erst nach einem zweiten Klick.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.2, 0, 0.38, 0.9)",
   "dauer_ms": 250,
   "dauer_zustaende_ms": 150,
   "dauer_umordnen_ms": "250 (FLIP per Web Animations API, translateY; neue Einträge opacity 0 → 1 aus 8 px)",
   "dauer_karte_ms": "400 (Details der Anbieter-Karte und Entfernung blenden ein)",
   "schliesst_bald": "30 Minuten vor Schluss: Hinweis „Schließt in n Min.“ mit warmem Punkt",
   "zeitzone": "Intl.DateTimeFormat de-DE, timeZone Europe/Berlin, hourCycle h23; mit echter Zeit jede 60 s neu",
   "feiertage": "Niedersachsen 2026/27 als Liste, Sonderzeiten 24. und 31.12. 8 bis 12 Uhr",
   "entfernung": "Haversine, Erdradius 6371 km, Luftlinie; unter 10 km eine Nachkommastelle",
   "ortung": "getCurrentPosition erst im Klick, enableHighAccuracy false, timeout 8000, maximumAge 300000",
   "plz": "pattern \\d{5}, kleine Tabelle PLZ → Mittelpunkt, kein externer Dienst",
   "farben": "#005450 Marke, #F5F7F7 Grund, #E3EEEC Hellgrün, #FFC776 Hinweis, Status-Punkte #1A8A5A offen, #D9921F bald, #9AA5A4 zu",
   "schriften": "Hedvig Letters Serif (opsz 24) für Namen und Zahlen, Google Sans Flex für Text"
  },
  "ausloeser": "klick",
  "touch": "Ortungsknopf über die volle Breite, PLZ-Feld daneben dehnbar, Aktionen (Anrufen, Route, Zeiten) mit 44 px Höhe und gleich breit. Die Übersicht rückt unter die Liste. Route als geo:-Link öffnet die Karten-App, Telefon als tel:-Link.",
  "reduziert": "Liste ordnet sich ohne Gleiten um, Entfernungen und Karte erscheinen ohne Einblenden, der Puls des eigenen Standorts steht still.",
  "korrekturen": {
   "beschreibung": "Mehrere Standorte stehen als Liste mit Adresse, Telefon und Öffnungsstatus („Geöffnet bis 19:00“, „Schließt in 20 Min.“, „Öffnet morgen 8:00“). Entfernungen kommen erst nach einer Handlung dazu: Knopf „Meinen Standort verwenden“ (der Browser fragt erst dann) oder Postleitzahl. Danach ordnet sich die Liste nach Nähe. Eine selbst gezeichnete Übersicht zeigt die Lage ohne Daten an Dritte; die Karte des Anbieters lädt erst nach einem zweiten Klick.",
   "umsetzung": "Standorte als Daten (Name, Adresse, lat/lon, Telefon, Wochenzeiten in Minuten, Sonderzeiten). Öffnungsstatus aus der Ortszeit: Intl.DateTimeFormat mit timeZone Europe/Berlin, Feiertage des Bundeslands als Liste; „schließt bald“ ab 30 Minuten vor Schluss; die Statuszeile hat eine feste Mindestbreite, mit echter Zeit jede Minute neu. Ortung nur im Click-Handler per navigator.geolocation.getCurrentPosition() (nur über HTTPS), Ablehnung und Fehler mit Text und Rückfall auf die PLZ. PLZ über eine kleine Tabelle PLZ → Mittelpunkt. Entfernung per Haversine als Luftlinie. Umordnen per FLIP (Web Animations API, 250 ms). Übersicht als eigene SVG mit Markern, die den Listeneintrag hervorheben. Die Karte des Anbieters erst nach Klick auf „Karte laden“ als iframe einsetzen (in der Demo nachgebildet), mit „Karte entfernen“. Standort nicht speichern. Datenschutztext und Kartenanbieter vom Kunden prüfen lassen.",
   "mobil": "Ortung und PLZ oben, Liste darunter, Übersicht unter der Liste. Telefon als tel:-Link, Route als geo:-Link für die Karten-App, Ziele mindestens 44 px."
  },
  "geprueft": "02.11.2026",
  "notiz": "Welt: Rezept praxis-gesundheit-ruhig, erfundene Physiotherapie Lindgrün mit sechs Praxen zwischen Sarstedt und Bad Salzdetfurth (Hildesheim). Hedvig Letters Serif und Google Sans Flex, Petrol #005450 auf Off-White, Apricot nur für Hinweise. Übersicht als eigene SVG (Leine, Innerste, A7, Hildesheimer Wald, Nachbarorte); die Anbieter-Karte ist nachgebildet (erzeugtes Straßennetz und Blöcke). Das Pult stellt Uhrzeit (Di 03.11.2026, 17:40 oder jetzt) und Ortung (simuliert am Hauptbahnhof mit nachgestellter Browser-Abfrage oder echt) um. Die Vorführung ortet, ordnet nach Nähe, hebt einen Marker hervor, sucht PLZ 31141, filtert „Nur jetzt geöffnet“ und lädt die Karte. Koordinaten und PLZ-Mittelpunkte sind Näherungen. Unterschied zu karte-zwei-klick (gleiches Rezept): dort eine Praxis mit Anfahrt, hier mehrere Standorte mit Status und Entfernung. Referenzen: storepoint.co, storemapper.com, hellotend.com. AD-Review 02.11.2026: Note 4. Pult schmaler (Werte max. 280 px), damit es in „Nur Liste“ die Karten nicht verdeckt. Zugang 02.11.2026: Bühne unter 900 px minmax(0, 1fr) statt 1fr (Inhalt lief rechts 16 px in den Rand); unter 380 px Liste minmax(0, 1fr), Karteneinzug 48 px, Aktionsknöpfe umbrechend, lange Adressen umbrechend (kein Querscrollen bei 320 px); Kontrastmodus-Rahmen für Knöpfe und PLZ-Feld.",
  "varianten": [
   {
    "id": "liste",
    "name": "Liste mit Übersicht und Karte per 2-Klick",
    "wann": "Ab vier Standorten oder wenn die Lage im Umland zählt: Praxisverbünde, Filialen, Makler mit Büros.",
    "werte": {
     "uebersicht": "eigene SVG-Zeichnung, Marker verknüpft mit der Liste",
     "karte": "erst nach Klick, Zoom 1 bis 2,5"
    }
   },
   {
    "id": "kompakt",
    "name": "Nur Liste",
    "wann": "Zwei bis drei Standorte, etwa Restaurant mit zwei Häusern oder Praxis mit Zweigstelle: Status und Entfernung reichen, keine Karte.",
    "werte": {
     "uebersicht": "keine",
     "karte": "keine",
     "breite": "eine Spalte, höchstens 760 px"
    }
   }
  ]
 }
}
