Phase 0+1: Scaffold, Datenmodell, Karte und Liste

Reines HTML5/CSS3/JavaScript ohne Build-Tooling, lauffaehig direkt per
Doppelklick auf index.html (file://, kein Server noetig):

- Datenmodell fuer Ausflugsziele mit allen Feldern aus der Anforderung,
  15 feste Kategorien inkl. Farbe/Icon
- Zentraler Pub/Sub-Store mit LocalStorage-Persistenz und
  Migrations-Grundgeruest
- Interaktive Karte (Leaflet + Leaflet.markercluster, lokal vendored)
  mit kategoriefarbenen Markern, Clustering, Popups, Geolocation-Button
- Kartengrundlage ueber CARTO-Basemaps statt tile.openstreetmap.org, da
  dessen Referer-Pflicht file://-Aufrufe blockiert
- Seed-Daten als eingebettetes Script (data/seed.js) statt JSON-Datei,
  da fetch() auf lokale Dateien unter file:// nicht zuverlaessig
  funktioniert
- Ergebnisliste mit 10 Beispiel-Ausflugszielen, sicher gerendert ueber
  textContent/DOM-APIs statt innerHTML (Vorbereitung fuer spaeteren
  KI-JSON-Import mit Fremddaten)
- Responsives Layout (Desktop nebeneinander, Mobile gestapelt)

js/utils/dom.js

@@ -0,0 +1,95 @@
+// Kleine DOM-Helfer. Wichtig: Daten aus Places werden NIE per innerHTML
+// eingefügt, sondern immer über textContent bzw. DOM-APIs (el()).
+//
+// Klassisches Script (kein ES-Modul): Die App wird per file:// direkt aus
+// einem synchronisierten Ordner geöffnet, daher können keine ES-Module
+// (import/export) verwendet werden (Browser blockieren deren Nachladen
+// unter file:// per CORS-Policy). Stattdessen hängen alle Dateien ihre
+// öffentliche API an das globale Namespace-Objekt window.EventMap.
+// Diese Datei wird als erste geladen und legt den Namespace an.
+
+window.EventMap = window.EventMap || {};
+window.EventMap.utils = window.EventMap.utils || {};
+window.EventMap.config = window.EventMap.config || {};
+window.EventMap.models = window.EventMap.models || {};
+window.EventMap.store = window.EventMap.store || {};
+window.EventMap.map = window.EventMap.map || {};
+window.EventMap.ui = window.EventMap.ui || {};
+
+(function () {
+  /**
+   * Erzeugt ein DOM-Element.
+   * @param {string} tag Tag-Name, z.B. 'div'
+   * @param {object} [props] Eigenschaften: className, attrs{}, dataset{}, style{},
+   *   text (setzt textContent), on{ click: fn, ... } für Event-Listener
+   * @param {Array<Node|string>} [children] Kindknoten oder Strings (werden als Text angehängt)
+   */
+  function el(tag, props = {}, children = []) {
+    const node = document.createElement(tag);
+
+    if (props.className) {
+      node.className = props.className;
+    }
+    if (props.text !== undefined) {
+      node.textContent = props.text;
+    }
+    if (props.attrs) {
+      for (const [key, value] of Object.entries(props.attrs)) {
+        if (value !== undefined && value !== null) {
+          node.setAttribute(key, value);
+        }
+      }
+    }
+    if (props.dataset) {
+      for (const [key, value] of Object.entries(props.dataset)) {
+        node.dataset[key] = value;
+      }
+    }
+    if (props.style) {
+      Object.assign(node.style, props.style);
+    }
+    if (props.on) {
+      for (const [event, handler] of Object.entries(props.on)) {
+        node.addEventListener(event, handler);
+      }
+    }
+
+    for (const child of children) {
+      if (child === null || child === undefined) continue;
+      if (typeof child === 'string') {
+        node.appendChild(document.createTextNode(child));
+      } else {
+        node.appendChild(child);
+      }
+    }
+
+    return node;
+  }
+
+  /**
+   * Escaped HTML-Sonderzeichen. Nur als Sicherheitsnetz gedacht, falls an
+   * einzelnen Stellen doch einmal mit HTML-Strings gearbeitet werden muss
+   * (z.B. Leaflet-Popups, die intern innerHTML nutzen). Für normales
+   * Rendering bitte el()/textContent verwenden.
+   */
+  function escapeHtml(value) {
+    const str = String(value ?? '');
+    return str
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#039;');
+  }
+
+  /** Entfernt alle Kindknoten eines Elements. */
+  function clearChildren(node) {
+    while (node.firstChild) {
+      node.removeChild(node.firstChild);
+    }
+  }
+
+  EventMap.utils.el = el;
+  EventMap.utils.escapeHtml = escapeHtml;
+  EventMap.utils.clearChildren = clearChildren;
+})();