Sprint 11: Freunde & Chat + Phosphor-Icon-Vollmigration

- Freundschaften (pending/accepted), Nutzersuche, Anfragen per Push
- Direktnachrichten mit Polling, iMessage-Stil, Deep-Links aus Push
- Alle Seiten (map, places, diary, health, dog-profile, sitting, knigge,
  forum, wiki, walks) vollständig auf Phosphor-Icons migriert
- Wikidata-Rassen-Scraper (~833 neue Rassen, lokal gespiegelte Fotos)
- TheDogAPI lokal gespiegelt (169 Rassen + Fotos)
- Quiz-Result-Cards horizontal (korrekte Bildproportionen)
- SW by-v89

backend/static/js/pages/knigge.js

@@ -0,0 +1,413 @@
+/* ============================================================
+   BAN YARO — Hunde-Knigge
+   Seiten-Modul: Begegnungen, Community-Voting, KI-Rat, Haftpflicht.
+   ============================================================ */
+
+window.Page_knigge = (() => {
+
+  // ----------------------------------------------------------
+  // MODUL-STATE
+  // ----------------------------------------------------------
+  let _container = null;
+  let _appState  = null;
+
+  // Voting-State: { szenario_id: { counts: {}, user_answer: null } }
+  const _voteState = {};
+
+  // ----------------------------------------------------------
+  // HARDCODED INHALTE
+  // ----------------------------------------------------------
+  const BEGEGNUNGEN = [
+    {
+      icon:  '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#dog"></use></svg>',
+      titel: 'Fremder Hund',
+      tipps: 'Kurze Leine, ruhig bleiben, Hunde schnüffeln lassen wenn beide entspannt. Eskalation: weglenken, Richtung wechseln.',
+    },
+    {
+      icon:  '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#users"></use></svg>',
+      titel: 'Kinder',
+      tipps: 'Hund nie unbeaufsichtigt mit Kindern. Kind fragen ob es streicheln darf. Hund dahinter positionieren, nicht zwischen Kind und Weg.',
+    },
+    {
+      icon:  '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#person-simple-run"></use></svg>',
+      titel: 'Radfahrer',
+      tipps: 'Hund an die Seite nehmen. Fahrrad = potentielle Bedrohung für manche Hunde. Frühzeitig weglenken.',
+    },
+    {
+      icon:  '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#person-simple-run"></use></svg>',
+      titel: 'Jogger',
+      tipps: 'Kurze Leine, Abstand halten, Hund nicht anspringen lassen.',
+    },
+    {
+      icon:  '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#car"></use></svg>',
+      titel: 'ÖPNV',
+      tipps: 'Maulkorbpflicht gilt im ÖPNV (Deutschland-weit). Kleine Hunde in Transportbox kostenlos, große Hunde brauchen Fahrschein. Regeln je Stadt unterschiedlich.',
+    },
+    {
+      icon:  '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#shopping-cart"></use></svg>',
+      titel: 'Supermarkt / Geschäfte',
+      tipps: 'Grundsätzlich Hausrecht des Betreibers. "Hunde willkommen"-Schild = explizite Einladung. Im Zweifel fragen. Außen anbinden nur kurz und beaufsichtigt.',
+    },
+  ];
+
+  const SZENARIEN = [
+    {
+      id:    'begegnung_leine',
+      frage: 'Dein Hund ist gut sozialisiert und läuft frei. Ein angeleinten Hund kommt entgegen. Was tust du?',
+      antworten: [
+        { key: 'a', text: 'Hund weiterlaufen lassen — er ist ja friedlich' },
+        { key: 'b', text: 'Hund anleinen und Abstand halten' },
+        { key: 'c', text: 'Besitzer fragen ob ein Treffen ok ist' },
+      ],
+      richtig:    'b',
+      erklaerung: 'Freilaufende Hunde auf angeleine Hunde zulaufen zu lassen ist unhöflich und kann den angeleinten Hund in Stress versetzen ("Leinenfrust"). Immer erst anleinen und Abstand halten.',
+    },
+    {
+      id:    'gassi_kot',
+      frage: 'Dein Hund macht sein Geschäft im Park abseits des Weges im Gebüsch. Was machst du?',
+      antworten: [
+        { key: 'a', text: 'Liegenlassen — im Gebüsch stört es niemanden' },
+        { key: 'b', text: 'Aufsammeln, auch wenn es versteckt liegt' },
+        { key: 'c', text: 'Nur aufsammeln wenn jemand zuschaut' },
+      ],
+      richtig:    'b',
+      erklaerung: 'Kot grundsätzlich immer aufsammeln — auch im Gebüsch. Kinder spielen überall, und Parasiten (z.B. Spulwurm) können für Menschen gefährlich sein.',
+    },
+    {
+      id:    'restaurant_hund',
+      frage: 'Im Restaurant-Außenbereich sitzt du mit deinem Hund. Ein anderer Gast bittet dich deinen Hund wegzunehmen weil er Angst hat. Was tust du?',
+      antworten: [
+        { key: 'a', text: 'Ablehnen — Außenbereich ist hundefreundlich' },
+        { key: 'b', text: 'Hund wegsetzen oder selbst weiter hinten platzieren' },
+        { key: 'c', text: 'Personal entscheiden lassen' },
+      ],
+      richtig:    'c',
+      erklaerung: 'Das Personal / der Betreiber entscheidet über das Hausrecht. Gut wäre es, selbst Kompromissbereitschaft zu zeigen und den Hund etwas wegzurücken — das deeskaliert und signalisiert Rücksicht.',
+    },
+    {
+      id:    'anleine_pflicht',
+      frage: 'Im Park gibt es keine Schilder. Muss dein Hund an die Leine?',
+      antworten: [
+        { key: 'a', text: 'Nein — kein Schild bedeutet keine Pflicht' },
+        { key: 'b', text: 'Kommt auf die Gemeindeordnung an' },
+        { key: 'c', text: 'Ja — immer Leinenpflicht in öffentlichen Parks' },
+      ],
+      richtig:    'b',
+      erklaerung: 'Leinenpflicht ist Ländersache und variiert stark. Viele Bundesländer haben eine allgemeine Anleinpflicht in Ortschaften oder Parks. Im Zweifel Hund anleinen oder Gemeindewebsite prüfen.',
+    },
+  ];
+
+  // ----------------------------------------------------------
+  // INIT
+  // ----------------------------------------------------------
+  async function init(container, appState) {
+    _container = container;
+    _appState  = appState;
+    _render();
+    _loadAllVotes();
+  }
+
+  function refresh() {
+    // statische Seite — kein Reload nötig
+  }
+
+  // ----------------------------------------------------------
+  // HAUPT-RENDER
+  // ----------------------------------------------------------
+  function _render() {
+    _container.innerHTML = `
+      <div id="knigge-wrap">
+        ${_renderBegegnungen()}
+        ${_renderVoting()}
+        ${_renderKiRat()}
+        ${_renderHaftpflicht()}
+      </div>
+    `;
+    _bindAccordion();
+    _bindVoting();
+    _bindKiRat();
+  }
+
+  // ----------------------------------------------------------
+  // SECTION 1: BEGEGNUNGEN — Accordion-Karten
+  // ----------------------------------------------------------
+  function _renderBegegnungen() {
+    const cards = BEGEGNUNGEN.map((b, i) => `
+      <div class="knigge-accordion" id="acc-${i}">
+        <button class="knigge-accordion-head" data-acc="${i}" aria-expanded="false">
+          <span>${b.icon} <strong>${_esc(b.titel)}</strong></span>
+          <span class="knigge-accordion-arrow">${UI.icon('caret-down')}</span>
+        </button>
+        <div class="knigge-accordion-body" id="acc-body-${i}" hidden>
+          <p style="color:var(--c-text);line-height:1.6">${_esc(b.tipps)}</p>
+        </div>
+      </div>
+    `).join('');
+
+    return `
+      <h2 style="font-size:var(--text-lg);font-weight:700;margin:var(--space-6) 0 var(--space-3)">
+        ${UI.icon('paw-print')} Begegnungen
+      </h2>
+      <div class="card" style="padding:0;overflow:hidden">
+        ${cards}
+      </div>
+    `;
+  }
+
+  function _bindAccordion() {
+    _container.querySelectorAll('.knigge-accordion-head').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const i    = btn.dataset.acc;
+        const body = document.getElementById(`acc-body-${i}`);
+        const arrow = btn.querySelector('.knigge-accordion-arrow');
+        const open  = !body.hidden;
+        body.hidden = open;
+        btn.setAttribute('aria-expanded', String(!open));
+        arrow.innerHTML = open ? UI.icon('caret-down') : UI.icon('caret-up');
+      });
+    });
+  }
+
+  // ----------------------------------------------------------
+  // SECTION 2: COMMUNITY VOTING
+  // ----------------------------------------------------------
+  function _renderVoting() {
+    const cards = SZENARIEN.map(s => `
+      <div class="card" style="margin-bottom:var(--space-4)" id="sz-${s.id}">
+        <p style="font-weight:var(--weight-semibold);margin-bottom:var(--space-3);line-height:1.5">
+          ${_esc(s.frage)}
+        </p>
+        <div class="knigge-vote-options" id="opts-${s.id}">
+          ${s.antworten.map(a => `
+            <button class="knigge-vote-btn btn btn-secondary"
+                    data-sz="${s.id}" data-key="${a.key}"
+                    style="width:100%;margin-bottom:var(--space-2);justify-content:flex-start;text-align:left">
+              ${_esc(a.text)}
+            </button>
+          `).join('')}
+        </div>
+        <div class="knigge-vote-result hidden" id="res-${s.id}"></div>
+      </div>
+    `).join('');
+
+    return `
+      <h2 style="font-size:var(--text-lg);font-weight:700;margin:var(--space-6) 0 var(--space-3)">
+        ${UI.icon('star')} Was wäre richtig?
+      </h2>
+      ${cards}
+    `;
+  }
+
+  function _bindVoting() {
+    _container.querySelectorAll('.knigge-vote-btn').forEach(btn => {
+      btn.addEventListener('click', async () => {
+        const szId = btn.dataset.sz;
+        const key  = btn.dataset.key;
+        if (!_appState.user) {
+          UI.toast.warning('Bitte melde dich an um abzustimmen.');
+          return;
+        }
+        try {
+          const result = await API.knigge.vote(szId, key);
+          _voteState[szId] = { counts: result.counts, user_answer: result.user_answer };
+          _renderVoteResult(szId);
+        } catch (err) {
+          UI.toast.error(err.message || 'Fehler beim Abstimmen.');
+        }
+      });
+    });
+  }
+
+  async function _loadAllVotes() {
+    for (const s of SZENARIEN) {
+      try {
+        const result = await API.knigge.votes(s.id);
+        _voteState[s.id] = { counts: result.counts, user_answer: result.user_answer };
+        if (result.user_answer) {
+          _renderVoteResult(s.id);
+        }
+      } catch {
+        // ignorieren — Votes werden on-demand geladen
+      }
+    }
+  }
+
+  function _renderVoteResult(szId) {
+    const szenario = SZENARIEN.find(s => s.id === szId);
+    if (!szenario) return;
+    const state = _voteState[szId];
+    if (!state) return;
+
+    const optsEl = document.getElementById(`opts-${szId}`);
+    const resEl  = document.getElementById(`res-${szId}`);
+    if (!optsEl || !resEl) return;
+
+    // Optionen ausblenden
+    optsEl.classList.add('hidden');
+    resEl.classList.remove('hidden');
+
+    const counts     = state.counts || {};
+    const userAnswer = state.user_answer;
+    const total      = Object.values(counts).reduce((s, c) => s + c, 0) || 1;
+    const isCorrect  = userAnswer === szenario.richtig;
+
+    const bars = szenario.antworten.map(a => {
+      const cnt  = counts[a.key] || 0;
+      const pct  = Math.round((cnt / total) * 100);
+      const isU  = a.key === userAnswer;
+      const isR  = a.key === szenario.richtig;
+      const color = isR
+        ? 'var(--c-success, #22c55e)'
+        : (isU && !isR ? 'var(--c-danger, #ef4444)' : 'var(--c-border)');
+      return `
+        <div style="margin-bottom:var(--space-3)">
+          <div style="display:flex;justify-content:space-between;margin-bottom:4px;font-size:var(--text-sm)">
+            <span style="color:${isU ? 'var(--c-text)' : 'var(--c-text-secondary)'};font-weight:${isU ? 'var(--weight-semibold)' : 'normal'}">
+              ${isU ? UI.icon('arrow-right') + ' ' : ''}${_esc(a.text)}${isR ? ' ' + UI.icon('check') : ''}
+            </span>
+            <span style="color:var(--c-text-secondary)">${pct}% (${cnt})</span>
+          </div>
+          <div style="background:var(--c-surface-2);border-radius:4px;height:8px;overflow:hidden">
+            <div style="width:${pct}%;background:${color};height:8px;border-radius:4px;transition:width 0.4s"></div>
+          </div>
+        </div>
+      `;
+    }).join('');
+
+    const badge = isCorrect
+      ? `<span style="color:var(--c-success,#22c55e);font-weight:var(--weight-semibold)">${UI.icon('check')} Richtig!</span>`
+      : `<span style="color:var(--c-danger,#ef4444);font-weight:var(--weight-semibold)">${UI.icon('x')} Nicht ganz — </span>`;
+
+    resEl.innerHTML = `
+      <div style="margin-bottom:var(--space-4)">${bars}</div>
+      <div style="background:var(--c-surface-2);border-radius:var(--radius-md);padding:var(--space-3);font-size:var(--text-sm);line-height:1.5">
+        ${badge}
+        <span style="color:var(--c-text-secondary)">${_esc(szenario.erklaerung)}</span>
+      </div>
+    `;
+  }
+
+  // ----------------------------------------------------------
+  // SECTION 3: KI-SITUATIONSBERATER
+  // ----------------------------------------------------------
+  function _renderKiRat() {
+    return `
+      <h2 style="font-size:var(--text-lg);font-weight:700;margin:var(--space-6) 0 var(--space-3)">
+        ${UI.icon('robot')} KI-Situationsberater
+      </h2>
+      <div class="card">
+        <textarea id="ki-situation-input" class="form-control"
+                  rows="3"
+                  placeholder="Beschreibe deine Situation…"
+                  style="margin-bottom:var(--space-3)"></textarea>
+        <button class="btn btn-primary" id="ki-rat-btn" style="width:100%">
+          Rat holen ${UI.icon('robot')}
+        </button>
+        <div id="ki-rat-result" style="margin-top:var(--space-4);display:none"></div>
+      </div>
+    `;
+  }
+
+  function _bindKiRat() {
+    const btn    = _container.querySelector('#ki-rat-btn');
+    const input  = _container.querySelector('#ki-situation-input');
+    const result = _container.querySelector('#ki-rat-result');
+
+    btn?.addEventListener('click', async () => {
+      const situation = input?.value?.trim();
+      if (!situation) {
+        UI.toast.warning('Bitte beschreibe zuerst deine Situation.');
+        return;
+      }
+      if (!_appState.user) {
+        UI.toast.warning('Bitte melde dich an um den KI-Rat zu nutzen.');
+        return;
+      }
+
+      UI.setLoading(btn, true);
+      result.style.display = 'none';
+
+      try {
+        const data = await API.knigge.kiRat(situation);
+        result.innerHTML = `
+          <div style="background:var(--c-surface-2);border-radius:var(--radius-md);
+                      padding:var(--space-4);line-height:1.6;color:var(--c-text)">
+            <div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
+                        color:var(--c-text-secondary);margin-bottom:var(--space-2)">${UI.icon('robot')} KI-Rat</div>
+            ${_esc(data.rat)}
+          </div>
+        `;
+        result.style.display = 'block';
+      } catch (err) {
+        const is402 = err.status === 402 || err.status === 503;
+        result.innerHTML = `
+          <div style="background:var(--c-surface-2);border-radius:var(--radius-md);
+                      padding:var(--space-4);color:var(--c-text-secondary);font-size:var(--text-sm)">
+            ${is402
+              ? 'Für KI-Rat wird Ban Yaro Plus oder ein laufender KI-Server benötigt.'
+              : _esc(err.message || 'Fehler beim KI-Abruf.')}
+          </div>
+        `;
+        result.style.display = 'block';
+      } finally {
+        UI.setLoading(btn, false);
+      }
+    });
+  }
+
+  // ----------------------------------------------------------
+  // SECTION 4: HAFTPFLICHT-HINWEISE
+  // ----------------------------------------------------------
+  function _renderHaftpflicht() {
+    return `
+      <h2 style="font-size:var(--text-lg);font-weight:700;margin:var(--space-6) 0 var(--space-3)">
+        ${UI.icon('shield')} Haftpflicht-Hinweise
+      </h2>
+      <div class="card" style="margin-bottom:var(--space-8)">
+        <ul style="list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-3)">
+          <li style="display:flex;gap:var(--space-3);align-items:flex-start">
+            <span style="font-size:1.2rem;flex-shrink:0">${UI.icon('scales')}</span>
+            <span style="color:var(--c-text);line-height:1.5">
+              Hundehalter haften unbegrenzt für Schäden die ihr Hund verursacht
+              (§ 833 BGB) — auch ohne Verschulden.
+            </span>
+          </li>
+          <li style="display:flex;gap:var(--space-3);align-items:flex-start">
+            <span style="font-size:1.2rem;flex-shrink:0">${UI.icon('map-trifold')}</span>
+            <span style="color:var(--c-text);line-height:1.5">
+              Eine Hundehaftpflichtversicherung ist in einigen Bundesländern
+              (Bayern, Hamburg, Berlin u.a.) Pflicht.
+            </span>
+          </li>
+          <li style="display:flex;gap:var(--space-3);align-items:flex-start">
+            <span style="font-size:1.2rem;flex-shrink:0">${UI.icon('info')}</span>
+            <span style="color:var(--c-text);line-height:1.5">
+              Empfehlung: Absicherung ab ~50 €/Jahr.
+            </span>
+          </li>
+        </ul>
+        <p style="margin-top:var(--space-4);font-size:var(--text-xs);color:var(--c-text-muted)">
+          Dies ist keine Rechtsberatung.
+        </p>
+      </div>
+    `;
+  }
+
+  // ----------------------------------------------------------
+  // HELPER
+  // ----------------------------------------------------------
+  function _esc(str) {
+    if (!str) return '';
+    return String(str)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+  }
+
+  // ----------------------------------------------------------
+  // PUBLIC
+  // ----------------------------------------------------------
+  return { init, refresh };
+
+})();