diff --git a/Dockerfile b/Dockerfile
index ff22003..07e8bd6 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -8,11 +8,6 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
     ffmpeg \
     && rm -rf /var/lib/apt/lists/*
 
-# Non-root User für Container-Hardening
-# (Synology DSM-Volumes haben ACLs — daher chown auf /data + /app)
-RUN groupadd -r appuser -g 1000 && \
-    useradd -r -u 1000 -g appuser -d /app -s /sbin/nologin appuser
-
 # Python-Dependencies zuerst (Docker Layer Cache)
 COPY backend/requirements.txt .
 RUN pip install --no-cache-dir -r requirements.txt
@@ -27,12 +22,6 @@ COPY VERSION /app/VERSION
 RUN mkdir -p /data/media/dogs /data/media/diary /data/media/poison \
              /data/media/breeds/gallery /data/media/breeds/submissions
 
-# USER appuser auskommentiert: Synology DSM Volume-ACLs blockieren das
-# (SQLite OperationalError: 'attempt to write a readonly database'). User-
-# Anlage bleibt im Dockerfile damit nicht-DS-Deployments später wechseln
-# können via `USER appuser` Zeile auskommentieren-entfernen.
-# USER appuser
-
 EXPOSE 8000
 
 CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000", "--proxy-headers", "--forwarded-allow-ips=*"]
diff --git a/Makefile b/Makefile
index c16bf3f..9402ea3 100644
--- a/Makefile
+++ b/Makefile
@@ -287,8 +287,7 @@ bump:
 	sed -i.bak -E "s/const VER[[:space:]]*=[[:space:]]*'[0-9]+'/const VER           = '$$NEW'/" backend/static/sw.js && rm -f backend/static/sw.js.bak; \
 	sed -i.bak -E "s/const APP_VER[[:space:]]*=[[:space:]]*'[0-9]+'/const APP_VER     = '$$NEW'/" backend/static/js/app.js && rm -f backend/static/js/app.js.bak; \
 	sed -i.bak -E "s/\?v=[0-9]+/?v=$$NEW/g" backend/static/index.html && rm -f backend/static/index.html.bak; \
-	sed -i.bak -E "s/\?v=[0-9]+/?v=$$NEW/g" backend/static/landing.html && rm -f backend/static/landing.html.bak; \
-	echo "  ✓ APP_VER $$CUR → $$NEW (VERSION, sw.js, app.js, index.html, landing.html aktualisiert)"
+	echo "  ✓ APP_VER $$CUR → $$NEW (VERSION, sw.js, app.js, index.html aktualisiert)"
 
 # ----------------------------------------------------------
 # TEST — Smoke-Tests gegen isolierte Test-DB (kein Docker, kein DS)
diff --git a/VERSION b/VERSION
index a2998a8..39987d0 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-1120
\ No newline at end of file
+1099
\ No newline at end of file
diff --git a/backend/auth.py b/backend/auth.py
index 1b5f126..9cb25c6 100644
--- a/backend/auth.py
+++ b/backend/auth.py
@@ -212,49 +212,6 @@ def require_admin(user=Depends(get_current_user)):
     return user
 
 
-def require_moderator(user=Depends(get_current_user)):
-    """Dependency: Admin oder Moderator. Konsequente Nutzung statt
-    Inline-`if user['rolle'] not in (...):` in den Routen."""
-    if user["rolle"] not in ("admin", "moderator") and not user.get("is_moderator"):
-        raise HTTPException(status.HTTP_403_FORBIDDEN, "Moderator-Zugriff erforderlich.")
-    return user
-
-
-def require_breeder(user=Depends(get_current_user)):
-    """Dependency: Admin oder Züchter (breeder/breeder_test)."""
-    if user["rolle"] == "admin":
-        return user
-    if user.get("subscription_tier") in ("breeder", "breeder_test"):
-        return user
-    raise HTTPException(status.HTTP_403_FORBIDDEN, "Züchter-Zugriff erforderlich.")
-
-
-# ------------------------------------------------------------------
-# Owner-Checks — zentral, statt 54x inline `if row['user_id'] != user['id']: 403`
-# ------------------------------------------------------------------
-def require_owner(row, user: dict, owner_field: str = "user_id",
-                  not_found_msg: str = "Nicht gefunden",
-                  forbidden_msg: str = "Kein Zugriff"):
-    """Wirft 404 wenn row None/falsy ist, 403 wenn User nicht Besitzer.
-    Returns row für chainability:
-        dog = require_owner(conn.execute(...).fetchone(), user, 'user_id', 'Hund nicht gefunden')
-    """
-    if not row:
-        raise HTTPException(status.HTTP_404_NOT_FOUND, not_found_msg)
-    if row[owner_field] != user["id"]:
-        raise HTTPException(status.HTTP_403_FORBIDDEN, forbidden_msg)
-    return row
-
-
-def is_owner_or_admin(row, user: dict, owner_field: str = "user_id") -> bool:
-    """True wenn User Owner ist oder Admin/Moderator."""
-    if not row:
-        return False
-    if user["rolle"] in ("admin", "moderator") or user.get("is_moderator"):
-        return True
-    return row[owner_field] == user["id"]
-
-
 def has_pro_access(user: dict) -> bool:
     """True wenn User Pro-Features nutzen darf."""
     if not user:
diff --git a/backend/config.py b/backend/config.py
deleted file mode 100644
index a05b6be..0000000
--- a/backend/config.py
+++ /dev/null
@@ -1,20 +0,0 @@
-"""Zentrale Konfiguration — vermeidet 19× duplizierte os.getenv-Aufrufe
-für MEDIA_DIR und gibt einheitliche Timeout-Konstanten für externe APIs."""
-import os
-
-
-# Speicher-Pfade
-DB_PATH       = os.getenv("DB_PATH",       "/data/banyaro.db")
-MEDIA_DIR     = os.getenv("MEDIA_DIR",     "/data/media")
-BREEDER_DOCS_DIR = os.getenv("BREEDER_DOCS_DIR", "/data/breeder_docs")
-SCANINPUT_DIR = os.getenv("SCANINPUT_DIR", "/data/scaninput")
-
-# HTTP-Timeouts für externe APIs (in Sekunden)
-# Verwendung: httpx.AsyncClient(timeout=API_TIMEOUT_DEFAULT)
-API_TIMEOUT_SHORT   = 5      # Schnelle Lookups (Geocoding, Reverse, einzelne Werte)
-API_TIMEOUT_DEFAULT = 10     # Standardfall (Wetter, Wikipedia)
-API_TIMEOUT_LONG    = 30     # Größere Antworten (Overpass-Tiles, KI-Calls)
-
-# Standard-Header für externe Requests (Höflichkeit + Fair-Use)
-HTTP_USER_AGENT = "BanYaro/1.0 (https://banyaro.app)"
-HTTP_HEADERS = {"User-Agent": HTTP_USER_AGENT}
diff --git a/backend/errors.py b/backend/errors.py
deleted file mode 100644
index 2cbaf3f..0000000
--- a/backend/errors.py
+++ /dev/null
@@ -1,47 +0,0 @@
-"""Standardisierte HTTP-Exceptions — vermeidet inkonsistente Texte
-in 200+ raise-Statements."""
-from fastapi import HTTPException
-
-
-def not_found(msg: str = "Nicht gefunden") -> HTTPException:
-    """404. Beispiel: `raise not_found('Hund nicht gefunden')`."""
-    return HTTPException(404, msg)
-
-
-def forbidden(msg: str = "Kein Zugriff") -> HTTPException:
-    """403."""
-    return HTTPException(403, msg)
-
-
-def bad_request(msg: str = "Ungültige Eingabe") -> HTTPException:
-    """400."""
-    return HTTPException(400, msg)
-
-
-def unauthorized(msg: str = "Nicht angemeldet") -> HTTPException:
-    """401."""
-    return HTTPException(401, msg)
-
-
-def conflict(msg: str = "Konflikt") -> HTTPException:
-    """409."""
-    return HTTPException(409, msg)
-
-
-def too_many_requests(msg: str = "Zu viele Anfragen", retry_after: int | None = None) -> HTTPException:
-    """429. Optional mit Retry-After Header (in Sekunden)."""
-    headers = {"Retry-After": str(retry_after)} if retry_after else None
-    return HTTPException(429, msg, headers=headers)
-
-
-def service_unavailable(msg: str = "Dienst gerade nicht verfügbar") -> HTTPException:
-    """503."""
-    return HTTPException(503, msg)
-
-
-def require_or_404(row, msg: str = "Nicht gefunden"):
-    """Convenience: wirft 404 wenn row None/falsy, sonst gibt row zurück.
-    Beispiel: `dog = require_or_404(conn.execute(...).fetchone(), 'Hund nicht gefunden')`"""
-    if not row:
-        raise not_found(msg)
-    return row
diff --git a/backend/main.py b/backend/main.py
index aac642e..569a887 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -110,8 +110,8 @@ class SecurityHeadersMiddleware(BaseHTTPMiddleware):
         response.headers["Strict-Transport-Security"] = "max-age=31536000; includeSubDomains"
         response.headers["Content-Security-Policy"]  = (
             "default-src 'self'; "
-            "script-src 'self' https://umami.motocamp.de; "          # ohne unsafe-inline/eval — alle Inline-Scripts extrahiert
-            "style-src 'self' 'unsafe-inline'; "                     # Inline-Styles bleiben (zu viele Fundstellen für jetzt)
+            "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://umami.motocamp.de; "
+            "style-src 'self' 'unsafe-inline'; "
             "img-src 'self' data: blob: https:; "
             "connect-src 'self' https:; "
             "frame-ancestors 'none'; "
@@ -1763,40 +1763,19 @@ async def force_update():
 <title>Ban Yaro — Update</title>
 <style>body{font-family:sans-serif;display:flex;align-items:center;justify-content:center;
 height:100vh;margin:0;background:#0f1623;color:#fff;flex-direction:column;gap:16px}
-p{color:#94a3b8;font-size:14px}
-button{margin-top:24px;background:#C4843A;color:#fff;border:none;padding:12px 24px;
-border-radius:8px;font-size:16px;cursor:pointer}</style></head>
+p{color:#94a3b8;font-size:14px}</style></head>
 <body>
 <div>⏳ Einen Moment…</div>
 <p id="s">Wir besorgen neue Leckerlis 🦴</p>
-<button id="b" style="display:none" onclick="location.replace('/?_t='+Date.now())">App neu starten</button>
 <script>
+// Zweiten Reload durch SW-updatefound verhindern
 sessionStorage.setItem('by_skip_sw_reload','1');
-// Cleanup IM HINTERGRUND starten (fire-and-forget) — kein await,
-// kein Blockieren. Selbst wenn die Promises nie resolven (iOS-Bug),
-// hängen wir nicht.
-try {
-  if (navigator.serviceWorker) {
-    navigator.serviceWorker.getRegistrations()
-      .then(r => r.forEach(s => s.unregister().catch(() => {})))
-      .catch(() => {});
-  }
-  if (window.caches) {
-    caches.keys()
-      .then(k => k.forEach(c => caches.delete(c).catch(() => {})))
-      .catch(() => {});
-  }
-} catch(e) {}
-
-// Sofort reload — keine Promise-Abhängigkeit
-setTimeout(() => location.replace('/?_t=' + Date.now()), 150);
-
-// Fallback: falls Reload nach 3s noch nicht passiert ist
-// (z.B. SW intercepted), Button anzeigen für manuellen Tap
-setTimeout(() => { document.getElementById('b').style.display = ''; }, 3000);
-
-// Fallback 2: nach 6s automatisch nochmal versuchen mit hartem reload
-setTimeout(() => location.href = '/?_t=' + Date.now() + '&hard=1', 6000);
+// Fire-and-forget — kein await, Reload nach spätestens 1.5s
+try{
+  navigator.serviceWorker?.getRegistrations().then(r=>r.forEach(s=>s.unregister())).catch(()=>{});
+  caches.keys().then(k=>k.forEach(c=>caches.delete(c))).catch(()=>{});
+}catch(e){}
+setTimeout(()=>location.replace('/'),1500);
 </script></body></html>"""
     return HTMLResponse(content=html, headers={"Cache-Control": "no-store"})
 
diff --git a/backend/math_utils.py b/backend/math_utils.py
deleted file mode 100644
index a111ec5..0000000
--- a/backend/math_utils.py
+++ /dev/null
@@ -1,37 +0,0 @@
-"""Mathematische Helper-Funktionen — zentral statt 13× dupliziert."""
-import math
-
-
-# Erdradius in Kilometern
-EARTH_RADIUS_KM = 6371.0
-
-
-def haversine_km(lat1: float, lon1: float, lat2: float, lon2: float) -> float:
-    """Distanz zwischen zwei GPS-Koordinaten in km (Haversine-Formel).
-
-    Funktioniert für beliebige Punkte auf der Erde. Genauigkeit reicht
-    für App-Zwecke (Umkreissuche etc.).
-    """
-    lat1_rad = math.radians(lat1)
-    lat2_rad = math.radians(lat2)
-    dlat = math.radians(lat2 - lat1)
-    dlon = math.radians(lon2 - lon1)
-    a = (math.sin(dlat / 2) ** 2
-         + math.cos(lat1_rad) * math.cos(lat2_rad) * math.sin(dlon / 2) ** 2)
-    return 2 * EARTH_RADIUS_KM * math.asin(math.sqrt(a))
-
-
-def haversine_m(lat1: float, lon1: float, lat2: float, lon2: float) -> float:
-    """Distanz in Metern (Convenience-Wrapper)."""
-    return haversine_km(lat1, lon1, lat2, lon2) * 1000.0
-
-
-def bbox_deg_from_km(lat: float, radius_km: float):
-    """Bounding-Box-Approximation in Grad für radius_km um (lat, lon).
-
-    Returns (lat_delta, lon_delta) — beide in Grad.
-    Verwendung: WHERE lat BETWEEN ?-lat_delta AND ?+lat_delta etc.
-    """
-    lat_delta = radius_km / 111.0
-    lon_delta = radius_km / (111.0 * max(abs(math.cos(math.radians(lat))), 0.01))
-    return lat_delta, lon_delta
diff --git a/backend/routes/admin.py b/backend/routes/admin.py
index fac5a1c..713a055 100644
--- a/backend/routes/admin.py
+++ b/backend/routes/admin.py
@@ -12,7 +12,7 @@ from zoneinfo import ZoneInfo
 
 from fastapi import APIRouter, Depends, HTTPException
 from fastapi.responses import Response
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional, List
 from database import db, DB_PATH
 from auth import get_current_user
@@ -92,15 +92,15 @@ _VALID_TIERS = {"standard", "pro", "breeder", "standard_test", "pro_test", "bree
 class QuarterlyReportBody(BaseModel):
     year:    int
     quarter: int
-    email:   str = Field(..., max_length=254)
+    email:   str
 
 class UserPatch(BaseModel):
-    rolle:             Optional[str] = Field(None, max_length=30)   # user | moderator | admin
+    rolle:             Optional[str] = None   # user | moderator | admin
     is_moderator:      Optional[int] = None
     is_banned:         Optional[int] = None
-    ban_reason:        Optional[str] = Field(None, max_length=1000)
+    ban_reason:        Optional[str] = None
     is_social_media:   Optional[int] = None
-    subscription_tier: Optional[str] = Field(None, max_length=50)
+    subscription_tier: Optional[str] = None
 
 class WikiEnrichBody(BaseModel):
     limit: int = 10
diff --git a/backend/routes/adoption.py b/backend/routes/adoption.py
index d353520..bde0986 100644
--- a/backend/routes/adoption.py
+++ b/backend/routes/adoption.py
@@ -10,18 +10,18 @@ Caching: adoption_cache Tabelle, 24h TTL.
 """
 
 import os
+import math
 import logging
 import asyncio
 import uuid
 import httpx
 from datetime   import datetime, timedelta
 from fastapi    import APIRouter, Query, BackgroundTasks, Depends, Form, UploadFile, File, HTTPException
-from pydantic   import BaseModel, Field
+from pydantic   import BaseModel
 from typing     import Optional
 from database   import db
 from auth       import get_current_user
 from routes.push import send_push_to_user
-from math_utils import haversine_km
 
 MEDIA_DIR = os.getenv("MEDIA_DIR", "/data/media")
 
@@ -31,6 +31,18 @@ router = APIRouter()
 PETFINDER_KEY    = os.getenv("PETFINDER_API_KEY", "")
 PETFINDER_SECRET = os.getenv("PETFINDER_API_SECRET", "")
 
+# ------------------------------------------------------------------
+# Haversine — Distanz in km
+# ------------------------------------------------------------------
+def _haversine(lat1: float, lon1: float, lat2: float, lon2: float) -> float:
+    R  = 6371.0
+    p1 = math.radians(lat1)
+    p2 = math.radians(lat2)
+    dp = math.radians(lat2 - lat1)
+    dl = math.radians(lon2 - lon1)
+    a  = math.sin(dp / 2) ** 2 + math.cos(p1) * math.cos(p2) * math.sin(dl / 2) ** 2
+    return 2 * R * math.asin(math.sqrt(a))
+
 
 # ------------------------------------------------------------------
 # Statische Tierheim-Daten (große deutsche Tierheime)
@@ -222,7 +234,7 @@ async def adoption_nearby(
         for row in rows:
             d = dict(row)
             if d.get("tierheim_lat") and d.get("tierheim_lon"):
-                dist = haversine_km(lat, lon, d["tierheim_lat"], d["tierheim_lon"])
+                dist = _haversine(lat, lon, d["tierheim_lat"], d["tierheim_lon"])
                 if dist <= radius:
                     d["distanz_km"] = round(dist, 1)
                     cached_animals.append(d)
@@ -238,7 +250,7 @@ async def adoption_nearby(
     # ------ Statische Tierheime (immer) ------
     shelters = []
     for sid, name, plz, stadt, slat, slon, url in GERMAN_SHELTERS:
-        dist = haversine_km(lat, lon, slat, slon)
+        dist = _haversine(lat, lon, slat, slon)
         if dist <= radius:
             shelters.append({
                 "id":        sid,
@@ -292,7 +304,7 @@ async def adoption_geocode(plz: str = Query(..., min_length=4, max_length=10)):
 # ==================================================================
 
 class InterestBody(BaseModel):
-    nachricht: Optional[str] = Field(None, max_length=5000)
+    nachricht: Optional[str] = None
 
 
 # ------------------------------------------------------------------
@@ -342,7 +354,7 @@ def community_list(
         d = dict(row)
         d["user_interested"] = bool(d.pop("_user_interested", 0))
         if lat is not None and lon is not None and d.get("lat") and d.get("lon"):
-            dist = haversine_km(lat, lon, d["lat"], d["lon"])
+            dist = _haversine(lat, lon, d["lat"], d["lon"])
             d["distanz_km"] = round(dist, 1)
             if dist > radius:
                 continue
@@ -422,7 +434,7 @@ async def community_create(
 # PATCH /api/adoption/community/{id} — Status ändern (nur Besitzer)
 # ------------------------------------------------------------------
 class _StatusBody(BaseModel):
-    status: str = Field(..., max_length=50)
+    status: str
 
 @router.patch("/community/{listing_id}")
 def community_update_status(
diff --git a/backend/routes/alerts.py b/backend/routes/alerts.py
index 7f1a0a0..0065d18 100644
--- a/backend/routes/alerts.py
+++ b/backend/routes/alerts.py
@@ -1,10 +1,10 @@
 """BAN YARO — Nearby Alerts (Giftköder + Vermisste Hunde)"""
+import math
 from datetime import datetime
 from fastapi import APIRouter, Depends
 
 from database import db
 from auth import get_current_user_optional as get_optional_user
-from math_utils import haversine_m, bbox_deg_from_km
 
 router = APIRouter()
 
@@ -12,9 +12,21 @@ _RADIUS_M = 20_000  # 20 km
 _RADIUS_KM = _RADIUS_M / 1000.0
 
 
+def _haversine(lat1: float, lon1: float, lat2: float, lon2: float) -> float:
+    R = 6_371_000
+    p1, p2 = math.radians(lat1), math.radians(lat2)
+    dp = math.radians(lat2 - lat1)
+    dl = math.radians(lon2 - lon1)
+    a = math.sin(dp / 2) ** 2 + math.cos(p1) * math.cos(p2) * math.sin(dl / 2) ** 2
+    return 2 * R * math.asin(math.sqrt(a))
+
+
 def _bbox(lat: float, lon: float, radius_km: float) -> tuple[float, float, float, float]:
     """Bounding-Box-Approximation für lat/lon innerhalb radius_km."""
-    lat_delta, lon_delta = bbox_deg_from_km(lat, radius_km)
+    lat_delta = radius_km / 111.0
+    # cos darf bei Polen nicht 0 werden → mit kleinem Minimum absichern
+    cos_lat = max(abs(math.cos(math.radians(lat))), 0.01)
+    lon_delta = radius_km / (111.0 * cos_lat)
     return (lat - lat_delta, lat + lat_delta, lon - lon_delta, lon + lon_delta)
 
 
@@ -48,7 +60,7 @@ async def nearby_alerts(lat: float, lon: float, user=Depends(get_optional_user))
                 (lat, lon, user["id"])
             )
 
-    has_poison = any(haversine_m(lat, lon, r["lat"], r["lon"]) <= _RADIUS_M for r in poisons)
-    has_lost   = any(haversine_m(lat, lon, r["lat"], r["lon"]) <= _RADIUS_M for r in lost)
+    has_poison = any(_haversine(lat, lon, r["lat"], r["lon"]) <= _RADIUS_M for r in poisons)
+    has_lost   = any(_haversine(lat, lon, r["lat"], r["lon"]) <= _RADIUS_M for r in lost)
 
     return {"poison": has_poison, "lost": has_lost}
diff --git a/backend/routes/auth.py b/backend/routes/auth.py
index 18b092b..4a9def8 100644
--- a/backend/routes/auth.py
+++ b/backend/routes/auth.py
@@ -10,7 +10,7 @@ from typing import Optional
 import jwt as _pyjwt
 from fastapi import APIRouter, HTTPException, Request, Response, Depends
 from fastapi.responses import RedirectResponse
-from pydantic import BaseModel, EmailStr, Field
+from pydantic import BaseModel, EmailStr
 from database import db
 from auth import (
     hash_password, verify_password, create_token,
@@ -146,13 +146,13 @@ def _send_verification_email(email: str, name: str, token: str):
 
 class LoginRequest(BaseModel):
     email:    EmailStr
-    password: str = Field(..., min_length=1, max_length=200)
+    password: str
 
 class RegisterRequest(BaseModel):
     email:    EmailStr
-    password: str = Field(..., min_length=8, max_length=200)
-    name:     str = Field(..., min_length=2, max_length=40)
-    ref_code: Optional[str] = Field(None, max_length=50)
+    password: str
+    name:     str
+    ref_code: Optional[str] = None
 
 
 def _gen_referral_code() -> str:
@@ -426,8 +426,8 @@ class ForgotPasswordRequest(BaseModel):
     email: EmailStr
 
 class ResetPasswordRequest(BaseModel):
-    token:    str = Field(..., min_length=10, max_length=200)
-    password: str = Field(..., min_length=8, max_length=200)
+    token: str
+    password: str
 
 @router.post("/forgot-password")
 async def forgot_password(data: ForgotPasswordRequest, request: Request):
@@ -471,8 +471,8 @@ async def forgot_password(data: ForgotPasswordRequest, request: Request):
 
 
 class UpgradeRequestBody(BaseModel):
-    tier:    str           = Field(..., max_length=50)
-    message: Optional[str] = Field(None, max_length=2000)
+    tier:    str
+    message: Optional[str] = None
 
 @router.post("/upgrade-request")
 async def create_upgrade_request(data: UpgradeRequestBody, user=Depends(get_current_user)):
diff --git a/backend/routes/breeder.py b/backend/routes/breeder.py
index e53a1d4..fe4028b 100644
--- a/backend/routes/breeder.py
+++ b/backend/routes/breeder.py
@@ -6,7 +6,7 @@ from zoneinfo import ZoneInfo
 
 from fastapi import APIRouter, Depends, HTTPException, UploadFile, File, Form
 from fastapi.responses import FileResponse
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional
 
 from database import db
@@ -237,7 +237,7 @@ async def admin_download_document(user_id: int, doc_id: int, admin=Depends(requi
 
 
 class RejectBody(BaseModel):
-    grund: str = Field(..., min_length=3, max_length=2000)
+    grund: str
 
 
 # ------------------------------------------------------------------
@@ -483,13 +483,13 @@ async def admin_create_profile(admin=Depends(require_admin)):
 # PUT /api/breeder/profile — eigenes Profil bearbeiten
 # ------------------------------------------------------------------
 class BreederProfileUpdate(BaseModel):
-    zwingername:  Optional[str] = Field(None, max_length=200)
-    rasse_text:   Optional[str] = Field(None, max_length=200)
-    verein:       Optional[str] = Field(None, max_length=200)
+    zwingername:  Optional[str] = None
+    rasse_text:   Optional[str] = None
+    verein:       Optional[str] = None
     vdh_mitglied: Optional[int] = None
-    stadt:        Optional[str] = Field(None, max_length=200)
-    website:      Optional[str] = Field(None, max_length=500)
-    beschreibung: Optional[str] = Field(None, max_length=10000)
+    stadt:        Optional[str] = None
+    website:      Optional[str] = None
+    beschreibung: Optional[str] = None
 
 @router.put("/breeder/profile")
 async def update_breeder_profile(body: BreederProfileUpdate, user=Depends(require_breeder)):
diff --git a/backend/routes/breeder_photos.py b/backend/routes/breeder_photos.py
index 802440f..18eb085 100644
--- a/backend/routes/breeder_photos.py
+++ b/backend/routes/breeder_photos.py
@@ -1,7 +1,7 @@
 """BAN YARO — Züchter-Fotos (Upload, Verwaltung, öffentliche Ansicht)"""
 from fastapi import APIRouter, Depends, HTTPException, UploadFile, File, Form
 from fastapi.responses import FileResponse
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional
 import os, logging, asyncio
 from database import db
@@ -30,10 +30,10 @@ def _require_breeder(user=Depends(get_current_user)):
 # Modelle
 # ------------------------------------------------------------------
 class VisibilityBody(BaseModel):
-    visibility: str = Field(..., max_length=30)
+    visibility: str
 
 class CaptionBody(BaseModel):
-    caption: Optional[str] = Field(None, max_length=500)
+    caption: Optional[str] = None
 
 
 # ------------------------------------------------------------------
diff --git a/backend/routes/chat.py b/backend/routes/chat.py
index 7147315..0874303 100644
--- a/backend/routes/chat.py
+++ b/backend/routes/chat.py
@@ -4,7 +4,7 @@ import os
 import uuid
 from datetime import datetime, timedelta
 from fastapi import APIRouter, Depends, HTTPException, UploadFile, File
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from database import db
 from auth import get_current_user
 
@@ -142,7 +142,7 @@ async def get_messages(conv_id: int, offset: int = 0, limit: int = 50,
 
 
 class SendMsgModel(BaseModel):
-    text: str = Field(..., min_length=1, max_length=2000)
+    text: str
 
 
 @router.post("/conversations/{conv_id}/messages", status_code=201)
@@ -151,6 +151,8 @@ async def send_message(conv_id: int, data: SendMsgModel, user=Depends(get_curren
     text = data.text.strip()
     if not text:
         raise HTTPException(400, "Nachricht darf nicht leer sein.")
+    if len(text) > 2000:
+        raise HTTPException(400, "Nachricht zu lang (max. 2000 Zeichen).")
 
     with db() as conn:
         conv = conn.execute(
diff --git a/backend/routes/diary.py b/backend/routes/diary.py
index 8d85a84..baf2586 100644
--- a/backend/routes/diary.py
+++ b/backend/routes/diary.py
@@ -1,8 +1,8 @@
 """BAN YARO — Tagebuch Routes"""
 
-import os, uuid, json, logging, asyncio
+import os, uuid, json, math, logging, asyncio
 from fastapi import APIRouter, Depends, HTTPException, UploadFile, File
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional
 from database import db
 from auth import get_current_user, require_admin
@@ -11,7 +11,6 @@ import httpx
 import weather as weather_mod
 from media_utils import convert_media, extract_video_thumb, safe_media_path, validate_upload, extract_gps_from_exif, generate_preview, preview_url_from, get_image_size
 from timeutils import safe_client_time
-from math_utils import haversine_km
 
 logger = logging.getLogger(__name__)
 
@@ -20,27 +19,27 @@ MEDIA_DIR = os.getenv("MEDIA_DIR", "/data/media")
 
 
 class DiaryCreate(BaseModel):
-    datum:         Optional[str]       = Field(None, max_length=32)   # ISO date, default heute
-    client_time:   Optional[str]       = Field(None, max_length=64)   # lokale Uhrzeit des Geräts (YYYY-MM-DDTHH:MM:SS)
-    typ:           str                 = Field("eintrag", max_length=50)
-    titel:         Optional[str]       = Field(None, max_length=200)
-    text:          Optional[str]       = Field(None, max_length=10000)
+    datum:         Optional[str]       = None   # ISO date, default heute
+    client_time:   Optional[str]       = None   # lokale Uhrzeit des Geräts (YYYY-MM-DDTHH:MM:SS)
+    typ:           str                 = "eintrag"
+    titel:         Optional[str]       = None
+    text:          Optional[str]       = None
     tags:          Optional[list]      = None
     gps_lat:       Optional[float]     = None
     gps_lon:       Optional[float]     = None
-    location_name: Optional[str]       = Field(None, max_length=300)
+    location_name: Optional[str]       = None
     is_milestone:  bool                = False
     dog_ids:       Optional[list[int]] = None   # alle Hunde inkl. primär; None = nur primary
-    weather_json:  Optional[str]       = Field(None, max_length=5000)   # Client-seitig vorab geholtes Wetter (Fallback wenn kein GPS)
+    weather_json:  Optional[str]       = None   # Client-seitig vorab geholtes Wetter (Fallback wenn kein GPS)
 
 
 class DiaryUpdate(BaseModel):
-    titel:         Optional[str]       = Field(None, max_length=200)
-    text:          Optional[str]       = Field(None, max_length=10000)
+    titel:         Optional[str]       = None
+    text:          Optional[str]       = None
     tags:          Optional[list]      = None
     gps_lat:       Optional[float]     = None
     gps_lon:       Optional[float]     = None
-    location_name: Optional[str]       = Field(None, max_length=300)
+    location_name: Optional[str]       = None
     is_milestone:  Optional[bool]      = None
     dog_ids:       Optional[list[int]] = None   # wenn gesetzt: Hunde-Zuweisung ersetzen
 
@@ -410,7 +409,7 @@ async def _fetch_pois_for_coords(lat: float, lon: float, limit: int = 5) -> list
                 elat = el.get("lat") or el.get("center", {}).get("lat")
                 elon = el.get("lon") or el.get("center", {}).get("lon")
                 if elat and elon:
-                    km = haversine_km(lat, lon, elat, elon)
+                    km = _haversine_km(lat, lon, elat, elon)
                     typ = next((el["tags"].get(k) for k in
                                 ["tourism", "historic", "leisure", "amenity", "shop"]
                                 if el["tags"].get(k)), "place")
@@ -423,6 +422,16 @@ async def _fetch_pois_for_coords(lat: float, lon: float, limit: int = 5) -> list
     return results[:limit]
 
 
+def _haversine_km(lat1, lon1, lat2, lon2) -> float:
+    R = 6371
+    dlat = math.radians(lat2 - lat1)
+    dlon = math.radians(lon2 - lon1)
+    a = (math.sin(dlat / 2) ** 2
+         + math.cos(math.radians(lat1)) * math.cos(math.radians(lat2))
+         * math.sin(dlon / 2) ** 2)
+    return R * 2 * math.asin(math.sqrt(a))
+
+
 @router.get("/{dog_id}/diary/nearby")
 async def nearby_places(dog_id: int, lat: float, lon: float,
                         user=Depends(get_current_user)):
@@ -436,7 +445,7 @@ async def nearby_places(dog_id: int, lat: float, lon: float,
             (user["id"],)
         ).fetchall()
         for p in places:
-            km = haversine_km(lat, lon, p["lat"], p["lon"])
+            km = _haversine_km(lat, lon, p["lat"], p["lon"])
             if km <= 5:
                 results.append({"name": p["name"], "type": p["typ"] or "place",
                                  "lat": p["lat"], "lon": p["lon"],
@@ -447,7 +456,7 @@ async def nearby_places(dog_id: int, lat: float, lon: float,
             "SELECT name, type, lat, lon FROM osm_pois WHERE name IS NOT NULL AND name != ''"
         ).fetchall()
         for p in osm:
-            km = haversine_km(lat, lon, p["lat"], p["lon"])
+            km = _haversine_km(lat, lon, p["lat"], p["lon"])
             if km <= 2:
                 results.append({"name": p["name"], "type": p["type"],
                                  "lat": p["lat"], "lon": p["lon"],
@@ -494,7 +503,7 @@ async def nearby_places(dog_id: int, lat: float, lon: float,
                     elat = el.get("lat") or el.get("center", {}).get("lat")
                     elon = el.get("lon") or el.get("center", {}).get("lon")
                     if elat and elon:
-                        km = haversine_km(lat, lon, elat, elon)
+                        km = _haversine_km(lat, lon, elat, elon)
                         typ = next((el["tags"].get(k) for k in
                                     ["tourism","historic","leisure","amenity","shop"]
                                     if el["tags"].get(k)), "place")
diff --git a/backend/routes/dogs.py b/backend/routes/dogs.py
index 1c37b99..9cc2820 100644
--- a/backend/routes/dogs.py
+++ b/backend/routes/dogs.py
@@ -3,7 +3,7 @@
 import os
 import uuid
 from fastapi import APIRouter, Depends, HTTPException, UploadFile, File
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional
 from database import db
 from auth import get_current_user, has_pro_access
@@ -29,28 +29,28 @@ MEDIA_DIR = os.getenv("MEDIA_DIR", "/data/media")
 
 
 class DogCreate(BaseModel):
-    name:         str             = Field(..., min_length=1, max_length=80)
-    rasse:        Optional[str]   = Field(None, max_length=80)
-    geburtstag:   Optional[str]   = Field(None, max_length=32)
-    geschlecht:   Optional[str]   = Field(None, max_length=20)
+    name:         str
+    rasse:        Optional[str] = None
+    geburtstag:   Optional[str] = None
+    geschlecht:   Optional[str] = None
     gewicht_kg:   Optional[float] = None
     widerrist_cm: Optional[float] = None
-    chip_nr:      Optional[str]   = Field(None, max_length=50)
-    bio:          Optional[str]   = Field(None, max_length=2000)
-    is_public:    bool            = False
+    chip_nr:      Optional[str] = None
+    bio:          Optional[str] = None
+    is_public:    bool = False
 
 
 class DogUpdate(BaseModel):
-    name:         Optional[str]   = Field(None, max_length=80)
-    rasse:        Optional[str]   = Field(None, max_length=80)
-    rasse_id:     Optional[int]   = None
-    geburtstag:   Optional[str]   = Field(None, max_length=32)
-    geschlecht:   Optional[str]   = Field(None, max_length=20)
+    name:         Optional[str] = None
+    rasse:        Optional[str] = None
+    rasse_id:     Optional[int] = None
+    geburtstag:   Optional[str] = None
+    geschlecht:   Optional[str] = None
     gewicht_kg:   Optional[float] = None
     widerrist_cm: Optional[float] = None
-    chip_nr:      Optional[str]   = Field(None, max_length=50)
-    bio:          Optional[str]   = Field(None, max_length=2000)
-    is_public:    Optional[bool]  = None
+    chip_nr:      Optional[str] = None
+    bio:          Optional[str] = None
+    is_public:    Optional[bool] = None
 
 
 @router.get("")
@@ -180,22 +180,14 @@ async def create_dog(data: DogCreate, user=Depends(get_current_user)):
             if dog_count == 1:  # genau dieser erste Hund
                 plausible, reason = _is_plausible_dog(data.name, data.rasse, data.geburtstag)
                 if plausible:
-                    # Atomare Gründer-Vergabe — Race-frei via Sub-Query im UPDATE.
-                    # Wenn schon 100 Founder oder User schon is_founder=1 → kein Update (rowcount=0)
-                    conn.execute(
-                        """UPDATE users
-                              SET is_founder = 1,
-                                  founder_number = (
-                                    SELECT IFNULL(MAX(founder_number), 0) + 1
-                                      FROM users WHERE is_founder = 1
-                                  ),
-                                  is_founder_pending = 0
-                            WHERE id = ?
-                              AND is_founder_pending = 1
-                              AND (is_founder IS NULL OR is_founder = 0)
-                              AND (SELECT COUNT(*) FROM users WHERE is_founder = 1) < 100""",
-                        (user["id"],)
-                    )
+                    total = conn.execute(
+                        "SELECT COUNT(*) FROM users WHERE is_founder=1"
+                    ).fetchone()[0]
+                    if total < 100:
+                        conn.execute(
+                            "UPDATE users SET is_founder=1, founder_number=?, is_founder_pending=0 WHERE id=?",
+                            (total + 1, user["id"])
+                        )
 
     return dict(dog)
 
@@ -1033,8 +1025,8 @@ async def public_dog_profile(dog_id: int):
 
 
 class FoundReport(BaseModel):
-    message:  Optional[str] = Field(None, max_length=1000)
-    kontakt:  Optional[str] = Field(None, max_length=300)
+    message:  Optional[str] = None
+    kontakt:  Optional[str] = None
 
 
 # Gefunden-Meldung (kein Login nötig)
@@ -1319,7 +1311,7 @@ async def get_dog_timeline(dog_id: int, user=Depends(get_current_user)):
 # POST /api/dogs/{id}/gedenken — Hund als verstorben markieren
 # ------------------------------------------------------------------
 class GedenkenData(BaseModel):
-    verstorben_am: str = Field(..., max_length=32)  # YYYY-MM-DD
+    verstorben_am: str  # YYYY-MM-DD
 
 @router.post("/{dog_id}/gedenken")
 async def mark_verstorben(dog_id: int, data: GedenkenData, user=Depends(get_current_user)):
diff --git a/backend/routes/ernaehrung.py b/backend/routes/ernaehrung.py
index d485c80..2aa4760 100644
--- a/backend/routes/ernaehrung.py
+++ b/backend/routes/ernaehrung.py
@@ -2,7 +2,7 @@
 
 import logging
 from fastapi import APIRouter, Depends, HTTPException, Request
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional
 from database import db
 from auth import get_current_user
@@ -16,18 +16,18 @@ logger = logging.getLogger(__name__)
 # Schemas
 # ------------------------------------------------------------------
 class FutterProfilUpdate(BaseModel):
-    futter_typ: Optional[str] = Field(None, max_length=50)   # trocken|nass|barf|mix
-    marke:      Optional[str] = Field(None, max_length=200)
+    futter_typ: Optional[str] = None   # trocken|nass|barf|mix
+    marke:      Optional[str] = None
     kcal_tag:   Optional[int] = None
     portionen:  Optional[int] = None
-    notizen:    Optional[str] = Field(None, max_length=5000)
+    notizen:    Optional[str] = None
 
 
 class KiBeratungRequest(BaseModel):
-    frage:     str             = Field(..., min_length=3, max_length=2000)
-    dog_name:  Optional[str]   = Field(None, max_length=80)
-    rasse:     Optional[str]   = Field(None, max_length=80)
-    alter:     Optional[str]   = Field(None, max_length=50)
+    frage:     str
+    dog_name:  Optional[str] = None
+    rasse:     Optional[str] = None
+    alter:     Optional[str] = None
     gewicht:   Optional[float] = None
     aktiv:     Optional[bool]  = None
 
@@ -183,20 +183,20 @@ _GASTRO_HINWEIS = "Magen-Darm-Symptome wie {label} treten meist innerhalb wenige
 
 
 class FutterEintragCreate(BaseModel):
-    datum:       str           = Field(..., max_length=32)
-    uhrzeit:     str           = Field(..., max_length=20)
-    futter_name: str           = Field(..., max_length=200)
-    futter_typ:  Optional[str] = Field("trockenfutter", max_length=50)
+    datum:       str
+    uhrzeit:     str
+    futter_name: str
+    futter_typ:  Optional[str] = "trockenfutter"
     menge_g:     Optional[int] = None
-    notiz:       Optional[str] = Field(None, max_length=2000)
+    notiz:       Optional[str] = None
 
 
 class ReaktionCreate(BaseModel):
-    datum:        str           = Field(..., max_length=32)
-    uhrzeit:      str           = Field(..., max_length=20)
-    reaktion_typ: str           = Field(..., max_length=100)
+    datum:        str
+    uhrzeit:      str
+    reaktion_typ: str
     intensitaet:  Optional[int] = 3
-    notiz:        Optional[str] = Field(None, max_length=2000)
+    notiz:        Optional[str] = None
 
 
 # ------------------------------------------------------------------
diff --git a/backend/routes/events.py b/backend/routes/events.py
index f2ca8a6..c066959 100644
--- a/backend/routes/events.py
+++ b/backend/routes/events.py
@@ -1,45 +1,54 @@
 """BAN YARO — Events (Hundeveranstaltungen)"""
 
+import math
 from datetime import date
 from fastapi import APIRouter, Depends, HTTPException
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional
 from database import db
 from auth import get_current_user
-from math_utils import haversine_m
 
 router = APIRouter()
 
 TYPEN = {'ausstellung', 'training', 'treffen', 'markt', 'wettkampf', 'sonstiges'}
 
 
+def _haversine(lat1, lon1, lat2, lon2):
+    R  = 6_371_000
+    p1, p2 = math.radians(lat1), math.radians(lat2)
+    dp = math.radians(lat2 - lat1)
+    dl = math.radians(lon2 - lon1)
+    a  = math.sin(dp / 2) ** 2 + math.cos(p1) * math.cos(p2) * math.sin(dl / 2) ** 2
+    return 2 * R * math.asin(math.sqrt(a))
+
+
 # ------------------------------------------------------------------
 # Schemas
 # ------------------------------------------------------------------
 class RsvpCreate(BaseModel):
-    status: str = Field('going', max_length=20)  # 'going' | 'maybe'
+    status: str = 'going'  # 'going' | 'maybe'
 
 class EventCreate(BaseModel):
-    titel:       str            = Field(..., min_length=3, max_length=200)
-    datum:       str            = Field(..., max_length=32)               # YYYY-MM-DD
-    uhrzeit:     Optional[str]  = Field(None, max_length=20)
+    titel:       str
+    datum:       str                       # YYYY-MM-DD
+    uhrzeit:     Optional[str]  = None
     lat:         Optional[float] = None
     lon:         Optional[float] = None
-    ort_name:    Optional[str]  = Field(None, max_length=300)
-    typ:         str            = Field('sonstiges', max_length=50)
-    beschreibung: Optional[str] = Field(None, max_length=10000)
-    link:        Optional[str]  = Field(None, max_length=500)
+    ort_name:    Optional[str]  = None
+    typ:         str            = 'sonstiges'
+    beschreibung: Optional[str] = None
+    link:        Optional[str]  = None
 
 class EventUpdate(BaseModel):
-    titel:        Optional[str]   = Field(None, max_length=200)
-    datum:        Optional[str]   = Field(None, max_length=32)
-    uhrzeit:      Optional[str]   = Field(None, max_length=20)
+    titel:        Optional[str]   = None
+    datum:        Optional[str]   = None
+    uhrzeit:      Optional[str]   = None
     lat:          Optional[float] = None
     lon:          Optional[float] = None
-    ort_name:     Optional[str]   = Field(None, max_length=300)
-    typ:          Optional[str]   = Field(None, max_length=50)
-    beschreibung: Optional[str]   = Field(None, max_length=10000)
-    link:         Optional[str]   = Field(None, max_length=500)
+    ort_name:     Optional[str]   = None
+    typ:          Optional[str]   = None
+    beschreibung: Optional[str]   = None
+    link:         Optional[str]   = None
 
 
 # ------------------------------------------------------------------
@@ -77,7 +86,7 @@ async def list_events(
     result = [dict(r) for r in rows]
     if lat is not None and lon is not None:
         result = [r for r in result
-                  if r['lat'] is None or haversine_m(lat, lon, r['lat'], r['lon']) <= radius]
+                  if r['lat'] is None or _haversine(lat, lon, r['lat'], r['lon']) <= radius]
     return result
 
 
diff --git a/backend/routes/expenses.py b/backend/routes/expenses.py
index 9a34f27..9c93475 100644
--- a/backend/routes/expenses.py
+++ b/backend/routes/expenses.py
@@ -4,7 +4,7 @@ import logging
 from datetime import date, timedelta
 from dateutil.relativedelta import relativedelta
 from fastapi import APIRouter, Depends, HTTPException, Query
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional
 from database import db
 from auth import get_current_user
@@ -20,35 +20,35 @@ KATEGORIEN = {"tierarzt", "futter", "zubehoer", "versicherung", "sitter", "sonst
 # ------------------------------------------------------------------
 class ExpenseCreate(BaseModel):
     dog_id:    Optional[int]  = None
-    kategorie: str             = Field(..., max_length=50)
+    kategorie: str
     betrag:    float
-    datum:     str             = Field(..., max_length=32)
-    notiz:     Optional[str]   = Field(None, max_length=1000)
+    datum:     str
+    notiz:     Optional[str]  = None
 
 
 class ExpenseUpdate(BaseModel):
     dog_id:    Optional[int]   = None
-    kategorie: Optional[str]   = Field(None, max_length=50)
+    kategorie: Optional[str]   = None
     betrag:    Optional[float] = None
-    datum:     Optional[str]   = Field(None, max_length=32)
-    notiz:     Optional[str]   = Field(None, max_length=1000)
+    datum:     Optional[str]   = None
+    notiz:     Optional[str]   = None
 
 
 class RecurringCreate(BaseModel):
     dog_id:      Optional[int]  = None
-    kategorie:   str            = Field(..., max_length=50)
+    kategorie:   str
     betrag:      float
-    haeufigkeit: str            = Field(..., max_length=30)  # monatlich | quartalsweise | jaehrlich
-    startdatum:  str            = Field(..., max_length=32)  # ISO date
-    notiz:       Optional[str]  = Field(None, max_length=1000)
+    haeufigkeit: str            # monatlich | quartalsweise | jaehrlich
+    startdatum:  str            # ISO date
+    notiz:       Optional[str]  = None
 
 class RecurringUpdate(BaseModel):
     dog_id:      Optional[int]   = None
-    kategorie:   Optional[str]   = Field(None, max_length=50)
+    kategorie:   Optional[str]   = None
     betrag:      Optional[float] = None
-    haeufigkeit: Optional[str]   = Field(None, max_length=30)
-    startdatum:  Optional[str]   = Field(None, max_length=32)
-    notiz:       Optional[str]   = Field(None, max_length=1000)
+    haeufigkeit: Optional[str]   = None
+    startdatum:  Optional[str]   = None
+    notiz:       Optional[str]   = None
     aktiv:       Optional[bool]  = None
 
 
diff --git a/backend/routes/forum.py b/backend/routes/forum.py
index f8ee5e0..2834ab0 100644
--- a/backend/routes/forum.py
+++ b/backend/routes/forum.py
@@ -2,7 +2,7 @@
 
 import os, uuid, json, logging
 from fastapi import APIRouter, Depends, HTTPException, UploadFile, File
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional
 from database import db
 from auth import get_current_user, get_current_user_optional
@@ -27,40 +27,40 @@ KATEGORIEN = ['allgemein', 'rasse', 'region', 'gesundheit', 'erziehung',
 # Schemas
 # ------------------------------------------------------------------
 class ThreadCreate(BaseModel):
-    kategorie:   str           = Field('allgemein', max_length=100)
-    titel:       str           = Field(..., min_length=3, max_length=200)
-    text:        str           = Field(..., min_length=1, max_length=10000)
+    kategorie:   str           = 'allgemein'
+    titel:       str
+    text:        str
     thread_lat:  Optional[float] = None
     thread_lon:  Optional[float] = None
-    thread_ort:  Optional[str]   = Field(None, max_length=300)
-    client_time: Optional[str]   = Field(None, max_length=64)
+    thread_ort:  Optional[str]   = None
+    client_time: Optional[str]   = None
 
 class PostCreate(BaseModel):
-    text:        str           = Field(..., min_length=1, max_length=10000)
-    client_time: Optional[str] = Field(None, max_length=64)
+    text:        str
+    client_time: Optional[str] = None
 
 class ThreadPatch(BaseModel):
     is_pinned:  Optional[int] = None
     is_locked:  Optional[int] = None
 
 class ThreadUpdate(BaseModel):
-    titel:      Optional[str]   = Field(None, max_length=200)
-    text:       Optional[str]   = Field(None, max_length=10000)
+    titel:      Optional[str]   = None
+    text:       Optional[str]   = None
     thread_lat: Optional[float] = None
     thread_lon: Optional[float] = None
-    thread_ort: Optional[str]   = Field(None, max_length=300)
+    thread_ort: Optional[str]   = None
 
 class PostUpdate(BaseModel):
-    text: str = Field(..., min_length=1, max_length=10000)
+    text: str
 
 class LikeBody(BaseModel):
-    target_type: str = Field(..., max_length=20)   # 'thread' | 'post'
+    target_type: str   # 'thread' | 'post'
     target_id:   int
 
 class ReportBody(BaseModel):
-    target_type: str = Field(..., max_length=20)
+    target_type: str
     target_id:   int
-    grund:       str = Field(..., min_length=3, max_length=1000)
+    grund:       str
 
 class LocationBody(BaseModel):
     lat:  Optional[float] = None
diff --git a/backend/routes/gassi_zeiten.py b/backend/routes/gassi_zeiten.py
index 455aa15..77ff52f 100644
--- a/backend/routes/gassi_zeiten.py
+++ b/backend/routes/gassi_zeiten.py
@@ -1,28 +1,37 @@
 """BAN YARO — Gassi-Zeiten-Pool (regelmäßige Gassi-Zeiten mit Gleichgesinnten)"""
 
 import json
+import math
 import logging
 from fastapi import APIRouter, Depends, HTTPException
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional, List
 from database import db
 from auth import get_current_user
-from math_utils import haversine_m
 
 logger = logging.getLogger(__name__)
 
 router = APIRouter()
 
 
+def _haversine(lat1, lon1, lat2, lon2):
+    R = 6_371_000
+    p1, p2 = math.radians(lat1), math.radians(lat2)
+    dp = math.radians(lat2 - lat1)
+    dl = math.radians(lon2 - lon1)
+    a = math.sin(dp / 2) ** 2 + math.cos(p1) * math.cos(p2) * math.sin(dl / 2) ** 2
+    return 2 * R * math.asin(math.sqrt(a))
+
+
 class GassiZeitCreate(BaseModel):
-    dog_id:     Optional[int]   = None
-    wochentage: List[str]                                        # ["mo", "mi", "fr"]
-    uhrzeit:    str             = Field(..., max_length=20)      # "17:00"
-    ort_name:   Optional[str]   = Field(None, max_length=300)
+    dog_id:     Optional[int]  = None
+    wochentage: List[str]       # ["mo", "mi", "fr"]
+    uhrzeit:    str             # "17:00"
+    ort_name:   Optional[str]  = None
     lat:        Optional[float] = None
     lon:        Optional[float] = None
     radius_m:   int             = 500
-    notiz:      Optional[str]   = Field(None, max_length=2000)
+    notiz:      Optional[str]  = None
 
 
 class GassiZeitUpdate(BaseModel):
@@ -74,7 +83,7 @@ async def list_gassi_zeiten(
 
         # Distanz-Filter
         if lat is not None and lon is not None and d.get("lat") and d.get("lon"):
-            dist = haversine_m(lat, lon, d["lat"], d["lon"])
+            dist = _haversine(lat, lon, d["lat"], d["lon"])
             if not nur_eigene and dist > radius:
                 continue
             d["distance_m"] = int(dist)
diff --git a/backend/routes/health.py b/backend/routes/health.py
index 7b9ed35..34ec5ec 100644
--- a/backend/routes/health.py
+++ b/backend/routes/health.py
@@ -3,7 +3,7 @@
 import os, uuid
 from datetime import date, datetime
 from fastapi import APIRouter, Depends, HTTPException, UploadFile, File
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional
 from database import db
 from auth import get_current_user
@@ -22,59 +22,59 @@ TYPEN = {"impfung", "entwurmung", "tierarzt", "medikament", "gewicht", "allergie
 # Schemas
 # ------------------------------------------------------------------
 class HealthCreate(BaseModel):
-    typ:          str             = Field(..., max_length=50)
-    bezeichnung:  Optional[str]   = Field(None, max_length=200)
-    datum:        str             = Field(..., max_length=32)
-    naechstes:    Optional[str]   = Field(None, max_length=32)
-    notiz:        Optional[str]   = Field(None, max_length=5000)
+    typ:          str
+    bezeichnung:  Optional[str] = None
+    datum:        str
+    naechstes:    Optional[str] = None
+    notiz:        Optional[str] = None
     # Gewicht
     wert:         Optional[float] = None
-    einheit:      Optional[str]   = Field("kg", max_length=20)
+    einheit:      Optional[str]   = "kg"
     # Impfung
-    charge_nr:    Optional[str]   = Field(None, max_length=100)
-    tierarzt_name: Optional[str]  = Field(None, max_length=200)
+    charge_nr:    Optional[str]   = None
+    tierarzt_name: Optional[str]  = None
     # Tierarztbesuch
     kosten:       Optional[float] = None
-    diagnose:     Optional[str]   = Field(None, max_length=2000)
+    diagnose:     Optional[str]   = None
     # Medikament
-    dosierung:    Optional[str]   = Field(None, max_length=200)
-    haeufigkeit:  Optional[str]   = Field(None, max_length=200)
+    dosierung:    Optional[str]   = None
+    haeufigkeit:  Optional[str]   = None
     aktiv:        Optional[int]   = 1
-    bis_datum:    Optional[str]   = Field(None, max_length=32)
+    bis_datum:    Optional[str]   = None
     # Allergie
-    schweregrad:  Optional[str]   = Field(None, max_length=50)  # leicht | mittel | schwer
-    reaktion:     Optional[str]   = Field(None, max_length=1000)
+    schweregrad:  Optional[str]   = None  # leicht | mittel | schwer
+    reaktion:     Optional[str]   = None
     erinnerung:   Optional[int]   = 1
     intervall_tage: Optional[int] = None   # Wiederkehrend alle X Tage
     # Tierarzt-Verknüpfung
     tierarzt_id:  Optional[int]   = None
     # Züchter
-    deckdatum:    Optional[str]   = Field(None, max_length=32)
-    wurftermin:   Optional[str]   = Field(None, max_length=32)
+    deckdatum:    Optional[str]   = None
+    wurftermin:   Optional[str]   = None
 
 
 class HealthUpdate(BaseModel):
-    bezeichnung:  Optional[str]   = Field(None, max_length=200)
-    datum:        Optional[str]   = Field(None, max_length=32)
-    naechstes:    Optional[str]   = Field(None, max_length=32)
-    notiz:        Optional[str]   = Field(None, max_length=5000)
+    bezeichnung:  Optional[str]   = None
+    datum:        Optional[str]   = None
+    naechstes:    Optional[str]   = None
+    notiz:        Optional[str]   = None
     wert:         Optional[float] = None
-    einheit:      Optional[str]   = Field(None, max_length=20)
-    charge_nr:    Optional[str]   = Field(None, max_length=100)
-    tierarzt_name: Optional[str]  = Field(None, max_length=200)
+    einheit:      Optional[str]   = None
+    charge_nr:    Optional[str]   = None
+    tierarzt_name: Optional[str]  = None
     kosten:       Optional[float] = None
-    diagnose:     Optional[str]   = Field(None, max_length=2000)
-    dosierung:    Optional[str]   = Field(None, max_length=200)
-    haeufigkeit:  Optional[str]   = Field(None, max_length=200)
+    diagnose:     Optional[str]   = None
+    dosierung:    Optional[str]   = None
+    haeufigkeit:  Optional[str]   = None
     aktiv:        Optional[int]   = None
-    bis_datum:    Optional[str]   = Field(None, max_length=32)
-    schweregrad:  Optional[str]   = Field(None, max_length=50)
-    reaktion:     Optional[str]   = Field(None, max_length=1000)
+    bis_datum:    Optional[str]   = None
+    schweregrad:  Optional[str]   = None
+    reaktion:     Optional[str]   = None
     erinnerung:   Optional[int]   = None
     intervall_tage: Optional[int] = None
     tierarzt_id:  Optional[int]   = None
-    deckdatum:    Optional[str]   = Field(None, max_length=32)
-    wurftermin:   Optional[str]   = Field(None, max_length=32)
+    deckdatum:    Optional[str]   = None
+    wurftermin:   Optional[str]   = None
 
 
 # ------------------------------------------------------------------
@@ -390,7 +390,7 @@ async def list_gewicht(dog_id: int, user=Depends(get_current_user)):
 # POST /api/dogs/{dog_id}/health/symptom-check — KI-Symptomprüfung
 # ------------------------------------------------------------------
 class SymptomCheckRequest(BaseModel):
-    symptoms: str = Field(..., min_length=3, max_length=5000)
+    symptoms: str
 
 
 @router.post("/{dog_id}/health/symptom-check")
@@ -576,20 +576,20 @@ async def terminvorschlaege(dog_id: int, user=Depends(get_current_user)):
 # ==================================================================
 
 class InsuranceCreate(BaseModel):
-    anbieter:      str             = Field(..., min_length=1, max_length=200)
-    police_nr:     Optional[str]   = Field(None, max_length=100)
+    anbieter:      str
+    police_nr:     Optional[str]  = None
     jahresbeitrag: Optional[float] = None
-    kontakt:       Optional[str]   = Field(None, max_length=500)
-    ablaufdatum:   Optional[str]   = Field(None, max_length=32)
-    notizen:       Optional[str]   = Field(None, max_length=5000)
+    kontakt:       Optional[str]  = None
+    ablaufdatum:   Optional[str]  = None
+    notizen:       Optional[str]  = None
 
 class InsuranceUpdate(BaseModel):
-    anbieter:      Optional[str]   = Field(None, max_length=200)
-    police_nr:     Optional[str]   = Field(None, max_length=100)
+    anbieter:      Optional[str]   = None
+    police_nr:     Optional[str]   = None
     jahresbeitrag: Optional[float] = None
-    kontakt:       Optional[str]   = Field(None, max_length=500)
-    ablaufdatum:   Optional[str]   = Field(None, max_length=32)
-    notizen:       Optional[str]   = Field(None, max_length=5000)
+    kontakt:       Optional[str]   = None
+    ablaufdatum:   Optional[str]   = None
+    notizen:       Optional[str]   = None
 
 
 @router.get("/{dog_id}/insurance")
@@ -674,12 +674,12 @@ TRIGGER_LABELS = {
 
 
 class BehaviorCreate(BaseModel):
-    datum:       str             = Field(..., max_length=32)
-    uhrzeit:     Optional[str]   = Field(None, max_length=20)
-    kategorie:   str             = Field(..., max_length=50)
-    intensitaet: int             = 3
-    trigger:     Optional[str]   = Field(None, max_length=200)
-    notiz:       Optional[str]   = Field(None, max_length=5000)
+    datum:       str
+    uhrzeit:     Optional[str] = None
+    kategorie:   str
+    intensitaet: int = 3
+    trigger:     Optional[str] = None
+    notiz:       Optional[str] = None
 
 
 @router.get("/{dog_id}/behavior")
diff --git a/backend/routes/help.py b/backend/routes/help.py
index 05803f0..6551e4d 100644
--- a/backend/routes/help.py
+++ b/backend/routes/help.py
@@ -1,7 +1,7 @@
 """BAN YARO — Hilfe / FAQ Routes"""
 
 from fastapi import APIRouter, Depends, Query
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional
 from database import db
 from auth import get_current_user_optional, require_admin
@@ -31,17 +31,17 @@ def _load_active_help_articles() -> list[dict]:
 # Schemas
 # ------------------------------------------------------------------
 class ArticleCreate(BaseModel):
-    kategorie:  str           = Field(..., max_length=100)
-    frage:      str           = Field(..., min_length=3, max_length=500)
-    antwort:    str           = Field(..., min_length=3, max_length=10000)
-    sort_order: int           = 0
-    aktiv:      int           = 1
+    kategorie:  str
+    frage:      str
+    antwort:    str
+    sort_order: int = 0
+    aktiv:      int = 1
 
 
 class ArticleUpdate(BaseModel):
-    kategorie:  Optional[str] = Field(None, max_length=100)
-    frage:      Optional[str] = Field(None, max_length=500)
-    antwort:    Optional[str] = Field(None, max_length=10000)
+    kategorie:  Optional[str] = None
+    frage:      Optional[str] = None
+    antwort:    Optional[str] = None
     sort_order: Optional[int] = None
     aktiv:      Optional[int] = None
 
diff --git a/backend/routes/invoices.py b/backend/routes/invoices.py
index 87d104d..1f27759 100644
--- a/backend/routes/invoices.py
+++ b/backend/routes/invoices.py
@@ -6,7 +6,7 @@ from datetime import datetime
 from typing import Optional, List
 from fastapi import APIRouter, Depends, HTTPException
 from fastapi.responses import Response
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from database import db
 from auth import require_admin
 import mailer
@@ -19,30 +19,30 @@ logger = logging.getLogger(__name__)
 # Schemas
 # ------------------------------------------------------------------
 class InvoiceItem(BaseModel):
-    description: str   = Field(..., max_length=500)
-    quantity: float    = 1.0
+    description: str
+    quantity: float = 1.0
     unit_price: float
 
 
 class InvoiceCreate(BaseModel):
     user_id: Optional[int] = None
-    recipient_name: str    = Field(..., max_length=200)
-    recipient_email: str   = Field(..., max_length=254)
-    recipient_address: Optional[str] = Field(None, max_length=500)
+    recipient_name: str
+    recipient_email: str
+    recipient_address: Optional[str] = None
     items: List[InvoiceItem]
     discount_pct: Optional[float] = 0.0
-    service_period: Optional[str] = Field(None, max_length=200)
-    notes: Optional[str]   = Field(None, max_length=5000)
+    service_period: Optional[str] = None
+    notes: Optional[str] = None
 
 
 class PayBody(BaseModel):
-    paid_at: str        = Field(..., max_length=32)
+    paid_at: str
     paid_amount: float
-    notes: Optional[str] = Field(None, max_length=2000)
+    notes: Optional[str] = None
 
 
 class CancelBody(BaseModel):
-    reason: str = Field(..., min_length=3, max_length=1000)
+    reason: str
 
 
 # ------------------------------------------------------------------
diff --git a/backend/routes/ki.py b/backend/routes/ki.py
index 5169634..2b16cbe 100644
--- a/backend/routes/ki.py
+++ b/backend/routes/ki.py
@@ -1,6 +1,6 @@
 """BAN YARO — KI Routes"""
 from fastapi import APIRouter, Depends, HTTPException, Request, UploadFile, File
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional
 import ki as ki_module
 from auth import get_current_user
@@ -11,9 +11,9 @@ router = APIRouter()
 
 
 class TrainingRequest(BaseModel):
-    problem: str           = Field(..., min_length=10, max_length=1000)
-    rasse:   Optional[str] = Field(None, max_length=80)
-    alter:   Optional[str] = Field(None, max_length=50)
+    problem: str
+    rasse:   Optional[str] = None
+    alter:   Optional[str] = None
 
 
 @router.post("/training")
@@ -23,6 +23,8 @@ async def ki_training(req: TrainingRequest, request: Request,
     rl_check(request, max_requests=10, window_seconds=3600, key="ki_training")
     if not req.problem or len(req.problem.strip()) < 10:
         raise HTTPException(400, "Bitte beschreibe das Problem genauer.")
+    if len(req.problem) > 1000:
+        raise HTTPException(400, "Beschreibung zu lang (max. 1000 Zeichen).")
 
     rasse = req.rasse or "unbekannt"
     alter = req.alter or "unbekannt"
@@ -67,10 +69,10 @@ Schreibe klar und strukturiert, ohne unnötigen Fachjargon."""
 # POST /ki/tierarzt — KI-Tierarztfragen
 # ------------------------------------------------------------------
 class TierarztRequest(BaseModel):
-    symptom:  str            = Field(..., min_length=5, max_length=1000)
+    symptom:  str
     dog_id:   Optional[int]  = None
-    dog_name: Optional[str]  = Field(None, max_length=80)
-    rasse:    Optional[str]  = Field(None, max_length=80)
+    dog_name: Optional[str]  = None
+    rasse:    Optional[str]  = None
 
 
 @router.post("/tierarzt")
@@ -79,6 +81,8 @@ async def ki_tierarzt(req: TierarztRequest, request: Request,
     """KI-Tierarztfragen: Symptombeschreibung → erste Einschätzung."""
     if not req.symptom or len(req.symptom.strip()) < 5:
         raise HTTPException(400, "Bitte beschreibe das Symptom genauer.")
+    if len(req.symptom) > 1000:
+        raise HTTPException(400, "Beschreibung zu lang (max. 1000 Zeichen).")
 
     # Rate-Limit: max 5 Anfragen pro User pro Tag
     with db() as conn:
@@ -169,10 +173,10 @@ def _log_rasse_request(user_id: int):
 
 class BirthdayRequest(BaseModel):
     dog_id: int
-    name:   str           = Field(..., max_length=80)
-    rasse:  Optional[str] = Field(None, max_length=80)
+    name:   str
+    rasse:  Optional[str] = None
     alter:  Optional[int] = None
-    mode:   str           = Field("tomorrow", max_length=20)  # "tomorrow" | "today"
+    mode:   str = "tomorrow"  # "tomorrow" | "today"
 
 @router.post("/geburtstag")
 async def ki_geburtstag(req: BirthdayRequest, request: Request,
@@ -364,12 +368,12 @@ Falls kein Hund erkennbar: ist_hund=false und leeres rassen-Array."""
 # ------------------------------------------------------------------
 class AbschiedRequest(BaseModel):
     dog_id:   int
-    name:     str             = Field(..., max_length=80)
-    rasse:    Optional[str]   = Field(None, max_length=80)
+    name:     str
+    rasse:    Optional[str] = None
     km_total: Optional[float] = None
     diary_count: Optional[int] = None
     gemeinsam_tage: Optional[int] = None
-    last_entry_titel: Optional[str] = Field(None, max_length=200)
+    last_entry_titel: Optional[str] = None
 
 @router.post("/abschied")
 async def ki_abschied(req: AbschiedRequest, request: Request,
diff --git a/backend/routes/knigge.py b/backend/routes/knigge.py
index d824f56..779d023 100644
--- a/backend/routes/knigge.py
+++ b/backend/routes/knigge.py
@@ -1,7 +1,7 @@
 """BAN YARO — Hunde-Knigge Routes"""
 
 from fastapi import APIRouter, Depends, HTTPException, Query
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional
 from database import db
 from auth import get_current_user, get_current_user_optional
@@ -13,12 +13,12 @@ router = APIRouter()
 # Schemas
 # ------------------------------------------------------------------
 class VoteRequest(BaseModel):
-    szenario_id: str = Field(..., max_length=100)
-    answer:      str = Field(..., max_length=100)
+    szenario_id: str
+    answer: str
 
 
 class KiRatRequest(BaseModel):
-    situation: str = Field(..., min_length=3, max_length=2000)
+    situation: str
 
 
 # ------------------------------------------------------------------
diff --git a/backend/routes/laeufi.py b/backend/routes/laeufi.py
index 5ca7e22..22189bd 100644
--- a/backend/routes/laeufi.py
+++ b/backend/routes/laeufi.py
@@ -1,7 +1,7 @@
 """BAN YARO — Läufigkeit, Progesterontests & Trächtigkeit (Züchter)"""
 
 from fastapi import APIRouter, Depends, HTTPException
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional
 from datetime import date, timedelta
 
@@ -78,47 +78,47 @@ def _calc_meilensteine(deckdatum_str: str) -> list:
 # Schemas
 # ------------------------------------------------------------------
 class LaeufiCreate(BaseModel):
-    beginn: str           = Field(..., max_length=32)
-    ende:   Optional[str] = Field(None, max_length=32)
-    notiz:  Optional[str] = Field(None, max_length=2000)
+    beginn: str
+    ende:   Optional[str] = None
+    notiz:  Optional[str] = None
 
 class LaeufiUpdate(BaseModel):
-    beginn: Optional[str] = Field(None, max_length=32)
-    ende:   Optional[str] = Field(None, max_length=32)
-    notiz:  Optional[str] = Field(None, max_length=2000)
+    beginn: Optional[str] = None
+    ende:   Optional[str] = None
+    notiz:  Optional[str] = None
 
 class ProgestCreate(BaseModel):
-    datum:   str             = Field(..., max_length=32)
+    datum:   str
     wert:    Optional[float] = None
-    einheit: str             = Field("ng/ml", max_length=20)
-    labor:   Optional[str]   = Field(None, max_length=200)
-    notiz:   Optional[str]   = Field(None, max_length=2000)
+    einheit: str = "ng/ml"
+    labor:   Optional[str] = None
+    notiz:   Optional[str] = None
 
 class ProgestUpdate(BaseModel):
-    datum:   Optional[str]   = Field(None, max_length=32)
+    datum:   Optional[str]   = None
     wert:    Optional[float] = None
-    einheit: Optional[str]   = Field(None, max_length=20)
-    labor:   Optional[str]   = Field(None, max_length=200)
-    notiz:   Optional[str]   = Field(None, max_length=2000)
+    einheit: Optional[str]   = None
+    labor:   Optional[str]   = None
+    notiz:   Optional[str]   = None
 
 class DeckCreate(BaseModel):
-    deckdatum:         str            = Field(..., max_length=32)
+    deckdatum:         str
     laeufi_id:         Optional[int]  = None
     ruede_id:          Optional[int]  = None
-    ruede_name:        Optional[str]  = Field(None, max_length=200)
-    deckart:           str            = Field("natuerlich", max_length=50)
+    ruede_name:        Optional[str]  = None
+    deckart:           str            = "natuerlich"
     traechtig:         int            = 0
-    ultraschall_datum: Optional[str]  = Field(None, max_length=32)
-    notiz:             Optional[str]  = Field(None, max_length=2000)
+    ultraschall_datum: Optional[str]  = None
+    notiz:             Optional[str]  = None
 
 class DeckUpdate(BaseModel):
-    deckdatum:         Optional[str]  = Field(None, max_length=32)
+    deckdatum:         Optional[str]  = None
     ruede_id:          Optional[int]  = None
-    ruede_name:        Optional[str]  = Field(None, max_length=200)
-    deckart:           Optional[str]  = Field(None, max_length=50)
+    ruede_name:        Optional[str]  = None
+    deckart:           Optional[str]  = None
     traechtig:         Optional[int]  = None
-    ultraschall_datum: Optional[str]  = Field(None, max_length=32)
-    notiz:             Optional[str]  = Field(None, max_length=2000)
+    ultraschall_datum: Optional[str]  = None
+    notiz:             Optional[str]  = None
 
 
 # ------------------------------------------------------------------
diff --git a/backend/routes/litters.py b/backend/routes/litters.py
index 3294641..09250d8 100644
--- a/backend/routes/litters.py
+++ b/backend/routes/litters.py
@@ -4,7 +4,7 @@ import logging
 from datetime import date
 from fastapi import APIRouter, Depends, HTTPException
 from fastapi.responses import HTMLResponse
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional
 
 from database import db
@@ -27,68 +27,68 @@ def _require_breeder(user=Depends(get_current_user)):
 # Schemas
 # ------------------------------------------------------------------
 class LitterCreate(BaseModel):
-    wurf_rang:          Optional[str]   = Field(None, max_length=10)   # A, B, C …
-    wurf_name:          Optional[str]   = Field(None, max_length=200)  # z.B. "Vatertags-Wurf"
-    vater_name:         Optional[str]   = Field(None, max_length=200)
-    mutter_name:        Optional[str]   = Field(None, max_length=200)
+    wurf_rang:          Optional[str]   = None   # A, B, C …
+    wurf_name:          Optional[str]   = None   # z.B. "Vatertags-Wurf"
+    vater_name:         Optional[str]   = None
+    mutter_name:        Optional[str]   = None
     vater_id:           Optional[int]   = None
     mutter_id:          Optional[int]   = None
-    geburt_datum:       Optional[str]   = Field(None, max_length=32)
-    erwartetes_datum:   Optional[str]   = Field(None, max_length=32)
+    geburt_datum:       Optional[str]   = None
+    erwartetes_datum:   Optional[str]   = None
     welpen_gesamt:      Optional[int]   = None
     welpen_verfuegbar:  Optional[int]   = None
-    beschreibung:       Optional[str]   = Field(None, max_length=10000)
-    gesundheitstests:   Optional[str]   = Field(None, max_length=5000)
-    preis_spanne:       Optional[str]   = Field(None, max_length=100)
-    status:             str             = Field("geplant", max_length=30)
+    beschreibung:       Optional[str]   = None
+    gesundheitstests:   Optional[str]   = None
+    preis_spanne:       Optional[str]   = None
+    status:             str             = "geplant"
     sichtbar:           int             = 0
-    sichtbar_bis:       Optional[str]   = Field(None, max_length=32)
+    sichtbar_bis:       Optional[str]   = None
 
 
 class LitterUpdate(BaseModel):
-    wurf_rang:          Optional[str]   = Field(None, max_length=10)
-    wurf_name:          Optional[str]   = Field(None, max_length=200)
-    vater_name:         Optional[str]   = Field(None, max_length=200)
-    mutter_name:        Optional[str]   = Field(None, max_length=200)
+    wurf_rang:          Optional[str]   = None
+    wurf_name:          Optional[str]   = None
+    vater_name:         Optional[str]   = None
+    mutter_name:        Optional[str]   = None
     vater_id:           Optional[int]   = None
     mutter_id:          Optional[int]   = None
-    geburt_datum:       Optional[str]   = Field(None, max_length=32)
-    erwartetes_datum:   Optional[str]   = Field(None, max_length=32)
+    geburt_datum:       Optional[str]   = None
+    erwartetes_datum:   Optional[str]   = None
     welpen_gesamt:      Optional[int]   = None
     welpen_verfuegbar:  Optional[int]   = None
-    beschreibung:       Optional[str]   = Field(None, max_length=10000)
-    gesundheitstests:   Optional[str]   = Field(None, max_length=5000)
-    preis_spanne:       Optional[str]   = Field(None, max_length=100)
-    status:             Optional[str]   = Field(None, max_length=30)
+    beschreibung:       Optional[str]   = None
+    gesundheitstests:   Optional[str]   = None
+    preis_spanne:       Optional[str]   = None
+    status:             Optional[str]   = None
     sichtbar:           Optional[int]   = None
-    sichtbar_bis:       Optional[str]   = Field(None, max_length=32)
+    sichtbar_bis:       Optional[str]   = None
 
 
 class PuppyCreate(BaseModel):
-    name:              Optional[str]   = Field(None, max_length=80)
-    geschlecht:        Optional[str]   = Field(None, max_length=20)   # maennlich|weiblich
-    farbe:             Optional[str]   = Field(None, max_length=100)
-    chip_nr:           Optional[str]   = Field(None, max_length=50)
+    name:              Optional[str]   = None
+    geschlecht:        Optional[str]   = None   # maennlich|weiblich
+    farbe:             Optional[str]   = None
+    chip_nr:           Optional[str]   = None
     geburtsgewicht:    Optional[float] = None   # Gramm
-    status:            str             = Field("verfuegbar", max_length=30)   # verfuegbar|reserviert|abgegeben
+    status:            str             = "verfuegbar"   # verfuegbar|reserviert|abgegeben
     status_sichtbar:   int             = 1
-    notiz:             Optional[str]   = Field(None, max_length=2000)
+    notiz:             Optional[str]   = None
 
 
 class PuppyUpdate(BaseModel):
-    name:              Optional[str]   = Field(None, max_length=80)
-    geschlecht:        Optional[str]   = Field(None, max_length=20)
-    farbe:             Optional[str]   = Field(None, max_length=100)
-    chip_nr:           Optional[str]   = Field(None, max_length=50)
+    name:              Optional[str]   = None
+    geschlecht:        Optional[str]   = None
+    farbe:             Optional[str]   = None
+    chip_nr:           Optional[str]   = None
     geburtsgewicht:    Optional[float] = None
-    status:            Optional[str]   = Field(None, max_length=30)
+    status:            Optional[str]   = None
     status_sichtbar:   Optional[int]   = None
-    notiz:             Optional[str]   = Field(None, max_length=2000)
+    notiz:             Optional[str]   = None
 
 
 class WeightEntry(BaseModel):
     gewicht_g:   float
-    gemessen_am: str = Field(..., max_length=32)   # YYYY-MM-DD
+    gemessen_am: str   # YYYY-MM-DD
 
 
 # ------------------------------------------------------------------
@@ -663,15 +663,15 @@ async def generate_contract(
 # Warteliste
 # ------------------------------------------------------------------
 class WaitlistEntry(BaseModel):
-    name:              str            = Field(..., min_length=1, max_length=200)
-    email:             Optional[str]  = Field(None, max_length=254)
-    telefon:           Optional[str]  = Field(None, max_length=30)
-    nachricht:         Optional[str]  = Field(None, max_length=5000)
-    wunsch_geschlecht: str            = Field("egal", max_length=20)
-    wunsch_farbe:      Optional[str]  = Field(None, max_length=100)
+    name:              str
+    email:             Optional[str]  = None
+    telefon:           Optional[str]  = None
+    nachricht:         Optional[str]  = None
+    wunsch_geschlecht: str            = "egal"
+    wunsch_farbe:      Optional[str]  = None
     prioritaet:        int            = 0
-    status:            str            = Field("anfrage", max_length=30)
-    notiz:             Optional[str]  = Field(None, max_length=2000)
+    status:            str            = "anfrage"
+    notiz:             Optional[str]  = None
 
 
 class WaitlistUpdate(BaseModel):
diff --git a/backend/routes/lost.py b/backend/routes/lost.py
index 065145f..3b02ed3 100644
--- a/backend/routes/lost.py
+++ b/backend/routes/lost.py
@@ -1,32 +1,44 @@
 """BAN YARO — Verlorener Hund Routes"""
 
-import os, uuid
+import os, uuid, math
 from datetime import datetime
 from fastapi import APIRouter, Depends, HTTPException, UploadFile, File
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional
 from database import db
 from auth import get_current_user
 from timeutils import safe_client_time
 from routes.push import send_push_to_all
 from media_utils import convert_media
-from math_utils import haversine_m
 
 router    = APIRouter()
 MEDIA_DIR = os.getenv("MEDIA_DIR", "/data/media")
 
 
+# ------------------------------------------------------------------
+# Haversine-Distanz in Metern
+# ------------------------------------------------------------------
+def _haversine(lat1: float, lon1: float, lat2: float, lon2: float) -> float:
+    R  = 6_371_000
+    p1 = math.radians(lat1)
+    p2 = math.radians(lat2)
+    dp = math.radians(lat2 - lat1)
+    dl = math.radians(lon2 - lon1)
+    a  = math.sin(dp / 2) ** 2 + math.cos(p1) * math.cos(p2) * math.sin(dl / 2) ** 2
+    return 2 * R * math.asin(math.sqrt(a))
+
+
 # ------------------------------------------------------------------
 # Schemas
 # ------------------------------------------------------------------
 class LostDogCreate(BaseModel):
-    name:         str           = Field(..., min_length=1, max_length=80)
-    rasse:        Optional[str] = Field(None, max_length=80)
-    beschreibung: str           = Field(..., min_length=3, max_length=5000)
+    name:         str
+    rasse:        Optional[str] = None
+    beschreibung: str
     lat:          float
     lon:          float
     dog_id:       Optional[int] = None
-    client_time:  Optional[str] = Field(None, max_length=64)
+    client_time:  Optional[str] = None
 
 
 # ------------------------------------------------------------------
@@ -48,7 +60,7 @@ async def list_lost(lat: Optional[float] = None, lon: Optional[float] = None,
     for r in rows:
         entry = dict(r)
         if lat is not None and lon is not None:
-            dist = haversine_m(lat, lon, entry["lat"], entry["lon"])
+            dist = _haversine(lat, lon, entry["lat"], entry["lon"])
             if dist > radius_km * 1000:
                 continue
             entry["distanz_m"] = round(dist)
diff --git a/backend/routes/movies.py b/backend/routes/movies.py
index 79b3d95..da6c682 100644
--- a/backend/routes/movies.py
+++ b/backend/routes/movies.py
@@ -1,7 +1,7 @@
 """BAN YARO — Hunde-Filme Routes"""
 
 from fastapi import APIRouter, Depends, HTTPException, Query
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional
 from datetime import datetime
 from database import db
@@ -207,31 +207,31 @@ class HundDesMonatsVoteRequest(BaseModel):
     dog_id: int
 
 class MovieCreate(BaseModel):
-    id:              str           = Field(..., max_length=100)
-    titel:           str           = Field(..., min_length=1, max_length=200)
-    originaltitel:   Optional[str] = Field(None, max_length=200)
+    id:              str
+    titel:           str
+    originaltitel:   Optional[str] = None
     jahr:            Optional[int] = None
-    genre:           Optional[str] = Field(None, max_length=100)
-    typ:             str           = Field("film", max_length=30)
-    hund_rasse:      Optional[str] = Field(None, max_length=200)
-    stirbt_der_hund: bool          = False
-    beschreibung:    Optional[str] = Field(None, max_length=5000)
-    bild_emoji:      str           = Field("🐾", max_length=10)
+    genre:           Optional[str] = None
+    typ:             str = "film"
+    hund_rasse:      Optional[str] = None
+    stirbt_der_hund: bool = False
+    beschreibung:    Optional[str] = None
+    bild_emoji:      str = "🐾"
     imdb_rating:     Optional[float] = None
-    streaming:       Optional[str] = Field(None, max_length=500)
+    streaming:       Optional[str] = None
 
 class MovieUpdate(BaseModel):
-    titel:           Optional[str] = Field(None, max_length=200)
-    originaltitel:   Optional[str] = Field(None, max_length=200)
+    titel:           Optional[str] = None
+    originaltitel:   Optional[str] = None
     jahr:            Optional[int] = None
-    genre:           Optional[str] = Field(None, max_length=100)
-    typ:             Optional[str] = Field(None, max_length=30)
-    hund_rasse:      Optional[str] = Field(None, max_length=200)
+    genre:           Optional[str] = None
+    typ:             Optional[str] = None
+    hund_rasse:      Optional[str] = None
     stirbt_der_hund: Optional[bool] = None
-    beschreibung:    Optional[str] = Field(None, max_length=5000)
-    bild_emoji:      Optional[str] = Field(None, max_length=10)
+    beschreibung:    Optional[str] = None
+    bild_emoji:      Optional[str] = None
     imdb_rating:     Optional[float] = None
-    streaming:       Optional[str] = Field(None, max_length=500)
+    streaming:       Optional[str] = None
 
 
 # ------------------------------------------------------------------
diff --git a/backend/routes/notes.py b/backend/routes/notes.py
index 5a70c2b..6901f62 100644
--- a/backend/routes/notes.py
+++ b/backend/routes/notes.py
@@ -4,7 +4,7 @@ import json
 import logging
 from datetime import datetime
 from fastapi import APIRouter, Depends, HTTPException, Query
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional, Any, List
 from database import db
 from auth import get_current_user
@@ -18,18 +18,18 @@ logger = logging.getLogger(__name__)
 # Schemas
 # ------------------------------------------------------------------
 class NoteCreate(BaseModel):
-    text:          str           = Field(..., min_length=1, max_length=5000)
-    meta_json:     Optional[Any] = None
-    location_name: Optional[str] = Field(None, max_length=300)
-    parent_label:  Optional[str] = Field(None, max_length=200)
-    client_time:   Optional[str] = Field(None, max_length=64)
+    text:         str
+    meta_json:    Optional[Any] = None
+    location_name: Optional[str] = None
+    parent_label:  Optional[str] = None
+    client_time:   Optional[str] = None
 
 
 class NoteUpdate(BaseModel):
-    text:          Optional[str] = Field(None, max_length=5000)
+    text:          Optional[str] = None
     meta_json:     Optional[Any] = None
-    location_name: Optional[str] = Field(None, max_length=300)
-    parent_label:  Optional[str] = Field(None, max_length=200)
+    location_name: Optional[str] = None
+    parent_label:  Optional[str] = None
 
 
 # ------------------------------------------------------------------
diff --git a/backend/routes/osm.py b/backend/routes/osm.py
index 5fc22b9..d130898 100644
--- a/backend/routes/osm.py
+++ b/backend/routes/osm.py
@@ -9,7 +9,7 @@ import httpx
 import logging
 from typing   import Optional
 from fastapi  import APIRouter, Query, BackgroundTasks, Depends, HTTPException
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from database import db
 from auth import get_current_user, get_current_user_optional as get_optional_user
 
@@ -110,7 +110,7 @@ async def _fetch_overpass(query):
             except Exception as exc:
                 logger.warning(f"Overpass Verbindungsfehler {url}: {exc}")
                 break  # nächste URL
-    raise HTTPException(503, "Kartendaten gerade nicht verfügbar — bitte später nochmal.")
+    raise Exception("Alle Overpass-Instanzen fehlgeschlagen")
 
 def _stale_tiles(poi_type, tiles):
     stale = []
@@ -273,11 +273,11 @@ async def get_pois(
 # POST /user-poi — Community-Marker setzen
 # ------------------------------------------------------------------
 class UserPoiIn(BaseModel):
-    type:  str            = Field(..., max_length=200)
+    type:  str
     lat:   float
     lon:   float
-    name:  Optional[str] = Field(None, max_length=300)
-    notiz: Optional[str] = Field(None, max_length=2000)
+    name:  Optional[str] = None
+    notiz: Optional[str] = None
 
 ALLOWED_TYPES = {
     'waste_basket', 'drinking_water', 'dog_park',
@@ -331,8 +331,8 @@ async def delete_user_poi(poi_id: int, user = Depends(get_current_user)):
 # POST /report — Marker als ungültig melden
 # ------------------------------------------------------------------
 class ReportIn(BaseModel):
-    type:        str           = Field(..., max_length=100)
-    grund:       str           = Field(..., max_length=200)
+    type:        str
+    grund:       str
     osm_id:      Optional[int] = None
     user_poi_id: Optional[int] = None
 
@@ -388,9 +388,9 @@ async def analyze_region(
 # POST /pois/{osm_id}/edit — Nutzer schlägt Korrektur vor
 # ------------------------------------------------------------------
 class PoiEditCreate(BaseModel):
-    poi_name:  str = Field(..., max_length=300)
-    field:     str = Field('opening_hours', max_length=50)
-    new_value: str = Field(..., max_length=1000)
+    poi_name:  str
+    field:     str = 'opening_hours'
+    new_value: str
 
 
 @router.post('/pois/{osm_id}/edit', status_code=201)
diff --git a/backend/routes/outreach.py b/backend/routes/outreach.py
index 22139e9..d738998 100644
--- a/backend/routes/outreach.py
+++ b/backend/routes/outreach.py
@@ -13,7 +13,7 @@ from typing import List, Optional
 import logging
 
 from fastapi import APIRouter, Depends, HTTPException
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 
 from auth import require_admin
 from database import db
@@ -135,26 +135,26 @@ def _send_smtp(to: str, subject: str, body: str, account: str = "partner", html:
 # ------------------------------------------------------------------
 
 class TemplateIn(BaseModel):
-    key:          str = Field(..., max_length=100)
-    label:        str = Field(..., max_length=200)
-    subject:      str = Field(..., max_length=500)
-    body:         str = Field(..., max_length=50000)
-    from_account: str = Field("partner", max_length=50)
+    key: str
+    label: str
+    subject: str
+    body: str
+    from_account: str = "partner"
 
 
 class TemplateUpdate(BaseModel):
-    label:        str = Field(..., max_length=200)
-    subject:      str = Field(..., max_length=500)
-    body:         str = Field(..., max_length=50000)
-    from_account: str = Field("partner", max_length=50)
+    label: str
+    subject: str
+    body: str
+    from_account: str = "partner"
 
 
 class SendRequest(BaseModel):
     to: List[str]
-    subject:      str = Field(..., max_length=500)
-    body:         str = Field(..., max_length=50000)
-    from_account: str = Field("partner", max_length=50)
-    template_id:  Optional[int] = None
+    subject: str
+    body: str
+    from_account: str = "partner"
+    template_id: Optional[int] = None
 
 
 # ------------------------------------------------------------------
diff --git a/backend/routes/partner.py b/backend/routes/partner.py
index 16caafb..359dc1c 100644
--- a/backend/routes/partner.py
+++ b/backend/routes/partner.py
@@ -2,7 +2,7 @@
 
 from typing import Optional
 from fastapi import APIRouter, HTTPException, Depends
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from database import db
 from auth import require_admin, get_current_user
 
@@ -10,8 +10,8 @@ router = APIRouter()
 
 
 class PartnerCodeCreate(BaseModel):
-    code:           str = Field(..., min_length=1, max_length=50)
-    label:          str = Field(..., min_length=1, max_length=200)
+    code:           str
+    label:          str
     grants_founder: int = 1
     max_uses:       Optional[int] = None
 
@@ -93,34 +93,21 @@ def grant_user_status(user_id: int, data: GrantRequest, user=Depends(require_adm
         if not target:
             raise HTTPException(404, "User nicht gefunden.")
         if updates.get("is_founder") == 1 and not target["founder_number"]:
-            # Atomare Gründer-Vergabe — kein TOCTOU mehr zwischen COUNT und UPDATE.
-            # Sub-Query wird gegen Snapshot vor dem UPDATE evaluiert (SQL-Spec).
-            cur = conn.execute(
-                """UPDATE users
-                      SET is_founder = 1,
-                          founder_number = (
-                            SELECT IFNULL(MAX(founder_number), 0) + 1
-                              FROM users WHERE is_founder = 1
-                          )
-                    WHERE id = ?
-                      AND (SELECT COUNT(*) FROM users WHERE is_founder = 1) < ?
-                      AND (is_founder IS NULL OR is_founder = 0)""",
-                (user_id, FOUNDER_MAX)
-            )
-            if cur.rowcount == 0:
+            # Neue Gründer-Nummer zuweisen
+            total = conn.execute(
+                "SELECT COUNT(*) FROM users WHERE is_founder=1"
+            ).fetchone()[0]
+            if total >= FOUNDER_MAX:
                 raise HTTPException(400, f"Alle {FOUNDER_MAX} Gründer-Plätze sind vergeben.")
-            # is_founder + founder_number sind atomar gesetzt — aus updates entfernen
-            updates.pop("is_founder", None)
-            updates.pop("founder_number", None)
+            updates["founder_number"] = total + 1
         elif updates.get("is_founder") == 0:
             # Gründer-Status entfernen → founder_number ebenfalls leeren
             updates["founder_number"] = None
-        if updates:                          # nach atomarer Founder-Vergabe ggf. leer
-            set_clause = ", ".join(f"{k}=?" for k in updates)
-            conn.execute(
-                f"UPDATE users SET {set_clause} WHERE id=?",
-                (*updates.values(), user_id)
-            )
+        set_clause = ", ".join(f"{k}=?" for k in updates)
+        conn.execute(
+            f"UPDATE users SET {set_clause} WHERE id=?",
+            (*updates.values(), user_id)
+        )
         row = conn.execute(
             "SELECT id, name, email, is_founder, is_partner, founder_number FROM users WHERE id=?",
             (user_id,)
diff --git a/backend/routes/passport.py b/backend/routes/passport.py
index 733b367..884e8d3 100644
--- a/backend/routes/passport.py
+++ b/backend/routes/passport.py
@@ -5,7 +5,7 @@ import secrets
 from datetime import date, datetime, timedelta
 from fastapi import APIRouter, Depends, HTTPException
 from fastapi.responses import StreamingResponse
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional
 from database import db
 from auth import get_current_user
@@ -17,25 +17,25 @@ router = APIRouter()
 # Schemas
 # ------------------------------------------------------------------
 class PassportMeta(BaseModel):
-    blutgruppe:     Optional[str] = Field(None, max_length=50)
-    allergien:      Optional[str] = Field(None, max_length=2000)
-    besonderheiten: Optional[str] = Field(None, max_length=2000)
+    blutgruppe:     Optional[str] = None
+    allergien:      Optional[str] = None
+    besonderheiten: Optional[str] = None
 
 
 class VaccinationCreate(BaseModel):
-    krankheit: str           = Field(..., max_length=200)
-    datum:     str           = Field(..., max_length=32)
-    naechste:  Optional[str] = Field(None, max_length=32)
-    tierarzt:  Optional[str] = Field(None, max_length=200)
-    charge_nr: Optional[str] = Field(None, max_length=100)
+    krankheit: str
+    datum:     str
+    naechste:  Optional[str] = None
+    tierarzt:  Optional[str] = None
+    charge_nr: Optional[str] = None
 
 
 class MedicationCreate(BaseModel):
-    name:      str           = Field(..., max_length=200)
-    dosierung: Optional[str] = Field(None, max_length=200)
-    von:       Optional[str] = Field(None, max_length=32)
-    bis:       Optional[str] = Field(None, max_length=32)
-    notiz:     Optional[str] = Field(None, max_length=2000)
+    name:      str
+    dosierung: Optional[str] = None
+    von:       Optional[str] = None
+    bis:       Optional[str] = None
+    notiz:     Optional[str] = None
 
 
 # ------------------------------------------------------------------
diff --git a/backend/routes/places.py b/backend/routes/places.py
index 12570c0..c8ca526 100644
--- a/backend/routes/places.py
+++ b/backend/routes/places.py
@@ -1,40 +1,50 @@
 """BAN YARO — Hundefreundliche Orte"""
 
+import math
 from fastapi import APIRouter, Depends, HTTPException
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional
 from database import db
-from auth import get_current_user, require_owner
-from math_utils import haversine_m
+from auth import get_current_user
 
 router = APIRouter()
 
 TYPEN = {'restaurant', 'shop', 'freilauf', 'kotbeutel', 'tierarzt', 'hundesalon', 'hundeschule'}
 
 
+def _haversine(lat1: float, lon1: float, lat2: float, lon2: float) -> float:
+    R  = 6_371_000
+    p1 = math.radians(lat1)
+    p2 = math.radians(lat2)
+    dp = math.radians(lat2 - lat1)
+    dl = math.radians(lon2 - lon1)
+    a  = math.sin(dp / 2) ** 2 + math.cos(p1) * math.cos(p2) * math.sin(dl / 2) ** 2
+    return 2 * R * math.asin(math.sqrt(a))
+
+
 # ------------------------------------------------------------------
 # Schemas
 # ------------------------------------------------------------------
 class PlaceCreate(BaseModel):
-    name:              str            = Field(..., min_length=1, max_length=200)
-    typ:               str            = Field(..., max_length=50)
+    name:              str
+    typ:               str
     lat:               float
     lon:               float
-    adresse:           Optional[str]  = Field(None, max_length=300)
-    website:           Optional[str]  = Field(None, max_length=500)
-    telefon:           Optional[str]  = Field(None, max_length=30)
+    adresse:           Optional[str]  = None
+    website:           Optional[str]  = None
+    telefon:           Optional[str]  = None
     hund_rein:         Optional[bool] = None
     leine_pflicht:     Optional[bool] = None
     wasser_fuer_hunde: Optional[bool] = None
 
 class PlaceUpdate(BaseModel):
-    name:              Optional[str]  = Field(None, max_length=200)
-    typ:               Optional[str]  = Field(None, max_length=50)
+    name:              Optional[str]  = None
+    typ:               Optional[str]  = None
     lat:               Optional[float]= None
     lon:               Optional[float]= None
-    adresse:           Optional[str]  = Field(None, max_length=300)
-    website:           Optional[str]  = Field(None, max_length=500)
-    telefon:           Optional[str]  = Field(None, max_length=30)
+    adresse:           Optional[str]  = None
+    website:           Optional[str]  = None
+    telefon:           Optional[str]  = None
     hund_rein:         Optional[bool] = None
     leine_pflicht:     Optional[bool] = None
     wasser_fuer_hunde: Optional[bool] = None
@@ -69,7 +79,7 @@ async def list_places(
 
     result = [_row_to_dict(r) for r in rows]
     if lat is not None and lon is not None:
-        result = [r for r in result if haversine_m(lat, lon, r['lat'], r['lon']) <= radius]
+        result = [r for r in result if _haversine(lat, lon, r['lat'], r['lon']) <= radius]
     return result
 
 
@@ -121,10 +131,11 @@ async def get_place(place_id: int):
 @router.patch("/{place_id}")
 async def update_place(place_id: int, data: PlaceUpdate, user=Depends(get_current_user)):
     with db() as conn:
-        row = require_owner(
-            conn.execute("SELECT * FROM places WHERE id = ?", (place_id,)).fetchone(),
-            user, not_found_msg="Ort nicht gefunden.", forbidden_msg="Nicht berechtigt."
-        )
+        row = conn.execute("SELECT * FROM places WHERE id = ?", (place_id,)).fetchone()
+        if not row:
+            raise HTTPException(404, "Ort nicht gefunden.")
+        if row['user_id'] != user['id']:
+            raise HTTPException(403, "Nicht berechtigt.")
 
         updates = data.model_dump(exclude_none=True)
         if not updates:
@@ -149,8 +160,9 @@ async def update_place(place_id: int, data: PlaceUpdate, user=Depends(get_curren
 @router.delete("/{place_id}", status_code=204)
 async def delete_place(place_id: int, user=Depends(get_current_user)):
     with db() as conn:
-        require_owner(
-            conn.execute("SELECT * FROM places WHERE id = ?", (place_id,)).fetchone(),
-            user, not_found_msg="Ort nicht gefunden.", forbidden_msg="Nicht berechtigt."
-        )
+        row = conn.execute("SELECT * FROM places WHERE id = ?", (place_id,)).fetchone()
+        if not row:
+            raise HTTPException(404, "Ort nicht gefunden.")
+        if row['user_id'] != user['id']:
+            raise HTTPException(403, "Nicht berechtigt.")
         conn.execute("DELETE FROM places WHERE id = ?", (place_id,))
diff --git a/backend/routes/playdate.py b/backend/routes/playdate.py
index 2f7ebdd..01d57ae 100644
--- a/backend/routes/playdate.py
+++ b/backend/routes/playdate.py
@@ -1,17 +1,30 @@
 """BAN YARO — Playdate-Matching"""
 
+import math
 import logging
 from fastapi import APIRouter, Depends, HTTPException
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional
 from database import db
 from auth import get_current_user
-from math_utils import haversine_km
 
 router = APIRouter()
 logger = logging.getLogger(__name__)
 
 
+# ------------------------------------------------------------------
+# Haversine
+# ------------------------------------------------------------------
+def _haversine(lat1: float, lon1: float, lat2: float, lon2: float) -> float:
+    R = 6371.0
+    dlat = math.radians(lat2 - lat1)
+    dlon = math.radians(lon2 - lon1)
+    a = (math.sin(dlat / 2) ** 2
+         + math.cos(math.radians(lat1)) * math.cos(math.radians(lat2))
+         * math.sin(dlon / 2) ** 2)
+    return R * 2 * math.asin(math.sqrt(a))
+
+
 def _calc_alter(geburtstag: Optional[str]) -> Optional[str]:
     """Gibt lesbares Alter zurück z.B. '2 Jahre' oder '5 Monate'."""
     if not geburtstag:
@@ -40,18 +53,18 @@ class ListingUpsert(BaseModel):
     dog_id:      int
     lat:         float
     lon:         float
-    ort_name:    Optional[str] = Field(None, max_length=300)
+    ort_name:    Optional[str] = None
     radius_km:   int = 10
-    beschreibung: Optional[str] = Field(None, max_length=2000)
+    beschreibung: Optional[str] = None
 
 
 class RequestCreate(BaseModel):
     to_dog_id: int
-    nachricht: Optional[str] = Field(None, max_length=2000)
+    nachricht: Optional[str] = None
 
 
 class RequestPatch(BaseModel):
-    status: str = Field(..., max_length=30)  # accepted | declined
+    status: str  # accepted | declined
 
 
 # ------------------------------------------------------------------
@@ -94,7 +107,7 @@ async def nearby(lat: float, lon: float, radius: int = 10,
 
     result = []
     for r in rows:
-        dist = haversine_km(lat, lon, r["lat"], r["lon"])
+        dist = _haversine(lat, lon, r["lat"], r["lon"])
         if dist <= radius:
             result.append({
                 "listing_id":    r["listing_id"],
diff --git a/backend/routes/poison.py b/backend/routes/poison.py
index 97d0ed2..2372e74 100644
--- a/backend/routes/poison.py
+++ b/backend/routes/poison.py
@@ -1,33 +1,45 @@
 """BAN YARO — Giftköder-Alarm Routes"""
 
-import os, uuid
+import os, uuid, math
 from datetime import datetime, timedelta
 from fastapi import APIRouter, Depends, HTTPException, Request, UploadFile, File
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional
 from database import db
 from auth import get_current_user
 from routes.push import send_push_nearby
 from media_utils import convert_media
 from ratelimit import check as rl_check
-from math_utils import haversine_m
 
 router    = APIRouter()
 MEDIA_DIR = os.getenv("MEDIA_DIR", "/data/media")
 
 
+# ------------------------------------------------------------------
+# Haversine-Distanz in Metern
+# ------------------------------------------------------------------
+def _haversine(lat1: float, lon1: float, lat2: float, lon2: float) -> float:
+    R  = 6_371_000
+    p1 = math.radians(lat1)
+    p2 = math.radians(lat2)
+    dp = math.radians(lat2 - lat1)
+    dl = math.radians(lon2 - lon1)
+    a  = math.sin(dp / 2) ** 2 + math.cos(p1) * math.cos(p2) * math.sin(dl / 2) ** 2
+    return 2 * R * math.asin(math.sqrt(a))
+
+
 # ------------------------------------------------------------------
 # Schemas
 # ------------------------------------------------------------------
 class PoisonCreate(BaseModel):
     lat:          float
     lon:          float
-    beschreibung: Optional[str] = Field(None, max_length=2000)
-    typ:          str           = Field("unbekannt", max_length=50)
+    beschreibung: Optional[str] = None
+    typ:          str           = "unbekannt"
 
 
 class PoisonResolve(BaseModel):
-    grund: str = Field("beseitigt", max_length=50)   # beseitigt | fehlerhaft | anderes
+    grund: str = "beseitigt"   # beseitigt | fehlerhaft | anderes
 
 
 # ------------------------------------------------------------------
@@ -50,7 +62,7 @@ async def list_poison(lat: float, lon: float, radius: int = 5000):
     results = []
     for r in rows:
         entry = dict(r)
-        dist  = haversine_m(lat, lon, entry["lat"], entry["lon"])
+        dist  = _haversine(lat, lon, entry["lat"], entry["lon"])
         if dist <= radius:
             entry["distanz_m"] = round(dist)
             results.append(entry)
diff --git a/backend/routes/profile.py b/backend/routes/profile.py
index 2fe0e1d..baa196c 100644
--- a/backend/routes/profile.py
+++ b/backend/routes/profile.py
@@ -7,7 +7,7 @@ import uuid
 from typing import Optional
 
 from fastapi import APIRouter, Depends, HTTPException, UploadFile, File
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 
 from auth import get_current_user
 from database import db
@@ -20,17 +20,17 @@ VALID_SICHTBARKEIT    = {"public", "friends", "private"}
 
 
 class ProfileUpdate(BaseModel):
-    real_name:            Optional[str] = Field(None, max_length=100)
-    bio:                  Optional[str] = Field(None, max_length=300)
-    wohnort:              Optional[str] = Field(None, max_length=60)
-    erfahrung:            Optional[str] = Field(None, max_length=30)
-    social_link:          Optional[str] = Field(None, max_length=120)
-    profil_sichtbarkeit:  Optional[str] = Field(None, max_length=30)
+    real_name:            Optional[str] = None
+    bio:                  Optional[str] = None
+    wohnort:              Optional[str] = None
+    erfahrung:            Optional[str] = None
+    social_link:          Optional[str] = None
+    profil_sichtbarkeit:  Optional[str] = None
     notes_ki_enabled:     Optional[int] = None
     gassi_stunde_push:    Optional[int] = None
-    preferred_theme:      Optional[str] = Field(None, max_length=20)
-    billing_address:      Optional[str] = Field(None, max_length=500)
-    geburtstag:           Optional[str] = Field(None, max_length=10)
+    preferred_theme:      Optional[str] = None
+    billing_address:      Optional[str] = None
+    geburtstag:           Optional[str] = None
 
 
 def _load_user(user_id: int) -> dict:
@@ -61,7 +61,12 @@ async def update_profile(data: ProfileUpdate, user=Depends(get_current_user)):
         raise HTTPException(400, f"profil_sichtbarkeit muss eines von {sorted(VALID_SICHTBARKEIT)} sein.")
     if "preferred_theme" in fields and fields["preferred_theme"] not in ("system", "light", "dark"):
         raise HTTPException(400, "preferred_theme muss 'system', 'light' oder 'dark' sein.")
-    # Längen-Begrenzungen sind jetzt via Field max_length im Schema abgedeckt.
+    if "bio" in fields and len(fields["bio"]) > 300:
+        raise HTTPException(400, "bio darf maximal 300 Zeichen lang sein.")
+    if "wohnort" in fields and len(fields["wohnort"]) > 60:
+        raise HTTPException(400, "wohnort darf maximal 60 Zeichen lang sein.")
+    if "social_link" in fields and len(fields["social_link"]) > 120:
+        raise HTTPException(400, "social_link darf maximal 120 Zeichen lang sein.")
     if "geburtstag" in fields and fields["geburtstag"]:
         if not re.fullmatch(r"\d{2}\.\d{2}", fields["geburtstag"]):
             raise HTTPException(400, "geburtstag muss im Format TT.MM sein (z.B. 16.05).")
diff --git a/backend/routes/push.py b/backend/routes/push.py
index 19dbb32..3ee73d9 100644
--- a/backend/routes/push.py
+++ b/backend/routes/push.py
@@ -4,7 +4,7 @@ import os
 import json
 import logging
 from fastapi import APIRouter, Depends, HTTPException
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional
 from pywebpush import webpush, WebPushException
 
@@ -33,7 +33,7 @@ async def get_vapid_key():
 # POST /api/push/subscribe  — Subscription speichern
 # ------------------------------------------------------------------
 class PushSubscription(BaseModel):
-    endpoint:    str           = Field(..., max_length=2000)
+    endpoint:    str
     keys:        dict          # { p256dh, auth }
     expirationTime: Optional[int] = None
 
diff --git a/backend/routes/ratings.py b/backend/routes/ratings.py
index cf8a733..dba63f5 100644
--- a/backend/routes/ratings.py
+++ b/backend/routes/ratings.py
@@ -1,7 +1,7 @@
 """BAN YARO — Bewertungssystem (Ratings)"""
 
 from fastapi import APIRouter, Depends, HTTPException
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional
 from database import db
 from auth import get_current_user
@@ -23,10 +23,10 @@ TABLE_MAP = {
 # Schemas
 # ------------------------------------------------------------------
 class RatingCreate(BaseModel):
-    target_type: str = Field(..., max_length=50)
+    target_type: str
     target_id:   int
     stars:       int
-    kommentar:   Optional[str] = Field(None, max_length=5000)
+    kommentar:   Optional[str] = None
 
 
 # ------------------------------------------------------------------
diff --git a/backend/routes/recalls.py b/backend/routes/recalls.py
index de53542..d0182a3 100644
--- a/backend/routes/recalls.py
+++ b/backend/routes/recalls.py
@@ -49,27 +49,12 @@ async def list_recalls(q: str = ""):
 # Interne Hilfsfunktion: RASFF API abfragen
 # ------------------------------------------------------------------
 async def fetch_rasff_recalls() -> list[dict]:
-    """Fragt die RASFF API ab und gibt eine Liste normalisierter Einträge zurück.
-
-    Hinweis: Die EU hat die API mehrfach umgezogen — wenn der Endpoint
-    404 oder andere persistent fehler liefert, geben wir [] zurück und
-    loggen nur als Warning (nicht Error), damit das Error-Digest nicht
-    täglich spammt.
-    """
+    """Fragt die RASFF API ab und gibt eine Liste normalisierter Einträge zurück."""
     try:
         async with httpx.AsyncClient(timeout=10.0) as client:
             resp = await client.get(RASFF_URL, params=RASFF_PARAMS)
             resp.raise_for_status()
             data = resp.json()
-    except httpx.HTTPStatusError as e:
-        if e.response.status_code in (404, 410, 503):
-            # API umgezogen oder temporär unten — Warning, kein Error
-            logger.warning(
-                f"RASFF API liefert {e.response.status_code} (Endpoint vermutlich umgezogen) — überspringe."
-            )
-        else:
-            logger.error(f"RASFF API-HTTP-Fehler: {e}")
-        return []
     except Exception as e:
         logger.error(f"RASFF API-Fehler: {e}")
         return []
diff --git a/backend/routes/routen.py b/backend/routes/routen.py
index 0e81704..e1060ef 100644
--- a/backend/routes/routen.py
+++ b/backend/routes/routen.py
@@ -1,11 +1,11 @@
 """BAN YARO — Gassi-Routen"""
 
 import datetime as _dt
-import json, os, uuid
+import json, math, os, uuid
 import httpx
 import polyline as _polyline
 from fastapi import APIRouter, Depends, HTTPException, UploadFile, File
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional, List
 from database import db
 from auth import get_current_user, get_current_user_optional
@@ -13,7 +13,6 @@ from routes.achievements import update_streak, check_and_award
 from timeutils import safe_client_time
 from media_utils import convert_media
 from routes.push import send_push_to_user
-from math_utils import haversine_km, haversine_m
 
 router = APIRouter()
 
@@ -28,6 +27,16 @@ def _check_speed(distanz_km, dauer_min) -> bool:
     return (distanz_km / (dauer_min / 60)) <= _MAX_AVG_KMH
 
 
+def _haversine(lat1: float, lon1: float, lat2: float, lon2: float) -> float:
+    R  = 6_371_000
+    p1 = math.radians(lat1)
+    p2 = math.radians(lat2)
+    dp = math.radians(lat2 - lat1)
+    dl = math.radians(lon2 - lon1)
+    a  = math.sin(dp / 2) ** 2 + math.cos(p1) * math.cos(p2) * math.sin(dl / 2) ** 2
+    return 2 * R * math.asin(math.sqrt(a))
+
+
 # ------------------------------------------------------------------
 # Schemas
 # ------------------------------------------------------------------
@@ -37,29 +46,29 @@ class GPSPoint(BaseModel):
     alt: Optional[float] = None
 
 class RouteCreate(BaseModel):
-    name:            str                   = Field(..., min_length=1, max_length=200)
-    beschreibung:    Optional[str]         = Field(None, max_length=5000)
+    name:            str
+    beschreibung:    Optional[str]         = None
     gps_track:       List[GPSPoint]
     distanz_km:      Optional[float]       = None
     dauer_min:       Optional[int]         = None
-    schwierigkeit:   Optional[str]         = Field("leicht", max_length=30)   # leicht | mittel | anspruchsvoll
-    untergrund:      Optional[str]         = Field(None, max_length=50)        # wald | asphalt | wiese | mix
+    schwierigkeit:   Optional[str]         = "leicht"   # leicht | mittel | anspruchsvoll
+    untergrund:      Optional[str]         = None        # wald | asphalt | wiese | mix
     schatten:        Optional[bool]        = None
     leine_empfohlen: Optional[bool]        = None
     is_public:          Optional[bool]     = False
-    hunde_tauglichkeit: Optional[str]      = Field(None, max_length=50)  # eingeschränkt | gut | sehr_gut | premium
-    client_time:        Optional[str]      = Field(None, max_length=64)
+    hunde_tauglichkeit: Optional[str]      = None  # eingeschränkt | gut | sehr_gut | premium
+    client_time:        Optional[str]      = None
     dog_ids:            Optional[List[int]] = None  # Welche Hunde mitgegangen sind
 
 class RouteUpdate(BaseModel):
-    name:            Optional[str]  = Field(None, max_length=200)
-    beschreibung:    Optional[str]  = Field(None, max_length=5000)
-    schwierigkeit:   Optional[str]  = Field(None, max_length=30)
-    untergrund:      Optional[str]  = Field(None, max_length=50)
+    name:            Optional[str]  = None
+    beschreibung:    Optional[str]  = None
+    schwierigkeit:   Optional[str]  = None
+    untergrund:      Optional[str]  = None
     schatten:        Optional[bool] = None
     leine_empfohlen: Optional[bool] = None
     is_public:          Optional[bool] = None
-    hunde_tauglichkeit: Optional[str]  = Field(None, max_length=50)
+    hunde_tauglichkeit: Optional[str]  = None
 
 class RouteDogs(BaseModel):
     dog_ids: List[int]
@@ -128,7 +137,7 @@ async def list_routes(
     if lat is not None and lon is not None:
         result = [
             r for r in result
-            if r['start_lat'] and haversine_m(lat, lon, r['start_lat'], r['start_lon']) <= radius
+            if r['start_lat'] and _haversine(lat, lon, r['start_lat'], r['start_lon']) <= radius
         ]
 
     user_id = user['id'] if user else None
@@ -420,7 +429,10 @@ async def trim_route(route_id: int, data: RouteTrim, user=Depends(get_current_us
         new_km = 0.0
         for i in range(1, len(new_track)):
             p1, p2 = new_track[i-1], new_track[i]
-            new_km += haversine_km(p1['lat'], p1['lon'], p2['lat'], p2['lon'])
+            dlat = math.radians(p2['lat'] - p1['lat'])
+            dlon = math.radians(p2['lon'] - p1['lon'])
+            a = math.sin(dlat/2)**2 + math.cos(math.radians(p1['lat'])) * math.cos(math.radians(p2['lat'])) * math.sin(dlon/2)**2
+            new_km += 6371 * 2 * math.atan2(math.sqrt(a), math.sqrt(1-a))
         new_km = round(new_km, 2)
 
         # Dauer proportional schätzen (Original-Pace)
@@ -553,7 +565,7 @@ async def add_route_photo(
 # POST /api/routes/{id}/feedback — Feedback an Route-Ersteller
 # ------------------------------------------------------------------
 class RouteFeedback(BaseModel):
-    text: str = Field(..., min_length=5, max_length=2000)
+    text: str
 
 @router.post("/{route_id}/feedback", status_code=201)
 async def route_feedback(route_id: int, data: RouteFeedback, user=Depends(get_current_user)):
diff --git a/backend/routes/services.py b/backend/routes/services.py
index 2d1d0fc..0696f5f 100644
--- a/backend/routes/services.py
+++ b/backend/routes/services.py
@@ -1,23 +1,33 @@
 """BAN YARO — Service-Angebote (Sitting & Walks Matching)"""
 
+import math
 from fastapi import APIRouter, Depends, HTTPException
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional
 from database import db
 from auth import get_current_user
-from math_utils import haversine_km
 
 router = APIRouter()
 
 ALLOWED_TYPES = {'sitting', 'walks'}
 
 
+def _haversine(lat1, lon1, lat2, lon2):
+    R = 6371.0
+    dlat = math.radians(lat2 - lat1)
+    dlon = math.radians(lon2 - lon1)
+    a = (math.sin(dlat / 2) ** 2
+         + math.cos(math.radians(lat1)) * math.cos(math.radians(lat2))
+         * math.sin(dlon / 2) ** 2)
+    return R * 2 * math.asin(math.sqrt(a))
+
+
 # ------------------------------------------------------------------
 # Schemas
 # ------------------------------------------------------------------
 class ServiceCreate(BaseModel):
-    type:          str             = Field(..., max_length=30)
-    beschreibung:  Optional[str]   = Field(None, max_length=5000)
+    type:          str
+    beschreibung:  Optional[str]   = None
     preis_pro_tag: Optional[float] = None
     lat:           Optional[float] = None
     lon:           Optional[float] = None
@@ -50,7 +60,7 @@ async def list_services(
     for r in rows:
         d = dict(r)
         if lat is not None and lon is not None and d['lat'] and d['lon']:
-            dist = haversine_km(lat, lon, d['lat'], d['lon'])
+            dist = _haversine(lat, lon, d['lat'], d['lon'])
             if dist > radius:
                 continue
             d['distanz_km'] = round(dist, 1)
diff --git a/backend/routes/sharing.py b/backend/routes/sharing.py
index 762c8cd..eb2aa58 100644
--- a/backend/routes/sharing.py
+++ b/backend/routes/sharing.py
@@ -2,7 +2,7 @@
 
 import secrets
 from fastapi import APIRouter, Depends, HTTPException
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from database import db
 from auth import get_current_user
 
@@ -14,7 +14,7 @@ share_router = APIRouter()
 
 
 class ShareInvite(BaseModel):
-    role: str = Field("editor", max_length=20)   # viewer | editor
+    role: str = "editor"   # viewer | editor
 
 
 # ------------------------------------------------------------------
diff --git a/backend/routes/sitting.py b/backend/routes/sitting.py
index 760d942..acfa2e6 100644
--- a/backend/routes/sitting.py
+++ b/backend/routes/sitting.py
@@ -1,23 +1,32 @@
 """BAN YARO — Hundesitting"""
 
 import json
+import math
 from fastapi import APIRouter, Depends, HTTPException
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional, List
 from database import db
 from auth import get_current_user
-from math_utils import haversine_m
 
 router = APIRouter()
 
 SERVICES = {'tagesbetreuung', 'uebernachtung', 'gassi', 'hausbesuch'}
 
 
+def _haversine(lat1, lon1, lat2, lon2):
+    R  = 6_371_000
+    p1, p2 = math.radians(lat1), math.radians(lat2)
+    dp = math.radians(lat2 - lat1)
+    dl = math.radians(lon2 - lon1)
+    a  = math.sin(dp / 2) ** 2 + math.cos(p1) * math.cos(p2) * math.sin(dl / 2) ** 2
+    return 2 * R * math.asin(math.sqrt(a))
+
+
 # ------------------------------------------------------------------
 # Schemas
 # ------------------------------------------------------------------
 class SitterCreate(BaseModel):
-    beschreibung:  Optional[str]        = Field(None, max_length=5000)
+    beschreibung:  Optional[str]        = None
     preis_pro_tag: float                = 0
     max_hunde:     int                  = 1
     lat:           Optional[float]      = None
@@ -26,7 +35,7 @@ class SitterCreate(BaseModel):
     services:      List[str]            = []
 
 class SitterUpdate(BaseModel):
-    beschreibung:  Optional[str]   = Field(None, max_length=5000)
+    beschreibung:  Optional[str]   = None
     preis_pro_tag: Optional[float] = None
     max_hunde:     Optional[int]   = None
     lat:           Optional[float] = None
@@ -38,12 +47,12 @@ class SitterUpdate(BaseModel):
 class RequestCreate(BaseModel):
     sitter_id:  int
     dog_ids:    List[int] = []
-    von:        str       = Field(..., max_length=32)  # YYYY-MM-DD
-    bis:        str       = Field(..., max_length=32)
-    nachricht:  Optional[str] = Field(None, max_length=2000)
+    von:        str        # YYYY-MM-DD
+    bis:        str
+    nachricht:  Optional[str] = None
 
 class RequestUpdate(BaseModel):
-    status: str = Field(..., max_length=30)  # angenommen | abgelehnt | abgebrochen
+    status: str  # angenommen | abgelehnt | abgebrochen
 
 
 # ------------------------------------------------------------------
@@ -71,7 +80,7 @@ async def list_sitters(
         if service and service not in d['services']:
             continue
         if lat is not None and lon is not None and d['lat'] and d['lon']:
-            dist = haversine_m(lat, lon, d['lat'], d['lon'])
+            dist = _haversine(lat, lon, d['lat'], d['lon'])
             if dist > radius:
                 continue
             d['distanz_m'] = round(dist)
diff --git a/backend/routes/sitting_access.py b/backend/routes/sitting_access.py
index 7bbc6da..b49e681 100644
--- a/backend/routes/sitting_access.py
+++ b/backend/routes/sitting_access.py
@@ -1,7 +1,7 @@
 """BAN YARO — Gasthund-Zugang (Sitter-Subscriptions)"""
 
 from fastapi import APIRouter, Depends, HTTPException
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from database import db
 from auth import get_current_user
 
@@ -11,7 +11,7 @@ router = APIRouter()
 class AccessCreate(BaseModel):
     dog_id:      int
     sitter_id:   int
-    valid_until: str = Field(..., max_length=32)  # 'YYYY-MM-DD'
+    valid_until: str  # 'YYYY-MM-DD'
 
 
 @router.post("", status_code=201)
diff --git a/backend/routes/social.py b/backend/routes/social.py
index 10db2d9..1cf204d 100644
--- a/backend/routes/social.py
+++ b/backend/routes/social.py
@@ -9,7 +9,7 @@ import random
 from typing import Optional
 
 from fastapi import APIRouter, Depends, HTTPException, UploadFile, File
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 
 from auth import get_current_user, require_social_media
 from database import db
@@ -849,24 +849,24 @@ Antworte NUR mit einem JSON-Objekt:
 
 
 class GenerateRequest(BaseModel):
-    platform: str           = Field("both", max_length=30)
-    format:   str           = Field("post", max_length=30)
-    topic:    str           = Field(..., min_length=2, max_length=500)
+    platform: str = "both"
+    format:   str = "post"
+    topic:    str
     breed_id: Optional[int] = None
 
 
 class EvaluateRequest(BaseModel):
-    platform: str = Field("instagram", max_length=30)
-    format:   str = Field("post", max_length=30)
-    draft:    str = Field(..., min_length=1, max_length=10000)
+    platform: str = "instagram"
+    format:   str = "post"
+    draft:    str
 
 
 class StatusUpdate(BaseModel):
-    status:       Optional[str] = Field(None, max_length=50)
-    scheduled_at: Optional[str] = Field(None, max_length=64)
-    published_at: Optional[str] = Field(None, max_length=64)
-    notes:        Optional[str] = Field(None, max_length=5000)
-    post_url:     Optional[str] = Field(None, max_length=500)
+    status:       Optional[str] = None
+    scheduled_at: Optional[str] = None
+    published_at: Optional[str] = None
+    notes:        Optional[str] = None
+    post_url:     Optional[str] = None
 
 
 def _used_topics(limit: int = 30) -> str:
diff --git a/backend/routes/tieraerzte.py b/backend/routes/tieraerzte.py
index 65b1c5e..8448478 100644
--- a/backend/routes/tieraerzte.py
+++ b/backend/routes/tieraerzte.py
@@ -2,7 +2,7 @@
 
 import math
 from fastapi import APIRouter, Depends, HTTPException, Query
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional
 from database import db
 from auth import get_current_user
@@ -11,20 +11,20 @@ router = APIRouter()
 
 
 class TierarztCreate(BaseModel):
-    name:             str             = Field(..., min_length=1, max_length=200)
-    strasse:          Optional[str]   = Field(None, max_length=300)
-    plz:              Optional[str]   = Field(None, max_length=20)
-    ort:              Optional[str]   = Field(None, max_length=200)
-    telefon:          Optional[str]   = Field(None, max_length=30)
-    notfall_telefon:  Optional[str]   = Field(None, max_length=30)
-    email:            Optional[str]   = Field(None, max_length=254)
-    website:          Optional[str]   = Field(None, max_length=500)
-    notizen:          Optional[str]   = Field(None, max_length=5000)
+    name:             str
+    strasse:          Optional[str]   = None
+    plz:              Optional[str]   = None
+    ort:              Optional[str]   = None
+    telefon:          Optional[str]   = None
+    notfall_telefon:  Optional[str]   = None
+    email:            Optional[str]   = None
+    website:          Optional[str]   = None
+    notizen:          Optional[str]   = None
     ist_notfallpraxis: bool           = False
-    opening_hours:    Optional[str]   = Field(None, max_length=500)
+    opening_hours:    Optional[str]   = None
     lat:              Optional[float] = None
     lon:              Optional[float] = None
-    osm_id:           Optional[str]   = Field(None, max_length=100)
+    osm_id:           Optional[str]   = None
 
 
 class BewertungCreate(BaseModel):
@@ -32,25 +32,25 @@ class BewertungCreate(BaseModel):
     wartezeit:      Optional[int] = None
     freundlichkeit: Optional[int] = None
     kompetenz:      Optional[int] = None
-    text:           Optional[str] = Field(None, max_length=5000)
+    text:           Optional[str] = None
 
 
 class TierarztUpdate(BaseModel):
-    name:             Optional[str]   = Field(None, max_length=200)
-    strasse:          Optional[str]   = Field(None, max_length=300)
-    plz:              Optional[str]   = Field(None, max_length=20)
-    ort:              Optional[str]   = Field(None, max_length=200)
-    telefon:          Optional[str]   = Field(None, max_length=30)
-    notfall_telefon:  Optional[str]   = Field(None, max_length=30)
-    email:            Optional[str]   = Field(None, max_length=254)
-    website:          Optional[str]   = Field(None, max_length=500)
-    notizen:          Optional[str]   = Field(None, max_length=5000)
+    name:             Optional[str]   = None
+    strasse:          Optional[str]   = None
+    plz:              Optional[str]   = None
+    ort:              Optional[str]   = None
+    telefon:          Optional[str]   = None
+    notfall_telefon:  Optional[str]   = None
+    email:            Optional[str]   = None
+    website:          Optional[str]   = None
+    notizen:          Optional[str]   = None
     ist_notfallpraxis: Optional[bool] = None
     aktiv:            Optional[bool]  = None
-    opening_hours:    Optional[str]   = Field(None, max_length=500)
+    opening_hours:    Optional[str]   = None
     lat:              Optional[float] = None
     lon:              Optional[float] = None
-    osm_id:           Optional[str]   = Field(None, max_length=100)
+    osm_id:           Optional[str]   = None
 
 
 def _fmt_opening_hours(raw: str | None) -> str | None:
diff --git a/backend/routes/training.py b/backend/routes/training.py
index 5903b6f..078ceef 100644
--- a/backend/routes/training.py
+++ b/backend/routes/training.py
@@ -1,7 +1,7 @@
 """BAN YARO — Übungs- & Trainingsfortschritt"""
 
 from fastapi import APIRouter, Depends, HTTPException
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional
 import datetime
 import ki
@@ -61,9 +61,9 @@ async def get_exercises():
 # Admin: Übung bearbeiten (beschreibung / schritte / tipp)
 # ------------------------------------------------------------------
 class ExerciseUpdate(BaseModel):
-    beschreibung: Optional[str] = Field(None, max_length=10000)
-    schritte:     Optional[str] = Field(None, max_length=10000)  # JSON-String: '["Schritt 1", ...]'
-    tipp:         Optional[str] = Field(None, max_length=5000)
+    beschreibung: Optional[str] = None
+    schritte:     Optional[str] = None  # JSON-String: '["Schritt 1", ...]'
+    tipp:         Optional[str] = None
 
 @router.put("/exercises/{exercise_id}")
 async def update_exercise(exercise_id: int, body: ExerciseUpdate, _=Depends(require_admin)):
@@ -93,9 +93,9 @@ async def update_exercise(exercise_id: int, body: ExerciseUpdate, _=Depends(requ
 # Übungs-Status
 # ------------------------------------------------------------------
 class ProgressUpdate(BaseModel):
-    exercise_id: str           = Field(..., max_length=200)
-    status:      Optional[str] = Field(None, max_length=50)
-    dog_id:      Optional[int] = None
+    exercise_id: str
+    status: Optional[str] = None
+    dog_id: Optional[int] = None
 
 @router.get("/progress")
 async def get_progress(dog_id: Optional[int] = None, user=Depends(get_current_user)):
@@ -137,9 +137,9 @@ async def upsert_progress(body: ProgressUpdate, user=Depends(get_current_user)):
 # Trainingsplan-Checkboxen
 # ------------------------------------------------------------------
 class PlanProgress(BaseModel):
-    item_key: str           = Field(..., max_length=200)
-    checked:  bool
-    dog_id:   Optional[int] = None
+    item_key: str
+    checked: bool
+    dog_id: Optional[int] = None
 
 @router.get("/plan-progress")
 async def get_plan_progress(dog_id: Optional[int] = None, user=Depends(get_current_user)):
@@ -327,15 +327,15 @@ def _check_badges(conn, user_id: int, dog_name: str) -> list:
 
 class SessionCreate(BaseModel):
     dog_id: int
-    exercise_id: str           = Field(..., max_length=200)
-    exercise_name: str         = Field(..., max_length=200)
-    datum: Optional[str]       = Field(None, max_length=32)
-    wiederholungen: int        = 1
-    erfolgsquote: int          = 50
-    hund_stimmung: Optional[str] = Field("aufmerksam", max_length=50)
+    exercise_id: str
+    exercise_name: str
+    datum: Optional[str] = None
+    wiederholungen: int = 1
+    erfolgsquote: int = 50
+    hund_stimmung: Optional[str] = "aufmerksam"
     zufriedenheit: Optional[int] = 3
-    notiz: Optional[str]         = Field(None, max_length=2000)
-    tagebuch_eintrag: bool       = False  # ignoriert — Training hat eigenes Protokoll
+    notiz: Optional[str] = None
+    tagebuch_eintrag: bool = False  # ignoriert — Training hat eigenes Protokoll
 
 
 @router.post("/sessions")
diff --git a/backend/routes/walks.py b/backend/routes/walks.py
index 07dbada..3a0c48b 100644
--- a/backend/routes/walks.py
+++ b/backend/routes/walks.py
@@ -1,43 +1,55 @@
 """BAN YARO — Gassi-Treffen"""
 
-import os, uuid
+import math, os, uuid
 import httpx
 from datetime import date
 from fastapi import APIRouter, Depends, HTTPException, UploadFile, File
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional, List
 from database import db
 from auth import get_current_user
 from routes.push import send_push_to_user
-from math_utils import haversine_km, haversine_m
 
 MEDIA_DIR = os.getenv("MEDIA_DIR", "/data/media")
 
 router = APIRouter()
 
 
+def _haversine(lat1, lon1, lat2, lon2):
+    R  = 6_371_000
+    p1, p2 = math.radians(lat1), math.radians(lat2)
+    dp = math.radians(lat2 - lat1)
+    dl = math.radians(lon2 - lon1)
+    a  = math.sin(dp / 2) ** 2 + math.cos(p1) * math.cos(p2) * math.sin(dl / 2) ** 2
+    return 2 * R * math.asin(math.sqrt(a))
+
+
+def _haversine_km(lat1, lon1, lat2, lon2):
+    return _haversine(lat1, lon1, lat2, lon2) / 1000
+
+
 # ------------------------------------------------------------------
 # Schemas
 # ------------------------------------------------------------------
 class WalkCreate(BaseModel):
-    titel:          str           = Field(..., min_length=1, max_length=200)
-    datum:          str           = Field(..., max_length=32)        # YYYY-MM-DD
-    uhrzeit:        str           = Field(..., max_length=20)        # HH:MM
+    titel:          str
+    datum:          str           # YYYY-MM-DD
+    uhrzeit:        str           # HH:MM
     lat:            float
     lon:            float
-    ort_name:       Optional[str] = Field(None, max_length=300)
+    ort_name:       Optional[str] = None
     max_teilnehmer: int           = 10
-    beschreibung:   Optional[str] = Field(None, max_length=5000)
+    beschreibung:   Optional[str] = None
 
 class WalkUpdate(BaseModel):
-    titel:          Optional[str] = Field(None, max_length=200)
-    datum:          Optional[str] = Field(None, max_length=32)
-    uhrzeit:        Optional[str] = Field(None, max_length=20)
+    titel:          Optional[str] = None
+    datum:          Optional[str] = None
+    uhrzeit:        Optional[str] = None
     lat:            Optional[float] = None
     lon:            Optional[float] = None
-    ort_name:       Optional[str] = Field(None, max_length=300)
+    ort_name:       Optional[str] = None
     max_teilnehmer: Optional[int] = None
-    beschreibung:   Optional[str] = Field(None, max_length=5000)
+    beschreibung:   Optional[str] = None
 
 class JoinRequest(BaseModel):
     dog_ids: List[int] = []   # leere Liste = ohne Hund (selten)
@@ -46,7 +58,7 @@ class InviteRequest(BaseModel):
     friend_id: int
 
 class RsvpRequest(BaseModel):
-    status: str = Field(..., max_length=20)  # 'yes' | 'maybe' | 'no'
+    status: str  # 'yes' | 'maybe' | 'no'
 
 
 # ------------------------------------------------------------------
@@ -79,7 +91,7 @@ async def list_walks(
 
     # Umkreis-Filter
     if lat is not None and lon is not None:
-        result = [r for r in result if haversine_m(lat, lon, r['lat'], r['lon']) <= radius]
+        result = [r for r in result if _haversine(lat, lon, r['lat'], r['lon']) <= radius]
 
     return result
 
@@ -119,7 +131,7 @@ async def nearby_places(lat: float, lon: float, user=Depends(get_current_user)):
             "SELECT name, typ, lat, lon FROM places WHERE lat IS NOT NULL",
         ).fetchall()
         for p in places:
-            km = haversine_km(lat, lon, p["lat"], p["lon"])
+            km = _haversine_km(lat, lon, p["lat"], p["lon"])
             if km <= 5:
                 results.append({"name": p["name"], "type": p["typ"] or "place",
                                  "lat": p["lat"], "lon": p["lon"],
@@ -130,7 +142,7 @@ async def nearby_places(lat: float, lon: float, user=Depends(get_current_user)):
             "SELECT name, type, lat, lon FROM osm_pois WHERE name IS NOT NULL AND name != ''"
         ).fetchall()
         for p in osm:
-            km = haversine_km(lat, lon, p["lat"], p["lon"])
+            km = _haversine_km(lat, lon, p["lat"], p["lon"])
             if km <= 2:
                 results.append({"name": p["name"], "type": p["type"],
                                  "lat": p["lat"], "lon": p["lon"],
@@ -158,7 +170,7 @@ async def nearby_places(lat: float, lon: float, user=Depends(get_current_user)):
                     elon = el.get("lon") or el.get("center", {}).get("lon")
                     if elat is None or elon is None:
                         continue
-                    km = haversine_km(lat, lon, elat, elon)
+                    km = _haversine_km(lat, lon, elat, elon)
                     if km <= 1:
                         results.append({"name": name, "type": "osm",
                                          "lat": elat, "lon": elon,
diff --git a/backend/routes/wiki.py b/backend/routes/wiki.py
index 7af856c..a05bb1b 100644
--- a/backend/routes/wiki.py
+++ b/backend/routes/wiki.py
@@ -6,7 +6,7 @@ import time
 import logging
 from fastapi import APIRouter, Depends, Form, HTTPException, Query, Request, UploadFile, File
 from fastapi.responses import JSONResponse
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from database import db
 from auth import get_current_user, get_current_user_optional
 from ratelimit import check as rl_check, block_ip
@@ -36,9 +36,9 @@ async def honeypot(request: Request):
 # Schemas
 # ------------------------------------------------------------------
 class BerichtCreate(BaseModel):
-    rasse: str = Field(..., max_length=100)
-    titel: str = Field(..., min_length=3, max_length=200)
-    text:  str = Field(..., min_length=10, max_length=10000)
+    rasse: str
+    titel: str
+    text: str
 
 
 # ------------------------------------------------------------------
@@ -411,8 +411,8 @@ async def list_submissions(user=Depends(get_current_user)):
 # PATCH /api/wiki/foto-submissions/{id} — genehmigen oder ablehnen
 # ------------------------------------------------------------------
 class ReviewModel(BaseModel):
-    action:        str = Field(..., max_length=30)          # "approve" | "reject"
-    reject_reason: str = Field("", max_length=2000)
+    action: str          # "approve" | "reject"
+    reject_reason: str = ""
 
 
 @router.patch("/foto-submissions/{sub_id}")
@@ -575,19 +575,19 @@ async def get_rasse_stats(slug: str, user=Depends(get_current_user_optional)):
 # Schemas für Interesse und Züchter
 # ------------------------------------------------------------------
 class InteresseCreate(BaseModel):
-    typ: str = Field(..., max_length=30)   # "hat" oder "will"
+    typ: str   # "hat" oder "will"
 
 class ZuchterCreate(BaseModel):
-    rasse_slug:   str = Field(..., max_length=100)
-    name:         str = Field(..., min_length=1, max_length=200)
-    zwingername:  str = Field("", max_length=200)
-    ort:          str = Field("", max_length=200)
-    plz:          str = Field("", max_length=20)
-    bundesland:   str = Field("", max_length=100)
+    rasse_slug:   str
+    name:         str
+    zwingername:  str = ""
+    ort:          str = ""
+    plz:          str = ""
+    bundesland:   str = ""
     vdh_mitglied: int = 0
-    website:      str = Field("", max_length=500)
-    telefon:      str = Field("", max_length=30)
-    beschreibung: str = Field("", max_length=10000)
+    website:      str = ""
+    telefon:      str = ""
+    beschreibung: str = ""
 
 
 # ------------------------------------------------------------------
diff --git a/backend/routes/zucht_hunde.py b/backend/routes/zucht_hunde.py
index 45aed56..8ef8c72 100644
--- a/backend/routes/zucht_hunde.py
+++ b/backend/routes/zucht_hunde.py
@@ -2,7 +2,7 @@
 
 import logging
 from fastapi import APIRouter, Depends, HTTPException, Query
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional
 
 from database import db
@@ -134,108 +134,108 @@ def _ik_rating(ik: float) -> str:
 # Pydantic-Schemas
 # ------------------------------------------------------------------
 class HundCreate(BaseModel):
-    name:            str            = Field(..., min_length=1, max_length=200)
-    rufname:         Optional[str]  = Field(None, max_length=80)
-    geschlecht:      str            = Field(..., max_length=20)         # maennlich|weiblich
-    geburtsdatum:    Optional[str]  = Field(None, max_length=32)
-    sterbedatum:     Optional[str]  = Field(None, max_length=32)
-    chip_nr:         Optional[str]  = Field(None, max_length=50)
-    taetowiernummer: Optional[str]  = Field(None, max_length=50)
-    zuchtbuchnummer: Optional[str]  = Field(None, max_length=100)
-    farbe:           Optional[str]  = Field(None, max_length=100)
+    name:            str
+    rufname:         Optional[str]  = None
+    geschlecht:      str                        # maennlich|weiblich
+    geburtsdatum:    Optional[str]  = None
+    sterbedatum:     Optional[str]  = None
+    chip_nr:         Optional[str]  = None
+    taetowiernummer: Optional[str]  = None
+    zuchtbuchnummer: Optional[str]  = None
+    farbe:           Optional[str]  = None
     vater_id:        Optional[int]  = None
     mutter_id:       Optional[int]  = None
-    zuechter_name:   Optional[str]  = Field(None, max_length=200)
-    eigentuemer_name: Optional[str] = Field(None, max_length=200)
+    zuechter_name:   Optional[str]  = None
+    eigentuemer_name: Optional[str] = None
     is_public:       int            = 1
-    notiz:           Optional[str]  = Field(None, max_length=5000)
-    foto_url:        Optional[str]  = Field(None, max_length=500)
+    notiz:           Optional[str]  = None
+    foto_url:        Optional[str]  = None
 
 
 class HundUpdate(BaseModel):
-    name:            Optional[str]  = Field(None, max_length=200)
-    rufname:         Optional[str]  = Field(None, max_length=80)
-    geschlecht:      Optional[str]  = Field(None, max_length=20)
-    geburtsdatum:    Optional[str]  = Field(None, max_length=32)
-    sterbedatum:     Optional[str]  = Field(None, max_length=32)
-    chip_nr:         Optional[str]  = Field(None, max_length=50)
-    taetowiernummer: Optional[str]  = Field(None, max_length=50)
-    zuchtbuchnummer: Optional[str]  = Field(None, max_length=100)
-    farbe:           Optional[str]  = Field(None, max_length=100)
+    name:            Optional[str]  = None
+    rufname:         Optional[str]  = None
+    geschlecht:      Optional[str]  = None
+    geburtsdatum:    Optional[str]  = None
+    sterbedatum:     Optional[str]  = None
+    chip_nr:         Optional[str]  = None
+    taetowiernummer: Optional[str]  = None
+    zuchtbuchnummer: Optional[str]  = None
+    farbe:           Optional[str]  = None
     vater_id:        Optional[int]  = None
     mutter_id:       Optional[int]  = None
-    zuechter_name:   Optional[str]  = Field(None, max_length=200)
-    eigentuemer_name: Optional[str] = Field(None, max_length=200)
+    zuechter_name:   Optional[str]  = None
+    eigentuemer_name: Optional[str] = None
     is_public:       Optional[int]  = None
-    notiz:           Optional[str]  = Field(None, max_length=5000)
-    foto_url:        Optional[str]  = Field(None, max_length=500)
+    notiz:           Optional[str]  = None
+    foto_url:        Optional[str]  = None
 
 
 class HealthTestCreate(BaseModel):
-    test_typ:     str            = Field(..., max_length=50)         # HD|ED|OCD|augen|herz|patella|ZTP|custom
-    test_name:    Optional[str]  = Field(None, max_length=200)
-    ergebnis:     Optional[str]  = Field(None, max_length=500)
-    untersuch_am: Optional[str]  = Field(None, max_length=32)
-    gueltig_bis:  Optional[str]  = Field(None, max_length=32)
-    untersucher:  Optional[str]  = Field(None, max_length=200)
-    labor:        Optional[str]  = Field(None, max_length=200)
-    zertifikat_nr: Optional[str] = Field(None, max_length=100)
+    test_typ:     str                        # HD|ED|OCD|augen|herz|patella|ZTP|custom
+    test_name:    Optional[str]  = None
+    ergebnis:     Optional[str]  = None
+    untersuch_am: Optional[str]  = None
+    gueltig_bis:  Optional[str]  = None
+    untersucher:  Optional[str]  = None
+    labor:        Optional[str]  = None
+    zertifikat_nr: Optional[str] = None
     is_public:    int             = 1
 
 
 class HealthTestUpdate(BaseModel):
-    test_typ:     Optional[str]  = Field(None, max_length=50)
-    test_name:    Optional[str]  = Field(None, max_length=200)
-    ergebnis:     Optional[str]  = Field(None, max_length=500)
-    untersuch_am: Optional[str]  = Field(None, max_length=32)
-    gueltig_bis:  Optional[str]  = Field(None, max_length=32)
-    untersucher:  Optional[str]  = Field(None, max_length=200)
-    labor:        Optional[str]  = Field(None, max_length=200)
-    zertifikat_nr: Optional[str] = Field(None, max_length=100)
+    test_typ:     Optional[str]  = None
+    test_name:    Optional[str]  = None
+    ergebnis:     Optional[str]  = None
+    untersuch_am: Optional[str]  = None
+    gueltig_bis:  Optional[str]  = None
+    untersucher:  Optional[str]  = None
+    labor:        Optional[str]  = None
+    zertifikat_nr: Optional[str] = None
     is_public:    Optional[int]  = None
 
 
 class GeneticTestCreate(BaseModel):
-    marker_name:      str           = Field(..., max_length=100)        # MDR1|PRA-prcd|DM|vWD|HUU etc.
-    marker_kategorie: Optional[str] = Field(None, max_length=50)        # krankheit|farbe|eigenschaft
-    genotyp:          Optional[str] = Field(None, max_length=20)        # +/+|+/-|-/-
-    ergebnis_klasse:  Optional[str] = Field(None, max_length=50)        # clear|carrier|affected
-    getestet_am:      Optional[str] = Field(None, max_length=32)
-    labor:            Optional[str] = Field(None, max_length=200)
-    zertifikat_nr:    Optional[str] = Field(None, max_length=100)
+    marker_name:      str                       # MDR1|PRA-prcd|DM|vWD|HUU etc.
+    marker_kategorie: Optional[str] = None      # krankheit|farbe|eigenschaft
+    genotyp:          Optional[str] = None      # +/+|+/-|-/-
+    ergebnis_klasse:  Optional[str] = None      # clear|carrier|affected
+    getestet_am:      Optional[str] = None
+    labor:            Optional[str] = None
+    zertifikat_nr:    Optional[str] = None
     is_public:        int           = 1
 
 
 class GeneticTestUpdate(BaseModel):
-    marker_name:      Optional[str] = Field(None, max_length=100)
-    marker_kategorie: Optional[str] = Field(None, max_length=50)
-    genotyp:          Optional[str] = Field(None, max_length=20)
-    ergebnis_klasse:  Optional[str] = Field(None, max_length=50)
-    getestet_am:      Optional[str] = Field(None, max_length=32)
-    labor:            Optional[str] = Field(None, max_length=200)
-    zertifikat_nr:    Optional[str] = Field(None, max_length=100)
+    marker_name:      Optional[str] = None
+    marker_kategorie: Optional[str] = None
+    genotyp:          Optional[str] = None
+    ergebnis_klasse:  Optional[str] = None
+    getestet_am:      Optional[str] = None
+    labor:            Optional[str] = None
+    zertifikat_nr:    Optional[str] = None
     is_public:        Optional[int] = None
 
 
 class TitelCreate(BaseModel):
-    titel_typ:   str           = Field(..., max_length=50)         # ausstellung|arbeit|sport|zucht|champion|custom
-    titel_name:  str           = Field(..., min_length=1, max_length=200)
-    verliehen_am: Optional[str] = Field(None, max_length=32)
-    ort:         Optional[str]  = Field(None, max_length=200)
-    richter:     Optional[str]  = Field(None, max_length=200)
-    ausstellung: Optional[str]  = Field(None, max_length=200)
-    formwert:    Optional[str]  = Field(None, max_length=100)
+    titel_typ:   str                        # ausstellung|arbeit|sport|zucht|champion|custom
+    titel_name:  str
+    verliehen_am: Optional[str] = None
+    ort:         Optional[str]  = None
+    richter:     Optional[str]  = None
+    ausstellung: Optional[str]  = None
+    formwert:    Optional[str]  = None
     is_public:   int            = 1
 
 
 class TitelUpdate(BaseModel):
-    titel_typ:   Optional[str] = Field(None, max_length=50)
-    titel_name:  Optional[str] = Field(None, max_length=200)
-    verliehen_am: Optional[str] = Field(None, max_length=32)
-    ort:         Optional[str]  = Field(None, max_length=200)
-    richter:     Optional[str]  = Field(None, max_length=200)
-    ausstellung: Optional[str]  = Field(None, max_length=200)
-    formwert:    Optional[str]  = Field(None, max_length=100)
+    titel_typ:   Optional[str] = None
+    titel_name:  Optional[str] = None
+    verliehen_am: Optional[str] = None
+    ort:         Optional[str]  = None
+    richter:     Optional[str]  = None
+    ausstellung: Optional[str]  = None
+    formwert:    Optional[str]  = None
     is_public:   Optional[int]  = None
 
 
diff --git a/backend/routes/zucht_ki.py b/backend/routes/zucht_ki.py
index 3f1fd43..e25c49c 100644
--- a/backend/routes/zucht_ki.py
+++ b/backend/routes/zucht_ki.py
@@ -3,7 +3,7 @@
 import logging
 from datetime import date, timedelta
 from fastapi import APIRouter, Depends, HTTPException
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional, Literal
 
 from database import db
@@ -41,7 +41,7 @@ class PaarungAnalyseBody(BaseModel):
     vater_id: int
     mutter_id: int
     ik_prozent: Optional[float] = None
-    welfare_level: Optional[str] = Field(None, max_length=50)
+    welfare_level: Optional[str] = None
 
 
 class HundBeschreibungBody(BaseModel):
diff --git a/backend/scheduler.py b/backend/scheduler.py
index 5b816f1..11dcf62 100644
--- a/backend/scheduler.py
+++ b/backend/scheduler.py
@@ -46,14 +46,6 @@ def start():
         misfire_grace_time=3600,
         coalesce=True,
     )
-    _scheduler.add_job(
-        _job_purge_jwt_blacklist,
-        CronTrigger(hour=3, minute=30),  # täglich 03:30 Uhr, nach poison_archive
-        id="purge_jwt_blacklist",
-        replace_existing=True,
-        misfire_grace_time=3600,
-        coalesce=True,
-    )
     _scheduler.add_job(
         _job_weather_alert,
         CronTrigger(hour=7, minute=30),  # täglich 07:30 Uhr
@@ -1840,13 +1832,11 @@ async def _job_anniversary_reminders():
     logger.info(f"Jahrestags-Erinnerungen Job läuft für {today_md}")
 
     with db() as conn:
-        # diary hat keinen user_id — User kommt über dogs.user_id
         entries = conn.execute("""
-            SELECT d.id, d.titel, d.datum, dogs.user_id, d.dog_id,
+            SELECT d.id, d.titel, d.datum, d.user_id, d.dog_id,
                    (SELECT dm.url FROM diary_media dm
                     WHERE dm.diary_id=d.id LIMIT 1) AS foto_url
             FROM diary d
-            JOIN dogs ON dogs.id = d.dog_id
             WHERE strftime('%m-%d', d.datum) = ?
               AND d.datum < date('now')
               AND d.titel IS NOT NULL
@@ -2241,16 +2231,3 @@ async def _job_error_digest():
     except Exception as e:
         logger.error(f"Error-Digest: Mail-Fehler: {e}")
         _log_job("error_digest", "error", str(e))
-
-
-def _job_purge_jwt_blacklist():
-    """Räumt abgelaufene Einträge aus jwt_blacklist auf — sonst wächst die
-    Tabelle monoton mit jedem Logout. Läuft täglich 03:30."""
-    try:
-        from auth import _purge_expired_jwt
-        deleted = _purge_expired_jwt()
-        logger.info(f"jwt_blacklist: {deleted} abgelaufene Einträge gelöscht.")
-        _log_job("purge_jwt_blacklist", "ok", f"{deleted} entries deleted")
-    except Exception as e:
-        logger.exception(f"jwt_blacklist purge fehlgeschlagen: {e}")
-        _log_job("purge_jwt_blacklist", "error", str(e))
diff --git a/backend/static/css/components.css b/backend/static/css/components.css
index 309f5e4..4ec2cef 100644
--- a/backend/static/css/components.css
+++ b/backend/static/css/components.css
@@ -235,45 +235,6 @@
   color:        var(--c-primary);
 }
 
-/* ----- .by-tabs Modifier-Varianten ----------------------------- */
-
-/* Grid-Layout (Admin/Health/Übungen — Desktop oft 2-3 Spalten) */
-.by-tabs.grid {
-  display: grid;
-  grid-template-columns: repeat(var(--tab-cols, 4), minmax(0, 1fr));
-  overflow: visible;
-  gap: var(--space-2);
-}
-
-/* Flex-Wrap (Zuchthunde — Buttons brechen um statt zu scrollen) */
-.by-tabs.wrap {
-  flex-wrap: wrap;
-  overflow-x: visible;
-}
-
-/* Separated — eigener Hintergrund + Border (Sitting) */
-.by-tabs.separated {
-  padding: var(--space-3) var(--space-4) var(--space-2);
-  border-bottom: 1px solid var(--c-border);
-  background: var(--c-surface);
-}
-
-/* Sticky (Admin Desktop vertikal) — nur ab 1024px */
-@media (min-width: 1024px) {
-  .by-tabs.sticky {
-    position: sticky;
-    top: var(--space-3);
-    flex-direction: column;
-    width: 190px;
-    gap: var(--space-1);
-  }
-  .by-tabs.sticky .by-tab {
-    justify-content: flex-start;
-    text-align: left;
-    padding: var(--space-2) var(--space-3);
-  }
-}
-
 /* ------------------------------------------------------------
    4. BY-SECTION-LABEL + BY-TOOLBAR — weitere gemeinsame Elemente
    ------------------------------------------------------------ */
@@ -8944,44 +8905,3 @@ svg.empty-state-icon {
 .offline-status-row .osr-text { flex: 1; min-width: 0; }
 .offline-status-row .osr-title { font-weight: 600; }
 .offline-status-row .osr-detail { font-size: var(--text-xs); color: var(--c-text-muted); margin-top: 2px; }
-
-/* ============================================================
-   .map-list-toggle — vereinheitlichter Karten/Listen-Umschalter
-   Verwendet von walks.js, events.js, routes.js, etc.
-
-   <div class="map-list-toggle">
-     <button class="active" data-view="list">Liste</button>
-     <button data-view="map">Karte</button>
-   </div>
-   ============================================================ */
-.map-list-toggle {
-  display: flex;
-  border: 1.5px solid var(--c-border);
-  border-radius: var(--radius-md);
-  overflow: hidden;
-  background: var(--c-surface);
-}
-.map-list-toggle button {
-  flex: 1;
-  height: 44px;
-  border: none;
-  background: transparent;
-  color: var(--c-text-secondary);
-  cursor: pointer;
-  font-size: var(--text-sm);
-  font-weight: var(--weight-medium);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-1);
-  transition: background 0.15s, color 0.15s;
-  -webkit-tap-highlight-color: transparent;
-}
-.map-list-toggle button.active {
-  background: var(--c-primary);
-  color: #fff;
-}
-.map-list-toggle button:not(.active):hover {
-  background: var(--c-surface-2);
-  color: var(--c-text);
-}
diff --git a/backend/static/css/design-system.css b/backend/static/css/design-system.css
index 4af159f..d206049 100644
--- a/backend/static/css/design-system.css
+++ b/backend/static/css/design-system.css
@@ -34,7 +34,7 @@
   /* Text — Warmbraun aus dem Halsband */
   --c-text:           #2A1F14;
   --c-text-secondary: #7A6A58;
-  --c-text-muted:     #7F6B58;   /* a11y: WCAG AA 4.74:1 auf --c-bg #FAF7F2 (vorher #B0A090 = 2.37:1) */
+  --c-text-muted:     #B0A090;
   --c-text-inverse:   #FAF7F2;
 
   /* Funktionsfarben */
@@ -179,7 +179,7 @@
 
   --c-text:           #F0EAE0;
   --c-text-secondary: #C0B0A0;
-  --c-text-muted:     #A08878;   /* a11y: WCAG AA 5.46:1 auf --c-bg #1A1410 (vorher #806A58 = 3.58:1) */
+  --c-text-muted:     #806A58;
   --c-text-inverse:   #2A1F14;
 
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
diff --git a/backend/static/css/layout.css b/backend/static/css/layout.css
index a54eedc..ac91631 100644
--- a/backend/static/css/layout.css
+++ b/backend/static/css/layout.css
@@ -86,8 +86,8 @@
   display:         flex;
   align-items:     center;
   justify-content: center;
-  width:           44px;
-  height:          44px;
+  width:           40px;
+  height:          40px;
   border-radius:   var(--radius-md);
   color:           var(--c-text-secondary);
   cursor:          pointer;
@@ -99,8 +99,8 @@
 
 /* Hamburger-Button (nur Mobile) */
 .header-menu-btn {
-  width:           44px;
-  height:          44px;
+  width:           40px;
+  height:          40px;
   display:         flex;
   align-items:     center;
   justify-content: center;
diff --git a/backend/static/css/lists.css b/backend/static/css/lists.css
deleted file mode 100644
index f8d2014..0000000
--- a/backend/static/css/lists.css
+++ /dev/null
@@ -1,328 +0,0 @@
-/* ============================================================
-   BAN YARO — Listen-Komponenten
-   Wiederverwendbare Klassen für Seiten mit Listen+Detail-Pattern:
-   Notes, Expenses, Health, Diary, Behavior-Log, ...
-
-   Verwendung:
-     <div class="list-shell">
-       <div class="list-filter-bar">...</div>
-       <div class="list-group-header">Mai 2026</div>
-       <div class="list-item-card list-item-card--clickable" data-id="...">
-         <div class="list-item-meta-badge" style="--meta-color:#f97316">🍖</div>
-         <div class="list-item-body">
-           <div class="list-item-title">Titel</div>
-           <div class="list-item-text">Vorschau-Text</div>
-           <div class="list-item-meta-row">
-             <span>10:30</span> · <span>📍 Berlin</span>
-           </div>
-         </div>
-         <div class="list-item-amount">25,50 €</div>
-       </div>
-     </div>
-   ============================================================ */
-
-/* ------------------------------------------------------------
-   Shell + Header
-   ------------------------------------------------------------ */
-.list-shell {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-
-.list-filter-bar {
-  display: flex;
-  gap: var(--space-2);
-  padding: var(--space-3) var(--space-4);
-  flex-wrap: wrap;
-  align-items: center;
-}
-
-.list-search-wrap {
-  flex: 1;
-  min-width: 200px;
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-.list-search-wrap > input { width: 100%; }
-
-/* ------------------------------------------------------------
-   Group-Header (Monat / Datums-Gruppe)
-   ------------------------------------------------------------ */
-.list-group-header {
-  font-size:      var(--text-xs);
-  font-weight:    600;
-  color:          var(--c-text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  padding:        var(--space-3) var(--space-4) var(--space-1);
-  margin-top:     var(--space-2);
-}
-
-/* ------------------------------------------------------------
-   Item-Card (universelle Listen-Karte)
-   ------------------------------------------------------------ */
-.list-item-card {
-  display:    flex;
-  gap:        var(--space-3);
-  padding:    var(--space-3) var(--space-4);
-  background: var(--c-surface);
-  border-radius: var(--radius-lg);
-  border:     1px solid var(--c-border-light);
-  align-items: flex-start;
-  transition: background 0.15s, transform 0.1s;
-}
-
-.list-item-card--clickable {
-  cursor: pointer;
-}
-.list-item-card--clickable:hover {
-  background: var(--c-surface-2);
-}
-.list-item-card--clickable:active {
-  transform: scale(0.98);
-}
-
-.list-item-card--milestone {
-  border-left: 3px solid #f5c518;
-}
-
-.list-item-card--inactive {
-  opacity: 0.55;
-  filter: grayscale(0.8);
-}
-
-/* ------------------------------------------------------------
-   Linke Spalte: Date-Col oder Meta-Badge
-   ------------------------------------------------------------ */
-
-/* Date-Column (Diary-Style: Wochentag + Tag) */
-.list-item-date-col {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  min-width: 44px;
-  text-align: center;
-}
-.list-item-date-col-weekday {
-  font-size: var(--text-xs);
-  font-weight: 600;
-  color: var(--c-text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-.list-item-date-col-day {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--c-text);
-  line-height: 1.1;
-}
-
-/* Meta-Badge (Expenses/Health-Style: farbiges Icon im Kreis) */
-.list-item-meta-badge {
-  width: 44px;
-  height: 44px;
-  border-radius: 50%;
-  background: color-mix(in srgb, var(--meta-color, var(--c-primary)) 15%, transparent);
-  color: var(--meta-color, var(--c-primary));
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.4rem;
-  flex-shrink: 0;
-}
-
-/* ------------------------------------------------------------
-   Body (Hauptinhalt mittig)
-   ------------------------------------------------------------ */
-.list-item-body {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-}
-
-.list-item-title {
-  font-weight: 600;
-  font-size: var(--text-base);
-  color: var(--c-text);
-  line-height: 1.3;
-}
-
-.list-item-text {
-  font-size: var(--text-sm);
-  color: var(--c-text-secondary);
-  line-height: 1.5;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.list-item-meta-row {
-  display: flex;
-  align-items: center;
-  gap: var(--space-1);
-  font-size: var(--text-xs);
-  color: var(--c-text-muted);
-  flex-wrap: wrap;
-}
-
-/* ------------------------------------------------------------
-   Chips + Micro-Badges (in Item-Body)
-   ------------------------------------------------------------ */
-.list-item-chips {
-  display: flex;
-  gap: var(--space-1);
-  flex-wrap: wrap;
-}
-
-.list-item-chip {
-  padding: 2px var(--space-2);
-  border-radius: var(--radius-sm);
-  font-size: var(--text-xs);
-  font-weight: 600;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  background: color-mix(in srgb, var(--chip-color, var(--c-primary)) 15%, transparent);
-  color: var(--chip-color, var(--c-primary));
-}
-
-.list-item-micro-badges {
-  display: flex;
-  gap: var(--space-1);
-  flex-wrap: wrap;
-  margin-top: 2px;
-}
-.list-item-micro-badge {
-  padding: 1px 6px;
-  background: var(--c-surface-2);
-  border-radius: var(--radius-sm);
-  font-size: 11px;
-  color: var(--c-text-secondary);
-}
-
-/* ------------------------------------------------------------
-   Rechte Spalte: Thumbnail, Amount, Actions
-   ------------------------------------------------------------ */
-.list-item-thumb {
-  width: 64px;
-  height: 64px;
-  border-radius: var(--radius-md);
-  overflow: hidden;
-  object-fit: cover;
-  flex-shrink: 0;
-  background: var(--c-surface-2);
-  position: relative;
-}
-.list-item-thumb-count {
-  position: absolute;
-  bottom: 4px;
-  right: 4px;
-  background: rgba(0,0,0,0.65);
-  color: #fff;
-  font-size: 10px;
-  font-weight: 700;
-  padding: 1px 5px;
-  border-radius: var(--radius-sm);
-}
-
-.list-item-amount {
-  font-weight: 700;
-  font-size: var(--text-base);
-  white-space: nowrap;
-  flex-shrink: 0;
-  align-self: center;
-}
-.list-item-amount--positive { color: var(--c-success); }
-.list-item-amount--negative { color: var(--c-danger); }
-.list-item-amount--neutral  { color: var(--c-text); }
-
-.list-item-actions {
-  display: flex;
-  gap: 2px;
-  flex-shrink: 0;
-  align-self: center;
-}
-.list-item-action-btn {
-  padding: 6px 8px;
-  border-radius: var(--radius-sm);
-  border: none;
-  background: transparent;
-  color: var(--c-text-muted);
-  cursor: pointer;
-  font-size: var(--text-sm);
-  transition: all 0.15s;
-}
-.list-item-action-btn:hover {
-  color: var(--c-text);
-  background: var(--c-surface-2);
-}
-.list-item-action-btn--danger:hover {
-  color: var(--c-danger);
-  background: color-mix(in srgb, var(--c-danger) 10%, transparent);
-}
-
-/* ------------------------------------------------------------
-   Reminder/Hinweis-Banner (Health-Style)
-   ------------------------------------------------------------ */
-.list-reminders-banner {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-  padding: var(--space-2) var(--space-4);
-}
-
-.list-reminder-item {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  padding: var(--space-2) var(--space-3);
-  background: var(--c-surface);
-  border-radius: var(--radius-md);
-  border-left: 3px solid var(--c-text-muted);
-  font-size: var(--text-sm);
-}
-.list-reminder-item--urgent  { border-left-color: var(--c-danger); }
-.list-reminder-item--warning { border-left-color: var(--c-warning, #f59e0b); }
-.list-reminder-item--success { border-left-color: var(--c-success); }
-
-/* ------------------------------------------------------------
-   FAB (Floating Action Button)
-   ------------------------------------------------------------ */
-.list-fab {
-  position: fixed;
-  bottom: calc(env(safe-area-inset-bottom, 16px) + 16px);
-  right: 20px;
-  width: 54px;
-  height: 54px;
-  border-radius: 50%;
-  background: var(--c-primary);
-  color: #fff;
-  border: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  box-shadow: 0 4px 18px rgba(196,132,58,0.4);
-  font-size: 26px;
-  z-index: 80;
-  transition: transform 0.12s, box-shadow 0.12s;
-}
-.list-fab:active {
-  transform: scale(0.92);
-  box-shadow: 0 2px 10px rgba(196,132,58,0.3);
-}
-
-/* ------------------------------------------------------------
-   Load-More + Empty-List in Listen-Context
-   ------------------------------------------------------------ */
-.list-load-more {
-  text-align: center;
-  padding: var(--space-4);
-}
diff --git a/backend/static/css/utilities.css b/backend/static/css/utilities.css
deleted file mode 100644
index f9f5ec2..0000000
--- a/backend/static/css/utilities.css
+++ /dev/null
@@ -1,65 +0,0 @@
-/* ============================================================
-   BAN YARO — Utility-Klassen für häufige Inline-Patterns
-   Ergänzt design-system.css (Single-Property-Utilities sind dort)
-   ============================================================ */
-
-/* ------------------------------------------------------------
-   Text + Farb-Kombinationen (häufigste Inline-Patterns)
-   ------------------------------------------------------------ */
-.text-xs-muted     { font-size: var(--text-xs); color: var(--c-text-muted); }
-.text-xs-secondary { font-size: var(--text-xs); color: var(--c-text-secondary); }
-.text-sm-muted     { font-size: var(--text-sm); color: var(--c-text-muted); }
-.text-sm-secondary { font-size: var(--text-sm); color: var(--c-text-secondary); }
-
-/* Caption = Mini-Label/Hinweis unter einem Wert */
-.caption {
-  font-size: var(--text-xs);
-  color:     var(--c-text-secondary);
-  margin-top: 2px;
-}
-
-/* ------------------------------------------------------------
-   Flex-Layouts (kombiniert)
-   ------------------------------------------------------------ */
-.flex-gap-2     { display: flex; gap: var(--space-2); }
-.flex-gap-3     { display: flex; gap: var(--space-3); }
-.flex-col-gap-2 { display: flex; flex-direction: column; gap: var(--space-2); }
-.flex-col-gap-3 { display: flex; flex-direction: column; gap: var(--space-3); }
-.flex-col-gap-4 { display: flex; flex-direction: column; gap: var(--space-4); }
-
-.flex-center        { display: flex; align-items: center; }
-.flex-center-gap-1  { display: flex; align-items: center; gap: var(--space-1); }
-.flex-center-gap-2  { display: flex; align-items: center; gap: var(--space-2); }
-.flex-center-gap-3  { display: flex; align-items: center; gap: var(--space-3); }
-
-.flex-between       { display: flex; align-items: center; justify-content: space-between; }
-.flex-between-gap-2 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
-
-/* min-width:0 + flex:1 — verhindert Overflow in Flex-Children */
-.flex-1-min { flex: 1; min-width: 0; }
-
-/* ------------------------------------------------------------
-   Spacing-Lücken in design-system.css füllen
-   ------------------------------------------------------------ */
-.mb-1 { margin-bottom: var(--space-1); }
-.mb-3 { margin-bottom: var(--space-3); }
-.mt-1 { margin-top: var(--space-1); }
-.mt-3 { margin-top: var(--space-3); }
-
-/* ------------------------------------------------------------
-   Icon-Größen (statt width:NNpx;height:NNpx inline)
-   ------------------------------------------------------------ */
-.icon-xs { width: 12px; height: 12px; }
-.icon-sm { width: 14px; height: 14px; }
-.icon-md { width: 18px; height: 18px; }
-.icon-lg { width: 22px; height: 22px; }
-
-/* ------------------------------------------------------------
-   Form-Helper
-   ------------------------------------------------------------ */
-.label-block {
-  display:       block;
-  font-size:     var(--text-sm);
-  font-weight:   600;
-  margin-bottom: var(--space-1);
-}
diff --git a/backend/static/index.html b/backend/static/index.html
index 23df4c7..bf2434e 100644
--- a/backend/static/index.html
+++ b/backend/static/index.html
@@ -86,14 +86,24 @@
   <title>Ban Yaro</title>
 
   <!-- Theme + theme-color Statusleiste vor CSS setzen -->
-  <script src="/js/boot-early.js?v=1120"></script>
+  <script>
+    (function() {
+      var t = localStorage.getItem('by_theme');
+      var isDark = t === 'dark' || (t !== 'light' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+      var isAndroid = /android/i.test(navigator.userAgent);
+      if (t === 'dark')  document.documentElement.setAttribute('data-theme', 'dark');
+      if (t === 'light') document.documentElement.setAttribute('data-theme', 'light');
+      // Android: immer dunkel (Amber-Streifen nicht möglich transparent zu machen)
+      // iOS: black-translucent übernimmt das
+      var m = document.getElementById('meta-theme-color');
+      if (m) m.setAttribute('content', (isDark || isAndroid) ? '#0f1623' : '#C4843A');
+    })();
+  </script>
 
   <!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
-  <link rel="stylesheet" href="/css/design-system.css?v=1120">
-  <link rel="stylesheet" href="/css/layout.css?v=1120">
-  <link rel="stylesheet" href="/css/components.css?v=1120">
-  <link rel="stylesheet" href="/css/utilities.css?v=1120">
-  <link rel="stylesheet" href="/css/lists.css?v=1120">
+  <link rel="stylesheet" href="/css/design-system.css?v=1099">
+  <link rel="stylesheet" href="/css/layout.css?v=1099">
+  <link rel="stylesheet" href="/css/components.css?v=1099">
 </head>
 <body>
 
@@ -101,8 +111,7 @@
 <div id="offline-banner" aria-live="polite"
      style="display:none;position:fixed;top:0;left:0;right:0;z-index:9999;
             background:#1f2937;color:#f3f4f6;font-size:0.78rem;font-weight:500;
-            padding:calc(env(safe-area-inset-top, 0px) + 7px) 16px 7px;
-            align-items:center;justify-content:center;gap:8px;
+            padding:7px 16px;align-items:center;justify-content:center;gap:8px;
             box-shadow:0 2px 8px rgba(0,0,0,.3)">
   <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256">
     <path d="M213.92,210.62l-160-176A8,8,0,1,0,42.08,45.38L81.06,88.86A152.34,152.34,0,0,0,26.49,130a8,8,0,0,0,11,11.61,136.36,136.36,0,0,1,52-37.29l19.2,21.12A96.09,96.09,0,0,0,67.6,160.59,8,8,0,1,0,79,172.2a80.12,80.12,0,0,1,33.5-23.89L128,165.37V224a8,8,0,0,0,16,0V183.94l69.92,76.92a8,8,0,1,0,11.84-10.76ZM128,141.46,108.42,120A80.38,80.38,0,0,1,128,116a79.91,79.91,0,0,1,19.59,2.43l-19.59,23Zm0-85.46a167.9,167.9,0,0,1,101.51,34.17,8,8,0,1,0,9.72-12.72A183.82,183.82,0,0,0,128,40a183.5,183.5,0,0,0-48.55,6.55L95,64.18A168.23,168.23,0,0,1,128,56Zm57.09,72.41a8,8,0,0,0,11.22-1.36,8,8,0,0,0-1.36-11.22,136.72,136.72,0,0,0-31.62-18.23L178,114.26A120.52,120.52,0,0,1,185.09,128.41Z"/>
@@ -116,8 +125,7 @@
 <div id="verify-banner" aria-live="polite"
      style="display:none;position:fixed;top:0;left:0;right:0;z-index:9998;
             background:#d97706;color:#fff;font-size:0.8rem;font-weight:500;
-            padding:calc(env(safe-area-inset-top, 0px) + 8px) 16px 8px;
-            align-items:center;justify-content:center;gap:10px;
+            padding:8px 16px;align-items:center;justify-content:center;gap:10px;
             box-shadow:0 2px 8px rgba(0,0,0,.2)">
   <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256">
     <path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48ZM98.71,128,40,181.81V74.19Zm11.84,10.85,12,11.05a8,8,0,0,0,10.82,0l12-11.05,58,53.15H52.57ZM157.29,128,216,74.19V181.81ZM40,61.62l88,80.15,88-80.15Z"/>
@@ -318,7 +326,7 @@
     </div>
     <div id="header-actions"></div>
     <button id="header-user-btn" aria-label="Profil"
-            style="width:44px;height:44px;border-radius:50%;border:2px solid var(--c-border);
+            style="width:36px;height:36px;border-radius:50%;border:2px solid var(--c-border);
                    background:var(--c-surface-2);cursor:pointer;flex-shrink:0;
                    display:flex;align-items:center;justify-content:center;overflow:hidden;
                    padding:0;position:relative">
@@ -617,11 +625,11 @@
 <div id="modal-container"></div>
 
 <!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features -->
-<script src="/js/api.js?v=1120"></script>
-<script src="/js/ui.js?v=1120"></script>
-<script src="/js/app.js?v=1120"></script>
-<script src="/js/worlds.js?v=1120"></script>
-<script src="/js/offline-indicator.js?v=1120"></script>
+<script src="/js/api.js?v=1099"></script>
+<script src="/js/ui.js?v=1099"></script>
+<script src="/js/app.js?v=1099"></script>
+<script src="/js/worlds.js?v=1099"></script>
+<script src="/js/offline-indicator.js?v=1099"></script>
 
 <!-- Feature-Seiten werden lazy geladen -->
 
@@ -629,9 +637,130 @@
 <script defer src="/stats/script.js" data-website-id="d1b5fe13-0e6f-4461-a176-c5439cbbc27f" data-api-host="/stats"></script>
 
 
+<!-- Offline-Banner Logik -->
+<script>
+(function() {
+  function _updateBanner() {
+    var banner = document.getElementById('offline-banner');
+    if (!banner) return;
+    banner.style.display = navigator.onLine ? 'none' : 'flex';
+  }
+  window.addEventListener('offline', function() {
+    _updateBanner();
+    // Einmaliger Hinweis pro Session: App im Vordergrund lassen
+    if (!sessionStorage.getItem('by_offline_hint_shown')) {
+      sessionStorage.setItem('by_offline_hint_shown', '1');
+      setTimeout(function() {
+        window.UI?.toast?.info(
+          'App im Vordergrund lassen — so bleiben Offline-Funktionen wie GPS und Datenspeicherung aktiv.',
+          8000
+        );
+      }, 800);
+    }
+    // Queue-Count abfragen
+    if (navigator.serviceWorker) {
+      navigator.serviceWorker.ready.then(function(reg) {
+        if (reg.active) reg.active.postMessage({ type: 'QUEUE_COUNT' });
+      });
+    }
+  });
+  window.addEventListener('online', function() {
+    _updateBanner();
+    var badge = document.getElementById('offline-queue-badge');
+    if (badge) badge.style.display = 'none';
+    // Queue abarbeiten
+    if (navigator.serviceWorker) {
+      navigator.serviceWorker.ready.then(function(reg) {
+        if (reg.active) reg.active.postMessage({ type: 'PROCESS_QUEUE' });
+      });
+    }
+  });
+  // Initial prüfen
+  _updateBanner();
+})();
+</script>
 
-<!-- Boot: Offline-Banner + SW-Registration (extrahiert für CSP) -->
-<script src="/js/boot.js?v=1120"></script>
+<!-- Service Worker -->
+<script>
+  if ('serviceWorker' in navigator) {
+    window.addEventListener('load', () => {
+      navigator.serviceWorker.register('/sw.js', { updateViaCache: 'none' })
+        .then(reg => {
+          function _watchSW(sw) {
+            if (!sw) return;
+            sw.addEventListener('statechange', () => {
+              if (sw.state === 'activated') {
+                // Flag nur prüfen, nicht konsumieren — controllerchange konsumiert ihn
+                if (sessionStorage.getItem('by_skip_sw_reload')) return;
+                window.location.replace('/?_t=' + Date.now());
+              }
+            });
+          }
+          // Listener VOR update() registrieren — verhindert Race Condition
+          reg.addEventListener('updatefound', () => _watchSW(reg.installing));
+          // Falls SW bereits installiert (Seite wurde nach SW-Install neu geladen)
+          if (reg.installing) _watchSW(reg.installing);
+          reg.update();
+        })
+        .catch(err => console.warn('SW Registration failed:', err));
+    });
+
+    // Backup: erneut prüfen wenn App aus dem Hintergrund kommt
+    document.addEventListener('visibilitychange', () => {
+      if (document.visibilityState === 'visible') {
+        navigator.serviceWorker.getRegistration().then(reg => reg?.update());
+      }
+    });
+
+    // Backup: controllerchange (falls updatefound nicht feuert)
+    // NICHT registrieren wenn diese Seite selbst durch einen SW-Reload entstand (_t= im URL)
+    // — verhindert Dauerschleife wenn clients.claim() erst nach Seitenstart feuert
+    if (!window._BY_SW_RELOAD) {
+      navigator.serviceWorker.addEventListener('controllerchange', () => {
+        if (sessionStorage.getItem('by_skip_sw_reload')) {
+          sessionStorage.removeItem('by_skip_sw_reload');
+          return;
+        }
+        window.location.replace('/?_t=' + Date.now());
+      });
+    }
+
+    navigator.serviceWorker.addEventListener('message', e => {
+      if (e.data?.type === 'QUEUE_PROCESSED') {
+        const { synced, failed, total } = e.data;
+        if (total === 0) return;
+        if (synced > 0 && window.UI?.toast) {
+          window.UI.toast.success(
+            synced === 1
+              ? '1 offline gespeicherter Eintrag synchronisiert'
+              : `${synced} offline gespeicherte Einträge synchronisiert`
+          );
+          // Aktuelle Seite neu laden
+          window.App?.state && window.pages?.[window.App.state.page]?.module?.refresh?.();
+        }
+        if (failed > 0 && window.UI?.toast) {
+          window.UI.toast.warning(`${failed} Eintrag${failed > 1 ? 'e' : ''} noch nicht synchronisiert — kein Netz`);
+        }
+        return;
+      }
+      if (e.data?.type === 'QUEUE_COUNT') {
+        const badge = document.getElementById('offline-queue-badge');
+        if (badge) {
+          if (e.data.count > 0) {
+            badge.textContent = e.data.count;
+            badge.style.display = '';
+          } else {
+            badge.style.display = 'none';
+          }
+        }
+        return;
+      }
+      if (e.data?.type === 'CHECK_NEARBY_ALERTS') {
+        window.App?._checkNearbyAlerts?.();
+      }
+    });
+  }
+</script>
 
 
 </body>
diff --git a/backend/static/js/app.js b/backend/static/js/app.js
index bcdacdd..b275c15 100644
--- a/backend/static/js/app.js
+++ b/backend/static/js/app.js
@@ -3,7 +3,7 @@
    Router, State-Management, Navigation, Initialisierung.
    ============================================================ */
 
-const APP_VER     = '1120'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER     = '1099'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt
 window.APP_VER     = APP_VER;       // global verfügbar für andere Module (z.B. offline-indicator)
 window.APP_VERSION = APP_VERSION;
@@ -129,23 +129,16 @@ const App = (() => {
   function navigate(pageId, pushHistory = true, params = {}) {
     if (!pages[pageId]) return;
     // Neue Version erkannt → nur aktualisieren wenn kein Bearbeitungsfenster offen ist
-    // UND wenn nicht erst kürzlich force-update lief (Cooldown 10 Min) — verhindert Loop
-    // bei mehreren schnellen Deploys oder iOS-PWA-Cache-Quirks. localStorage überlebt
-    // App-Restarts (sessionStorage wäre bei PWA-Standalone-close weg).
     if (window._byUpdatePending) {
       const modalOpen = document.querySelector('#modal-container .modal-overlay') !== null;
-      let lastForce = 0;
-      try { lastForce = parseInt(localStorage.getItem('by_last_force_update') || '0', 10); } catch {}
-      const cooldownActive = (Date.now() - lastForce) < 10 * 60 * 1000;
-      if (!modalOpen && !cooldownActive) {
+      if (!modalOpen) {
         window._byUpdatePending = false;
         sessionStorage.setItem('by_updated_to', window._byNewVersion || '');
-        sessionStorage.setItem('by_update_target', pageId);
-        try { localStorage.setItem('by_last_force_update', String(Date.now())); } catch {}
+        sessionStorage.setItem('by_update_target', pageId); // Zielseite nach Update
         location.href = '/force-update';
         return;
       }
-      // Modal offen oder Cooldown → bei nächstem Seitenwechsel versuchen
+      // Modal offen → beim nächsten Seitenwechsel versuchen
     }
     if (window.Worlds?._visible) window.Worlds.hide();
 
diff --git a/backend/static/js/boot-early.js b/backend/static/js/boot-early.js
deleted file mode 100644
index 18fce13..0000000
--- a/backend/static/js/boot-early.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/* Theme-Setup und theme-color für Status-Leiste.
-   MUSS synchron im <head> VOR den CSS-Links laufen, sonst FOUC. */
-(function() {
-  var t = localStorage.getItem('by_theme');
-  var isDark = t === 'dark' || (t !== 'light' && window.matchMedia('(prefers-color-scheme: dark)').matches);
-  var isAndroid = /android/i.test(navigator.userAgent);
-  if (t === 'dark')  document.documentElement.setAttribute('data-theme', 'dark');
-  if (t === 'light') document.documentElement.setAttribute('data-theme', 'light');
-  // Android: immer dunkel (Amber-Streifen nicht transparent möglich)
-  // iOS: black-translucent übernimmt das
-  var m = document.getElementById('meta-theme-color');
-  if (m) m.setAttribute('content', (isDark || isAndroid) ? '#0f1623' : '#C4843A');
-})();
diff --git a/backend/static/js/boot.js b/backend/static/js/boot.js
deleted file mode 100644
index 9f54463..0000000
--- a/backend/static/js/boot.js
+++ /dev/null
@@ -1,127 +0,0 @@
-/* ============================================================
-   BAN YARO — Boot-Phase
-   Offline-Banner + Service Worker Registration + Update-Flow
-   Extrahiert aus index.html für CSP-Härtung (kein unsafe-inline)
-   ============================================================ */
-
-// ----------------------------------------------------------
-// Offline-Banner
-// ----------------------------------------------------------
-(function() {
-  function _updateBanner() {
-    var banner = document.getElementById('offline-banner');
-    if (!banner) return;
-    banner.style.display = navigator.onLine ? 'none' : 'flex';
-  }
-  window.addEventListener('offline', function() {
-    _updateBanner();
-    // Einmaliger Hinweis pro Session: App im Vordergrund lassen
-    if (!sessionStorage.getItem('by_offline_hint_shown')) {
-      sessionStorage.setItem('by_offline_hint_shown', '1');
-      setTimeout(function() {
-        window.UI?.toast?.info(
-          'App im Vordergrund lassen — so bleiben Offline-Funktionen wie GPS und Datenspeicherung aktiv.',
-          8000
-        );
-      }, 800);
-    }
-    // Queue-Count abfragen
-    if (navigator.serviceWorker) {
-      navigator.serviceWorker.ready.then(function(reg) {
-        if (reg.active) reg.active.postMessage({ type: 'QUEUE_COUNT' });
-      });
-    }
-  });
-  window.addEventListener('online', function() {
-    _updateBanner();
-    var badge = document.getElementById('offline-queue-badge');
-    if (badge) badge.style.display = 'none';
-    // Queue abarbeiten
-    if (navigator.serviceWorker) {
-      navigator.serviceWorker.ready.then(function(reg) {
-        if (reg.active) reg.active.postMessage({ type: 'PROCESS_QUEUE' });
-      });
-    }
-  });
-  _updateBanner();
-})();
-
-// ----------------------------------------------------------
-// Service Worker Registration + Update-Flow
-// ----------------------------------------------------------
-if ('serviceWorker' in navigator) {
-  window.addEventListener('load', function() {
-    navigator.serviceWorker.register('/sw.js', { updateViaCache: 'none' })
-      .then(function(reg) {
-        function _watchSW(sw) {
-          if (!sw) return;
-          sw.addEventListener('statechange', function() {
-            if (sw.state === 'activated') {
-              if (sessionStorage.getItem('by_skip_sw_reload')) return;
-              window.location.replace('/?_t=' + Date.now());
-            }
-          });
-        }
-        reg.addEventListener('updatefound', function() { _watchSW(reg.installing); });
-        if (reg.installing) _watchSW(reg.installing);
-        reg.update();
-      })
-      .catch(function(err) { console.warn('SW Registration failed:', err); });
-  });
-
-  // App aus dem Hintergrund: erneut prüfen
-  document.addEventListener('visibilitychange', function() {
-    if (document.visibilityState === 'visible') {
-      navigator.serviceWorker.getRegistration().then(function(reg) { if (reg) reg.update(); });
-    }
-  });
-
-  // Backup: controllerchange falls updatefound nicht feuert
-  // NICHT registrieren wenn diese Seite selbst durch SW-Reload entstand
-  if (!window._BY_SW_RELOAD) {
-    navigator.serviceWorker.addEventListener('controllerchange', function() {
-      if (sessionStorage.getItem('by_skip_sw_reload')) {
-        sessionStorage.removeItem('by_skip_sw_reload');
-        return;
-      }
-      window.location.replace('/?_t=' + Date.now());
-    });
-  }
-
-  navigator.serviceWorker.addEventListener('message', function(e) {
-    if (e.data && e.data.type === 'QUEUE_PROCESSED') {
-      var synced = e.data.synced, failed = e.data.failed, total = e.data.total;
-      if (total === 0) return;
-      if (synced > 0 && window.UI && window.UI.toast) {
-        window.UI.toast.success(
-          synced === 1
-            ? '1 offline gespeicherter Eintrag synchronisiert'
-            : synced + ' offline gespeicherte Einträge synchronisiert'
-        );
-        if (window.App && window.App.state && window.pages) {
-          var p = window.pages[window.App.state.page];
-          if (p && p.module && p.module.refresh) p.module.refresh();
-        }
-      }
-      if (failed > 0 && window.UI && window.UI.toast) {
-        window.UI.toast.warning(failed + ' Eintrag' + (failed > 1 ? 'e' : '') + ' noch nicht synchronisiert — kein Netz');
-      }
-      return;
-    }
-    if (e.data && e.data.type === 'QUEUE_COUNT') {
-      var badge = document.getElementById('offline-queue-badge');
-      if (badge) {
-        if (e.data.count > 0) {
-          badge.textContent = e.data.count;
-          badge.style.display = '';
-        } else {
-          badge.style.display = 'none';
-        }
-      }
-      return;
-    }
-    if (e.data && e.data.type === 'CHECK_NEARBY_ALERTS') {
-      if (window.App && window.App._checkNearbyAlerts) window.App._checkNearbyAlerts();
-    }
-  });
-}
diff --git a/backend/static/js/landing-init.js b/backend/static/js/landing-init.js
deleted file mode 100644
index b4bcb53..0000000
--- a/backend/static/js/landing-init.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/* ============================================================
-   BAN YARO — Landing Page Init
-   Dark-Mode-Check, Scroll-Animationen, Live-Stats, Stay-In-App
-   Extrahiert aus landing.html für CSP-Härtung
-   ============================================================ */
-
-// Dark Mode (CSS-Klasse)
-(function() {
-  var mq = window.matchMedia('(prefers-color-scheme: dark)');
-  if (mq.matches) document.documentElement.classList.add('dark');
-  mq.addEventListener('change', function(e) {
-    document.documentElement.classList.toggle('dark', e.matches);
-  });
-})();
-
-document.addEventListener('DOMContentLoaded', function() {
-
-  // App-Links: kein Redirect-Loop (ersetzt onclick="sessionStorage.setItem(...)")
-  document.querySelectorAll('[data-stay-in-app]').forEach(function(el) {
-    el.addEventListener('click', function() {
-      sessionStorage.setItem('by_stay_in_app', '1');
-    });
-  });
-
-  // Hundebesitzer-Details-Toggle (ersetzt inline onclick)
-  document.querySelectorAll('[data-toggle-target]').forEach(function(el) {
-    el.addEventListener('click', function() {
-      var c = document.getElementById(el.dataset.toggleTarget);
-      if (!c) return;
-      c.classList.toggle('open');
-      var open = c.classList.contains('open');
-      var openTxt  = el.dataset.toggleTextOpen  || '▴ Weniger anzeigen';
-      var closeTxt = el.dataset.toggleTextClose || el.textContent;
-      if (!el.dataset.toggleTextClose) el.dataset.toggleTextClose = closeTxt;
-      el.textContent = open ? openTxt : el.dataset.toggleTextClose;
-    });
-  });
-
-  // Auch ältere App-Links erfassen (Fallback ohne data-stay-in-app)
-  document.querySelectorAll('a[href="/"], a[href^="/#"]').forEach(function(a) {
-    a.addEventListener('click', function() {
-      sessionStorage.setItem('by_stay_in_app', '1');
-    });
-  });
-
-  // Scroll-Animationen
-  var _observer = new IntersectionObserver(function(entries) {
-    entries.forEach(function(e) {
-      if (e.isIntersecting) {
-        e.target.classList.add('visible');
-        _observer.unobserve(e.target);
-      }
-    });
-  }, { threshold: 0.12 });
-
-  document.querySelectorAll('.outcome-card, .feature-card, .usp-item, .pricing-card').forEach(function(el) {
-    el.classList.add('fade-up');
-    _observer.observe(el);
-  });
-  document.querySelectorAll('.fade-up').forEach(function(el) {
-    _observer.observe(el);
-  });
-
-  // Live-Zahlen
-  var fmt = new Intl.NumberFormat('de-DE');
-  fetch('/api/stats/public')
-    .then(function(r) { return r.json(); })
-    .then(function(d) {
-      function set(id, val) {
-        var el = document.getElementById(id);
-        if (el) el.textContent = fmt.format(val);
-      }
-      set('big-users',     d.users);
-      set('big-dogs',      d.dogs);
-      set('big-km',        d.km);
-      set('big-posts',     d.forum_posts);
-      set('big-diary',     d.diary_entries);
-      set('big-kotbeutel', d.kotbeutel);
-
-      var heroStats = document.getElementById('hero-stats');
-      if (!heroStats || !d.users) return;
-
-      var items = [
-        { val: d.users,         label: 'Hundemenschen'          },
-        { val: d.dogs,          label: 'Hunde'                  },
-        { val: d.km,            label: 'km Gassi-Wege'          },
-        { val: d.diary_entries, label: 'Tagebuch-Einträge'      },
-        { val: d.kotbeutel,     label: 'Mülleimer für Kotbeutel'},
-      ];
-      items.sort(function(a, b) { return a.val - b.val; });
-
-      heroStats.innerHTML = items.map(function(item, i) {
-        return (i > 0 ? '<span class="sep">·</span>' : '') +
-               '<strong>' + fmt.format(item.val) + '</strong> ' + item.label;
-      }).join('');
-      heroStats.style.display = 'flex';
-    })
-    .catch(function() {});
-});
diff --git a/backend/static/js/offline-indicator.js b/backend/static/js/offline-indicator.js
index 234fca0..ad83c2b 100644
--- a/backend/static/js/offline-indicator.js
+++ b/backend/static/js/offline-indicator.js
@@ -234,42 +234,6 @@ window.OfflineIndicator = (() => {
     navigator.serviceWorker.controller.postMessage({ type: 'CACHE_TILES', urls });
   }
 
-  // ----------------------------------------------------------
-  // Storage-Quota überwachen — iOS-PWA hat ~50MB Limit
-  // ----------------------------------------------------------
-  let _storageWarned = false;
-  async function _checkStorageQuota() {
-    if (!navigator.storage?.estimate) return;
-    try {
-      const { usage = 0, quota = 0 } = await navigator.storage.estimate();
-      if (!quota) return;
-      const ratio = usage / quota;
-
-      // Ab 80% Auslastung: Tile-Cache aggressiv trimmen (per SW-Message)
-      if (ratio >= 0.8) {
-        const cache = await caches.open(CACHE_TILES).catch(() => null);
-        if (cache) {
-          const keys = await cache.keys();
-          // Auf 100 Tiles trimmen (statt 500) bei knappem Speicher
-          if (keys.length > 100) {
-            const toDelete = keys.slice(0, keys.length - 100);
-            await Promise.all(toDelete.map(k => cache.delete(k).catch(() => {})));
-          }
-        }
-        // Einmaliger User-Hinweis pro Session bei kritischer Auslastung (>90%)
-        if (ratio >= 0.9 && !_storageWarned && window.UI?.toast) {
-          _storageWarned = true;
-          const mb = Math.round(usage / 1024 / 1024);
-          const max = Math.round(quota / 1024 / 1024);
-          window.UI.toast.warning(
-            `Speicher fast voll (${mb}/${max} MB) — älteste Karten-Tiles werden gelöscht.`,
-            6000
-          );
-        }
-      }
-    } catch {}
-  }
-
   // Page-Module proaktiv fetchen — falls SW-Install sie noch nicht alle hatte
   function _prefetchPages() {
     ['diary','health','map','walks','erste-hilfe','notes','expenses','routes','poison','lost']
@@ -341,8 +305,7 @@ window.OfflineIndicator = (() => {
         if (e?.data?.type === 'CACHE_TILES_PROGRESS')  refresh();
       });
     }
-    _checkStorageQuota();                            // beim Init prüfen
-    setInterval(() => { _prefetchData(); refresh(); _checkStorageQuota(); }, 60_000);
+    setInterval(() => { _prefetchData(); refresh(); }, 60_000);
   }
 
   return { init, refresh, openStatus };
diff --git a/backend/static/js/pages/admin.js b/backend/static/js/pages/admin.js
index 5002350..4a1a63a 100644
--- a/backend/static/js/pages/admin.js
+++ b/backend/static/js/pages/admin.js
@@ -202,13 +202,13 @@ window.Page_admin = (() => {
     // Manager-Tabelle
     const managerRows = d.managers.map(m => `
       <tr>
-        <td style="font-weight:600">${UI.escape(m.name)}</td>
-        <td class="text-right">${m.published}</td>
-        <td class="text-right">${m.with_link}
+        <td style="font-weight:600">${_esc(m.name)}</td>
+        <td style="text-align:right">${m.published}</td>
+        <td style="text-align:right">${m.with_link}
           ${m.published > 0 ? `<span style="font-size:10px;color:var(--c-text-muted)">
             (${Math.round(m.with_link/m.published*100)}%)</span>` : ''}</td>
-        <td class="text-right">${m.scheduled}</td>
-        <td class="text-right">${m.ideas}</td>
+        <td style="text-align:right">${m.scheduled}</td>
+        <td style="text-align:right">${m.ideas}</td>
         <td style="text-align:right;color:var(--c-text-muted)">${m.total}</td>
       </tr>`).join('');
 
@@ -241,13 +241,13 @@ window.Page_admin = (() => {
       <tr>
         <td style="color:var(--c-text-muted);white-space:nowrap">${_fmt(p.published_at)}</td>
         <td style="font-weight:500;max-width:200px;overflow:hidden;text-overflow:ellipsis;
-                   white-space:nowrap">${UI.escape(p.topic)}</td>
+                   white-space:nowrap">${_esc(p.topic)}</td>
         <td>${_PL[p.platform]||p.platform||'–'}</td>
-        <td style="font-size:10px;color:var(--c-text-muted)">${UI.escape(p.category||'–')}</td>
+        <td style="font-size:10px;color:var(--c-text-muted)">${_esc(p.category||'–')}</td>
         <td>${p.ai_score ? '⭐'.repeat(p.ai_score) : '–'}</td>
-        <td style="font-weight:500">${UI.escape(p.manager||'–')}</td>
+        <td style="font-weight:500">${_esc(p.manager||'–')}</td>
         <td>${p.post_url
-          ? `<a href="${UI.escape(p.post_url)}" target="_blank" rel="noopener"
+          ? `<a href="${_esc(p.post_url)}" target="_blank" rel="noopener"
                style="font-size:11px;color:var(--c-primary)">🔗 Link</a>`
           : `<span style="font-size:11px;color:var(--c-text-muted)">–</span>`}</td>
       </tr>`).join('');
@@ -255,24 +255,24 @@ window.Page_admin = (() => {
     el.innerHTML = `
       <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-bottom:var(--space-4)">
         <!-- Plattform -->
-        <div class="card p-4">
+        <div class="card" style="padding:var(--space-4)">
           <div style="font-size:var(--text-sm);font-weight:700;margin-bottom:var(--space-3)">
             Veröffentlicht nach Plattform
           </div>
-          ${platBars || '<div class="text-sm-muted">Noch keine Posts</div>'}
+          ${platBars || '<div style="color:var(--c-text-muted);font-size:var(--text-sm)">Noch keine Posts</div>'}
         </div>
         <!-- Timeline -->
-        <div class="card p-4">
+        <div class="card" style="padding:var(--space-4)">
           <div style="font-size:var(--text-sm);font-weight:700;margin-bottom:var(--space-3)">
             Posts pro Monat
           </div>
-          ${monthBars || '<div class="text-sm-muted">Noch keine Posts</div>'}
+          ${monthBars || '<div style="color:var(--c-text-muted);font-size:var(--text-sm)">Noch keine Posts</div>'}
         </div>
       </div>
 
       <!-- Manager -->
       ${d.managers.length ? `
-      <div class="card adm-table-card mb-4">
+      <div class="card adm-table-card" style="margin-bottom:var(--space-4)">
         <div style="padding:var(--space-3) var(--space-4);font-size:var(--text-xs);font-weight:700;
                     text-transform:uppercase;letter-spacing:.05em;color:var(--c-text-secondary);
                     border-bottom:1px solid var(--c-border)">Manager-Übersicht</div>
@@ -280,11 +280,11 @@ window.Page_admin = (() => {
           <table class="adm-table">
             <thead><tr>
               <th>Manager</th>
-              <th class="text-right">Veröffentlicht</th>
-              <th class="text-right">Mit Link</th>
-              <th class="text-right">Geplant</th>
-              <th class="text-right">Ideen</th>
-              <th class="text-right">Gesamt</th>
+              <th style="text-align:right">Veröffentlicht</th>
+              <th style="text-align:right">Mit Link</th>
+              <th style="text-align:right">Geplant</th>
+              <th style="text-align:right">Ideen</th>
+              <th style="text-align:right">Gesamt</th>
             </tr></thead>
             <tbody>${managerRows}</tbody>
           </table>
@@ -319,7 +319,7 @@ window.Page_admin = (() => {
     try { d = await API.get('/admin/analytics'); }
     catch (err) {
       el.innerHTML = `<div style="padding:var(--space-4);color:var(--c-danger);font-size:var(--text-sm)">
-        ${UI.icon('warning')} Fehler: ${UI.escape(err.message || String(err))}</div>`;
+        ${UI.icon('warning')} Fehler: ${_esc(err.message || String(err))}</div>`;
       return;
     }
 
@@ -367,7 +367,7 @@ window.Page_admin = (() => {
         const x = n === 1 ? W/2 : padX + i * ((W - 2*padX) / (n - 1));
         const date = pvData[i]?.x ? new Date(pvData[i].x).toLocaleDateString('de',{day:'2-digit',month:'2-digit'}) : '';
         return `<text x="${x.toFixed(0)}" y="${H+14}" text-anchor="middle"
-                      font-size="10" fill="currentColor" class="text-muted">${date}</text>`;
+                      font-size="10" fill="currentColor" style="color:var(--c-text-muted)">${date}</text>`;
       }).join('');
 
       return `<svg viewBox="0 0 ${W} ${H+18}" style="width:100%;height:100px;display:block;overflow:visible"
@@ -389,14 +389,14 @@ window.Page_admin = (() => {
 
     // Balken-Chart für Top-Pages / Referrers
     function _barChart(items, labelKey = 'x', valKey = 'y') {
-      if (!items?.length) return `<p class="text-sm-muted">Keine Daten</p>`;
+      if (!items?.length) return `<p style="color:var(--c-text-muted);font-size:var(--text-sm)">Keine Daten</p>`;
       const maxV = Math.max(...items.map(p => p[valKey] ?? 0), 1);
-      return `<div class="flex-col-gap-2">
+      return `<div style="display:flex;flex-direction:column;gap:var(--space-2)">
         ${items.map(p => {
           const pct = ((p[valKey] ?? 0) / maxV * 100).toFixed(0);
           return `<div>
             <div style="display:flex;justify-content:space-between;font-size:var(--text-xs);margin-bottom:3px">
-              <span style="color:var(--c-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:78%">${UI.escape(p[labelKey] || '—')}</span>
+              <span style="color:var(--c-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:78%">${_esc(p[labelKey] || '—')}</span>
               <span style="color:var(--c-text-secondary);flex-shrink:0;margin-left:var(--space-2)">${fmt(p[valKey] ?? 0)}</span>
             </div>
             <div style="height:4px;border-radius:2px;background:var(--c-surface-2)">
@@ -423,7 +423,7 @@ window.Page_admin = (() => {
         </div>
 
         <!-- Verlaufschart 30 Tage -->
-        <div class="card p-4">
+        <div class="card" style="padding:var(--space-4)">
           <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3)">
             <span style="font-size:var(--text-sm);font-weight:var(--weight-semibold)">Verlauf — letzte 30 Tage</span>
             <div style="display:flex;gap:var(--space-3);font-size:10px;color:var(--c-text-muted)">
@@ -440,7 +440,7 @@ window.Page_admin = (() => {
         </div>
 
         <!-- Jahres-Übersicht -->
-        <div class="card p-4">
+        <div class="card" style="padding:var(--space-4)">
           <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)">
             <span style="font-size:var(--text-sm);font-weight:var(--weight-semibold)">Jahresübersicht — letzte 12 Monate</span>
             <div style="display:flex;gap:var(--space-3);font-size:10px;color:var(--c-text-muted)">
@@ -492,7 +492,7 @@ window.Page_admin = (() => {
                 <rect x="${x + Math.floor(barW*0.55)}" y="${H - 20 - regH}" width="${Math.floor(barW*0.4)}" height="${regH}"
                       fill="var(--c-success)" opacity="0.8" rx="2"/>
                 <text x="${x + barW/2}" y="${H - 4}" text-anchor="middle"
-                      font-size="9" fill="currentColor" class="text-muted">${label}</text>
+                      font-size="9" fill="currentColor" style="color:var(--c-text-muted)">${label}</text>
               `;
             }).join('');
 
@@ -503,12 +503,12 @@ window.Page_admin = (() => {
 
         <!-- Top Seiten + Referrers nebeneinander -->
         <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)">
-          <div class="card p-4">
+          <div class="card" style="padding:var(--space-4)">
             <div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
                         margin-bottom:var(--space-3)">Top Seiten — 30 Tage</div>
             ${_barChart(d.top_pages)}
           </div>
-          <div class="card p-4">
+          <div class="card" style="padding:var(--space-4)">
             <div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
                         margin-bottom:var(--space-3)">Referrers — 30 Tage</div>
             ${_barChart(d.referrers)}
@@ -536,7 +536,7 @@ window.Page_admin = (() => {
                             padding:var(--space-2) var(--space-3);background:var(--c-surface-2);
                             border-radius:var(--radius-md)">
           <span style="width:8px;height:8px;border-radius:50%;background:var(--c-text-muted);flex-shrink:0"></span>
-          <span class="text-xs-muted">KI-Modus: <strong>off</strong></span>
+          <span style="font-size:var(--text-xs);color:var(--c-text-muted)">KI-Modus: <strong>off</strong></span>
         </div>`;
       }
       const dot   = ki.local_reachable ? 'var(--c-success)' : 'var(--c-danger)';
@@ -548,8 +548,8 @@ window.Page_admin = (() => {
         <span style="width:8px;height:8px;border-radius:50%;background:${dot};flex-shrink:0;
                      box-shadow:0 0 4px ${dot}"></span>
         <span style="font-size:var(--text-xs);color:var(--c-text-secondary);font-weight:600">${label}</span>
-        <span class="text-xs-muted">·</span>
-        <span style="font-size:var(--text-xs);color:var(--c-text-muted);font-family:monospace">${UI.escape(model)}</span>
+        <span style="font-size:var(--text-xs);color:var(--c-text-muted)">·</span>
+        <span style="font-size:var(--text-xs);color:var(--c-text-muted);font-family:monospace">${_esc(model)}</span>
         <span style="margin-left:auto;font-size:10px;padding:1px 6px;border-radius:10px;
                      background:var(--c-surface);color:var(--c-text-muted);border:1px solid var(--c-border)">
           Modus: ${ki.local_reachable ? 'local' : 'cloud'}
@@ -576,7 +576,7 @@ window.Page_admin = (() => {
         ${_statCard('squares-four',    'Gecachte Tiles',     s.osm_tiles.toLocaleString('de'), 'var(--c-text-secondary)', 'system')}
       </div>
 
-      <div class="card p-4">
+      <div class="card" style="padding:var(--space-4)">
         <!-- Header -->
         <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3)">
           <p style="font-size:var(--text-sm);font-weight:600;margin:0;display:flex;align-items:center;gap:var(--space-2)">
@@ -601,7 +601,7 @@ window.Page_admin = (() => {
           ].map(([label, val, color]) => `
             <span style="font-size:var(--text-xs);padding:2px 8px;border-radius:100px;
                          background:var(--c-surface-2);border:1px solid var(--c-border);white-space:nowrap">
-              <span class="text-muted">${label}</span>
+              <span style="color:var(--c-text-muted)">${label}</span>
               <strong style="color:${color};margin-left:3px">${val ?? 0}</strong>
             </span>`).join('')}
         </div>
@@ -618,7 +618,7 @@ window.Page_admin = (() => {
           }).join(' ');
           const first = hist[0]?.date?.slice(5) || '';
           const last  = hist[hist.length-1]?.date?.slice(5) || '';
-          return `<div class="mb-3">
+          return `<div style="margin-bottom:var(--space-3)">
             <svg viewBox="0 0 ${W} ${H}" style="width:100%;height:60px;display:block" preserveAspectRatio="none">
               <polyline points="${pts}" fill="none" stroke="var(--c-primary)" stroke-width="1.5" stroke-linejoin="round"/>
             </svg>
@@ -641,11 +641,11 @@ window.Page_admin = (() => {
             </tr></thead>
             <tbody>
               ${(kiH.top_users).map(u => `<tr>
-                <td style="font-weight:600">${UI.escape(u.name)}</td>
-                <td class="text-muted">${UI.escape(u.email.length > 22 ? u.email.split('@')[1] : u.email)}</td>
+                <td style="font-weight:600">${_esc(u.name)}</td>
+                <td style="color:var(--c-text-muted)">${_esc(u.email.length > 22 ? u.email.split('@')[1] : u.email)}</td>
                 <td style="color:var(--c-primary);font-weight:600">${u.cloud}</td>
                 <td>${u.total}</td>
-                <td class="text-muted">${u.last_date?.slice(5) || '—'}</td>
+                <td style="color:var(--c-text-muted)">${u.last_date?.slice(5) || '—'}</td>
               </tr>`).join('')}
             </tbody>
           </table>
@@ -664,25 +664,25 @@ window.Page_admin = (() => {
         const label = t => POI_LABELS[t] || t;
         const row = ([type, count]) => `
             <div style="display:flex;justify-content:space-between;font-size:var(--text-sm)">
-              <span class="text-secondary">${label(type)}</span>
+              <span style="color:var(--c-text-secondary)">${label(type)}</span>
               <span style="font-weight:600">${count.toLocaleString('de')}</span>
             </div>`;
         const userByType = s.user_poi_by_type || {};
         const userTotal  = s.user_poi_total ?? 0;
         return `
-        <div class="card p-4">
+        <div class="card" style="padding:var(--space-4)">
           <p style="font-size:var(--text-sm);font-weight:600;margin:0 0 var(--space-3)">
             OSM-Cache nach Typ <span style="color:var(--c-text-muted);font-weight:400">— ${(s.osm_total || 0).toLocaleString('de')} gecacht</span>
           </p>
-          <div class="flex-col-gap-2">
+          <div style="display:flex;flex-direction:column;gap:var(--space-2)">
             ${Object.entries(s.osm_by_type).map(row).join('')}
           </div>
         </div>
-        <div class="card p-4">
+        <div class="card" style="padding:var(--space-4)">
           <p style="font-size:var(--text-sm);font-weight:600;margin:0 0 var(--space-3)">
             Nutzer-POIs nach Typ <span style="color:var(--c-text-muted);font-weight:400">— ${userTotal.toLocaleString('de')} gesamt</span>
           </p>
-          <div class="flex-col-gap-2">
+          <div style="display:flex;flex-direction:column;gap:var(--space-2)">
             ${Object.keys(userByType).length
               ? Object.entries(userByType).map(row).join('')
               : '<div style="color:var(--c-text-muted);font-size:var(--text-sm);text-align:center;padding:var(--space-2)">Noch keine Nutzer-POIs</div>'}
@@ -691,7 +691,7 @@ window.Page_admin = (() => {
       })()}
 
       <!-- Social Media Tracking -->
-      <div class="card p-4">
+      <div class="card" style="padding:var(--space-4)">
         <p style="font-size:var(--text-sm);font-weight:600;margin:0 0 var(--space-3)">
           📱 Social Media Tracking</p>
         <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);
@@ -709,7 +709,7 @@ window.Page_admin = (() => {
             </div>`).join('')}
         </div>
         ${Object.keys(s.social_by_cat||{}).length ? `
-        <div class="mb-3">
+        <div style="margin-bottom:var(--space-3)">
           <div style="font-size:11px;color:var(--c-text-muted);margin-bottom:6px;
                       font-weight:600;text-transform:uppercase">Kategorien</div>
           <div style="display:flex;gap:6px;flex-wrap:wrap">
@@ -743,9 +743,9 @@ window.Page_admin = (() => {
         </div>` : ''}
       </div>
 
-      <div class="card p-4">
+      <div class="card" style="padding:var(--space-4)">
         <p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin:0;line-height:1.6">
-          <svg class="ph-icon" aria-hidden="true" class="text-primary">
+          <svg class="ph-icon" aria-hidden="true" style="color:var(--c-primary)">
             <use href="/icons/phosphor.svg#info"></use>
           </svg>
           Ersten Admin per SQL setzen:
@@ -826,7 +826,7 @@ window.Page_admin = (() => {
       <div style="margin-bottom:var(--space-2);font-size:var(--text-xs);color:var(--c-text-muted)">
         ${total} Nutzer gefunden
       </div>
-      <div class="flex-col-gap-2">
+      <div style="display:flex;flex-direction:column;gap:var(--space-2)">
         ${users.map(u => `
           <div class="card" style="padding:var(--space-3) var(--space-4);
                ${u.is_banned ? 'opacity:0.6;border-left:3px solid var(--c-danger)' : ''}">
@@ -837,24 +837,24 @@ window.Page_admin = (() => {
                           background:var(--c-surface-2);
                           display:flex;align-items:center;justify-content:center;
                           font-weight:var(--weight-bold);color:var(--c-text-secondary)">
-                ${UI.escape(u.name[0].toUpperCase())}
+                ${_esc(u.name[0].toUpperCase())}
               </div>
 
               <!-- Info -->
-              <div class="flex-1-min">
+              <div style="flex:1;min-width:0">
                 <div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--c-text)">
-                  ${UI.escape(u.name)}
+                  ${_esc(u.name)}
                   ${u.is_banned ? `<span style="font-size:10px;padding:1px 5px;border-radius:3px;
                                               background:var(--c-danger);color:#fff;margin-left:4px">
                                     GESPERRT</span>` : ''}
                 </div>
-                <div class="text-xs-muted">
-                  ${UI.escape(u.email)} ·
+                <div style="font-size:var(--text-xs);color:var(--c-text-muted)">
+                  ${_esc(u.email)} ·
                   <span style="color:${u.rolle === 'admin' ? 'var(--c-danger)' : u.rolle === 'moderator' ? '#f59e0b' : 'var(--c-text-muted)'}">
-                    ${UI.escape(u.rolle)}
+                    ${_esc(u.rolle)}
                   </span>
                   · <span style="color:${u.subscription_tier && u.subscription_tier !== 'standard' ? 'var(--c-primary)' : 'var(--c-text-muted)'}">
-                      ${UI.escape(u.subscription_tier || 'standard')}
+                      ${_esc(u.subscription_tier || 'standard')}
                     </span>
                   · ${u.dog_count} Hund${u.dog_count !== 1 ? 'e' : ''}
                   · ${u.thread_count} Threads
@@ -875,29 +875,29 @@ window.Page_admin = (() => {
               <!-- Aktionen -->
               <div style="display:flex;gap:var(--space-1);flex-shrink:0">
                 ${u.is_banned
-                  ? `<button class="btn btn-sm btn-ghost adm-unban" data-uid="${u.id}" data-name="${UI.escape(u.name)}"
-                             title="Sperre aufheben" class="text-success">
+                  ? `<button class="btn btn-sm btn-ghost adm-unban" data-uid="${u.id}" data-name="${_esc(u.name)}"
+                             title="Sperre aufheben" style="color:var(--c-success)">
                        <svg class="ph-icon"><use href="/icons/phosphor.svg#lock-open"></use></svg>
                      </button>`
-                  : `<button class="btn btn-sm btn-ghost adm-ban" data-uid="${u.id}" data-name="${UI.escape(u.name)}"
-                             title="Sperren" class="text-danger">
+                  : `<button class="btn btn-sm btn-ghost adm-ban" data-uid="${u.id}" data-name="${_esc(u.name)}"
+                             title="Sperren" style="color:var(--c-danger)">
                        <svg class="ph-icon"><use href="/icons/phosphor.svg#lock"></use></svg>
                      </button>`
                 }
                 ${isAdmin ? `
                   <button class="btn btn-sm btn-ghost adm-rolle" data-uid="${u.id}"
-                          data-name="${UI.escape(u.name)}" data-rolle="${UI.escape(u.rolle)}"
+                          data-name="${_esc(u.name)}" data-rolle="${_esc(u.rolle)}"
                           title="Rolle ändern">
                     <svg class="ph-icon"><use href="/icons/phosphor.svg#shield"></use></svg>
                   </button>
                   <button class="btn btn-sm btn-ghost adm-tier" data-uid="${u.id}"
-                          data-name="${UI.escape(u.name)}" data-tier="${UI.escape(u.subscription_tier || 'standard')}"
+                          data-name="${_esc(u.name)}" data-tier="${_esc(u.subscription_tier || 'standard')}"
                           title="Abo-Stufe ändern">
                     <svg class="ph-icon"><use href="/icons/phosphor.svg#star"></use></svg>
                   </button>
                   <button class="btn btn-sm btn-ghost adm-delete" data-uid="${u.id}"
-                          data-name="${UI.escape(u.name)}" title="Löschen"
-                          class="text-danger">
+                          data-name="${_esc(u.name)}" title="Löschen"
+                          style="color:var(--c-danger)">
                     <svg class="ph-icon"><use href="/icons/phosphor.svg#trash"></use></svg>
                   </button>
                 ` : ''}
@@ -953,7 +953,7 @@ window.Page_admin = (() => {
         <p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin:0 0 var(--space-4)">
           Aktuelle Rolle: <strong>${currentRolle}</strong>
         </p>
-        <div class="flex-col-gap-2">
+        <div style="display:flex;flex-direction:column;gap:var(--space-2)">
           ${rollen.map(r => `
             <button class="btn btn-secondary adm-rolle-choice" data-rolle="${r}" form="">
               ${r === 'admin' ? `<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#shield"></use></svg>` : ''}
@@ -994,7 +994,7 @@ window.Page_admin = (() => {
         <p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin:0 0 var(--space-4)">
           Aktuelle Stufe: <strong>${currentTier}</strong>
         </p>
-        <div class="flex-col-gap-2">
+        <div style="display:flex;flex-direction:column;gap:var(--space-2)">
           ${tiers.map(t => `
             <button class="btn ${t === currentTier ? 'btn-primary' : 'btn-secondary'} adm-tier-choice"
                     data-tier="${t}" form="" ${t === currentTier ? 'disabled' : ''}>
@@ -1079,26 +1079,26 @@ window.Page_admin = (() => {
         return;
       }
       el.innerHTML = `
-        <div class="flex-col-gap-3">
+        <div style="display:flex;flex-direction:column;gap:var(--space-3)">
           ${reports.map(r => `
             <div class="card" style="padding:var(--space-4);
                  ${r.resolved ? 'opacity:0.5' : 'border-left:3px solid var(--c-danger)'}">
               <div style="display:flex;align-items:flex-start;gap:var(--space-3)">
-                <div class="flex-1-min">
+                <div style="flex:1;min-width:0">
                   <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-bottom:var(--space-1)">
                     ${r.resolved ? '✓ Erledigt · ' : ''}
-                    ${UI.escape(r.target_type)} #${r.target_id} ·
-                    Gemeldet von <strong>${UI.escape(r.melder_name)}</strong>
+                    ${_esc(r.target_type)} #${r.target_id} ·
+                    Gemeldet von <strong>${_esc(r.melder_name)}</strong>
                   </div>
                   <div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
                                color:var(--c-text);margin-bottom:var(--space-1)">
-                    Grund: ${UI.escape(r.grund)}
+                    Grund: ${_esc(r.grund)}
                   </div>
                   ${r.content_preview ? `
                     <div style="font-size:var(--text-xs);color:var(--c-text-secondary);
                                  padding:var(--space-2) var(--space-3);background:var(--c-surface-2);
                                  border-radius:var(--radius-sm)">
-                      ${UI.escape(r.content_preview)}
+                      ${_esc(r.content_preview)}
                     </div>` : ''}
                 </div>
                 <div style="display:flex;flex-direction:column;gap:var(--space-2);flex-shrink:0">
@@ -1110,7 +1110,7 @@ window.Page_admin = (() => {
                   ${!r.resolved ? `
                     <button class="btn btn-sm btn-ghost adm-del-content"
                             data-type="${r.target_type}" data-id="${r.target_id}"
-                            title="Inhalt löschen" class="text-danger">
+                            title="Inhalt löschen" style="color:var(--c-danger)">
                       <svg class="ph-icon"><use href="/icons/phosphor.svg#trash"></use></svg>
                     </button>` : ''}
                 </div>
@@ -1166,19 +1166,19 @@ window.Page_admin = (() => {
       return;
     }
     el.innerHTML = `
-      <div class="flex-col-gap-2">
+      <div style="display:flex;flex-direction:column;gap:var(--space-2)">
         ${threads.map(t => `
           <div class="card" style="padding:var(--space-3) var(--space-4);
                ${t.is_deleted ? 'opacity:0.5;border-left:3px solid var(--c-danger)' : ''}
                ${t.is_locked ? 'border-left:3px solid #f59e0b' : ''}">
             <div style="display:flex;align-items:center;gap:var(--space-3)">
-              <div class="flex-1-min">
+              <div style="flex:1;min-width:0">
                 <div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
                              color:var(--c-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
-                  ${t.is_deleted ? '<s>' : ''}${UI.escape(t.titel)}${t.is_deleted ? '</s>' : ''}
+                  ${t.is_deleted ? '<s>' : ''}${_esc(t.titel)}${t.is_deleted ? '</s>' : ''}
                 </div>
-                <div class="text-xs-muted">
-                  von ${UI.escape(t.autor_name)} ·
+                <div style="font-size:var(--text-xs);color:var(--c-text-muted)">
+                  von ${_esc(t.autor_name)} ·
                   ${t.antworten} Antworten ·
                   ${t.is_pinned ? '📌 ' : ''}${t.is_locked ? '🔒 ' : ''}${t.is_deleted ? '🗑 gelöscht' : ''}
                 </div>
@@ -1194,12 +1194,12 @@ window.Page_admin = (() => {
                     <svg class="ph-icon"><use href="/icons/phosphor.svg#${t.is_locked ? 'lock-open' : 'lock'}"></use></svg>
                   </button>
                   <button class="btn btn-sm btn-ghost adm-del-thread" data-tid="${t.id}"
-                          title="Löschen" class="text-danger">
+                          title="Löschen" style="color:var(--c-danger)">
                     <svg class="ph-icon"><use href="/icons/phosphor.svg#trash"></use></svg>
                   </button>
                 ` : `
                   <button class="btn btn-sm btn-ghost adm-restore-thread" data-tid="${t.id}"
-                          title="Wiederherstellen" class="text-success">
+                          title="Wiederherstellen" style="color:var(--c-success)">
                     <svg class="ph-icon"><use href="/icons/phosphor.svg#arrow-square-out"></use></svg>
                   </button>
                 `}
@@ -1311,11 +1311,11 @@ window.Page_admin = (() => {
       box.innerHTML = rows.reverse().map(r => {
         const color = COLORS[r.l] || '#6b7280';
         return `<div style="border-bottom:1px solid var(--c-border);padding:2px 0">` +
-          `<span class="text-muted">${r.t}</span> ` +
+          `<span style="color:var(--c-text-muted)">${r.t}</span> ` +
           `<span style="color:${color};font-weight:600">${r.l}</span> ` +
-          `<span class="text-secondary">${UI.escape(r.n)}</span> ` +
-          `<span>${UI.escape(r.m)}</span></div>`;
-      }).join('') || '<span class="text-muted">Keine Einträge</span>';
+          `<span style="color:var(--c-text-secondary)">${_esc(r.n)}</span> ` +
+          `<span>${_esc(r.m)}</span></div>`;
+      }).join('') || '<span style="color:var(--c-text-muted)">Keine Einträge</span>';
     };
     el.querySelector('#adm-sys-refresh').addEventListener('click', () => {
       _loadSystemCards(el.querySelector('#adm-sys-cards'));
@@ -1385,13 +1385,13 @@ window.Page_admin = (() => {
         const scoreBar = v => `<span style="color:${scoreColor(v)};font-weight:600">${v.toFixed(1)}</span>`;
         const rows = d.results.filter(r => !r.error).map(r =>
           `<tr>
-            <td style="padding:2px 6px">${UI.escape(r.name)}</td>
+            <td style="padding:2px 6px">${_esc(r.name)}</td>
             <td style="text-align:center;padding:2px 6px">${scoreBar(r.vollstaendigkeit)}</td>
             <td style="text-align:center;padding:2px 6px">${scoreBar(r.korrektheit)}</td>
             <td style="text-align:center;padding:2px 6px">${scoreBar(r.sprachqualitaet)}</td>
             <td style="text-align:center;padding:2px 6px">${scoreBar(r.konsistenz)}</td>
             <td style="text-align:center;padding:2px 6px;font-weight:700">${scoreBar(r.gesamt)}</td>
-            <td style="padding:2px 6px;color:var(--c-text-muted);font-size:0.9em">${UI.escape(r.hinweis || '')}</td>
+            <td style="padding:2px 6px;color:var(--c-text-muted);font-size:0.9em">${_esc(r.hinweis || '')}</td>
           </tr>`
         ).join('');
         box.style.display = 'block';
@@ -1401,7 +1401,7 @@ window.Page_admin = (() => {
           </div>
           <div style="display:flex;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-3)">
             ${['vollstaendigkeit','korrektheit','sprachqualitaet','konsistenz','gesamt'].map(k =>
-              `<div class="text-center">
+              `<div style="text-align:center">
                 <div style="font-size:1.4em;font-weight:700;color:${scoreColor(avg[k])}">${avg[k]?.toFixed(1) ?? '–'}</div>
                 <div style="font-size:0.75em;color:var(--c-text-muted)">${{vollstaendigkeit:'Vollst.',korrektheit:'Korrekt.',sprachqualitaet:'Sprache',konsistenz:'Konsistenz',gesamt:'Gesamt'}[k]}</div>
               </div>`
@@ -1459,9 +1459,9 @@ window.Page_admin = (() => {
           </div>
         </div>
         <div style="margin-top:var(--space-3);font-size:var(--text-xs);color:var(--c-text-muted);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px">
-          <span>Python ${UI.escape(s.python_version)}</span>
+          <span>Python ${_esc(s.python_version)}</span>
           <span style="font-family:monospace;font-size:var(--text-xs);background:var(--c-surface-2);padding:2px 8px;border-radius:4px;color:var(--c-text-secondary)">
-            APP v${typeof APP_VER !== 'undefined' ? APP_VER : '—'} · ${UI.escape(s.sw_version || '?')}
+            APP v${typeof APP_VER !== 'undefined' ? APP_VER : '—'} · ${_esc(s.sw_version || '?')}
           </span>
         </div>
       </div>
@@ -1504,9 +1504,9 @@ window.Page_admin = (() => {
     const userRows = topUsers.map(u => {
       const emailDisplay = (u.email || '').length > 20
         ? '@' + (u.email || '').split('@')[1]
-        : UI.escape(u.email || '');
+        : _esc(u.email || '');
       return `<tr>
-        <td style="padding:5px 8px;font-weight:500">${UI.escape(u.name || '–')}</td>
+        <td style="padding:5px 8px;font-weight:500">${_esc(u.name || '–')}</td>
         <td style="padding:5px 8px;color:var(--c-text-muted);font-size:var(--text-xs)">${emailDisplay}</td>
         <td style="padding:5px 8px;text-align:right;font-weight:600">${u.total ?? 0}</td>
         <td style="padding:5px 8px;text-align:right;color:var(--c-text-muted);font-size:var(--text-xs)">${u.last_week || '–'}</td>
@@ -1549,7 +1549,7 @@ window.Page_admin = (() => {
         <div style="display:flex;justify-content:space-between;font-size:var(--text-xs);
                     color:var(--c-text-muted);margin-bottom:var(--space-4)">
           <span>30 Tage</span>
-          <span>${UI.escape(lastDate)}</span>
+          <span>${_esc(lastDate)}</span>
         </div>
 
         ${topUsers.length ? `
@@ -1603,7 +1603,7 @@ window.Page_admin = (() => {
   function _historySection(label, items, renderItem) {
     const id = `hist-${label.replace(/\W/g,'').toLowerCase()}`;
     return `
-      <details class="mb-4">
+      <details style="margin-bottom:var(--space-4)">
         <summary style="cursor:pointer;list-style:none;display:flex;align-items:center;gap:var(--space-2);
                         font-size:var(--text-xs);font-weight:700;color:var(--c-text-muted);
                         text-transform:uppercase;letter-spacing:.06em;padding:var(--space-2) 0;
@@ -1697,30 +1697,30 @@ window.Page_admin = (() => {
     if (!zuchterPending.length) {
       html += `<p style="font-size:var(--text-sm);color:var(--c-text-muted);margin-bottom:var(--space-3)">Keine ausstehenden Einreichungen.</p>`;
     } else {
-      html += `<div class="card adm-table-card mb-3"><div class="adm-table-scroll"><table class="adm-table">
+      html += `<div class="card adm-table-card" style="margin-bottom:var(--space-3)"><div class="adm-table-scroll"><table class="adm-table">
         <thead><tr style="background:var(--c-surface-2);text-align:left">
           <th class="adm-th">Rasse</th><th class="adm-th">Name / Zwingername</th>
           <th class="adm-th">Ort</th><th class="adm-th">VDH</th><th class="adm-th">Alter</th><th class="adm-th">Website</th><th class="adm-th"></th>
         </tr></thead><tbody>
         ${zuchterPending.map((z, i) => `
           <tr style="${i%2===1?'background:var(--c-surface-2)':''}">
-            <td class="adm-td" style="font-weight:var(--weight-semibold)">${UI.escape(z.rasse_slug)}</td>
-            <td class="adm-td">${UI.escape(z.name)}${z.zwingername ? `<br><span style="color:var(--c-text-muted);font-size:var(--text-xs)">${UI.escape(z.zwingername)}</span>` : ''}</td>
-            <td class="adm-td">${UI.escape([z.plz, z.ort, z.bundesland].filter(Boolean).join(' '))}</td>
+            <td class="adm-td" style="font-weight:var(--weight-semibold)">${_esc(z.rasse_slug)}</td>
+            <td class="adm-td">${_esc(z.name)}${z.zwingername ? `<br><span style="color:var(--c-text-muted);font-size:var(--text-xs)">${_esc(z.zwingername)}</span>` : ''}</td>
+            <td class="adm-td">${_esc([z.plz, z.ort, z.bundesland].filter(Boolean).join(' '))}</td>
             <td class="adm-td">${z.vdh_mitglied ? `<span style="color:var(--c-success);display:flex;align-items:center;gap:2px"><svg class="ph-icon" style="width:14px;height:14px" aria-hidden="true"><use href="/icons/phosphor.svg#check"></use></svg> VDH</span>` : '—'}</td>
             <td class="adm-td">${_ageLabel(z.created_at)}</td>
-            <td class="adm-td">${z.website ? `<a href="${UI.escape(z.website)}" target="_blank" style="color:var(--c-primary);font-size:var(--text-xs)">Link</a>` : '—'}</td>
+            <td class="adm-td">${z.website ? `<a href="${_esc(z.website)}" target="_blank" style="color:var(--c-primary);font-size:var(--text-xs)">Link</a>` : '—'}</td>
             <td class="adm-td" style="text-align:right;white-space:nowrap">
               <button class="btn btn-sm btn-primary adm-zuchter-approve" data-id="${z.id}" style="margin-right:4px"><svg class="ph-icon" style="width:14px;height:14px" aria-hidden="true"><use href="/icons/phosphor.svg#check"></use></svg> Freigeben</button>
-              <button class="btn btn-sm btn-ghost adm-zuchter-delete" data-id="${z.id}" class="text-danger"><svg class="ph-icon" style="width:14px;height:14px" aria-hidden="true"><use href="/icons/phosphor.svg#x"></use></svg></button>
+              <button class="btn btn-sm btn-ghost adm-zuchter-delete" data-id="${z.id}" style="color:var(--c-danger)"><svg class="ph-icon" style="width:14px;height:14px" aria-hidden="true"><use href="/icons/phosphor.svg#x"></use></svg></button>
             </td>
           </tr>`).join('')}
         </tbody></table></div></div>`;
     }
     // Züchter-History
     if (zuchterDone.length) html += _historySection('Züchter-Einreichungen', zuchterDone,
-      z => `<span style="font-weight:600">${UI.escape(z.name)}</span> · ${UI.escape(z.rasse_slug)} ·
-            ${UI.icon('check-circle')} ${UI.escape(z.verified_by_name||'?')} · ${(z.verified_at||'').slice(0,10)}`);
+      z => `<span style="font-weight:600">${_esc(z.name)}</span> · ${_esc(z.rasse_slug)} ·
+            ${UI.icon('check-circle')} ${_esc(z.verified_by_name||'?')} · ${(z.verified_at||'').slice(0,10)}`);
 
     // --- Wiki-Foto-Einreichungen ---
     html += `<h3 style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
@@ -1736,19 +1736,19 @@ window.Page_admin = (() => {
     } else {
       html += `<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-4);margin-bottom:var(--space-3)">
         ${fotosPending.map(f => `
-          <div class="card p-4">
-            <img src="${UI.escape(f.foto_url)}" alt=""
+          <div class="card" style="padding:var(--space-4)">
+            <img src="${_esc(f.foto_url)}" alt=""
                  style="width:100%;height:140px;object-fit:cover;border-radius:var(--radius-md);margin-bottom:var(--space-3)">
-            <div style="font-weight:var(--weight-semibold);font-size:var(--text-sm)">${UI.escape(f.rasse_name)}</div>
-            <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-bottom:var(--space-2)">von ${UI.escape(f.user_name)}</div>
-            <div class="mb-3">${_ageLabel(f.created_at)}</div>
-            ${f.aktuell_foto ? `<img src="${UI.escape(f.aktuell_foto)}" alt="Aktuell"
+            <div style="font-weight:var(--weight-semibold);font-size:var(--text-sm)">${_esc(f.rasse_name)}</div>
+            <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-bottom:var(--space-2)">von ${_esc(f.user_name)}</div>
+            <div style="margin-bottom:var(--space-3)">${_ageLabel(f.created_at)}</div>
+            ${f.aktuell_foto ? `<img src="${_esc(f.aktuell_foto)}" alt="Aktuell"
                  style="width:100%;height:80px;object-fit:cover;border-radius:var(--radius-sm);
                          opacity:.5;margin-bottom:var(--space-2)">
               <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-bottom:var(--space-3)">↑ aktuelles Foto</div>` : ''}
-            <div class="flex-gap-2">
-              <button class="btn btn-sm btn-primary adm-foto-approve" data-id="${f.id}" class="flex-1">✓</button>
-              <button class="btn btn-sm btn-ghost adm-foto-reject"  data-id="${f.id}" class="text-danger">✗</button>
+            <div style="display:flex;gap:var(--space-2)">
+              <button class="btn btn-sm btn-primary adm-foto-approve" data-id="${f.id}" style="flex:1">✓</button>
+              <button class="btn btn-sm btn-ghost adm-foto-reject"  data-id="${f.id}" style="color:var(--c-danger)">✗</button>
             </div>
           </div>`).join('')}
       </div>`;
@@ -1756,10 +1756,10 @@ window.Page_admin = (() => {
 
     // Fotos-History
     if (fotosDone.length) html += _historySection('Foto-Einreichungen', fotosDone,
-      f => `<img src="${UI.escape(f.foto_url)}" style="width:32px;height:32px;object-fit:cover;border-radius:4px;vertical-align:middle;margin-right:6px">
-            <span style="font-weight:600">${UI.escape(f.rasse_name||'?')}</span> · von ${UI.escape(f.user_name||'?')} ·
+      f => `<img src="${_esc(f.foto_url)}" style="width:32px;height:32px;object-fit:cover;border-radius:4px;vertical-align:middle;margin-right:6px">
+            <span style="font-weight:600">${_esc(f.rasse_name||'?')}</span> · von ${_esc(f.user_name||'?')} ·
             ${f.status==='approved' ? `${UI.icon('check-circle')} genehmigt` : `${UI.icon('x-circle')} abgelehnt`}
-            ${f.reviewed_by_name ? ` von ${UI.escape(f.reviewed_by_name)}` : ''} · ${(f.reviewed_at||'').slice(0,10)}`);
+            ${f.reviewed_by_name ? ` von ${_esc(f.reviewed_by_name)}` : ''} · ${(f.reviewed_at||'').slice(0,10)}`);
 
     // --- Forum-Meldungen ---
     html += `<h3 style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
@@ -1778,18 +1778,18 @@ window.Page_admin = (() => {
         ${reportsPending.map(r => `
           <div class="card" style="padding:var(--space-4);border-left:3px solid var(--c-danger)">
             <div style="display:flex;align-items:flex-start;gap:var(--space-3)">
-              <div class="flex-1-min">
+              <div style="flex:1;min-width:0">
                 <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-bottom:var(--space-1);display:flex;align-items:center;flex-wrap:wrap;gap:4px">
-                  ${UI.escape(r.target_type)} #${r.target_id} · Gemeldet von <strong>${UI.escape(r.melder_name || '?')}</strong>
+                  ${_esc(r.target_type)} #${r.target_id} · Gemeldet von <strong>${_esc(r.melder_name || '?')}</strong>
                   ${_ageLabel(r.created_at)}
                 </div>
                 <div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);margin-bottom:var(--space-1)">
-                  Grund: ${UI.escape(r.grund)}
+                  Grund: ${_esc(r.grund)}
                 </div>
                 ${r.content_preview ? `
                   <div style="font-size:var(--text-xs);color:var(--c-text-secondary);
                                padding:var(--space-2) var(--space-3);background:var(--c-surface-2);
-                               border-radius:var(--radius-sm)">${UI.escape(r.content_preview)}</div>` : ''}
+                               border-radius:var(--radius-sm)">${_esc(r.content_preview)}</div>` : ''}
               </div>
               <button class="btn btn-sm btn-primary adm-mod-resolve" data-rid="${r.id}" title="Als erledigt markieren">
                 ${UI.icon('check')}
@@ -1801,8 +1801,8 @@ window.Page_admin = (() => {
 
     // Meldungen-History
     if (reportsDone.length) html += _historySection('Forum-Meldungen', reportsDone,
-      r => `${UI.escape(r.target_type)} #${r.target_id} · ${UI.escape(r.grund)} · Gemeldet von ${UI.escape(r.melder_name||'?')} ·
-            ${UI.icon('check-circle')} ${UI.escape(r.resolved_by_name||'?')} · ${(r.resolved_at||'').slice(0,10)}`);
+      r => `${_esc(r.target_type)} #${r.target_id} · ${_esc(r.grund)} · Gemeldet von ${_esc(r.melder_name||'?')} ·
+            ${UI.icon('check-circle')} ${_esc(r.resolved_by_name||'?')} · ${(r.resolved_at||'').slice(0,10)}`);
 
     // --- POI-Korrekturen ---
     html += `<h3 style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
@@ -1815,7 +1815,7 @@ window.Page_admin = (() => {
                </span>
              </h3>`;
     if (!poiPending.length) {
-      html += `<p class="text-sm-muted">Keine ausstehenden POI-Korrekturen.</p>`;
+      html += `<p style="font-size:var(--text-sm);color:var(--c-text-muted)">Keine ausstehenden POI-Korrekturen.</p>`;
     } else {
       html += `<div class="card adm-table-card"><div class="adm-table-scroll">
         <table class="adm-table">
@@ -1831,17 +1831,17 @@ window.Page_admin = (() => {
           <tbody>
             ${poiPending.map((e, i) => `
               <tr style="${i%2===1?'background:var(--c-surface-2)':''}">
-                <td class="adm-td" style="font-weight:var(--weight-semibold)">${UI.escape(e.poi_name || `OSM #${e.osm_id}`)}</td>
-                <td class="adm-td"><code class="text-xs">${UI.escape(e.field)}</code></td>
-                <td class="adm-td" style="color:var(--c-text-muted);font-size:var(--text-xs)">${UI.escape(e.old_value || '—')}</td>
-                <td class="adm-td text-xs">${UI.escape(e.new_value || '—')}</td>
-                <td class="adm-td text-muted">${UI.escape(e.einreicher_name || '?')}</td>
+                <td class="adm-td" style="font-weight:var(--weight-semibold)">${_esc(e.poi_name || `OSM #${e.osm_id}`)}</td>
+                <td class="adm-td"><code style="font-size:var(--text-xs)">${_esc(e.field)}</code></td>
+                <td class="adm-td" style="color:var(--c-text-muted);font-size:var(--text-xs)">${_esc(e.old_value || '—')}</td>
+                <td class="adm-td" style="font-size:var(--text-xs)">${_esc(e.new_value || '—')}</td>
+                <td class="adm-td" style="color:var(--c-text-muted)">${_esc(e.einreicher_name || '?')}</td>
                 <td class="adm-td">${_ageLabel(e.created_at)}</td>
                 <td class="adm-td" style="text-align:right;white-space:nowrap">
                   <button class="btn btn-sm btn-primary adm-poi-approve" data-id="${e.id}" style="margin-right:4px">
                     ${UI.icon('check')}
                   </button>
-                  <button class="btn btn-sm btn-ghost adm-poi-reject" data-id="${e.id}" class="text-danger">
+                  <button class="btn btn-sm btn-ghost adm-poi-reject" data-id="${e.id}" style="color:var(--c-danger)">
                     ${UI.icon('x')}
                   </button>
                 </td>
@@ -1852,12 +1852,12 @@ window.Page_admin = (() => {
     }
     // POI-History
     if (poiDone.length) html += _historySection('POI-Korrekturen', poiDone,
-      e => `<span style="font-weight:600">${UI.escape(e.poi_name||`OSM #${e.osm_id}`)}</span> ·
-            <code class="text-xs">${UI.escape(e.field)}</code>:
-            <span style="text-decoration:line-through;color:var(--c-text-muted)">${UI.escape(e.old_value||'—')}</span> →
-            ${UI.escape(e.new_value||'—')} ·
+      e => `<span style="font-weight:600">${_esc(e.poi_name||`OSM #${e.osm_id}`)}</span> ·
+            <code style="font-size:var(--text-xs)">${_esc(e.field)}</code>:
+            <span style="text-decoration:line-through;color:var(--c-text-muted)">${_esc(e.old_value||'—')}</span> →
+            ${_esc(e.new_value||'—')} ·
             ${e.status==='approved' ? `${UI.icon('check-circle')} freigegeben` : `${UI.icon('x-circle')} abgelehnt`}
-            ${e.mod_name ? ` von ${UI.escape(e.mod_name)}` : ''} · ${(e.resolved_at||'').slice(0,10)}`);
+            ${e.mod_name ? ` von ${_esc(e.mod_name)}` : ''} · ${(e.resolved_at||'').slice(0,10)}`);
 
     el.innerHTML = html;
 
@@ -1945,7 +1945,7 @@ window.Page_admin = (() => {
         </button>
       </div>
       <div id="adm-zuchter-antraege">Lade…</div>
-      <div id="adm-zuchter-liste" class="mt-4">Lade…</div>
+      <div id="adm-zuchter-liste" style="margin-top:var(--space-4)">Lade…</div>
     `;
     el.querySelector('#adm-zuchter-refresh').addEventListener('click', () => {
       _loadZuechterAntraege(el.querySelector('#adm-zuchter-antraege'));
@@ -1968,7 +1968,7 @@ window.Page_admin = (() => {
     }
 
     if (!antraege.length) {
-      el.innerHTML = `<div class="card p-4">
+      el.innerHTML = `<div class="card" style="padding:var(--space-4)">
         <div class="by-card-section-header">Offene Anträge</div>
         <div style="padding:var(--space-3) var(--space-4);font-size:var(--text-sm);color:var(--c-text-muted)">
           ${UI.icon('check-circle')} Keine offenen Anträge
@@ -1983,34 +1983,34 @@ window.Page_admin = (() => {
       </div>
       <div style="display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-3)">
         ${antraege.map(a => `
-          <div class="card p-4">
+          <div class="card" style="padding:var(--space-4)">
             <div style="display:flex;align-items:flex-start;gap:var(--space-3);flex-wrap:wrap">
 
               <!-- Infos -->
-              <div class="flex-1-min">
+              <div style="flex:1;min-width:0">
                 <div style="font-weight:var(--weight-semibold);font-size:var(--text-sm);
                             color:var(--c-text);margin-bottom:var(--space-1)">
-                  ${UI.escape(a.name)}
+                  ${_esc(a.name)}
                   <span style="font-size:var(--text-xs);color:var(--c-text-muted);font-weight:400;margin-left:6px">
-                    ${UI.escape(a.email)}
+                    ${_esc(a.email)}
                   </span>
                 </div>
                 <div style="display:flex;flex-wrap:wrap;gap:var(--space-3);font-size:var(--text-xs);
                             color:var(--c-text-secondary);margin-bottom:var(--space-2)">
-                  <span>${UI.icon('paw-print')} ${UI.escape(a.rasse_text || '–')}</span>
-                  <span>${UI.icon('house-line')} ${UI.escape(a.zwingername || '–')}</span>
-                  <span>${UI.icon('users')} ${UI.escape(a.verein || '–')}</span>
-                  <span>${UI.icon('map-pin')} ${UI.escape(a.stadt || '–')}</span>
+                  <span>${UI.icon('paw-print')} ${_esc(a.rasse_text || '–')}</span>
+                  <span>${UI.icon('house-line')} ${_esc(a.zwingername || '–')}</span>
+                  <span>${UI.icon('users')} ${_esc(a.verein || '–')}</span>
+                  <span>${UI.icon('map-pin')} ${_esc(a.stadt || '–')}</span>
                   <span style="color:${a.vdh_mitglied ? 'var(--c-success)' : 'var(--c-text-muted)'}">
                     ${UI.icon('certificate')} VDH: ${a.vdh_mitglied ? 'ja' : 'nein'}
                   </span>
-                  ${a.created_at ? `<span class="text-muted">${UI.icon('clock')} ${new Date(a.created_at).toLocaleDateString('de-DE')}</span>` : ''}
+                  ${a.created_at ? `<span style="color:var(--c-text-muted)">${UI.icon('clock')} ${new Date(a.created_at).toLocaleDateString('de-DE')}</span>` : ''}
                 </div>
                 ${a.beschreibung ? `
                   <div style="font-size:var(--text-xs);color:var(--c-text-secondary);
                               padding:var(--space-2) var(--space-3);background:var(--c-surface-2);
                               border-radius:var(--radius-sm);margin-top:var(--space-1)">
-                    ${UI.escape(a.beschreibung)}
+                    ${_esc(a.beschreibung)}
                   </div>` : ''}
               </div>
 
@@ -2021,12 +2021,12 @@ window.Page_admin = (() => {
                   ${UI.icon('file-text')} Dokumente
                 </button>
                 <button class="btn btn-sm btn-primary adm-breeder-approve"
-                        data-uid="${a.user_id || a.id}" data-name="${UI.escape(a.name)}">
+                        data-uid="${a.user_id || a.id}" data-name="${_esc(a.name)}">
                   ${UI.icon('check')} Freischalten
                 </button>
                 <button class="btn btn-sm btn-ghost adm-breeder-reject"
-                        data-uid="${a.user_id || a.id}" data-name="${UI.escape(a.name)}"
-                        class="text-danger">
+                        data-uid="${a.user_id || a.id}" data-name="${_esc(a.name)}"
+                        style="color:var(--c-danger)">
                   ${UI.icon('x')} Ablehnen
                 </button>
               </div>
@@ -2051,16 +2051,16 @@ window.Page_admin = (() => {
         UI.modal.open({
           title: `${UI.icon('file-text')} Hochgeladene Dokumente`,
           body: docs.length
-            ? `<div class="flex-col-gap-3">
+            ? `<div style="display:flex;flex-direction:column;gap:var(--space-3)">
                 ${docs.map(d => `
-                  <a href="${UI.escape(API.breeder.documentUrl(uid, d.id))}"
+                  <a href="${_esc(API.breeder.documentUrl(uid, d.id))}"
                      target="_blank" rel="noopener"
                      class="btn btn-secondary"
                      style="text-align:left;word-break:break-all">
-                    ${UI.icon('file')} ${UI.escape(d.filename || d.name || 'Dokument ' + d.id)}
+                    ${UI.icon('file')} ${_esc(d.filename || d.name || 'Dokument ' + d.id)}
                   </a>`).join('')}
               </div>`
-            : `<p class="text-sm-muted">Keine Dokumente hochgeladen.</p>`,
+            : `<p style="font-size:var(--text-sm);color:var(--c-text-muted)">Keine Dokumente hochgeladen.</p>`,
         });
       });
     });
@@ -2090,7 +2090,7 @@ window.Page_admin = (() => {
         UI.modal.open({
           title: `${UI.icon('x-circle')} Antrag ablehnen: ${name}`,
           body: `
-            <form id="breeder-reject-form" class="flex-col-gap-3">
+            <form id="breeder-reject-form" style="display:flex;flex-direction:column;gap:var(--space-3)">
               <p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin:0">
                 Bitte gib einen Ablehnungsgrund an. Dieser wird dem Antragsteller mitgeteilt.
               </p>
@@ -2155,15 +2155,15 @@ window.Page_admin = (() => {
     const rows = breeders.map(b => `
       <tr>
         <td style="padding:var(--space-2) var(--space-3)">
-          <div style="font-weight:600;font-size:var(--text-sm)">${UI.escape(b.name)}</div>
-          <div class="text-xs-muted">${UI.escape(b.email)}</div>
+          <div style="font-weight:600;font-size:var(--text-sm)">${_esc(b.name)}</div>
+          <div style="font-size:var(--text-xs);color:var(--c-text-muted)">${_esc(b.email)}</div>
         </td>
-        <td style="padding:var(--space-2) var(--space-3);font-size:var(--text-sm)">${UI.escape(b.zwingername || '—')}</td>
-        <td style="padding:var(--space-2) var(--space-3);font-size:var(--text-xs);color:var(--c-text-secondary)">${UI.escape(b.rasse_text || '—')}</td>
-        <td style="padding:var(--space-2) var(--space-3);font-size:var(--text-xs);color:var(--c-text-secondary)">${UI.escape(b.stadt || '—')}</td>
+        <td style="padding:var(--space-2) var(--space-3);font-size:var(--text-sm)">${_esc(b.zwingername || '—')}</td>
+        <td style="padding:var(--space-2) var(--space-3);font-size:var(--text-xs);color:var(--c-text-secondary)">${_esc(b.rasse_text || '—')}</td>
+        <td style="padding:var(--space-2) var(--space-3);font-size:var(--text-xs);color:var(--c-text-secondary)">${_esc(b.stadt || '—')}</td>
         <td style="padding:var(--space-2) var(--space-3);text-align:center;font-size:var(--text-xs)">
           ${b.wuerfe_count || 0} Würfe<br>
-          <span class="text-muted">${b.hunde_count || 0} Hunde</span>
+          <span style="color:var(--c-text-muted)">${b.hunde_count || 0} Hunde</span>
         </td>
         <td style="padding:var(--space-2) var(--space-3)">${tierBadge(b.subscription_tier)}</td>
         <td style="padding:var(--space-2) var(--space-3);font-size:var(--text-xs);color:var(--c-text-muted)">
@@ -2171,8 +2171,8 @@ window.Page_admin = (() => {
         </td>
         <td style="padding:var(--space-2) var(--space-3)">
           <button class="btn btn-sm btn-ghost adm-breeder-tier-btn"
-                  data-uid="${b.id}" data-name="${UI.escape(b.name)}" data-tier="${UI.escape(b.subscription_tier || 'standard')}"
-                  class="text-xs">
+                  data-uid="${b.id}" data-name="${_esc(b.name)}" data-tier="${_esc(b.subscription_tier || 'standard')}"
+                  style="font-size:var(--text-xs)">
             Abo
           </button>
         </td>
@@ -2241,18 +2241,18 @@ window.Page_admin = (() => {
               ${jobs.map((j, i) => `
                 <tr style="${i % 2 === 1 ? 'background:var(--c-surface-2)' : ''}">
                   <td class="adm-td" style="font-weight:var(--weight-semibold);color:var(--c-text)">
-                    ${UI.escape(j.name)}
-                    <div class="adm-job-id">${UI.escape(j.id)}</div>
+                    ${_esc(j.name)}
+                    <div class="adm-job-id">${_esc(j.id)}</div>
                   </td>
                   <td class="adm-td" style="color:var(--c-text-secondary);white-space:nowrap">
-                    ${j.next_run_time ? _formatDateTime(j.next_run_time) : '<span class="text-muted">—</span>'}
+                    ${j.next_run_time ? _formatDateTime(j.next_run_time) : '<span style="color:var(--c-text-muted)">—</span>'}
                   </td>
                   <td class="adm-td adm-td-trigger">
-                    ${UI.escape(j.trigger)}
+                    ${_esc(j.trigger)}
                   </td>
-                  <td class="adm-td text-right">
-                    <button class="btn btn-sm btn-ghost adm-job-trigger adm-icon-btn" data-id="${UI.escape(j.id)}" data-name="${UI.escape(j.name)}"
-                            title="Jetzt ausführen" class="text-primary">
+                  <td class="adm-td" style="text-align:right">
+                    <button class="btn btn-sm btn-ghost adm-job-trigger adm-icon-btn" data-id="${_esc(j.id)}" data-name="${_esc(j.name)}"
+                            title="Jetzt ausführen" style="color:var(--c-primary)">
                       ${UI.icon('play')}
                     </button>
                   </td>
@@ -2307,23 +2307,23 @@ window.Page_admin = (() => {
         </div>
 
         <!-- Neuen Code anlegen -->
-        <div class="by-card p-4">
+        <div class="by-card" style="padding:var(--space-4)">
           <h3 style="margin:0 0 var(--space-3);font-size:var(--text-base)">Neuen Partner-Code erstellen</h3>
-          <form id="adm-partner-create" class="flex-col-gap-3">
-            <div class="grid-2">
+          <form id="adm-partner-create" style="display:flex;flex-direction:column;gap:var(--space-3)">
+            <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
               <div>
-                <label class="form-label text-xs">Code</label>
+                <label class="form-label" style="font-size:var(--text-xs)">Code</label>
                 <input class="form-control" name="code" placeholder="z. B. HUNDEBLOG"
                        style="text-transform:uppercase;font-family:monospace;letter-spacing:.08em" required>
               </div>
               <div>
-                <label class="form-label text-xs">Bezeichnung</label>
+                <label class="form-label" style="font-size:var(--text-xs)">Bezeichnung</label>
                 <input class="form-control" name="label" placeholder="z. B. Max Musterhund (Instagram)" required>
               </div>
             </div>
             <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);align-items:center">
               <div>
-                <label class="form-label text-xs">Max. Einlösungen <span class="text-muted">(leer = unbegrenzt)</span></label>
+                <label class="form-label" style="font-size:var(--text-xs)">Max. Einlösungen <span style="color:var(--c-text-muted)">(leer = unbegrenzt)</span></label>
                 <input class="form-control" name="max_uses" type="number" min="1" placeholder="∞">
               </div>
               <div style="display:flex;align-items:center;gap:var(--space-2);padding-top:var(--space-5)">
@@ -2341,11 +2341,11 @@ window.Page_admin = (() => {
         </div>
 
         <!-- Aktive Codes -->
-        <div class="by-card p-4">
+        <div class="by-card" style="padding:var(--space-4)">
           <h3 style="margin:0 0 var(--space-3);font-size:var(--text-base)">Aktive Codes</h3>
           <div id="adm-partner-codes-list">
             ${codes.length === 0
-              ? `<p class="text-sm-muted">Noch keine Partner-Codes angelegt.</p>`
+              ? `<p style="color:var(--c-text-muted);font-size:var(--text-sm)">Noch keine Partner-Codes angelegt.</p>`
               : `<table style="width:100%;border-collapse:collapse;font-size:var(--text-sm)">
                   <thead>
                     <tr style="border-bottom:1px solid var(--c-border)">
@@ -2384,14 +2384,14 @@ window.Page_admin = (() => {
         </div>
 
         <!-- User-Status vergeben -->
-        <div class="by-card p-4">
+        <div class="by-card" style="padding:var(--space-4)">
           <h3 style="margin:0 0 var(--space-3);font-size:var(--text-base)">Nutzer-Status manuell vergeben</h3>
-          <form id="adm-partner-grant" class="flex-col-gap-3">
+          <form id="adm-partner-grant" style="display:flex;flex-direction:column;gap:var(--space-3)">
             <div>
-              <label class="form-label text-xs">User-ID oder Benutzername</label>
+              <label class="form-label" style="font-size:var(--text-xs)">User-ID oder Benutzername</label>
               <input class="form-control" name="user_search" id="adm-grant-search"
                      placeholder="Name eingeben…" autocomplete="off">
-              <div id="adm-grant-result" class="mt-2"></div>
+              <div id="adm-grant-result" style="margin-top:var(--space-2)"></div>
             </div>
             <div style="display:flex;gap:var(--space-4)">
               <label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer;font-size:var(--text-sm)">
@@ -2461,7 +2461,7 @@ window.Page_admin = (() => {
           const res = await API.get(`/admin/users?q=${encodeURIComponent(q)}&limit=10`);
           const users = res?.users || res || [];
           if (!users || !users.length) {
-            grantResult.innerHTML = `<p class="text-xs-muted">Kein User gefunden.</p>`;
+            grantResult.innerHTML = `<p style="font-size:var(--text-xs);color:var(--c-text-muted)">Kein User gefunden.</p>`;
             return;
           }
           grantResult.innerHTML = users.map(u => `
@@ -2527,7 +2527,7 @@ window.Page_admin = (() => {
       <div style="display:flex;flex-direction:column;gap:var(--space-5)">
 
         <!-- Vorlagen-Manager -->
-        <div class="by-card p-4">
+        <div class="by-card" style="padding:var(--space-4)">
           <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3)">
             <h3 style="margin:0;font-size:var(--text-base)">Vorlagen</h3>
             <button class="btn btn-sm btn-secondary" id="adm-tpl-new">
@@ -2535,18 +2535,18 @@ window.Page_admin = (() => {
             </button>
           </div>
           ${templates.length === 0
-            ? `<p class="text-sm-muted">Noch keine Vorlagen.</p>`
-            : `<div class="flex-col-gap-2">
+            ? `<p style="color:var(--c-text-muted);font-size:var(--text-sm)">Noch keine Vorlagen.</p>`
+            : `<div style="display:flex;flex-direction:column;gap:var(--space-2)">
                 ${templates.map(t => `
                   <div style="display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);
                                background:var(--c-bg-elevated);border-radius:var(--radius-md);border:1px solid var(--c-border)">
-                    <div class="flex-1-min">
+                    <div style="flex:1;min-width:0">
                       <div style="display:flex;align-items:center;gap:var(--space-2)">
-                        <span style="font-size:var(--text-sm);font-weight:600">${UI.escape(t.label)}</span>
+                        <span style="font-size:var(--text-sm);font-weight:600">${_esc(t.label)}</span>
                         ${accountBadge(t.from_account)}
                       </div>
                       <div style="font-size:var(--text-xs);color:var(--c-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
-                        ${UI.escape(t.subject)}
+                        ${_esc(t.subject)}
                       </div>
                     </div>
                     <div style="display:flex;gap:var(--space-2);flex-shrink:0">
@@ -2565,22 +2565,22 @@ window.Page_admin = (() => {
         </div>
 
         <!-- Compose -->
-        <div class="by-card p-4">
+        <div class="by-card" style="padding:var(--space-4)">
           <h3 style="margin:0 0 var(--space-3);font-size:var(--text-base)">E-Mail senden</h3>
-          <form id="adm-outreach-form" class="flex-col-gap-3">
+          <form id="adm-outreach-form" style="display:flex;flex-direction:column;gap:var(--space-3)">
 
             <!-- Absender -->
-            <div class="grid-2">
+            <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
               <div>
-                <label class="form-label text-xs">Absender</label>
+                <label class="form-label" style="font-size:var(--text-xs)">Absender</label>
                 <select id="adm-outreach-from" class="form-control">
                   <option value="partner">partner@banyaro.app (Influencer/Partner)</option>
                   <option value="support">support@banyaro.app (Support/Moderation)</option>
                 </select>
               </div>
               <div>
-                <label class="form-label text-xs">
-                  Empfänger <span class="text-muted">(Komma-getrennt)</span>
+                <label class="form-label" style="font-size:var(--text-xs)">
+                  Empfänger <span style="color:var(--c-text-muted)">(Komma-getrennt)</span>
                 </label>
                 <input class="form-control" id="adm-outreach-to" type="text"
                        placeholder="name@example.com, andere@example.com">
@@ -2589,13 +2589,13 @@ window.Page_admin = (() => {
 
             <!-- Betreff -->
             <div>
-              <label class="form-label text-xs">Betreff</label>
+              <label class="form-label" style="font-size:var(--text-xs)">Betreff</label>
               <input class="form-control" id="adm-outreach-subject" type="text">
             </div>
 
             <!-- Text -->
             <div>
-              <label class="form-label text-xs">Text</label>
+              <label class="form-label" style="font-size:var(--text-xs)">Text</label>
               <textarea id="adm-outreach-body" class="form-control" rows="14"
                         style="font-family:monospace;font-size:var(--text-sm);resize:vertical"></textarea>
             </div>
@@ -2604,7 +2604,7 @@ window.Page_admin = (() => {
               <button type="submit" class="btn btn-primary">
                 ${UI.icon('paper-plane-tilt')} Senden
               </button>
-              <span class="text-xs-muted">
+              <span style="font-size:var(--text-xs);color:var(--c-text-muted)">
                 {name} wird nicht automatisch ersetzt — bitte manuell anpassen.
               </span>
             </div>
@@ -2612,10 +2612,10 @@ window.Page_admin = (() => {
         </div>
 
         <!-- Versand-Log -->
-        <div class="by-card p-4">
+        <div class="by-card" style="padding:var(--space-4)">
           <h3 style="margin:0 0 var(--space-3);font-size:var(--text-base)">Versand-Log</h3>
           ${log.length === 0
-            ? `<p class="text-sm-muted">Noch keine E-Mails gesendet.</p>`
+            ? `<p style="color:var(--c-text-muted);font-size:var(--text-sm)">Noch keine E-Mails gesendet.</p>`
             : `<table style="width:100%;border-collapse:collapse;font-size:var(--text-xs)">
                 <thead>
                   <tr style="border-bottom:1px solid var(--c-border)">
@@ -2631,10 +2631,10 @@ window.Page_admin = (() => {
                     <tr data-log-idx="${i}" style="border-bottom:1px solid var(--c-border);cursor:pointer"
                         onmouseover="this.style.background='var(--c-surface-2)'"
                         onmouseout="this.style.background=''">
-                      <td class="p-2">${accountBadge(l.from_account)}</td>
-                      <td class="p-2">${UI.escape(l.recipient)}</td>
-                      <td style="padding:var(--space-2);color:var(--c-text-secondary)">${UI.escape(l.subject)}</td>
-                      <td style="padding:var(--space-2);color:var(--c-text-muted)">${UI.escape(l.sent_by_name || '')}</td>
+                      <td style="padding:var(--space-2)">${accountBadge(l.from_account)}</td>
+                      <td style="padding:var(--space-2)">${_esc(l.recipient)}</td>
+                      <td style="padding:var(--space-2);color:var(--c-text-secondary)">${_esc(l.subject)}</td>
+                      <td style="padding:var(--space-2);color:var(--c-text-muted)">${_esc(l.sent_by_name || '')}</td>
                       <td style="padding:var(--space-2);color:var(--c-text-muted)">${(l.sent_at||'').slice(0,16).replace('T',' ')}</td>
                     </tr>`).join('')}
                 </tbody>
@@ -2650,17 +2650,17 @@ window.Page_admin = (() => {
         const l = log[Number(row.dataset.logIdx)];
         if (!l) return;
         UI.modal.open({
-          title: UI.escape(l.subject),
+          title: _esc(l.subject),
           body: `
             <div style="margin-bottom:var(--space-3);font-size:var(--text-sm);color:var(--c-text-muted)">
-              <strong>An:</strong> ${UI.escape(l.recipient)} &nbsp;·&nbsp;
-              <strong>Von:</strong> ${UI.escape(l.from_account)}@banyaro.app &nbsp;·&nbsp;
+              <strong>An:</strong> ${_esc(l.recipient)} &nbsp;·&nbsp;
+              <strong>Von:</strong> ${_esc(l.from_account)}@banyaro.app &nbsp;·&nbsp;
               ${(l.sent_at||'').slice(0,16).replace('T',' ')}
             </div>
             <pre style="white-space:pre-wrap;font-family:inherit;font-size:var(--text-sm);
                         background:var(--c-surface-2);border-radius:var(--radius-md);
                         padding:var(--space-3);max-height:60vh;overflow-y:auto;
-                        color:var(--c-text)">${UI.escape(l.body || '(kein Text gespeichert)')}</pre>`,
+                        color:var(--c-text)">${_esc(l.body || '(kein Text gespeichert)')}</pre>`,
           footer: `<button class="btn btn-secondary" onclick="UI.modal.close()">Schließen</button>`,
         });
       });
@@ -2728,15 +2728,15 @@ window.Page_admin = (() => {
     UI.modal.open({
       title: isNew ? 'Neue Vorlage' : 'Vorlage bearbeiten',
       body: `
-        <form id="${id}" class="flex-col-gap-3">
-          <div class="grid-2">
+        <form id="${id}" style="display:flex;flex-direction:column;gap:var(--space-3)">
+          <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
             <div>
-              <label class="form-label text-xs">Name (intern)</label>
+              <label class="form-label" style="font-size:var(--text-xs)">Name (intern)</label>
               <input class="form-control" id="${id}-key" type="text" placeholder="z.B. willkommen_neu"
-                     value="${UI.escape(tpl?.key || '')}" ${isNew ? '' : 'readonly'}>
+                     value="${_esc(tpl?.key || '')}" ${isNew ? '' : 'readonly'}>
             </div>
             <div>
-              <label class="form-label text-xs">Absender</label>
+              <label class="form-label" style="font-size:var(--text-xs)">Absender</label>
               <select id="${id}-from" class="form-control">
                 <option value="partner" ${(tpl?.from_account||'partner')==='partner'?'selected':''}>partner@banyaro.app</option>
                 <option value="support" ${tpl?.from_account==='support'?'selected':''}>support@banyaro.app</option>
@@ -2744,19 +2744,19 @@ window.Page_admin = (() => {
             </div>
           </div>
           <div>
-            <label class="form-label text-xs">Bezeichnung (sichtbar)</label>
+            <label class="form-label" style="font-size:var(--text-xs)">Bezeichnung (sichtbar)</label>
             <input class="form-control" id="${id}-label" type="text" placeholder="z.B. Willkommensnachricht"
-                   value="${UI.escape(tpl?.label || '')}">
+                   value="${_esc(tpl?.label || '')}">
           </div>
           <div>
-            <label class="form-label text-xs">Betreff</label>
+            <label class="form-label" style="font-size:var(--text-xs)">Betreff</label>
             <input class="form-control" id="${id}-subject" type="text"
-                   value="${UI.escape(tpl?.subject || '')}">
+                   value="${_esc(tpl?.subject || '')}">
           </div>
           <div>
-            <label class="form-label text-xs">Text</label>
+            <label class="form-label" style="font-size:var(--text-xs)">Text</label>
             <textarea id="${id}-body" class="form-control" rows="12"
-                      style="font-family:monospace;font-size:var(--text-sm);resize:vertical">${UI.escape(tpl?.body || '')}</textarea>
+                      style="font-family:monospace;font-size:var(--text-sm);resize:vertical">${_esc(tpl?.body || '')}</textarea>
           </div>
         </form>`,
       footer: `
@@ -2826,14 +2826,14 @@ window.Page_admin = (() => {
                     ${_formatDateTime(r.created_at)}
                   </td>
                   <td class="adm-td" style="color:var(--c-text);white-space:nowrap">
-                    ${UI.escape(r.admin_name || '—')}
+                    ${_esc(r.admin_name || '—')}
                   </td>
                   <td class="adm-td">
-                    <span class="adm-badge-mono">${UI.escape(r.action)}</span>
-                    ${r.detail ? `<div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:2px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${UI.escape(r.detail)}</div>` : ''}
+                    <span class="adm-badge-mono">${_esc(r.action)}</span>
+                    ${r.detail ? `<div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:2px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${_esc(r.detail)}</div>` : ''}
                   </td>
                   <td class="adm-td" style="color:var(--c-text-secondary);font-size:var(--text-xs);white-space:nowrap">
-                    ${UI.escape(r.target || '—')}
+                    ${_esc(r.target || '—')}
                   </td>
                 </tr>
               `).join('')}
@@ -2889,6 +2889,11 @@ window.Page_admin = (() => {
     `;
   }
 
+  function _esc(s) {
+    if (!s) return '';
+    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+  }
+
   // ------------------------------------------------------------------
   // BEWERBUNGEN — Social-Media-Job
   // ------------------------------------------------------------------
@@ -2926,20 +2931,20 @@ window.Page_admin = (() => {
         list.innerHTML = rows.map(r => `
           <div class="card" style="margin-bottom:var(--space-3);padding:var(--space-4)" data-id="${r.id}">
             <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-3)">
-              <div class="flex-1-min">
-                <div style="font-weight:700;font-size:var(--text-base)">${UI.escape(r.name)}
-                  ${r.username ? `<span style="color:var(--c-text-muted);font-weight:400;font-size:var(--text-sm)">(@${UI.escape(r.username)})</span>` : ''}
+              <div style="flex:1;min-width:0">
+                <div style="font-weight:700;font-size:var(--text-base)">${_esc(r.name)}
+                  ${r.username ? `<span style="color:var(--c-text-muted);font-weight:400;font-size:var(--text-sm)">(@${_esc(r.username)})</span>` : ''}
                 </div>
                 <div style="color:var(--c-text-secondary);font-size:var(--text-sm);margin-top:2px">
-                  ${UI.escape(r.email)} · @${UI.escape(r.social_handle||'—')}
-                  ${r.dog_name ? ` · 🐕 ${UI.escape(r.dog_name)} (${UI.escape(r.dog_rasse||'')})` : ''}
+                  ${_esc(r.email)} · @${_esc(r.social_handle||'—')}
+                  ${r.dog_name ? ` · 🐕 ${_esc(r.dog_name)} (${_esc(r.dog_rasse||'')})` : ''}
                 </div>
                 <div style="color:var(--c-text-muted);font-size:var(--text-xs);margin-top:2px">
                   ${r.created_at?.slice(0,16).replace('T',' ')} · ${r.doc_count} Anhang/Anhänge
                 </div>
                 <div style="margin-top:var(--space-2);font-size:var(--text-sm);color:var(--c-text-secondary);
                             background:var(--c-surface-2);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3)">
-                  ${UI.escape((r.motivation||'').slice(0,200))}${(r.motivation||'').length>200?'…':''}
+                  ${_esc((r.motivation||'').slice(0,200))}${(r.motivation||'').length>200?'…':''}
                 </div>
               </div>
               <div style="display:flex;flex-direction:column;gap:var(--space-2);min-width:120px">
@@ -2971,25 +2976,25 @@ window.Page_admin = (() => {
             const docsHtml = app.docs?.length
               ? app.docs.map(d => `<a href="/api/jobs/admin/applications/${id}/docs/${d.id}"
                   target="_blank" style="display:block;color:var(--c-primary);font-size:var(--text-sm);margin:4px 0">
-                  📎 ${UI.escape(d.filename)}</a>`).join('')
-              : '<span class="text-sm-muted">Keine Anhänge</span>';
+                  📎 ${_esc(d.filename)}</a>`).join('')
+              : '<span style="color:var(--c-text-muted);font-size:var(--text-sm)">Keine Anhänge</span>';
 
             UI.modal.open({
-              title: `Bewerbung — ${UI.escape(app.name)}`,
+              title: `Bewerbung — ${_esc(app.name)}`,
               body: `
                 <div style="display:grid;gap:var(--space-3)">
-                  <div><b>E-Mail:</b> ${UI.escape(app.email)}</div>
-                  <div><b>Social:</b> @${UI.escape(app.social_handle||'—')}</div>
-                  ${app.dog_name ? `<div><b>Hund:</b> ${UI.escape(app.dog_name)} (${UI.escape(app.dog_rasse||'')})</div>` : ''}
+                  <div><b>E-Mail:</b> ${_esc(app.email)}</div>
+                  <div><b>Social:</b> @${_esc(app.social_handle||'—')}</div>
+                  ${app.dog_name ? `<div><b>Hund:</b> ${_esc(app.dog_name)} (${_esc(app.dog_rasse||'')})</div>` : ''}
                   <div><b>Motivation:</b><br>
                     <div style="background:var(--c-surface-2);border-radius:var(--radius-md);padding:var(--space-3);
-                                margin-top:var(--space-1);font-size:var(--text-sm);white-space:pre-wrap">${UI.escape(app.motivation)}</div>
+                                margin-top:var(--space-1);font-size:var(--text-sm);white-space:pre-wrap">${_esc(app.motivation)}</div>
                   </div>
                   <div><b>Anhänge:</b><br>${docsHtml}</div>
                   <div>
                     <b>Admin-Notiz:</b>
                     <textarea id="adm-bew-note" class="form-control" rows="2" style="margin-top:var(--space-1)"
-                              placeholder="Interne Notiz / Nachricht an Bewerber">${UI.escape(app.admin_note||'')}</textarea>
+                              placeholder="Interne Notiz / Nachricht an Bewerber">${_esc(app.admin_note||'')}</textarea>
                   </div>
                 </div>`,
               footer: `
@@ -3025,7 +3030,7 @@ window.Page_admin = (() => {
     };
 
     el.innerHTML = `
-      <div class="p-4">
+      <div style="padding:var(--space-4)">
         <div style="display:flex;align-items:center;justify-content:space-between;
                     margin-bottom:var(--space-4)">
           <h2 style="margin:0;font-size:var(--text-lg)">Hilfe / FAQ</h2>
@@ -3047,7 +3052,7 @@ window.Page_admin = (() => {
                       border:1.5px solid var(--c-border);border-radius:var(--radius-md);
                       background:var(--c-surface);color:var(--c-text);font-size:var(--text-sm)">
                 ${Object.entries(KAT_LABEL).map(([k,v]) =>
-                  `<option value="${k}">${UI.escape(v)}</option>`
+                  `<option value="${k}">${_esc(v)}</option>`
                 ).join('')}
               </select>
             </div>
@@ -3070,7 +3075,7 @@ window.Page_admin = (() => {
                                font-size:var(--text-sm);box-sizing:border-box;
                                resize:vertical;font-family:inherit"></textarea>
             </div>
-            <div class="flex-gap-2">
+            <div style="display:flex;gap:var(--space-2)">
               <label style="font-size:var(--text-sm);font-weight:500;margin-right:var(--space-2)">
                 Reihenfolge
               </label>
@@ -3120,7 +3125,7 @@ window.Page_admin = (() => {
                           text-transform:uppercase;letter-spacing:0.05em;
                           padding:var(--space-2) 0;margin-bottom:var(--space-2);
                           border-bottom:1px solid var(--c-border)">
-                ${UI.escape(label)}
+                ${_esc(label)}
               </div>
           `;
           for (const a of items) {
@@ -3133,7 +3138,7 @@ window.Page_admin = (() => {
                             padding:var(--space-3) var(--space-4)">
                   <span style="flex:1;font-size:var(--text-sm);font-weight:500;
                                ${a.aktiv ? '' : 'opacity:0.45;text-decoration:line-through'}">
-                    ${UI.escape(a.frage)}
+                    ${_esc(a.frage)}
                   </span>
                   <span style="font-size:var(--text-xs);color:var(--c-text-muted);
                                white-space:nowrap">
@@ -3154,7 +3159,7 @@ window.Page_admin = (() => {
                   <button class="btn btn-sm adm-hilfe-del-btn"
                           style="padding:2px 8px;font-size:var(--text-xs);
                                  background:var(--c-danger-bg,#fee2e2);color:var(--c-danger,#991b1b)"
-                          data-id="${a.id}" data-frage="${UI.escape(a.frage)}">
+                          data-id="${a.id}" data-frage="${_esc(a.frage)}">
                     ${UI.icon('trash')}
                   </button>
                 </div>
@@ -3172,7 +3177,7 @@ window.Page_admin = (() => {
                                      border:1.5px solid var(--c-border);border-radius:var(--radius-md);
                                      background:var(--c-surface);color:var(--c-text);font-size:var(--text-sm)">
                         ${Object.entries(KAT_LABEL).map(([k,v]) =>
-                          `<option value="${k}" ${k === a.kategorie ? 'selected' : ''}>${UI.escape(v)}</option>`
+                          `<option value="${k}" ${k === a.kategorie ? 'selected' : ''}>${_esc(v)}</option>`
                         ).join('')}
                       </select>
                     </div>
@@ -3180,7 +3185,7 @@ window.Page_admin = (() => {
                       <label style="font-size:var(--text-xs);font-weight:600;display:block;
                                     margin-bottom:4px;color:var(--c-text-secondary)">Frage</label>
                       <input type="text" class="adm-hilfe-edit-frage"
-                             value="${UI.escape(a.frage)}"
+                             value="${_esc(a.frage)}"
                              style="width:100%;padding:var(--space-2) var(--space-3);
                                     border:1.5px solid var(--c-border);border-radius:var(--radius-md);
                                     background:var(--c-surface);color:var(--c-text);
@@ -3194,7 +3199,7 @@ window.Page_admin = (() => {
                                        border:1.5px solid var(--c-border);border-radius:var(--radius-md);
                                        background:var(--c-surface);color:var(--c-text);
                                        font-size:var(--text-sm);box-sizing:border-box;
-                                       resize:vertical;font-family:inherit">${UI.escape(a.antwort)}</textarea>
+                                       resize:vertical;font-family:inherit">${_esc(a.antwort)}</textarea>
                     </div>
                     <div style="display:flex;align-items:center;gap:var(--space-3)">
                       <label style="font-size:var(--text-xs);font-weight:600;
@@ -3204,11 +3209,11 @@ window.Page_admin = (() => {
                              style="width:70px;padding:var(--space-2) var(--space-3);
                                     border:1.5px solid var(--c-border);border-radius:var(--radius-md);
                                     background:var(--c-surface);color:var(--c-text);font-size:var(--text-sm)">
-                      <div class="flex-1"></div>
+                      <div style="flex:1"></div>
                       <button class="btn btn-secondary btn-sm adm-hilfe-edit-cancel" data-id="${a.id}"
-                              class="text-xs">Abbrechen</button>
+                              style="font-size:var(--text-xs)">Abbrechen</button>
                       <button class="btn btn-primary btn-sm adm-hilfe-edit-save" data-id="${a.id}"
-                              class="text-xs">Speichern</button>
+                              style="font-size:var(--text-xs)">Speichern</button>
                     </div>
                   </div>
                 </div>
@@ -3361,7 +3366,7 @@ window.Page_admin = (() => {
       'koerperpflege': 'Körperpflege', 'hundesport': 'Hundesport', 'welpe-basics': 'Welpe Basics',
     };
 
-    let html = `<div class="p-4">
+    let html = `<div style="padding:var(--space-4)">
       <h2 style="font-size:var(--text-lg);font-weight:700;margin:0 0 var(--space-4)">
         Trainingsübungen bearbeiten
       </h2>`;
@@ -3489,8 +3494,8 @@ window.Page_admin = (() => {
     const topRows = d.top_referrers.map((r, i) => `
       <tr>
         <td style="padding:8px 10px;color:var(--c-text-muted);font-weight:600">${i + 1}</td>
-        <td style="padding:8px 10px;font-weight:600">${UI.escape(r.name)}</td>
-        <td style="padding:8px 10px;color:var(--c-text-secondary);font-size:var(--text-xs)">${UI.escape(r.email)}</td>
+        <td style="padding:8px 10px;font-weight:600">${_esc(r.name)}</td>
+        <td style="padding:8px 10px;color:var(--c-text-secondary);font-size:var(--text-xs)">${_esc(r.email)}</td>
         <td style="padding:8px 10px;text-align:right">
           <span style="font-size:var(--text-lg);font-weight:800;color:var(--c-primary)">${r.invited_count}</span>
         </td>
@@ -3498,8 +3503,8 @@ window.Page_admin = (() => {
 
     const recentRows = d.recent_invites.slice(0, 50).map(r => `
       <tr>
-        <td style="padding:6px 10px;font-weight:500">${UI.escape(r.name)}</td>
-        <td style="padding:6px 10px;color:var(--c-text-secondary);font-size:var(--text-xs)">${UI.escape(r.referrer_name)}</td>
+        <td style="padding:6px 10px;font-weight:500">${_esc(r.name)}</td>
+        <td style="padding:6px 10px;color:var(--c-text-secondary);font-size:var(--text-xs)">${_esc(r.referrer_name)}</td>
         <td style="padding:6px 10px;color:var(--c-text-muted);font-size:var(--text-xs)">${(r.created_at || '').slice(0, 10)}</td>
       </tr>`).join('');
 
@@ -3569,15 +3574,15 @@ window.Page_admin = (() => {
     const _pendingCard = r => `
       <div class="card" style="padding:var(--space-4);margin-bottom:var(--space-3)">
         <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap">
-          <div class="flex-1-min">
-            <div style="font-weight:600;font-size:var(--text-sm)">${UI.escape(r.name)}</div>
-            <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-bottom:var(--space-2)">${UI.escape(r.email)}</div>
+          <div style="flex:1;min-width:0">
+            <div style="font-weight:600;font-size:var(--text-sm)">${_esc(r.name)}</div>
+            <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-bottom:var(--space-2)">${_esc(r.email)}</div>
             <div style="display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap">
               ${tierBadge(r.tier)}
               ${r.discount_pct > 0 ? `<span style="display:inline-block;padding:1px 8px;border-radius:999px;
   font-size:11px;font-weight:700;background:#e67e22;color:#fff;margin-left:4px">
   ${r.discount_pct}% Rabatt</span>` : ''}
-              <span class="text-xs-muted">${r.created_at?.slice(0,10) || ''}</span>
+              <span style="font-size:var(--text-xs);color:var(--c-text-muted)">${r.created_at?.slice(0,10) || ''}</span>
             </div>
             ${r.discount_reason === 'founder' ? `<div style="font-size:10px;color:#e67e22;margin-top:2px">Gründer — kostenfrei</div>` : ''}
             ${r.discount_reason === 'referred_by_founder' ? `<div style="font-size:10px;color:#e67e22;margin-top:2px">Von Gründer eingeladen</div>` : ''}
@@ -3585,7 +3590,7 @@ window.Page_admin = (() => {
             ${r.message ? `<div style="margin-top:var(--space-2);font-size:var(--text-xs);color:var(--c-text-secondary);
                                        padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
                                        background:var(--c-surface-raised,rgba(0,0,0,.04))">
-                             ${UI.escape(r.message)}
+                             ${_esc(r.message)}
                            </div>` : ''}
           </div>
         </div>
@@ -3593,15 +3598,15 @@ window.Page_admin = (() => {
           ${r.existing_invoice_id ? `
           <button class="btn adm-invoice-edit-btn"
                   data-invoice-id="${r.existing_invoice_id}"
-                  title="Rechnung ${UI.escape(r.existing_invoice_number)} (${UI.escape(r.existing_invoice_status)}) bearbeiten"
+                  title="Rechnung ${_esc(r.existing_invoice_number)} (${_esc(r.existing_invoice_status)}) bearbeiten"
                   style="background:#eab308;color:#1a1a1a;border:none;
                          padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
                          cursor:pointer;font-size:var(--text-sm);font-weight:600">
             ${UI.icon('receipt')} Rechnung bearbeiten
           </button>` : `
           <button class="btn adm-invoice-btn"
-                  data-name="${UI.escape(r.name)}" data-email="${UI.escape(r.email)}"
-                  data-tier="${r.tier}" data-address="${UI.escape(r.billing_address || '')}"
+                  data-name="${_esc(r.name)}" data-email="${_esc(r.email)}"
+                  data-tier="${r.tier}" data-address="${_esc(r.billing_address || '')}"
                   data-discount="${r.discount_pct || 0}"
                   data-discount-reason="${r.discount_reason || ''}"
                   data-referral-count="${r.referral_count || 0}"
@@ -3610,7 +3615,7 @@ window.Page_admin = (() => {
                          cursor:pointer;font-size:var(--text-sm);font-weight:600">
             ${UI.icon('receipt')} Rechnung erstellen
           </button>`}
-          <button class="btn adm-fulfill-btn" data-id="${r.id}" data-name="${UI.escape(r.name)}" data-tier="${r.tier}"
+          <button class="btn adm-fulfill-btn" data-id="${r.id}" data-name="${_esc(r.name)}" data-tier="${r.tier}"
                   style="background:#16a34a;color:#fff;border:none;
                          padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
                          cursor:pointer;font-size:var(--text-sm);font-weight:600">
@@ -3622,16 +3627,16 @@ window.Page_admin = (() => {
     // Erledigte als kompakte Tabellenzeilen
     const _doneRow = r => `
       <tr>
-        <td style="padding:var(--space-2) var(--space-3);font-size:var(--text-sm)">${UI.escape(r.name)}<br>
-          <span class="text-xs-muted">${UI.escape(r.email)}</span></td>
+        <td style="padding:var(--space-2) var(--space-3);font-size:var(--text-sm)">${_esc(r.name)}<br>
+          <span style="font-size:var(--text-xs);color:var(--c-text-muted)">${_esc(r.email)}</span></td>
         <td style="padding:var(--space-2) var(--space-3)">${tierBadge(r.tier)}</td>
         <td style="padding:var(--space-2) var(--space-3);font-size:var(--text-xs);color:var(--c-success)">
           ✓ ${r.fulfilled_at?.slice(0,10) || ''}</td>
       </tr>`;
 
     el.innerHTML = `
-      <div class="mb-4">
-        <div class="by-card-section-header mb-3">
+      <div style="margin-bottom:var(--space-4)">
+        <div class="by-card-section-header" style="margin-bottom:var(--space-3)">
           Offene Anfragen (${pending.length})
         </div>
         ${pending.length
@@ -3763,7 +3768,7 @@ window.Page_admin = (() => {
     async function _load() {
       el.innerHTML = `
         <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-3);flex-wrap:wrap;gap:var(--space-2)">
-          <div class="flex-gap-2">
+          <div style="display:flex;gap:var(--space-2)">
             <button class="btn btn-sm ${_subView === 'liste' ? 'btn-primary' : 'btn-ghost'} adm-inv-nav" data-v="liste">
               ${UI.icon('list-bullets')} Rechnungen
             </button>
@@ -3836,13 +3841,13 @@ window.Page_admin = (() => {
         actions.push(`<button class="btn btn-sm btn-ghost adm-inv-edit" data-id="${inv.id}" title="Bearbeiten">
           ${UI.icon('pencil')} Bearbeiten
         </button>`);
-        actions.push(`<button class="btn btn-sm btn-primary adm-inv-send" data-id="${inv.id}" data-num="${UI.escape(inv.invoice_number)}" title="Senden">
+        actions.push(`<button class="btn btn-sm btn-primary adm-inv-send" data-id="${inv.id}" data-num="${_esc(inv.invoice_number)}" title="Senden">
           ${UI.icon('paper-plane-tilt')} Senden
         </button>`);
       }
       if (inv.status === 'sent') {
-        actions.push(`<button class="btn btn-sm btn-ghost adm-inv-send" data-id="${inv.id}" data-num="${UI.escape(inv.invoice_number)}" title="Erneut senden"
-                class="text-muted">
+        actions.push(`<button class="btn btn-sm btn-ghost adm-inv-send" data-id="${inv.id}" data-num="${_esc(inv.invoice_number)}" title="Erneut senden"
+                style="color:var(--c-text-muted)">
           ${UI.icon('paper-plane-tilt')} Erneut senden
         </button>`);
       }
@@ -3850,8 +3855,8 @@ window.Page_admin = (() => {
         actions.push(`<button class="btn btn-sm btn-secondary adm-inv-pay" data-id="${inv.id}" data-amount="${inv.amount_gross}" title="Als bezahlt markieren">
           ${UI.icon('check-circle')} Bezahlt
         </button>`);
-        actions.push(`<button class="btn btn-sm btn-ghost adm-inv-cancel" data-id="${inv.id}" data-num="${UI.escape(inv.invoice_number)}"
-                class="text-danger" title="Stornieren">
+        actions.push(`<button class="btn btn-sm btn-ghost adm-inv-cancel" data-id="${inv.id}" data-num="${_esc(inv.invoice_number)}"
+                style="color:var(--c-danger)" title="Stornieren">
           ${UI.icon('x-circle')} Storno
         </button>`);
       }
@@ -3864,11 +3869,11 @@ window.Page_admin = (() => {
       return `
         <tr style="${i % 2 === 1 ? 'background:var(--c-surface-2)' : ''}">
           <td class="adm-td" style="font-weight:600;font-family:monospace;font-size:var(--text-xs)">
-            ${UI.escape(inv.invoice_number)}
+            ${_esc(inv.invoice_number)}
           </td>
           <td class="adm-td">
-            <div style="font-weight:500">${UI.escape(inv.recipient_name)}</div>
-            <div class="text-xs-muted">${UI.escape(inv.recipient_email || '')}</div>
+            <div style="font-weight:500">${_esc(inv.recipient_name)}</div>
+            <div style="font-size:var(--text-xs);color:var(--c-text-muted)">${_esc(inv.recipient_email || '')}</div>
           </td>
           <td class="adm-td" style="text-align:right;font-weight:700;white-space:nowrap">
             ${_fmtEur(inv.amount_gross)}
@@ -3876,7 +3881,7 @@ window.Page_admin = (() => {
               ? `<div style="font-size:10px;color:var(--c-warning,#d97706);font-weight:500">
                    erhalten: ${_fmtEur(inv.paid_amount)}
                    ${inv.paid_amount < inv.amount_gross
-                     ? `<span class="text-danger">-${_fmtEur(inv.amount_gross - inv.paid_amount)}</span>`
+                     ? `<span style="color:var(--c-danger)">-${_fmtEur(inv.amount_gross - inv.paid_amount)}</span>`
                      : ''}
                  </div>`
               : ''}
@@ -3899,7 +3904,7 @@ window.Page_admin = (() => {
               <tr style="background:var(--c-surface-2);text-align:left">
                 <th class="adm-th">Nummer</th>
                 <th class="adm-th">Empfänger</th>
-                <th class="adm-th text-right">Betrag</th>
+                <th class="adm-th" style="text-align:right">Betrag</th>
                 <th class="adm-th">Status</th>
                 <th class="adm-th">Erstellt</th>
                 <th class="adm-th"></th>
@@ -3985,7 +3990,7 @@ window.Page_admin = (() => {
     UI.modal.open({
       title: `${UI.icon('receipt')} ${isEdit ? (isLocked ? 'Rechnung ansehen' : 'Rechnung bearbeiten') : 'Neue Rechnung erstellen'}`,
       body: `
-        <form id="${id}" class="flex-col-gap-3">
+        <form id="${id}" style="display:flex;flex-direction:column;gap:var(--space-3)">
 
           ${lockedBanner}
 
@@ -3998,35 +4003,35 @@ window.Page_admin = (() => {
           </div>` : ''}
 
           <!-- Empfänger -->
-          <div class="grid-2">
+          <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
             <div>
-              <label class="form-label text-xs">Empfänger Name *</label>
+              <label class="form-label" style="font-size:var(--text-xs)">Empfänger Name *</label>
               <input class="form-control" name="recipient_name" type="text" required
-                     placeholder="Max Muster" value="${UI.escape(p.recipient_name || '')}">
+                     placeholder="Max Muster" value="${_esc(p.recipient_name || '')}">
             </div>
             <div>
-              <label class="form-label text-xs">E-Mail</label>
+              <label class="form-label" style="font-size:var(--text-xs)">E-Mail</label>
               <input class="form-control" name="recipient_email" type="email"
-                     placeholder="max@example.com" value="${UI.escape(p.recipient_email || '')}">
+                     placeholder="max@example.com" value="${_esc(p.recipient_email || '')}">
             </div>
           </div>
 
           <div>
-            <label class="form-label text-xs">Adresse
+            <label class="form-label" style="font-size:var(--text-xs)">Adresse
               ${p.recipient_name && !p.recipient_address
                 ? `<span style="color:var(--c-warning);font-size:10px"> ⚠ Nutzer hat keine Rechnungsadresse hinterlegt</span>`
-                : '<span class="text-muted">(optional)</span>'}
+                : '<span style="color:var(--c-text-muted)">(optional)</span>'}
             </label>
             <textarea class="form-control" name="recipient_address" rows="2"
                       placeholder="Musterstr. 1&#10;12345 Berlin"
-                      style="resize:vertical;font-family:inherit">${UI.escape(p.recipient_address || '')}</textarea>
+                      style="resize:vertical;font-family:inherit">${_esc(p.recipient_address || '')}</textarea>
           </div>
 
           <div>
-            <label class="form-label text-xs">Leistungszeitraum <span class="text-muted">(optional)</span></label>
+            <label class="form-label" style="font-size:var(--text-xs)">Leistungszeitraum <span style="color:var(--c-text-muted)">(optional)</span></label>
             <input class="form-control" name="service_period" type="text"
                    placeholder="z.B. 15.05.2026 oder einmalige Leistung"
-                   value="${UI.escape(p.service_period || '')}">
+                   value="${_esc(p.service_period || '')}">
           </div>
 
           <!-- Positionen -->
@@ -4038,7 +4043,7 @@ window.Page_admin = (() => {
                 + Position hinzufügen
               </button>
             </div>
-            <div id="${id}-items" class="flex-col-gap-2">
+            <div id="${id}-items" style="display:flex;flex-direction:column;gap:var(--space-2)">
               <!-- Items werden dynamisch eingefügt -->
             </div>
           </div>
@@ -4053,15 +4058,15 @@ window.Page_admin = (() => {
             <!-- Live-Vorschau -->
             <div id="${id}-preview" style="background:var(--c-surface-2);border-radius:var(--radius-md);
                  padding:var(--space-2) var(--space-3);font-size:var(--text-xs);text-align:right">
-              <span class="text-muted">Netto: —</span>
+              <span style="color:var(--c-text-muted)">Netto: —</span>
             </div>
           </div>
 
           <div>
-            <label class="form-label text-xs">Notizen <span class="text-muted">(optional)</span></label>
+            <label class="form-label" style="font-size:var(--text-xs)">Notizen <span style="color:var(--c-text-muted)">(optional)</span></label>
             <textarea class="form-control" name="notes" rows="2"
                       style="resize:vertical;font-family:inherit"
-                      placeholder="Interne Notiz / Zahlungshinweis">${UI.escape(p.notes || (!isEdit && !p.recipient_name ? 'Zahlbar innerhalb von 14 Tagen ab Rechnungsdatum.' : ''))}</textarea>
+                      placeholder="Interne Notiz / Zahlungshinweis">${_esc(p.notes || (!isEdit && !p.recipient_name ? 'Zahlbar innerhalb von 14 Tagen ab Rechnungsdatum.' : ''))}</textarea>
           </div>
 
         </form>
@@ -4069,7 +4074,7 @@ window.Page_admin = (() => {
       footer: `
         <div style="display:flex;flex-direction:column;gap:var(--space-2);width:100%">
           ${isLocked
-            ? `<button class="btn btn-secondary" data-modal-close class="w-full">Schließen</button>`
+            ? `<button class="btn btn-secondary" data-modal-close style="width:100%">Schließen</button>`
             : `<div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)">
                  <button class="btn btn-secondary" data-modal-close>Abbrechen</button>
                  <button class="btn btn-primary" form="${id}" type="submit" style="min-width:0">
@@ -4115,7 +4120,7 @@ window.Page_admin = (() => {
       itemEl.style.cssText = 'display:grid;grid-template-columns:1fr 60px 100px auto;gap:var(--space-2);align-items:center';
       itemEl.innerHTML = `
         <input class="form-control inv-item-desc" type="text" placeholder="Beschreibung *"
-               value="${UI.escape(desc)}" class="text-sm">
+               value="${_esc(desc)}" style="font-size:var(--text-sm)">
         <input class="form-control inv-item-qty" type="number" min="1" value="${qty}"
                style="font-size:var(--text-sm);text-align:right" title="Menge">
         <input class="form-control inv-item-price" type="number" min="0" step="0.01" value="${price.toFixed(2)}"
@@ -4147,9 +4152,9 @@ window.Page_admin = (() => {
       const rabatt = netto * disc / 100;
       const brutto = netto - rabatt;
       previewEl.innerHTML = `
-        <span class="text-muted">Netto: </span>
+        <span style="color:var(--c-text-muted)">Netto: </span>
         <strong>${netto.toLocaleString('de-DE',{minimumFractionDigits:2})} €</strong>
-        ${disc > 0 ? `&nbsp;·&nbsp;<span class="text-danger">-${rabatt.toLocaleString('de-DE',{minimumFractionDigits:2})} € (${disc}%)</span>` : ''}
+        ${disc > 0 ? `&nbsp;·&nbsp;<span style="color:var(--c-danger)">-${rabatt.toLocaleString('de-DE',{minimumFractionDigits:2})} € (${disc}%)</span>` : ''}
         &nbsp;·&nbsp;<span style="color:var(--c-success);font-weight:700">Brutto: ${brutto.toLocaleString('de-DE',{minimumFractionDigits:2})} €</span>
       `;
     }
@@ -4216,13 +4221,13 @@ window.Page_admin = (() => {
     UI.modal.open({
       title: `${UI.icon('check-circle')} Als bezahlt markieren`,
       body: `
-        <form id="${id}" class="flex-col-gap-3">
+        <form id="${id}" style="display:flex;flex-direction:column;gap:var(--space-3)">
           <div>
-            <label class="form-label text-xs">Zahlungsdatum *</label>
+            <label class="form-label" style="font-size:var(--text-xs)">Zahlungsdatum *</label>
             <input class="form-control" name="paid_at" type="date" value="${today}" required>
           </div>
           <div>
-            <label class="form-label text-xs">Eingegangener Betrag (€) *</label>
+            <label class="form-label" style="font-size:var(--text-xs)">Eingegangener Betrag (€) *</label>
             <input class="form-control" name="paid_amount" id="${id}-amt" type="number" min="0" step="0.01"
                    value="${defaultAmount.toFixed(2)}" required>
           </div>
@@ -4296,12 +4301,12 @@ window.Page_admin = (() => {
     UI.modal.open({
       title: `${UI.icon('x-circle')} Rechnung stornieren`,
       body: `
-        <form id="${id}" class="flex-col-gap-3">
+        <form id="${id}" style="display:flex;flex-direction:column;gap:var(--space-3)">
           <p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin:0">
-            Rechnung <strong>${UI.escape(invoiceNum)}</strong> stornieren.
+            Rechnung <strong>${_esc(invoiceNum)}</strong> stornieren.
           </p>
           <div>
-            <label class="form-label text-xs">Stornierungsgrund *</label>
+            <label class="form-label" style="font-size:var(--text-xs)">Stornierungsgrund *</label>
             <input class="form-control" name="reason" type="text" required
                    placeholder="z. B. Kundenwunsch, Doppelabrechnung…">
           </div>
@@ -4355,7 +4360,7 @@ window.Page_admin = (() => {
 
     const itemsHtml = (inv.items || []).map(item => `
       <tr>
-        <td style="padding:6px 8px">${UI.escape(item.description)}</td>
+        <td style="padding:6px 8px">${_esc(item.description)}</td>
         <td style="padding:6px 8px;text-align:right">${item.quantity}</td>
         <td style="padding:6px 8px;text-align:right">${_fmtEur(item.unit_price)}</td>
         <td style="padding:6px 8px;text-align:right;font-weight:600">${_fmtEur(item.total)}</td>
@@ -4363,15 +4368,15 @@ window.Page_admin = (() => {
     `).join('');
 
     UI.modal.open({
-      title: `${UI.icon('receipt')} ${UI.escape(inv.invoice_number)}`,
+      title: `${UI.icon('receipt')} ${_esc(inv.invoice_number)}`,
       body: `
         <div style="display:flex;flex-direction:column;gap:var(--space-3);font-size:var(--text-sm)">
-          <div class="grid-2">
+          <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
             <div>
               <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-bottom:2px">Empfänger</div>
-              <div style="font-weight:600">${UI.escape(inv.recipient_name)}</div>
-              ${inv.recipient_email ? `<div style="color:var(--c-text-muted);font-size:var(--text-xs)">${UI.escape(inv.recipient_email)}</div>` : ''}
-              ${inv.recipient_address ? `<div style="color:var(--c-text-secondary);font-size:var(--text-xs);white-space:pre-line;margin-top:2px">${UI.escape(inv.recipient_address)}</div>` : ''}
+              <div style="font-weight:600">${_esc(inv.recipient_name)}</div>
+              ${inv.recipient_email ? `<div style="color:var(--c-text-muted);font-size:var(--text-xs)">${_esc(inv.recipient_email)}</div>` : ''}
+              ${inv.recipient_address ? `<div style="color:var(--c-text-secondary);font-size:var(--text-xs);white-space:pre-line;margin-top:2px">${_esc(inv.recipient_address)}</div>` : ''}
             </div>
             <div>
               <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-bottom:2px">Status</div>
@@ -4387,7 +4392,7 @@ window.Page_admin = (() => {
           ${inv.service_period ? `
           <div>
             <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-bottom:2px">Leistungszeitraum</div>
-            <div>${UI.escape(inv.service_period)}</div>
+            <div>${_esc(inv.service_period)}</div>
           </div>` : ''}
 
           <!-- Positionen -->
@@ -4416,7 +4421,7 @@ window.Page_admin = (() => {
           <div>
             <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-bottom:2px">Notizen</div>
             <div style="background:var(--c-surface-2);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);
-                        font-size:var(--text-xs);white-space:pre-wrap">${UI.escape(inv.notes)}</div>
+                        font-size:var(--text-xs);white-space:pre-wrap">${_esc(inv.notes)}</div>
           </div>` : ''}
         </div>
       `,
@@ -4446,8 +4451,8 @@ window.Page_admin = (() => {
 
     const monthRows = (cf.monthly || []).map((m, i) => `
       <tr style="${i % 2 === 1 ? 'background:var(--c-surface-2)' : ''}">
-        <td class="adm-td">${UI.escape(m.month)}</td>
-        <td class="adm-td text-right">${m.count}</td>
+        <td class="adm-td">${_esc(m.month)}</td>
+        <td class="adm-td" style="text-align:right">${m.count}</td>
         <td class="adm-td" style="text-align:right;font-weight:600">${_fmtEur(m.revenue)}</td>
       </tr>`).join('');
 
@@ -4474,7 +4479,7 @@ window.Page_admin = (() => {
       </div>
 
       <!-- Monatliche Tabelle -->
-      <div class="card adm-table-card mb-4">
+      <div class="card adm-table-card" style="margin-bottom:var(--space-4)">
         <div style="padding:var(--space-3) var(--space-4);font-size:var(--text-xs);font-weight:700;
                     text-transform:uppercase;letter-spacing:.05em;color:var(--c-text-secondary);
                     border-bottom:1px solid var(--c-border)">Monatliche Übersicht</div>
@@ -4483,8 +4488,8 @@ window.Page_admin = (() => {
             <thead>
               <tr style="background:var(--c-surface-2);text-align:left">
                 <th class="adm-th">Monat</th>
-                <th class="adm-th text-right">Rechnungen</th>
-                <th class="adm-th text-right">Umsatz</th>
+                <th class="adm-th" style="text-align:right">Rechnungen</th>
+                <th class="adm-th" style="text-align:right">Umsatz</th>
               </tr>
             </thead>
             <tbody>
@@ -4495,17 +4500,17 @@ window.Page_admin = (() => {
       </div>
 
       <!-- Quartalsbericht -->
-      <div class="card p-4">
+      <div class="card" style="padding:var(--space-4)">
         <div style="font-size:var(--text-sm);font-weight:700;margin-bottom:var(--space-3)">
           ${UI.icon('file-csv')} Quartalsbericht herunterladen
         </div>
         <div style="display:flex;gap:var(--space-3);align-items:flex-end;flex-wrap:wrap">
           <div>
-            <label class="form-label text-xs">Jahr</label>
+            <label class="form-label" style="font-size:var(--text-xs)">Jahr</label>
             <select id="adm-inv-year" class="form-control" style="width:auto">${years}</select>
           </div>
           <div>
-            <label class="form-label text-xs">Quartal</label>
+            <label class="form-label" style="font-size:var(--text-xs)">Quartal</label>
             <select id="adm-inv-quarter" class="form-control" style="width:auto">
               <option value="1">Q1 (Jan–Mär)</option>
               <option value="2">Q2 (Apr–Jun)</option>
@@ -4520,7 +4525,7 @@ window.Page_admin = (() => {
             ${UI.icon('eye')} Vorschau
           </button>
         </div>
-        <div id="adm-inv-q-result" class="mt-3"></div>
+        <div id="adm-inv-q-result" style="margin-top:var(--space-3)"></div>
       </div>
     `;
 
@@ -4574,7 +4579,7 @@ window.Page_admin = (() => {
       try {
         const data = await API.get(`/admin/invoices/quarterly/${year}/${q}`);
         if (!data.invoices?.length) {
-          resultEl.innerHTML = `<div class="text-xs-muted">Keine Rechnungen in ${data.period || `Q${q} ${year}`}.</div>`;
+          resultEl.innerHTML = `<div style="font-size:var(--text-xs);color:var(--c-text-muted)">Keine Rechnungen in ${data.period || `Q${q} ${year}`}.</div>`;
           return;
         }
         const _fmtE = v => v != null ? Number(v).toLocaleString('de-DE',{minimumFractionDigits:2}) + ' €' : '—';
@@ -4585,39 +4590,39 @@ window.Page_admin = (() => {
           const effectiveAmt = (inv.status === 'paid' && inv.paid_amount != null) ? inv.paid_amount : inv.amount_gross;
           const amtColor = isStorno ? 'color:var(--c-danger)' : (effectiveAmt < 0 ? 'color:var(--c-danger)' : '');
           const amtNote = (inv.status === 'paid' && inv.paid_amount != null && Math.abs(inv.paid_amount - inv.amount_gross) >= 0.01)
-            ? ` <span class="text-xs-muted">(RG: ${_fmtE(inv.amount_gross)})</span>` : '';
+            ? ` <span style="font-size:var(--text-xs);color:var(--c-text-muted)">(RG: ${_fmtE(inv.amount_gross)})</span>` : '';
           return `
           <tr style="${i%2===1?'background:var(--c-surface-2)':''}">
-            <td class="adm-td" style="font-family:monospace;font-size:var(--text-xs);${isStorno?'color:var(--c-danger)':''}">${UI.escape(inv.invoice_number)}</td>
-            <td class="adm-td">${UI.escape(inv.recipient_name)}</td>
+            <td class="adm-td" style="font-family:monospace;font-size:var(--text-xs);${isStorno?'color:var(--c-danger)':''}">${_esc(inv.invoice_number)}</td>
+            <td class="adm-td">${_esc(inv.recipient_name)}</td>
             <td class="adm-td" style="text-align:right;font-weight:600;${amtColor}">${_fmtE(effectiveAmt)}${amtNote}</td>
             <td class="adm-td" style="${isStorno?'color:var(--c-danger)':''}">${sL[inv.status]||inv.status}</td>
-            <td class="adm-td text-xs-muted">${_fmtD(inv.created_at)}</td>
+            <td class="adm-td" style="font-size:var(--text-xs);color:var(--c-text-muted)">${_fmtD(inv.created_at)}</td>
           </tr>`;
         }).join('');
         resultEl.innerHTML = `
           <div style="font-size:var(--text-xs);font-weight:700;color:var(--c-text-secondary);margin-bottom:var(--space-2)">
-            ${UI.escape(data.period || `Q${q} ${year}`)} — ${data.count} Buchung(en) · Summe: ${_fmtE(data.total_gross)}
+            ${_esc(data.period || `Q${q} ${year}`)} — ${data.count} Buchung(en) · Summe: ${_fmtE(data.total_gross)}
           </div>
           <div class="adm-table-scroll">
             <table class="adm-table">
               <thead><tr style="background:var(--c-surface-2)">
                 <th class="adm-th">Nummer</th><th class="adm-th">Empfänger</th>
-                <th class="adm-th text-right">Betrag</th><th class="adm-th">Status</th>
+                <th class="adm-th" style="text-align:right">Betrag</th><th class="adm-th">Status</th>
                 <th class="adm-th">Erstellt</th>
               </tr></thead>
               <tbody>${rows2}</tbody>
               <tfoot><tr style="border-top:2px solid var(--c-border)">
                 <td colspan="2" class="adm-td" style="font-weight:600">Gesamt</td>
                 <td class="adm-td" style="text-align:right;font-weight:700;color:var(--c-primary)">${_fmtE(data.total_gross)}</td>
-                <td colspan="2" class="adm-td text-xs-muted">
+                <td colspan="2" class="adm-td" style="font-size:var(--text-xs);color:var(--c-text-muted)">
                   Netto: ${_fmtE(data.total_net)} · MwSt: ${_fmtE(data.total_tax)}
                 </td>
               </tr></tfoot>
             </table>
           </div>`;
       } catch (e) {
-        resultEl.innerHTML = `<div style="color:var(--c-danger);font-size:var(--text-xs)">Fehler: ${UI.escape(e.message)}</div>`;
+        resultEl.innerHTML = `<div style="color:var(--c-danger);font-size:var(--text-xs)">Fehler: ${_esc(e.message)}</div>`;
       }
     });
   }
diff --git a/backend/static/js/pages/adoption.js b/backend/static/js/pages/adoption.js
index b2c6410..b20682e 100644
--- a/backend/static/js/pages/adoption.js
+++ b/backend/static/js/pages/adoption.js
@@ -56,7 +56,7 @@ window.Page_adoption = (() => {
         <input id="adp-rasse" class="form-control" type="text"
                placeholder="Rasse filtern…"
                style="flex:1;min-width:120px;max-width:220px"
-               value="${UI.escape(_rasseFilter)}">
+               value="${_esc(_rasseFilter)}">
         <button class="btn btn-secondary" id="adp-btn-locate"
                 style="white-space:nowrap">
           ${UI.icon('map-pin')} Mein Standort
@@ -270,7 +270,7 @@ window.Page_adoption = (() => {
     content.innerHTML = `
       <div style="text-align:center;padding:var(--space-8) var(--space-4)">
         <div style="font-size:2.5rem;margin-bottom:var(--space-3)">🐾</div>
-        <h3 class="mb-2">Finde Hunde in deiner Nähe</h3>
+        <h3 style="margin-bottom:var(--space-2)">Finde Hunde in deiner Nähe</h3>
         <p style="color:var(--c-text-secondary);margin-bottom:var(--space-5);max-width:320px;margin-inline:auto">
           Erlaube den Zugriff auf deinen Standort oder gib eine PLZ ein, um Tierheim-Hunde
           in deiner Umgebung zu finden.
@@ -306,7 +306,7 @@ window.Page_adoption = (() => {
     if (!animals.length) {
       content.innerHTML = `
         <p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin-bottom:var(--space-4)">
-          ${_rasseFilter ? `Keine Hunde gefunden für "<strong>${UI.escape(_rasseFilter)}</strong>"` : `Keine Hunde im Umkreis von ${_radius} km gefunden.`}
+          ${_rasseFilter ? `Keine Hunde gefunden für "<strong>${_esc(_rasseFilter)}</strong>"` : `Keine Hunde im Umkreis von ${_radius} km gefunden.`}
         </p>
         <div style="display:flex;flex-direction:column;gap:var(--space-3);max-width:380px">
           <a href="https://www.tierheimhelden.de/hunde/liste"
@@ -339,7 +339,7 @@ window.Page_adoption = (() => {
         </p>
         <a href="https://www.tierheimhelden.de/hunde/liste"
            target="_blank" rel="noopener noreferrer"
-           class="btn btn-secondary text-sm">
+           class="btn btn-secondary" style="font-size:var(--text-sm)">
           ${UI.icon('arrow-square-out')} Tierheimhelden.de — alle Hunde
         </a>
       </div>
@@ -355,7 +355,7 @@ window.Page_adoption = (() => {
 
   function _animalCard(a) {
     const foto = a.foto_url
-      ? `<img src="${UI.escape(a.foto_url)}" alt="${UI.escape(a.name)}"
+      ? `<img src="${_esc(a.foto_url)}" alt="${_esc(a.name)}"
               style="width:100%;height:100%;object-fit:cover"
               onerror="this.parentElement.innerHTML='<div style=&quot;display:flex;align-items:center;justify-content:center;height:100%;font-size:2rem&quot;>🐶</div>'">`
       : '<div style="display:flex;align-items:center;justify-content:center;height:100%;font-size:2.5rem">🐶</div>';
@@ -366,7 +366,7 @@ window.Page_adoption = (() => {
     const tierheim = a.tierheim || '';
 
     return `
-      <div data-adp-url="${UI.escape(a.adoptions_url)}"
+      <div data-adp-url="${_esc(a.adoptions_url)}"
            style="border-radius:var(--radius-md);overflow:hidden;
                   background:var(--c-surface-2);cursor:pointer;
                   box-shadow:0 1px 4px rgba(0,0,0,0.08);
@@ -379,16 +379,16 @@ window.Page_adoption = (() => {
         <div style="padding:var(--space-2) var(--space-2) var(--space-3)">
           <div style="font-weight:600;font-size:var(--text-sm);
                       margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
-            ${UI.escape(a.name)}
+            ${_esc(a.name)}
           </div>
           ${rasseTxt ? `<div style="font-size:var(--text-xs);color:var(--c-text-secondary);
                                    white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
-            ${UI.escape(rasseTxt)}
+            ${_esc(rasseTxt)}
           </div>` : ''}
           <div style="display:flex;gap:var(--space-1);flex-wrap:wrap;margin-top:var(--space-1)">
             ${alterTxt ? `<span style="font-size:10px;background:var(--c-surface-3);
                                        border-radius:999px;padding:1px 6px;color:var(--c-text-secondary)">
-              ${UI.escape(alterTxt)}
+              ${_esc(alterTxt)}
             </span>` : ''}
             ${a.geschlecht ? `<span style="font-size:10px;background:var(--c-surface-3);
                                           border-radius:999px;padding:1px 6px;color:var(--c-text-secondary)">
@@ -396,12 +396,12 @@ window.Page_adoption = (() => {
             </span>` : ''}
             ${distTxt ? `<span style="font-size:10px;background:var(--c-primary-light,#ede9fe);
                                       border-radius:999px;padding:1px 6px;color:var(--c-primary)">
-              ${UI.escape(distTxt)}
+              ${_esc(distTxt)}
             </span>` : ''}
           </div>
           ${tierheim ? `<div style="font-size:10px;color:var(--c-text-muted);margin-top:var(--space-1);
-                                    white-space:nowrap;overflow:hidden;text-overflow:ellipsis" title="${UI.escape(tierheim)}">
-            ${UI.icon('house-line')} ${UI.escape(tierheim)}
+                                    white-space:nowrap;overflow:hidden;text-overflow:ellipsis" title="${_esc(tierheim)}">
+            ${UI.icon('house-line')} ${_esc(tierheim)}
           </div>` : ''}
         </div>
       </div>
@@ -434,7 +434,7 @@ window.Page_adoption = (() => {
       <p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin-bottom:var(--space-3)">
         ${shelters.length} Tierheim${shelters.length !== 1 ? 'e' : ''} im Umkreis von ${_radius} km
       </p>
-      <div class="flex-col-gap-2">
+      <div style="display:flex;flex-direction:column;gap:var(--space-2)">
         ${shelters.map(s => _shelterRow(s)).join('')}
       </div>
       <div style="margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--c-border)">
@@ -444,12 +444,12 @@ window.Page_adoption = (() => {
         <div style="display:flex;gap:var(--space-2);flex-wrap:wrap">
           <a href="https://www.tierheimhelden.de"
              target="_blank" rel="noopener noreferrer"
-             class="btn btn-secondary btn-sm text-sm">
+             class="btn btn-secondary btn-sm" style="font-size:var(--text-sm)">
             ${UI.icon('arrow-square-out')} Tierheimhelden.de
           </a>
           <a href="https://www.tierschutz.com/tierheimsuche/"
              target="_blank" rel="noopener noreferrer"
-             class="btn btn-secondary btn-sm text-sm">
+             class="btn btn-secondary btn-sm" style="font-size:var(--text-sm)">
             ${UI.icon('magnifying-glass')} tierschutz.com
           </a>
         </div>
@@ -459,7 +459,7 @@ window.Page_adoption = (() => {
 
   function _shelterRow(s) {
     return `
-      <a href="${UI.escape(s.url)}" target="_blank" rel="noopener noreferrer"
+      <a href="${_esc(s.url)}" target="_blank" rel="noopener noreferrer"
          style="display:flex;align-items:center;gap:var(--space-3);
                 padding:var(--space-3);border-radius:var(--radius-md);
                 background:var(--c-surface-2);text-decoration:none;color:inherit;
@@ -473,13 +473,13 @@ window.Page_adoption = (() => {
                     font-size:1.2rem">
           🏠
         </div>
-        <div class="flex-1-min">
+        <div style="flex:1;min-width:0">
           <div style="font-weight:600;font-size:var(--text-sm);
                       white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
-            ${UI.escape(s.name)}
+            ${_esc(s.name)}
           </div>
-          <div class="text-xs-secondary">
-            ${UI.escape(s.plz)} ${UI.escape(s.stadt)}
+          <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">
+            ${_esc(s.plz)} ${_esc(s.stadt)}
           </div>
         </div>
         <div style="display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0">
@@ -520,7 +520,7 @@ window.Page_adoption = (() => {
       content.innerHTML = `
         <div style="text-align:center;padding:var(--space-8) var(--space-4)">
           <div style="font-size:2.5rem;margin-bottom:var(--space-3)">🐾</div>
-          <h3 class="mb-2">Noch keine Hunde zur Weitervermittlung</h3>
+          <h3 style="margin-bottom:var(--space-2)">Noch keine Hunde zur Weitervermittlung</h3>
           <p style="color:var(--c-text-secondary);margin-bottom:var(--space-5);max-width:320px;margin-inline:auto">
             Hier können Halter Hunde privat zur Weitervermittlung anbieten —
             zum Beispiel bei Umzug, Krankheit oder Allergie.
@@ -530,7 +530,7 @@ window.Page_adoption = (() => {
               ${UI.icon('plus')} Hund zur Vermittlung anbieten
             </button>
           ` : `
-            <p class="text-sm-secondary">
+            <p style="font-size:var(--text-sm);color:var(--c-text-secondary)">
               Bitte anmelden, um ein Inserat zu erstellen.
             </p>
           `}
@@ -556,8 +556,8 @@ window.Page_adoption = (() => {
 
       ${isLoggedIn && _myListings && _myListings.length ? `
         <div id="adp-my-listings" style="margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--c-border)">
-          <h4 class="mb-3">Meine Inserate</h4>
-          <div class="flex-col-gap-2">
+          <h4 style="margin-bottom:var(--space-3)">Meine Inserate</h4>
+          <div style="display:flex;flex-direction:column;gap:var(--space-2)">
             ${_myListings.map(l => _myListingRow(l)).join('')}
           </div>
         </div>
@@ -610,7 +610,7 @@ window.Page_adoption = (() => {
 
   function _communityCard(l) {
     const foto = l.foto_url
-      ? `<img src="${UI.escape(l.foto_url)}" alt="${UI.escape(l.name)}"
+      ? `<img src="${_esc(l.foto_url)}" alt="${_esc(l.name)}"
               style="width:100%;height:100%;object-fit:cover"
               onerror="this.parentElement.innerHTML='<div style=&quot;display:flex;align-items:center;justify-content:center;height:100%;font-size:2.5rem&quot;>🐾</div>'">`
       : '<div style="display:flex;align-items:center;justify-content:center;height:100%;font-size:2.5rem">🐾</div>';
@@ -635,11 +635,11 @@ window.Page_adoption = (() => {
 
     const interestBtn = l.user_interested
       ? `<button class="btn btn-secondary btn-sm" style="width:100%;font-size:var(--text-xs)"
-                 data-adp-interest="${UI.escape(l.id)}" data-adp-interested="true">
+                 data-adp-interest="${_esc(l.id)}" data-adp-interested="true">
            ✓ Bereits gemeldet
          </button>`
       : `<button class="btn btn-primary btn-sm" style="width:100%;font-size:var(--text-xs)"
-                 data-adp-interest="${UI.escape(l.id)}" data-adp-interested="false"
+                 data-adp-interest="${_esc(l.id)}" data-adp-interested="false"
                  ${!isActive ? 'disabled' : ''}>
            Interesse bekunden
          </button>`;
@@ -657,7 +657,7 @@ window.Page_adoption = (() => {
                         display:flex;align-items:center;justify-content:center">
               <span style="color:#fff;font-weight:700;font-size:var(--text-sm);
                            background:rgba(0,0,0,0.6);padding:4px 12px;border-radius:999px">
-                ${UI.escape(statusLabel)}
+                ${_esc(statusLabel)}
               </span>
             </div>
           ` : ''}
@@ -666,17 +666,17 @@ window.Page_adoption = (() => {
         <div style="padding:var(--space-2) var(--space-2) var(--space-3);flex:1;display:flex;flex-direction:column;gap:var(--space-1)">
           <div style="font-weight:600;font-size:var(--text-sm);
                       white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
-            ${UI.escape(l.name)}
+            ${_esc(l.name)}
           </div>
           ${l.rasse ? `<div style="font-size:var(--text-xs);color:var(--c-text-secondary);
                                    white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
-            ${UI.escape(l.rasse)}
+            ${_esc(l.rasse)}
           </div>` : ''}
           <!-- Badges -->
           <div style="display:flex;gap:4px;flex-wrap:wrap">
             ${alterLabel ? `<span style="font-size:10px;background:var(--c-surface-3);
                                          border-radius:999px;padding:1px 6px;color:var(--c-text-secondary)">
-              ${UI.escape(alterLabel)}
+              ${_esc(alterLabel)}
             </span>` : ''}
             ${genderIcon ? `<span style="font-size:10px;background:var(--c-surface-3);
                                           border-radius:999px;padding:1px 6px;color:var(--c-text-secondary)">
@@ -684,14 +684,14 @@ window.Page_adoption = (() => {
             </span>` : ''}
             ${distTxt ? `<span style="font-size:10px;background:var(--c-primary-light,#ede9fe);
                                       border-radius:999px;padding:1px 6px;color:var(--c-primary)">
-              ${UI.escape(distTxt)}
+              ${_esc(distTxt)}
             </span>` : ''}
           </div>
-          ${ort ? `<div style="font-size:10px;color:var(--c-text-muted)">${UI.escape(ort)}</div>` : ''}
+          ${ort ? `<div style="font-size:10px;color:var(--c-text-muted)">${_esc(ort)}</div>` : ''}
           ${l.beschreibung ? `<div style="font-size:var(--text-xs);color:var(--c-text-secondary);
                                           overflow:hidden;display:-webkit-box;
                                           -webkit-line-clamp:2;-webkit-box-orient:vertical">
-            ${UI.escape(l.beschreibung)}
+            ${_esc(l.beschreibung)}
           </div>` : ''}
           ${l.interesse_count ? `<div style="font-size:10px;color:var(--c-text-muted)">
             ❤️ ${l.interesse_count} Interessent${l.interesse_count !== 1 ? 'en' : ''}
@@ -714,23 +714,23 @@ window.Page_adoption = (() => {
       <div style="display:flex;align-items:center;gap:var(--space-2);
                   padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
                   background:var(--c-surface-2);border:1px solid var(--c-border)">
-        <div class="flex-1-min">
+        <div style="flex:1;min-width:0">
           <div style="font-weight:600;font-size:var(--text-sm);
                       white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
-            ${UI.escape(l.name)}
+            ${_esc(l.name)}
           </div>
-          <div class="text-xs-secondary">
+          <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">
             ${l.interesse_count || 0} Interessent${(l.interesse_count || 0) !== 1 ? 'en' : ''}
           </div>
         </div>
         <select class="form-control" style="width:auto;font-size:var(--text-xs)"
-                data-adp-status-change="${UI.escape(l.id)}">
+                data-adp-status-change="${_esc(l.id)}">
           ${statusOptions.map(o => `
             <option value="${o.value}" ${l.status === o.value ? 'selected' : ''}>${o.label}</option>
           `).join('')}
         </select>
         <button class="btn btn-danger btn-sm" style="font-size:var(--text-xs);white-space:nowrap"
-                data-adp-delete="${UI.escape(l.id)}">
+                data-adp-delete="${_esc(l.id)}">
           ${UI.icon('trash')} Löschen
         </button>
       </div>
@@ -764,7 +764,7 @@ window.Page_adoption = (() => {
 
     // Interesse bekunden — Modal mit optionaler Nachricht
     const body = `
-      <form id="adp-interest-form" class="flex-col-gap-3">
+      <form id="adp-interest-form" style="display:flex;flex-direction:column;gap:var(--space-3)">
         <p style="color:var(--c-text-secondary);font-size:var(--text-sm)">
           Du kannst optional eine Nachricht an den Anbieter schicken.
         </p>
@@ -816,9 +816,9 @@ window.Page_adoption = (() => {
     }
 
     const body = `
-      <form id="adp-create-form" class="flex-col-gap-3">
+      <form id="adp-create-form" style="display:flex;flex-direction:column;gap:var(--space-3)">
         <div class="form-group">
-          <label class="form-label">Name <span class="text-danger">*</span></label>
+          <label class="form-label">Name <span style="color:var(--c-danger)">*</span></label>
           <input class="form-control" name="name" required placeholder="z.B. Bello">
         </div>
         <div class="form-group">
@@ -849,7 +849,7 @@ window.Page_adoption = (() => {
           <div class="form-group">
             <label class="form-label">PLZ</label>
             <input class="form-control" name="plz" inputmode="numeric" maxlength="5"
-                   placeholder="z.B. 80331" value="${UI.escape(_lat ? '' : '')}">
+                   placeholder="z.B. 80331" value="${_esc(_lat ? '' : '')}">
           </div>
           <div class="form-group">
             <label class="form-label">Ort</label>
@@ -857,7 +857,7 @@ window.Page_adoption = (() => {
           </div>
         </div>
         <div class="form-group">
-          <label class="form-label">Beschreibung <span class="text-danger">*</span></label>
+          <label class="form-label">Beschreibung <span style="color:var(--c-danger)">*</span></label>
           <textarea class="form-control" name="beschreibung" rows="4" required minlength="80"
                     placeholder="Erzähle, warum du deinen Hund abgeben musst, und was ihn besonders macht…"></textarea>
           <div style="font-size:10px;color:var(--c-text-muted);margin-top:2px">Mindestens 80 Zeichen</div>
@@ -876,7 +876,7 @@ window.Page_adoption = (() => {
 
     const footer = `
       <div style="display:flex;flex-direction:column;gap:var(--space-2);width:100%">
-        <button type="submit" form="adp-create-form" class="btn btn-primary w-full" id="adp-create-submit">
+        <button type="submit" form="adp-create-form" class="btn btn-primary" style="width:100%" id="adp-create-submit">
           ${UI.icon('plus')} Inserat erstellen
         </button>
         <button type="button" class="btn btn-secondary" onclick="UI.modal.close()">Abbrechen</button>
@@ -941,6 +941,15 @@ window.Page_adoption = (() => {
     return 'Senior';
   }
 
+  function _esc(s) {
+    if (s == null) return '';
+    return String(s)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+  }
+
   // ----------------------------------------------------------
   // PUBLIC API
   // ----------------------------------------------------------
diff --git a/backend/static/js/pages/breeder-editor.js b/backend/static/js/pages/breeder-editor.js
deleted file mode 100644
index 959bfd2..0000000
--- a/backend/static/js/pages/breeder-editor.js
+++ /dev/null
@@ -1,318 +0,0 @@
-/* ============================================================
-   BAN YARO — Züchter-Profil-Editor
-   Selbstverwaltung des öffentlichen Züchter-Profils.
-   ============================================================ */
-
-window.Page_breeder_editor = (() => {
-
-  let _container = null;
-  let _data      = null;   // { profile, litters, storage_mb, storage_limit_mb }
-
-  async function init(container) {
-    _container = container;
-    _container.innerHTML = `<div style="max-width:680px;margin:0 auto;padding:var(--space-4)">${UI.skeleton(5)}</div>`;
-    await _load();
-  }
-
-  function refresh() { _load(); }
-  function onDogChange() {}
-
-  async function _load() {
-    try {
-      _data = await API.get('/breeder/my-editor');
-      _render();
-    } catch (e) {
-      _container.innerHTML = `<div style="padding:var(--space-6);color:var(--c-danger)">${e.message}</div>`;
-    }
-  }
-
-  function _render() {
-    const { profile: p, litters, storage_mb, storage_limit_mb } = _data;
-    _container.innerHTML = `
-      <div style="max-width:680px;margin:0 auto;padding:var(--space-4)">
-        <div style="margin-bottom:var(--space-5)">
-          <h1 style="font-size:var(--text-xl);font-weight:800;margin:0 0 var(--space-1)">Mein Züchter-Profil</h1>
-          <p style="color:var(--c-text-secondary);font-size:var(--text-sm);margin:0">
-            Gestalte deine öffentliche Profilseite — Fotos, Videos und Infos zu deinen Würfen.
-          </p>
-        </div>
-
-        <!-- Logo & Grundinfos -->
-        <div class="card" style="padding:var(--space-4);margin-bottom:var(--space-3)">
-          <div style="font-size:var(--text-xs);font-weight:700;text-transform:uppercase;
-                      letter-spacing:.06em;color:var(--c-text-muted);margin-bottom:var(--space-3)">Logo / Titelbild</div>
-          <div style="display:flex;align-items:center;gap:var(--space-4)">
-            <div id="be-logo-preview" style="width:80px;height:80px;border-radius:var(--radius-md);
-                 background:var(--c-surface-2);overflow:hidden;flex-shrink:0;
-                 display:flex;align-items:center;justify-content:center">
-              ${p.logo_url
-                ? `<img src="${UI.escape(p.logo_url)}" style="width:100%;height:100%;object-fit:cover">`
-                : `<svg class="ph-icon" style="width:32px;height:32px;opacity:.3"><use href="/icons/phosphor.svg#image"></use></svg>`}
-            </div>
-            <div>
-              <label class="btn btn-secondary btn-sm" style="cursor:pointer">
-                Logo hochladen
-                <input type="file" id="be-logo-input" accept="image/*" class="hidden">
-              </label>
-              <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:var(--space-1)">
-                Quadratisch · max. 5 MB · HEIC wird unterstützt
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Profil-Texte -->
-        <div class="card" style="padding:var(--space-4);margin-bottom:var(--space-3)">
-          <div style="font-size:var(--text-xs);font-weight:700;text-transform:uppercase;
-                      letter-spacing:.06em;color:var(--c-text-muted);margin-bottom:var(--space-3)">Profil-Texte</div>
-          <form id="be-text-form" class="flex-col-gap-3">
-            <div class="grid-2">
-              <div class="form-group">
-                <label class="form-label">Zwingername *</label>
-                <input class="form-control" name="zwingername" type="text" required
-                       value="${UI.escape(p.zwingername || '')}">
-              </div>
-              <div class="form-group">
-                <label class="form-label">Rasse(n)</label>
-                <input class="form-control" name="rasse_text" type="text"
-                       value="${UI.escape(p.rasse_text || '')}">
-              </div>
-            </div>
-            <div class="form-group">
-              <label class="form-label">Slogan <span style="font-weight:400;color:var(--c-text-muted)">(max. 80 Zeichen)</span></label>
-              <input class="form-control" name="tagline" type="text" maxlength="80"
-                     placeholder="z. B. Liebevolle Aufzucht seit 2010 · VDH-anerkannt"
-                     value="${UI.escape(p.tagline || '')}">
-            </div>
-            <div class="form-group">
-              <label class="form-label">Über uns / Zwingerbeschreibung</label>
-              <textarea class="form-control" name="beschreibung" rows="4" maxlength="800"
-                        placeholder="Wer seid ihr, was ist euch bei der Zucht wichtig?">${UI.escape(p.beschreibung || '')}</textarea>
-            </div>
-            <div class="grid-2">
-              <div class="form-group">
-                <label class="form-label">Stadt</label>
-                <input class="form-control" name="stadt" type="text" value="${UI.escape(p.stadt || '')}">
-              </div>
-              <div class="form-group">
-                <label class="form-label">Verein</label>
-                <input class="form-control" name="verein" type="text" value="${UI.escape(p.verein || '')}">
-              </div>
-            </div>
-            <div class="grid-2">
-              <div class="form-group">
-                <label class="form-label">Website</label>
-                <input class="form-control" name="website" type="url"
-                       placeholder="https://" value="${UI.escape(p.website || '')}">
-              </div>
-              <div class="form-group">
-                <label class="form-label">Instagram</label>
-                <input class="form-control" name="instagram" type="text"
-                       placeholder="@zwingername" value="${UI.escape(p.instagram || '')}">
-              </div>
-            </div>
-            <button type="submit" class="btn btn-secondary btn-sm" style="align-self:flex-start">
-              Profil speichern
-            </button>
-          </form>
-        </div>
-
-        <!-- Profil-Fotos & Videos -->
-        <div class="card" style="padding:var(--space-4);margin-bottom:var(--space-3)">
-          <div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--space-2)">
-            <div style="font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--c-text-muted)">
-              Profil-Fotos & Videos
-            </div>
-          </div>
-          <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-bottom:var(--space-2)">
-            JPG, PNG, HEIC, MP4, MOV · max. 200 MB pro Datei
-          </div>
-          ${_storageBar(storage_mb, storage_limit_mb)}
-          <div id="be-photos-grid" style="display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);margin:var(--space-3) 0">
-            ${_renderPhotoGrid(p.photos || [])}
-          </div>
-          <label class="btn btn-secondary btn-sm" style="cursor:pointer;display:inline-flex;align-items:center;gap:6px">
-            <svg class="ph-icon" style="width:16px;height:16px"><use href="/icons/phosphor.svg#plus"></use></svg>
-            Foto / Video hinzufügen
-            <input type="file" id="be-profile-photo-input" accept="image/*,video/*" class="hidden">
-          </label>
-        </div>
-
-        <!-- Würfe — Schnellupload -->
-        ${litters.length ? `
-        <div class="card" style="padding:var(--space-4);margin-bottom:var(--space-3)">
-          <div style="font-size:var(--text-xs);font-weight:700;text-transform:uppercase;
-                      letter-spacing:.06em;color:var(--c-text-muted);margin-bottom:var(--space-3)">
-            Aktuelle Würfe — Fotos & Videos
-          </div>
-          <div class="flex-col-gap-3">
-            ${litters.map(l => _renderLitterCard(l)).join('')}
-          </div>
-        </div>` : ''}
-
-      </div>
-    `;
-    _bindEvents();
-  }
-
-  function _renderPhotoGrid(photos) {
-    return photos.map((ph, i) => {
-      const isVid = ph.media_type === 'video' || (ph.url || '').endsWith('.mp4');
-      return `
-        <div style="position:relative;aspect-ratio:1;border-radius:var(--radius-md);overflow:hidden;background:var(--c-surface-2)">
-          ${isVid
-            ? `<video src="${UI.escape(ph.url)}" style="width:100%;height:100%;object-fit:cover" muted playsinline loop
-                      onmouseenter="this.play()" onmouseleave="this.pause()"></video>
-               <div style="position:absolute;bottom:4px;left:4px;background:rgba(0,0,0,.55);border-radius:4px;padding:1px 5px;font-size:10px;color:#fff">▶ Video</div>`
-            : `<img src="${UI.escape(ph.thumbnail_url || ph.url)}" style="width:100%;height:100%;object-fit:cover">`}
-          ${ph.is_primary ? `<div style="position:absolute;top:4px;left:4px;background:rgba(196,132,58,.9);border-radius:3px;padding:1px 5px;font-size:9px;color:#fff;font-weight:700">LOGO</div>` : ''}
-          <button class="be-photo-del" data-id="${ph.id}"
-                  style="position:absolute;top:4px;right:4px;background:rgba(0,0,0,.6);
-                         border:none;border-radius:50%;width:24px;height:24px;cursor:pointer;
-                         color:#fff;font-size:14px;display:flex;align-items:center;justify-content:center">×</button>
-          ${!ph.is_primary ? `<button class="be-photo-primary" data-id="${ph.id}"
-                  title="Als Logo setzen"
-                  style="position:absolute;bottom:4px;right:4px;background:rgba(0,0,0,.55);
-                         border:none;border-radius:3px;padding:1px 5px;font-size:9px;cursor:pointer;color:#fff">Logo</button>` : ''}
-        </div>`;
-    }).join('');
-  }
-
-  function _renderLitterCard(l) {
-    const label = l.geburtsdatum
-      ? `Wurf vom ${new Date(l.geburtsdatum).toLocaleDateString('de-DE')}`
-      : `Wurf #${l.id}`;
-    const info = [
-      l.welpen_gesamt ? `${l.welpen_gesamt} Welpen` : null,
-      `${l.foto_count} Medien`,
-    ].filter(Boolean).join(' · ');
-    return `
-      <div style="border:1px solid var(--c-border);border-radius:var(--radius-md);padding:var(--space-3)">
-        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-2)">
-          <div>
-            <div style="font-weight:700;font-size:var(--text-sm)">${UI.escape(label)}</div>
-            <div class="text-xs-muted">${info}</div>
-          </div>
-          <label class="btn btn-secondary btn-sm" style="cursor:pointer">
-            <svg class="ph-icon" style="width:14px;height:14px"><use href="/icons/phosphor.svg#upload-simple"></use></svg>
-            Upload
-            <input type="file" class="be-litter-input" data-litter-id="${l.id}"
-                   data-label="${UI.escape(label)}" accept="image/*,video/*" class="hidden">
-          </label>
-        </div>
-      </div>`;
-  }
-
-  function _storageBar(usedMb, limitMb) {
-    const pct   = Math.min(100, Math.round((usedMb / limitMb) * 100));
-    const color = pct > 85 ? '#dc2626' : pct > 60 ? '#f59e0b' : '#22c55e';
-    return `
-      <div style="display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--c-text-muted);margin-bottom:var(--space-2)">
-        <div style="flex:1;height:4px;background:var(--c-surface-2);border-radius:2px;overflow:hidden">
-          <div style="width:${pct}%;height:100%;background:${color};border-radius:2px"></div>
-        </div>
-        <span style="white-space:nowrap">${usedMb.toFixed(1)} / ${limitMb} MB</span>
-      </div>`;
-  }
-
-  function _bindEvents() {
-    const el = _container;
-
-    // Logo hochladen
-    el.querySelector('#be-logo-input')?.addEventListener('change', async e => {
-      const file = e.target.files[0];
-      if (!file) return;
-      const fd = new FormData();
-      fd.append('file',        file);
-      fd.append('entity_type', 'breeder');
-      fd.append('entity_id',   String(_data.profile.id));
-      fd.append('is_primary',  '1');
-      fd.append('visibility',  'public');
-      try {
-        await API.breederPhotos.upload(fd);
-        UI.toast.success('Logo gespeichert.');
-        await _load();
-      } catch (err) { UI.toast.error(err.message); }
-    });
-
-    // Profil-Texte speichern
-    el.querySelector('#be-text-form')?.addEventListener('submit', async e => {
-      e.preventDefault();
-      const btn = e.target.querySelector('[type="submit"]');
-      const fd  = UI.formData(e.target);
-      await UI.asyncButton(btn, async () => {
-        await API.put('/breeder/profile', fd);
-        _data.profile = { ..._data.profile, ...fd };
-        UI.toast.success('Profil gespeichert.');
-      });
-    });
-
-    // Profil-Foto/-Video hochladen
-    el.querySelector('#be-profile-photo-input')?.addEventListener('change', async e => {
-      const file = e.target.files[0];
-      if (!file) return;
-      const isVideo = file.type.startsWith('video/');
-      if (isVideo) UI.toast.info('Video wird komprimiert – das kann 1–2 Minuten dauern …', 120_000);
-      const fd = new FormData();
-      fd.append('file',        file);
-      fd.append('entity_type', 'breeder');
-      fd.append('entity_id',   String(_data.profile.id));
-      fd.append('visibility',  'public');
-      try {
-        await API.breederPhotos.upload(fd);
-        UI.toast.success(isVideo ? 'Video hinzugefügt.' : 'Foto hinzugefügt.');
-        await _load();
-      } catch (err) { UI.toast.error(err.message); }
-    });
-
-    // Foto löschen
-    el.querySelectorAll('.be-photo-del').forEach(btn => {
-      btn.addEventListener('click', async () => {
-        if (!confirm('Löschen?')) return;
-        try {
-          await API.breederPhotos.remove(parseInt(btn.dataset.id));
-          await _load();
-        } catch (err) { UI.toast.error(err.message); }
-      });
-    });
-
-    // Als Logo setzen
-    el.querySelectorAll('.be-photo-primary').forEach(btn => {
-      btn.addEventListener('click', async () => {
-        try {
-          await API.patch(`/breeder/photos/${btn.dataset.id}/primary`, {});
-          await _load();
-        } catch (err) { UI.toast.error(err.message); }
-      });
-    });
-
-    // Wurf-Upload
-    el.querySelectorAll('.be-litter-input').forEach(input => {
-      input.addEventListener('change', async e => {
-        const file = e.target.files[0];
-        if (!file) return;
-        const isVideo = file.type.startsWith('video/');
-        const litterId = input.dataset.litterId;
-        const label    = input.dataset.label;
-        if (isVideo) UI.toast.info('Video wird komprimiert – das kann 1–2 Minuten dauern …', 120_000);
-        const fd = new FormData();
-        fd.append('file',        file);
-        fd.append('entity_type', 'litter');
-        fd.append('entity_id',   litterId);
-        fd.append('visibility',  'public');
-        try {
-          await API.breederPhotos.upload(fd);
-          UI.toast.success(`${isVideo ? 'Video' : 'Foto'} zu „${label}" hinzugefügt.`);
-          // Foto-Count aktualisieren
-          const litter = _data.litters.find(l => String(l.id) === String(litterId));
-          if (litter) litter.foto_count++;
-          _render();
-        } catch (err) { UI.toast.error(err.message); }
-      });
-    });
-  }
-
-
-  return { init, refresh, onDogChange };
-
-})();
diff --git a/backend/static/js/pages/breeder.js b/backend/static/js/pages/breeder.js
index 7ac2104..58edb3d 100644
--- a/backend/static/js/pages/breeder.js
+++ b/backend/static/js/pages/breeder.js
@@ -7,6 +7,8 @@ window.Page_breeder = (() => {
   let _container = null;
   let _appState  = null;
 
+  const _esc = s => UI.esc ? UI.esc(s) : String(s ?? '').replace(/[&<>"']/g,
+    c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
 
   // ----------------------------------------------------------
   // INIT
@@ -49,7 +51,7 @@ window.Page_breeder = (() => {
     } catch (e) {
       document.getElementById('breeder-profile-body').innerHTML =
         `<div style="padding:var(--space-8);text-align:center;color:var(--c-text-secondary)">
-          ${UI.icon('magnifying-glass')} ${UI.escape(e.message || 'Züchter nicht gefunden.')}
+          ${UI.icon('magnifying-glass')} ${_esc(e.message || 'Züchter nicht gefunden.')}
         </div>`;
     }
   }
@@ -73,22 +75,22 @@ window.Page_breeder = (() => {
                   padding:var(--space-6) var(--space-4) var(--space-8);color:white;position:relative">
         <div style="max-width:640px;margin:0 auto">
           <div style="display:flex;align-items:flex-start;gap:var(--space-3);flex-wrap:wrap">
-            <div class="flex-1-min">
+            <div style="flex:1;min-width:0">
               <p style="margin:0 0 var(--space-1);font-size:var(--text-xs);opacity:.7;text-transform:uppercase;letter-spacing:.1em">
                 ${UI.icon('seal-check')} Verifizierter Züchter
               </p>
               <h1 style="margin:0 0 var(--space-2);font-size:clamp(1.3rem,4vw,1.9rem);font-weight:800;line-height:1.2;word-break:break-word">
-                ${UI.escape(p.zwingername)}
+                ${_esc(p.zwingername)}
               </h1>
               <div style="display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center">
-                ${p.rasse_text ? `<span style="background:rgba(255,255,255,.2);border-radius:999px;padding:2px 10px;font-size:var(--text-xs);font-weight:600">${UI.escape(p.rasse_text)}</span>` : ''}
+                ${p.rasse_text ? `<span style="background:rgba(255,255,255,.2);border-radius:999px;padding:2px 10px;font-size:var(--text-xs);font-weight:600">${_esc(p.rasse_text)}</span>` : ''}
                 ${p.vdh_mitglied ? `<span style="background:rgba(255,255,255,.2);border-radius:999px;padding:2px 10px;font-size:var(--text-xs);font-weight:600">${UI.icon('certificate')} VDH</span>` : ''}
-                ${p.stadt ? `<span style="opacity:.8;font-size:var(--text-xs)">${UI.icon('map-pin')} ${UI.escape(p.stadt)}</span>` : ''}
-                ${seit ? `<span style="opacity:.7;font-size:var(--text-xs)">Züchter seit ${UI.escape(seit)}</span>` : ''}
+                ${p.stadt ? `<span style="opacity:.8;font-size:var(--text-xs)">${UI.icon('map-pin')} ${_esc(p.stadt)}</span>` : ''}
+                ${seit ? `<span style="opacity:.7;font-size:var(--text-xs)">Züchter seit ${_esc(seit)}</span>` : ''}
               </div>
             </div>
             ${p.logo_url
-              ? `<img src="${UI.escape(p.logo_url)}" alt="Zwinger-Logo"
+              ? `<img src="${_esc(p.logo_url)}" alt="Zwinger-Logo"
                       style="width:72px;height:72px;border-radius:50%;object-fit:cover;
                              border:3px solid rgba(255,255,255,.5);flex-shrink:0;box-shadow:0 2px 12px rgba(0,0,0,.25)"
                       onerror="this.style.display='none'">`
@@ -115,7 +117,7 @@ window.Page_breeder = (() => {
                    Anmelden um zu schreiben
                  </button>`
             }
-            ${p.website ? `<a href="${UI.escape(p.website)}" target="_blank" rel="noopener noreferrer"
+            ${p.website ? `<a href="${_esc(p.website)}" target="_blank" rel="noopener noreferrer"
                              style="background:rgba(255,255,255,.2);color:white;border:1px solid rgba(255,255,255,.4);
                                     border-radius:999px;padding:var(--space-2) var(--space-5);
                                     font-weight:600;font-size:var(--text-sm);text-decoration:none;
@@ -132,7 +134,7 @@ window.Page_breeder = (() => {
         ${p.beschreibung ? `
         <div style="background:var(--c-bg-secondary);border:1px solid var(--c-border);border-radius:var(--radius-lg);
                     padding:var(--space-4);margin-bottom:var(--space-4)">
-          <p style="margin:0;line-height:1.7;color:var(--c-text-secondary);white-space:pre-line">${UI.escape(p.beschreibung)}</p>
+          <p style="margin:0;line-height:1.7;color:var(--c-text-secondary);white-space:pre-line">${_esc(p.beschreibung)}</p>
         </div>` : ''}
 
         <!-- Zuchthunde -->
@@ -155,7 +157,7 @@ window.Page_breeder = (() => {
                      display:flex;align-items:center;gap:var(--space-2)">
             ${UI.icon('baby')} Aktuelle Würfe
           </h2>
-          <div class="flex-col-gap-3">
+          <div style="display:flex;flex-direction:column;gap:var(--space-3)">
             ${p.wuerfe.map(w => _wurfCard(w)).join('')}
           </div>
         </div>` : ''}
@@ -190,8 +192,8 @@ window.Page_breeder = (() => {
             ${p.website ? `
             <div style="display:flex;gap:var(--space-2);align-items:baseline">
               <dt style="color:var(--c-text-secondary);min-width:110px;font-size:var(--text-sm);flex-shrink:0">Website</dt>
-              <dd style="margin:0"><a href="${UI.escape(p.website)}" target="_blank" rel="noopener noreferrer"
-                   style="color:var(--c-primary);word-break:break-all">${UI.escape(p.website)}</a></dd>
+              <dd style="margin:0"><a href="${_esc(p.website)}" target="_blank" rel="noopener noreferrer"
+                   style="color:var(--c-primary);word-break:break-all">${_esc(p.website)}</a></dd>
             </div>` : ''}
             ${seit ? _dl('Züchter seit', seit) : ''}
           </dl>
@@ -199,7 +201,7 @@ window.Page_breeder = (() => {
 
         <!-- Fotos / Gallery -->
         ${p.fotos?.length ? `
-        <div class="mb-4">
+        <div style="margin-bottom:var(--space-4)">
           <h2 style="margin:0 0 var(--space-3);font-size:var(--text-base);font-weight:700;
                      display:flex;align-items:center;gap:var(--space-2)">
             ${UI.icon('images')} Galerie
@@ -207,11 +209,11 @@ window.Page_breeder = (() => {
           </h2>
           <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)">
             ${p.fotos.map((ph, i) => `
-              <a href="${UI.escape(ph.url)}" target="_blank" rel="noopener noreferrer"
+              <a href="${_esc(ph.url)}" target="_blank" rel="noopener noreferrer"
                  style="display:block;border-radius:var(--radius-md);overflow:hidden;
                         border:${ph.primary ? '2px solid var(--c-primary)' : '1px solid var(--c-border)'};
                         aspect-ratio:1;position:relative">
-                <img src="${UI.escape(ph.thumb)}" alt="${UI.escape(ph.caption)}"
+                <img src="${_esc(ph.thumb)}" alt="${_esc(ph.caption)}"
                      loading="${i < 6 ? 'eager' : 'lazy'}"
                      style="width:100%;height:100%;object-fit:cover;display:block"
                      onerror="this.parentElement.style.display='none'">
@@ -219,12 +221,12 @@ window.Page_breeder = (() => {
                   color:white;font-size:9px;font-weight:700;border-radius:999px;padding:1px 6px">Logo</span>` : ''}
                 ${ph.caption ? `<div style="position:absolute;bottom:0;left:0;right:0;
                   background:linear-gradient(transparent,rgba(0,0,0,.6));
-                  color:white;font-size:10px;padding:12px 6px 4px;line-height:1.3">${UI.escape(ph.caption)}</div>` : ''}
+                  color:white;font-size:10px;padding:12px 6px 4px;line-height:1.3">${_esc(ph.caption)}</div>` : ''}
               </a>`).join('')}
           </div>
         </div>` : ''}
 
-        <div id="breeder-photos-section" class="hidden"></div>
+        <div id="breeder-photos-section" style="display:none"></div>
 
       </div>`;
 
@@ -249,18 +251,18 @@ window.Page_breeder = (() => {
     const augeTest = h.health_tests?.find(t => t.test_typ === 'augen');
 
     const testPills = [
-      hdTest ? `<span style="${_testPillStyle(hdTest.ergebnis,'HD')}">HD ${UI.escape(hdTest.ergebnis)}</span>` : '',
-      edTest ? `<span style="${_testPillStyle(edTest.ergebnis,'ED')}">ED ${UI.escape(edTest.ergebnis)}</span>` : '',
+      hdTest ? `<span style="${_testPillStyle(hdTest.ergebnis,'HD')}">HD ${_esc(hdTest.ergebnis)}</span>` : '',
+      edTest ? `<span style="${_testPillStyle(edTest.ergebnis,'ED')}">ED ${_esc(edTest.ergebnis)}</span>` : '',
       augeTest ? `<span style="${_testPillStyle('clear','augen')}">Augen ✓</span>` : '',
     ].filter(Boolean).join('');
 
     const titlePills = (h.titel || []).map(t =>
       `<span style="background:var(--c-primary-light,#f5e6d3);color:var(--c-primary-dark,#a86e2e);
-              border-radius:999px;padding:1px 8px;font-size:10px;font-weight:700">${UI.escape(t)}</span>`
+              border-radius:999px;padding:1px 8px;font-size:10px;font-weight:700">${_esc(t)}</span>`
     ).join('');
 
     const genBadge = h.gentests_total > 0
-      ? `<span class="text-xs-muted">
+      ? `<span style="font-size:var(--text-xs);color:var(--c-text-muted)">
            ${h.gentests_clear}/${h.gentests_total} Gentests frei
          </span>`
       : '';
@@ -269,12 +271,12 @@ window.Page_breeder = (() => {
       <div style="background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);
                   padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2)">
         <div style="display:flex;align-items:center;gap:var(--space-2)">
-          <span class="text-primary">${gIcon}</span>
-          <span style="font-weight:700;font-size:var(--text-sm)">${UI.escape(h.name)}</span>
-          ${h.rufname ? `<span style="color:var(--c-text-muted);font-size:var(--text-xs)">"${UI.escape(h.rufname)}"</span>` : ''}
+          <span style="color:var(--c-primary)">${gIcon}</span>
+          <span style="font-weight:700;font-size:var(--text-sm)">${_esc(h.name)}</span>
+          ${h.rufname ? `<span style="color:var(--c-text-muted);font-size:var(--text-xs)">"${_esc(h.rufname)}"</span>` : ''}
           ${alter !== null ? `<span style="color:var(--c-text-muted);font-size:var(--text-xs);margin-left:auto">${alter} J.</span>` : ''}
         </div>
-        ${h.farbe ? `<p style="margin:0;font-size:var(--text-xs);color:var(--c-text-secondary)">${UI.escape(h.farbe)}</p>` : ''}
+        ${h.farbe ? `<p style="margin:0;font-size:var(--text-xs);color:var(--c-text-secondary)">${_esc(h.farbe)}</p>` : ''}
         ${testPills ? `<div style="display:flex;flex-wrap:wrap;gap:4px">${testPills}</div>` : ''}
         ${titlePills ? `<div style="display:flex;flex-wrap:wrap;gap:4px">${titlePills}</div>` : ''}
         ${genBadge}
@@ -316,16 +318,16 @@ window.Page_breeder = (() => {
       <div style="background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);
                   padding:var(--space-3) var(--space-4)">
         <div style="display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-1)">
-          <span style="font-weight:700;font-size:var(--text-sm)">${UI.escape(eltern)}</span>
+          <span style="font-weight:700;font-size:var(--text-sm)">${_esc(eltern)}</span>
           <span style="background:${sc}1a;color:${sc};border:1px solid ${sc}40;
                        border-radius:999px;padding:1px 8px;font-size:var(--text-xs);font-weight:600">${sl}</span>
         </div>
         <div style="display:flex;gap:var(--space-4);flex-wrap:wrap;font-size:var(--text-xs);color:var(--c-text-secondary)">
-          ${datum ? `<span>${UI.icon('calendar-dots')} ${UI.escape(datum)}</span>` : ''}
+          ${datum ? `<span>${UI.icon('calendar-dots')} ${_esc(datum)}</span>` : ''}
           ${w.welpen_gesamt ? `<span>${UI.icon('dog')} ${w.welpen_verfuegbar ?? '?'}/${w.welpen_gesamt} verfügbar</span>` : ''}
-          ${w.preis_spanne ? `<span>${UI.icon('currency-eur')} ${UI.escape(w.preis_spanne)}</span>` : ''}
+          ${w.preis_spanne ? `<span>${UI.icon('currency-eur')} ${_esc(w.preis_spanne)}</span>` : ''}
         </div>
-        ${w.beschreibung ? `<p style="margin:var(--space-2) 0 0;font-size:var(--text-xs);color:var(--c-text-secondary);line-height:1.5">${UI.escape(w.beschreibung)}</p>` : ''}
+        ${w.beschreibung ? `<p style="margin:var(--space-2) 0 0;font-size:var(--text-xs);color:var(--c-text-secondary);line-height:1.5">${_esc(w.beschreibung)}</p>` : ''}
       </div>`;
   }
 
@@ -338,12 +340,12 @@ window.Page_breeder = (() => {
     return `
       <div>
         <p style="margin:0 0 var(--space-2);font-size:var(--text-xs);font-weight:700;
-                  color:var(--c-text-muted);text-transform:uppercase;letter-spacing:.06em">${UI.escape(label)}</p>
+                  color:var(--c-text-muted);text-transform:uppercase;letter-spacing:.06em">${_esc(label)}</p>
         <div style="display:flex;flex-wrap:wrap;gap:var(--space-2)">
           ${stats.map(r => `
             <div style="display:flex;align-items:center;gap:6px;font-size:var(--text-sm)">
-              <span style="font-weight:700">${UI.escape(r.ergebnis || '—')}</span>
-              <span class="text-muted">${r.cnt}×</span>
+              <span style="font-weight:700">${_esc(r.ergebnis || '—')}</span>
+              <span style="color:var(--c-text-muted)">${r.cnt}×</span>
               <span style="background:var(--c-border);border-radius:999px;height:6px;
                            width:${Math.round(r.cnt/total*80)+16}px;display:inline-block"></span>
             </div>`).join('')}
@@ -357,8 +359,8 @@ window.Page_breeder = (() => {
   function _dl(label, value) {
     if (!value) return '';
     return `<div style="display:flex;gap:var(--space-2);align-items:baseline">
-      <dt style="color:var(--c-text-secondary);min-width:110px;font-size:var(--text-sm);flex-shrink:0">${UI.escape(label)}</dt>
-      <dd style="margin:0;font-size:var(--text-sm)">${UI.escape(String(value))}</dd>
+      <dt style="color:var(--c-text-secondary);min-width:110px;font-size:var(--text-sm);flex-shrink:0">${_esc(label)}</dt>
+      <dd style="margin:0;font-size:var(--text-sm)">${_esc(String(value))}</dd>
     </div>`;
   }
 
@@ -375,16 +377,16 @@ window.Page_breeder = (() => {
       const photos = await API.breederPhotos.list('breeder', breederId);
       if (!photos?.length) return;
       section.innerHTML = `
-        <div class="mb-4">
+        <div style="margin-bottom:var(--space-4)">
           <h2 style="margin:0 0 var(--space-3);font-size:var(--text-base);font-weight:700">
             ${UI.icon('images')} Fotos
           </h2>
           <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:var(--space-2)">
             ${photos.map(ph => `
-              <a href="${UI.escape(ph.url||'')}" target="_blank" rel="noopener noreferrer"
+              <a href="${_esc(ph.url||'')}" target="_blank" rel="noopener noreferrer"
                  style="display:block;border-radius:var(--radius-md);overflow:hidden;
                         border:1px solid var(--c-border);aspect-ratio:1">
-                <img src="${UI.escape(ph.thumbnail_url||ph.url||'')}" alt="${UI.escape(ph.caption||'')}"
+                <img src="${_esc(ph.thumbnail_url||ph.url||'')}" alt="${_esc(ph.caption||'')}"
                      loading="lazy" style="width:100%;height:100%;object-fit:cover;display:block"
                      onerror="this.parentElement.style.display='none'">
               </a>`).join('')}
diff --git a/backend/static/js/pages/chat.js b/backend/static/js/pages/chat.js
index 3d7d877..f5d7b63 100644
--- a/backend/static/js/pages/chat.js
+++ b/backend/static/js/pages/chat.js
@@ -122,7 +122,7 @@ window.Page_chat = (() => {
       el.innerHTML = convs.map(c => {
         const initials  = (c.partner_name || '?')[0].toUpperCase();
         const preview   = c.last_text
-          ? UI.escape(c.last_text.substring(0, 60)) + (c.last_text.length > 60 ? '…' : '')
+          ? _esc(c.last_text.substring(0, 60)) + (c.last_text.length > 60 ? '…' : '')
           : '<em style="opacity:0.6">Noch keine Nachrichten</em>';
         const timeStr   = c.last_msg_at ? _fmtTime(c.last_msg_at) : '';
         const badge     = c.unread_count > 0
@@ -138,7 +138,7 @@ window.Page_chat = (() => {
               ${onlineDot ? `<span class="online-dot chat-avatar-dot"></span>` : ''}
             </div>
             <div class="chat-conv-info">
-              <div class="chat-conv-name">${UI.escape(c.partner_name)}</div>
+              <div class="chat-conv-name">${_esc(c.partner_name)}</div>
               <div class="chat-conv-preview">${preview}</div>
             </div>
             <div class="chat-conv-meta">
@@ -178,7 +178,7 @@ window.Page_chat = (() => {
           </button>`}
           <div style="position:relative;flex-shrink:0">
             <div class="chat-conv-avatar" id="chat-partner-av" style="width:32px;height:32px;font-size:var(--text-sm)">?</div>
-            <span class="online-dot chat-avatar-dot" id="chat-partner-dot" class="hidden"></span>
+            <span class="online-dot chat-avatar-dot" id="chat-partner-dot" style="display:none"></span>
           </div>
           <span class="chat-thread-partner" id="chat-partner-name">…</span>
         </div>
@@ -188,7 +188,7 @@ window.Page_chat = (() => {
           </div>
         </div>
         <div class="chat-input-bar">
-          <input type="file" id="chat-photo-input" accept="image/*" class="hidden"
+          <input type="file" id="chat-photo-input" accept="image/*" style="display:none"
                  onchange="Page_chat._onPhotoSelected(this)">
           <button class="chat-photo-btn" onclick="document.getElementById('chat-photo-input').click()" title="Foto senden">
             <svg class="ph-icon"><use href="/icons/phosphor.svg#camera"></use></svg>
@@ -332,10 +332,10 @@ window.Page_chat = (() => {
       }
       if (m.text) {
         bubbleContent += (m.media_url ? `<div style="margin-top:var(--space-1)">` : '') +
-                         UI.escape(m.text) +
+                         _esc(m.text) +
                          (m.media_url ? `</div>` : '');
       }
-      if (!bubbleContent) bubbleContent = UI.escape(m.text);
+      if (!bubbleContent) bubbleContent = _esc(m.text);
 
       html += `
         <div class="chat-bubble-row ${rowClass}">
@@ -450,6 +450,13 @@ window.Page_chat = (() => {
     return d.toLocaleDateString('de-DE', { day: '2-digit', month: 'long', year: 'numeric' });
   }
 
+  function _esc(s) {
+    if (!s) return '';
+    return String(s)
+      .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;')
+      .replace(/\n/g, '<br>');
+  }
+
   // ----------------------------------------------------------
   // Neue Nachricht — Freundesliste als Picker
   // ----------------------------------------------------------
diff --git a/backend/static/js/pages/diary.js b/backend/static/js/pages/diary.js
index f2137d8..cdd67be 100644
--- a/backend/static/js/pages/diary.js
+++ b/backend/static/js/pages/diary.js
@@ -212,7 +212,7 @@ window.Page_diary = (() => {
           <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#download-simple"></use></svg>
         </button>
       </div>
-      <div id="diary-stats-bar" class="diary-stats-bar hidden"></div>
+      <div id="diary-stats-bar" class="diary-stats-bar" style="display:none"></div>
       <div id="diary-view-content">
         <div id="diary-list"></div>
       </div>
@@ -295,7 +295,7 @@ window.Page_diary = (() => {
     `;
     card.innerHTML = `
       <div style="font-size:1.8rem;flex-shrink:0;line-height:1">🐾</div>
-      <div class="flex-1-min">
+      <div style="flex:1;min-width:0">
         <div style="font-size:var(--text-xs);font-weight:var(--weight-semibold);
                     color:var(--c-primary-dark);text-transform:uppercase;
                     letter-spacing:.06em;margin-bottom:var(--space-1)">
@@ -963,7 +963,7 @@ window.Page_diary = (() => {
 
     // Hunde-Chips (bei mehreren Hunden)
     const dogsHtml = dogIds.length > 1
-      ? `<div class="diary-detail-dogs mb-3">
+      ? `<div class="diary-detail-dogs" style="margin-bottom:var(--space-3)">
            ${dogIds.map(did => {
              const dog = _appState.dogs.find(d => d.id === did);
              return dog ? `<div class="diary-dog-chip">
@@ -1279,7 +1279,7 @@ window.Page_diary = (() => {
                  value="${entry?.datum || today}" required>
         </div>
         <div class="form-group">
-          <label class="form-label">Titel <span class="text-secondary">(optional)</span></label>
+          <label class="form-label">Titel <span style="color:var(--c-text-secondary)">(optional)</span></label>
           <input class="form-control" type="text" name="titel"
                  value="${UI.escape(entry?.titel || '')}" placeholder="z.B. Erster Schultag">
         </div>
@@ -1293,10 +1293,10 @@ window.Page_diary = (() => {
           <div id="diary-existing-media"></div>
 
           <!-- Neue Medien: Vorschau-Grid -->
-          <div id="diary-new-media-grid" class="diary-media-grid hidden"></div>
+          <div id="diary-new-media-grid" class="diary-media-grid" style="display:none"></div>
 
           <!-- versteckter Input — multiple für Mehrfachauswahl -->
-          <input type="file" id="diary-media-input" accept="image/*,video/*,application/pdf" multiple class="hidden">
+          <input type="file" id="diary-media-input" accept="image/*,video/*,application/pdf" multiple style="display:none">
 
           <!-- Einzelner Button — iOS zeigt nativen Picker (Mediathek / Kamera / Datei) -->
           <label for="diary-media-input" class="btn btn-secondary" style="cursor:pointer;display:flex;align-items:center;gap:var(--space-2);justify-content:center">
@@ -1305,7 +1305,7 @@ window.Page_diary = (() => {
           </label>
         </div>
         <div class="form-group" id="diary-location-group">
-          <label class="form-label">Ort <span class="text-secondary">(optional)</span></label>
+          <label class="form-label">Ort <span style="color:var(--c-text-secondary)">(optional)</span></label>
 
           <!-- Karte (Lesemodus, Edit per Button aktivierbar) -->
           <div style="position:relative">
@@ -1318,7 +1318,7 @@ window.Page_diary = (() => {
           </div>
 
           <!-- POI-Name + Aktionen -->
-          <div class="mt-2">
+          <div style="margin-top:var(--space-2)">
             <div id="diary-location-chip-wrap" style="${entry?.location_name ? '' : 'display:none'}">
               <div class="diary-location-chip">
                 <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#map-pin"></use></svg>
@@ -1341,7 +1341,7 @@ window.Page_diary = (() => {
         ${dogPickerHtml}
         <div class="form-group" style="margin-top:var(--space-5)">
           <input type="checkbox" name="is_milestone" id="diary-milestone-cb"
-                 ${entry?.is_milestone ? 'checked' : ''} class="hidden">
+                 ${entry?.is_milestone ? 'checked' : ''} style="display:none">
           <button type="button" id="diary-milestone-btn"
                   class="diary-milestone-toggle${entry?.is_milestone ? ' diary-milestone-toggle--active' : ''}">
             <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#trophy"></use></svg>
@@ -1353,10 +1353,10 @@ window.Page_diary = (() => {
 
     const footer = `
       <div style="display:flex;flex-direction:column;gap:var(--space-2);width:100%">
-        <button type="submit" form="diary-form" class="btn btn-primary w-full">
+        <button type="submit" form="diary-form" class="btn btn-primary" style="width:100%">
           ${isEdit ? 'Speichern' : 'Erstellen'}
         </button>
-        <div class="flex-gap-2">
+        <div style="display:flex;gap:var(--space-2)">
           ${isEdit ? `<button type="button" class="btn btn-danger" id="diary-form-delete">Löschen</button>` : ''}
           <button type="button" class="btn btn-secondary flex-1" id="diary-form-cancel">Abbrechen</button>
         </div>
@@ -1843,32 +1843,32 @@ window.Page_diary = (() => {
           <strong>${UI.escape(_appState.activeDog?.name || 'deinem Hund')}</strong>.
         </p>
 
-        <div class="flex-col-gap-3">
+        <div style="display:flex;flex-direction:column;gap:var(--space-3)">
 
           <label class="import-format-card" id="fmt-nsx">
-            <input type="radio" name="import-fmt" value="nsx" checked class="hidden">
+            <input type="radio" name="import-fmt" value="nsx" checked style="display:none">
             <div class="import-format-icon">
               <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#note"></use></svg>
             </div>
             <div>
               <div style="font-weight:var(--weight-semibold)">Synology NoteStation</div>
-              <div class="text-xs-muted">.nsx-Datei aus dem NoteStation-Export</div>
+              <div style="font-size:var(--text-xs);color:var(--c-text-muted)">.nsx-Datei aus dem NoteStation-Export</div>
             </div>
           </label>
 
           <label class="import-format-card" id="fmt-csv">
-            <input type="radio" name="import-fmt" value="csv" class="hidden">
+            <input type="radio" name="import-fmt" value="csv" style="display:none">
             <div class="import-format-icon">
               <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#file-csv"></use></svg>
             </div>
             <div>
               <div style="font-weight:var(--weight-semibold)">CSV / Excel</div>
-              <div class="text-xs-muted">Spalten: datum, titel, text, tags, gps_lat, gps_lon, is_milestone</div>
+              <div style="font-size:var(--text-xs);color:var(--c-text-muted)">Spalten: datum, titel, text, tags, gps_lat, gps_lon, is_milestone</div>
             </div>
           </label>
         </div>
 
-        <div class="mt-4">
+        <div style="margin-top:var(--space-4)">
           <label class="form-label">Datei auswählen</label>
           <input type="file" class="form-control" id="import-file-input"
                  accept=".nsx,.csv" style="cursor:pointer">
@@ -1917,7 +1917,7 @@ window.Page_diary = (() => {
           : await API.importData.csv(dogId, file);
 
         const errHtml = res.errors?.length
-          ? `<details class="mt-2"><summary style="font-size:var(--text-xs);cursor:pointer">${res.errors.length} Fehler anzeigen</summary>
+          ? `<details style="margin-top:var(--space-2)"><summary style="font-size:var(--text-xs);cursor:pointer">${res.errors.length} Fehler anzeigen</summary>
                <pre style="font-size:var(--text-xs);white-space:pre-wrap;margin-top:var(--space-1)">${UI.escape(res.errors.join('\n'))}</pre></details>`
           : '';
 
@@ -1925,7 +1925,7 @@ window.Page_diary = (() => {
           <div style="background:var(--c-success-subtle);border-radius:var(--radius-md);
                       padding:var(--space-3) var(--space-4);color:var(--c-success)">
             <strong>${res.imported} Einträge importiert</strong>
-            ${res.skipped ? `<span class="text-sm-muted"> · ${res.skipped} übersprungen</span>` : ''}
+            ${res.skipped ? `<span style="color:var(--c-text-muted);font-size:var(--text-sm)"> · ${res.skipped} übersprungen</span>` : ''}
             ${errHtml}
           </div>`;
         resultEl.style.display = 'block';
diff --git a/backend/static/js/pages/dog-profile.js b/backend/static/js/pages/dog-profile.js
index 71a59ec..2679ed3 100644
--- a/backend/static/js/pages/dog-profile.js
+++ b/backend/static/js/pages/dog-profile.js
@@ -84,7 +84,7 @@ window.Page_dog_profile = (() => {
         <div style="position:relative;display:inline-block;margin-bottom:var(--space-4);padding:4px">
           ${dog.foto_url
             ? `<div class="dp-avatar-ring">
-                 <img src="${dog.foto_url}" alt="${UI.escape(dog.name)}" class="dp-avatar-img"
+                 <img src="${dog.foto_url}" alt="${_esc(dog.name)}" class="dp-avatar-img"
                       style="transform:scale(${dog.foto_zoom||1}) translate(${dog.foto_offset_x||0}%,${dog.foto_offset_y||0}%)">
                </div>`
             : `<div class="dp-avatar-ring dp-avatar-empty">${UI.icon('dog')}</div>`}
@@ -95,28 +95,28 @@ window.Page_dog_profile = (() => {
 
         <!-- Name + Rasse -->
         <h2 style="font-size:var(--text-2xl);font-weight:700;
-                   color:var(--c-text);margin:0 0 var(--space-1)">${UI.escape(dog.name)}</h2>
+                   color:var(--c-text);margin:0 0 var(--space-1)">${_esc(dog.name)}</h2>
         ${dog.rasse
-          ? `<p style="color:var(--c-text-secondary);margin:0 0 var(--space-2)">${UI.escape(dog.rasse)}</p>`
+          ? `<p style="color:var(--c-text-secondary);margin:0 0 var(--space-2)">${_esc(dog.rasse)}</p>`
           : `<p style="margin:0 0 var(--space-2)"></p>`}
 
         <!-- Rassen-Community-Chip (wird async geladen) -->
-        <div id="dp-same-breed-chip" class="mb-4"></div>
+        <div id="dp-same-breed-chip" style="margin-bottom:var(--space-4)"></div>
 
         <!-- Info-Grid -->
         <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);
                     margin-bottom:var(--space-5);text-align:left">
           ${geburtstag ? `
-            <div class="card p-3">
+            <div class="card" style="padding:var(--space-3)">
               <div class="dp-info-label"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#calendar-dots"></use></svg> Geburtstag</div>
               <div style="font-weight:500;font-size:var(--text-sm)">${geburtstag}</div>
-              <div class="text-xs-secondary">
+              <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">
                 ${_calcAlter(dog.geburtstag)}
               </div>
             </div>
           ` : ''}
           ${dog.geschlecht ? `
-            <div class="card p-3">
+            <div class="card" style="padding:var(--space-3)">
               <div class="dp-info-label">${dog.geschlecht === 'm' ? '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#gender-male"></use></svg>' : '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#gender-female"></use></svg>'} Geschlecht</div>
               <div style="font-weight:500;font-size:var(--text-sm)">
                 ${dog.geschlecht === 'm' ? 'Rüde' : 'Hündin'}
@@ -130,19 +130,19 @@ window.Page_dog_profile = (() => {
             </div>
           ` : ''}
           ${dog.widerrist_cm ? `
-            <div class="card p-3">
+            <div class="card" style="padding:var(--space-3)">
               <div class="dp-info-label"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#ruler"></use></svg> Widerrist</div>
               <div style="font-weight:500;font-size:var(--text-sm)">${dog.widerrist_cm} cm</div>
             </div>
           ` : ''}
-          <div class="card p-3">
+          <div class="card" style="padding:var(--space-3)">
             <div style="font-size:var(--text-xs);color:var(--c-text-secondary);
                         margin-bottom:2px">
               <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#wave-sine"></use></svg> Transponder
             </div>
             ${dog.chip_nr
-              ? `<div style="font-size:var(--text-xs);font-weight:500;word-break:break-all">${UI.escape(dog.chip_nr)}</div>`
-              : `<div class="text-xs-muted">nicht eingetragen
+              ? `<div style="font-size:var(--text-xs);font-weight:500;word-break:break-all">${_esc(dog.chip_nr)}</div>`
+              : `<div style="font-size:var(--text-xs);color:var(--c-text-muted)">nicht eingetragen
                    <button class="btn btn-link btn-sm" id="dp-chip-edit-btn"
                            style="padding:0 0 0 var(--space-1);font-size:var(--text-xs)">Eintragen</button>
                  </div>`
@@ -153,7 +153,7 @@ window.Page_dog_profile = (() => {
         ${dog.bio ? `
           <div class="card" style="padding:var(--space-4);margin-bottom:var(--space-5);text-align:left">
             <p style="margin:0;color:var(--c-text-secondary);font-style:italic;line-height:1.6">
-              "${UI.escape(dog.bio)}"
+              "${_esc(dog.bio)}"
             </p>
           </div>
         ` : ''}
@@ -230,12 +230,12 @@ window.Page_dog_profile = (() => {
       <div class="card" style="margin-bottom:var(--space-5)">
         <div style="padding:var(--space-4);border-bottom:1px solid var(--c-border)">
           <div style="font-weight:600">Sitter-Zugang</div>
-          <div class="text-xs-secondary">
+          <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">
             Gib einem Freund temporären Schreibzugang für diesen Hund.
             Deine bestehenden Daten und Medien bleiben unsichtbar und privat — der Sitter kann nur neue Einträge anlegen.
           </div>
         </div>
-        <div id="dp-sitting-access" class="p-4">Lade…</div>
+        <div id="dp-sitting-access" style="padding:var(--space-4)">Lade…</div>
       </div>
       ` : ''}
     `;
@@ -335,12 +335,12 @@ window.Page_dog_profile = (() => {
         <svg class="ph-icon" style="width:11px;height:11px" aria-hidden="true">
           <use href="/icons/phosphor.svg#${isGreen ? 'check' : 'fire'}"></use>
         </svg>
-        ${UI.escape(skill.exercise_name)}
+        ${_esc(skill.exercise_name)}
       </span>`;
     };
 
     const sitztBlock = sitzt.length ? `
-      <div class="mb-3">
+      <div style="margin-bottom:var(--space-3)">
         <div style="font-size:var(--text-xs);font-weight:var(--weight-semibold);
                     color:var(--c-text-secondary);margin-bottom:var(--space-2);
                     text-transform:uppercase;letter-spacing:.04em">Sitzt</div>
@@ -360,7 +360,7 @@ window.Page_dog_profile = (() => {
       </div>` : '';
 
     el.innerHTML = `
-      <div class="card p-4">
+      <div class="card" style="padding:var(--space-4)">
         <div style="display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3)">
           <svg class="ph-icon" style="width:16px;height:16px;color:var(--c-primary)" aria-hidden="true">
             <use href="/icons/phosphor.svg#list-checks"></use>
@@ -409,11 +409,11 @@ window.Page_dog_profile = (() => {
       : '';
 
     el.innerHTML = `
-      <div class="card p-4">
+      <div class="card" style="padding:var(--space-4)">
         <div style="display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3)">
           <span style="font-size:1.1em">🛁</span>
           <span style="font-size:var(--text-sm);font-weight:600">
-            Pflegetipps${data.rasse_name ? ` für ${UI.escape(data.rasse_name)}` : ''}
+            Pflegetipps${data.rasse_name ? ` für ${_esc(data.rasse_name)}` : ''}
           </span>
         </div>
 
@@ -426,24 +426,24 @@ window.Page_dog_profile = (() => {
             ${t.saisonal_aktuell ? '🌸 Aktuell & Saisonal' : '💡 Tipp des Tages'}
           </div>
           <div style="font-weight:600;font-size:var(--text-sm);margin-bottom:4px">
-            ${kat_icons[t.kategorie]||_ph('paw-print')} ${UI.escape(t.titel)}
+            ${kat_icons[t.kategorie]||_ph('paw-print')} ${_esc(t.titel)}
           </div>
           <div style="font-size:12px;color:var(--c-text-secondary);margin-bottom:8px;
-                      line-height:1.5">${UI.escape(t.beschreibung||'')}</div>
+                      line-height:1.5">${_esc(t.beschreibung||'')}</div>
           ${t.haeufigkeit ? `<div style="font-size:11px;color:var(--c-text-muted)">
-            🔄 ${UI.escape(t.haeufigkeit)}</div>` : ''}
+            🔄 ${_esc(t.haeufigkeit)}</div>` : ''}
           ${t.materialien ? `<div style="font-size:11px;color:var(--c-text-muted)">
-            🛒 ${UI.escape(t.materialien)}</div>` : ''}
+            🛒 ${_esc(t.materialien)}</div>` : ''}
           ${t.schritte?.length ? `
           <details style="margin-top:8px">
             <summary style="font-size:12px;cursor:pointer;color:var(--c-primary);
                             font-weight:600">Anleitung anzeigen</summary>
             <ol style="margin:8px 0 0 16px;padding:0;font-size:12px;
                        color:var(--c-text);line-height:1.6">
-              ${t.schritte.map(s=>`<li style="margin-bottom:3px">${UI.escape(s)}</li>`).join('')}
+              ${t.schritte.map(s=>`<li style="margin-bottom:3px">${_esc(s)}</li>`).join('')}
             </ol>
             ${t.tipp ? `<div style="margin-top:8px;font-size:11px;color:#a78bfa;
-                font-style:italic">💜 ${UI.escape(t.tipp)}</div>` : ''}
+                font-style:italic">💜 ${_esc(t.tipp)}</div>` : ''}
           </details>` : ''}
         </div>` : ''}
 
@@ -457,29 +457,29 @@ window.Page_dog_profile = (() => {
             const katTipps = data.tipps.filter(t=>t.kategorie===kat);
             const katBadge = kat === 'Fell' ? pflegeArtBadge : '';
             return `
-            <div class="mb-3">
+            <div style="margin-bottom:var(--space-3)">
               <div style="font-size:11px;font-weight:700;color:var(--c-text-muted);
                           text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center">
-                ${kat_icons[kat]||_ph('paw-print')} ${UI.escape(kat)}${katBadge}</div>
+                ${kat_icons[kat]||_ph('paw-print')} ${_esc(kat)}${katBadge}</div>
               ${katTipps.map(tip => `
               <details style="background:var(--c-surface-2);border-radius:8px;
                               padding:10px;margin-bottom:6px">
                 <summary style="font-size:var(--text-sm);font-weight:600;cursor:pointer;
                                 list-style:none;display:flex;justify-content:space-between;
                                 align-items:center">
-                  ${UI.escape(tip.titel)}
+                  ${_esc(tip.titel)}
                   ${tip.saisonal_aktuell ? '<span style="font-size:10px;color:#10b981">● Aktuell</span>' : ''}
                 </summary>
                 <div style="margin-top:8px;font-size:12px;color:var(--c-text-secondary);
-                            line-height:1.5">${UI.escape(tip.beschreibung||'')}</div>
+                            line-height:1.5">${_esc(tip.beschreibung||'')}</div>
                 ${tip.haeufigkeit ? `<div style="font-size:11px;color:var(--c-text-muted);
-                    margin-top:4px">🔄 ${UI.escape(tip.haeufigkeit)}</div>` : ''}
+                    margin-top:4px">🔄 ${_esc(tip.haeufigkeit)}</div>` : ''}
                 ${tip.schritte?.length ? `
                 <ol style="margin:8px 0 0 16px;padding:0;font-size:12px;line-height:1.6">
-                  ${tip.schritte.map(s=>`<li style="margin-bottom:3px">${UI.escape(s)}</li>`).join('')}
+                  ${tip.schritte.map(s=>`<li style="margin-bottom:3px">${_esc(s)}</li>`).join('')}
                 </ol>` : ''}
                 ${tip.tipp ? `<div style="margin-top:6px;font-size:11px;color:#a78bfa;
-                    font-style:italic">💜 ${UI.escape(tip.tipp)}</div>` : ''}
+                    font-style:italic">💜 ${_esc(tip.tipp)}</div>` : ''}
               </details>`).join('')}
             </div>`;
           }).join('')}
@@ -499,6 +499,12 @@ window.Page_dog_profile = (() => {
     });
   }
 
+  function _esc(s) {
+    if (!s) return '';
+    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;')
+      .replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+  }
+
   // ----------------------------------------------------------
   // SITTER-ZUGANG
   // ----------------------------------------------------------
@@ -521,8 +527,8 @@ window.Page_dog_profile = (() => {
           <div style="display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--c-surface-2);border-radius:var(--radius-md);margin-bottom:var(--space-2)">
             <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#user"></use></svg>
             <div style="flex:1;font-size:var(--text-sm)">
-              <strong>${UI.escape(s.sitter_name)}</strong>
-              <span class="text-muted"> · bis ${UI.escape(s.valid_until)}</span>
+              <strong>${_esc(s.sitter_name)}</strong>
+              <span style="color:var(--c-text-muted)"> · bis ${_esc(s.valid_until)}</span>
             </div>
             <button class="btn btn-link btn-sm sa-revoke-btn" data-sub-id="${s.id}"
                     style="color:var(--c-danger);padding:0">
@@ -532,7 +538,7 @@ window.Page_dog_profile = (() => {
       }
 
       const friendOptions = friends.length
-        ? friends.map(f => `<option value="${f.friend_id}">${UI.escape(f.friend_name)}</option>`).join('')
+        ? friends.map(f => `<option value="${f.friend_id}">${_esc(f.friend_name)}</option>`).join('')
         : '<option value="" disabled>Keine Freunde vorhanden</option>';
 
       const today = new Date().toISOString().slice(0, 10);
@@ -541,26 +547,26 @@ window.Page_dog_profile = (() => {
       wrap.innerHTML = `
         ${activeHtml}
         ${friends.length ? `
-        <div class="mt-3">
+        <div style="margin-top:var(--space-3)">
           <div style="font-size:var(--text-xs);color:var(--c-text-muted);
                       margin-bottom:var(--space-2);font-weight:600">Zugang gewähren</div>
           <div style="display:grid;grid-template-columns:1fr auto;gap:var(--space-2);
                       align-items:end">
             <div class="form-group" style="margin:0">
-              <label class="form-label text-xs">Freund</label>
+              <label class="form-label" style="font-size:var(--text-xs)">Freund</label>
               <select class="form-control form-control-sm" id="sa-friend-select">
                 <option value="">Freund wählen…</option>
                 ${friendOptions}
               </select>
             </div>
             <div class="form-group" style="margin:0">
-              <label class="form-label text-xs">Gültig bis</label>
+              <label class="form-label" style="font-size:var(--text-xs)">Gültig bis</label>
               <input class="form-control form-control-sm" type="date" id="sa-until-input"
                      value="${defaultUntil}" min="${today}">
             </div>
           </div>
           <button class="btn btn-primary btn-sm w-full" id="sa-grant-btn"
-                  class="mt-2">
+                  style="margin-top:var(--space-2)">
             Zugang gewähren
           </button>
         </div>
@@ -611,11 +617,11 @@ window.Page_dog_profile = (() => {
         <div class="mb-3">
           <label class="form-label">Chip-Nummer (15-stellig)</label>
           <input id="chip-edit-input" class="form-control" type="text"
-                 value="${UI.escape(dog.chip_nr || '')}" placeholder="z.B. 276009200123456" maxlength="20">
+                 value="${_esc(dog.chip_nr || '')}" placeholder="z.B. 276009200123456" maxlength="20">
         </div>`,
       footer: `
         <div class="w3-btn-stack">
-          <button class="btn btn-primary" id="chip-edit-save-btn" class="w-full">Speichern</button>
+          <button class="btn btn-primary" id="chip-edit-save-btn" style="width:100%">Speichern</button>
           <button class="btn btn-secondary" onclick="UI.modal.close()">Abbrechen</button>
         </div>`,
     });
@@ -660,20 +666,20 @@ window.Page_dog_profile = (() => {
           <div class="photo-editor-controls">
             <label class="form-label">Zoom</label>
             <input type="range" id="pe-zoom" min="1" max="3" step="0.05" value="${zoom}"
-                   class="w-full">
+                   style="width:100%">
           </div>
         ` : ''}
         <label class="btn btn-secondary" style="cursor:pointer">
           ${UI.icon('upload-simple')} Neues Foto wählen
-          <input type="file" id="pe-file-input" accept="image/*" class="hidden">
+          <input type="file" id="pe-file-input" accept="image/*" style="display:none">
         </label>
       </div>
     `;
 
     const footer = `
       <div class="w3-btn-stack">
-        ${hasPhoto ? `<button class="btn btn-primary" id="pe-save-btn" class="w-full">Speichern</button>` : ''}
-        <div class="flex-gap-2">
+        ${hasPhoto ? `<button class="btn btn-primary" id="pe-save-btn" style="width:100%">Speichern</button>` : ''}
+        <div style="display:flex;gap:var(--space-2)">
           ${hasPhoto ? `<button class="btn btn-danger" id="pe-delete-btn">${UI.icon('trash')} Löschen</button>` : ''}
           <button class="btn btn-secondary flex-1" onclick="UI.modal.close()">Abbrechen</button>
         </div>
@@ -837,15 +843,15 @@ window.Page_dog_profile = (() => {
         <!-- Header -->
         <div style="display:flex;align-items:center;gap:12px;margin-bottom:18px">
           ${dog.foto_url
-            ? `<img src="${UI.escape(dog.foto_url)}" style="width:52px;height:52px;border-radius:50%;object-fit:cover;
+            ? `<img src="${_esc(dog.foto_url)}" style="width:52px;height:52px;border-radius:50%;object-fit:cover;
                         border:2px solid rgba(196,132,58,0.6);flex-shrink:0">`
             : `<div style="width:52px;height:52px;border-radius:50%;background:rgba(196,132,58,0.2);
                         display:flex;align-items:center;justify-content:center;font-size:1.6rem;
                         flex-shrink:0;border:2px solid rgba(196,132,58,0.4)">🐾</div>`}
           <div>
-            <div style="font-size:1.25rem;font-weight:800;color:#fff;line-height:1.2">${UI.escape(dog.name)}</div>
-            ${metaLine ? `<div style="font-size:0.8rem;color:rgba(255,255,255,0.6);margin-top:2px">${UI.escape(metaLine)}</div>` : ''}
-            ${wohnort   ? `<div style="font-size:0.75rem;color:rgba(196,132,58,0.9);margin-top:3px">📍 ${UI.escape(wohnort)}</div>` : ''}
+            <div style="font-size:1.25rem;font-weight:800;color:#fff;line-height:1.2">${_esc(dog.name)}</div>
+            ${metaLine ? `<div style="font-size:0.8rem;color:rgba(255,255,255,0.6);margin-top:2px">${_esc(metaLine)}</div>` : ''}
+            ${wohnort   ? `<div style="font-size:0.75rem;color:rgba(196,132,58,0.9);margin-top:3px">📍 ${_esc(wohnort)}</div>` : ''}
           </div>
         </div>
 
@@ -854,13 +860,13 @@ window.Page_dog_profile = (() => {
 
         <!-- Owner + QR -->
         <div style="display:flex;align-items:flex-end;justify-content:space-between;gap:12px">
-          <div class="flex-1-min">
+          <div style="flex:1;min-width:0">
             ${ownerName ? `<div style="font-size:0.7rem;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px">Besitzer</div>
-              <div style="font-size:0.9rem;font-weight:600;color:rgba(255,255,255,0.85)">${UI.escape(ownerName)}</div>` : ''}
+              <div style="font-size:0.9rem;font-weight:600;color:rgba(255,255,255,0.85)">${_esc(ownerName)}</div>` : ''}
             <div style="font-size:0.65rem;color:rgba(255,255,255,0.35);margin-top:8px">banyaro.app</div>
           </div>
           <div style="flex-shrink:0;text-align:center">
-            <img id="dp-vcard-qr" src="${UI.escape(qrUrl)}"
+            <img id="dp-vcard-qr" src="${_esc(qrUrl)}"
                  style="width:80px;height:80px;border-radius:10px;display:block"
                  alt="QR-Code">
             <div style="font-size:0.6rem;color:rgba(255,255,255,0.35);margin-top:4px">Profil öffnen</div>
@@ -872,9 +878,9 @@ window.Page_dog_profile = (() => {
     UI.modal.open({
       title: 'Visitenkarte',
       body: `
-        <div class="mb-4">${cardHtml}</div>
+        <div style="margin-bottom:var(--space-4)">${cardHtml}</div>
         <p style="font-size:var(--text-xs);color:var(--c-text-secondary);text-align:center;margin-bottom:0">
-          QR-Code auf NFC-Tag oder Anhänger kleben — jeder kann das Profil von ${UI.escape(dog.name)} sofort öffnen.
+          QR-Code auf NFC-Tag oder Anhänger kleben — jeder kann das Profil von ${_esc(dog.name)} sofort öffnen.
         </p>
       `,
       footer: `
@@ -929,7 +935,7 @@ window.Page_dog_profile = (() => {
 
   async function _showShareModal(dog) {
     UI.modal.open({
-      title: `${UI.escape(dog.name)} teilen`,
+      title: `${_esc(dog.name)} teilen`,
       body: `
         <p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin-bottom:var(--space-4)">
           Erstelle einen Einladungslink, den du per WhatsApp, Signal oder E-Mail teilen kannst.
@@ -946,7 +952,7 @@ window.Page_dog_profile = (() => {
           <label class="form-label">Einladungslink</label>
           <div style="display:flex;gap:var(--space-2);align-items:center">
             <input class="form-control" id="share-link-input" type="text" readonly
-                   class="text-xs">
+                   style="font-size:var(--text-xs)">
             <button class="btn btn-secondary btn-sm" id="share-link-copy">
               <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#clipboard-text"></use></svg>
             </button>
@@ -955,7 +961,7 @@ window.Page_dog_profile = (() => {
             Dieser Link kann einmalig angenommen werden.
           </p>
         </div>
-        <div id="share-list-wrap" class="mt-4"></div>`,
+        <div id="share-list-wrap" style="margin-top:var(--space-4)"></div>`,
       footer: `
         <button class="btn btn-secondary" onclick="UI.modal.close()">Schließen</button>
         <button class="btn btn-primary" id="share-create-btn">Link erstellen</button>`,
@@ -1003,8 +1009,8 @@ window.Page_dog_profile = (() => {
             <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#user"></use></svg>
             <div style="flex:1;font-size:var(--text-sm)">
               ${s.shared_with_name
-                ? `<strong>${UI.escape(s.shared_with_name)}</strong> · ${s.role}`
-                : `<em class="text-muted">Ausstehend</em> · ${s.role}`}
+                ? `<strong>${_esc(s.shared_with_name)}</strong> · ${s.role}`
+                : `<em style="color:var(--c-text-muted)">Ausstehend</em> · ${s.role}`}
             </div>
             <button class="btn btn-link btn-sm share-revoke-btn" data-share-id="${s.id}"
                     style="color:var(--c-danger);padding:0">
@@ -1050,7 +1056,7 @@ window.Page_dog_profile = (() => {
       body:   _formHTML(null, true),
       footer: `
         <div class="w3-btn-stack">
-          <button type="submit" form="dp-form" class="btn btn-primary w-full">${UI.icon('dog')} Hund anlegen</button>
+          <button type="submit" form="dp-form" class="btn btn-primary" style="width:100%">${UI.icon('dog')} Hund anlegen</button>
           <button type="button" class="btn btn-secondary" id="dp-form-cancel">Abbrechen</button>
         </div>
       `,
@@ -1067,8 +1073,8 @@ window.Page_dog_profile = (() => {
       body:   _formHTML(dog, true),
       footer: `
         <div class="w3-btn-stack">
-          <button type="submit" form="dp-form" class="btn btn-primary w-full">Speichern</button>
-          <div class="flex-gap-2">
+          <button type="submit" form="dp-form" class="btn btn-primary" style="width:100%">Speichern</button>
+          <div style="display:flex;gap:var(--space-2)">
             <button type="button" class="btn btn-danger" id="dp-delete-btn">Löschen</button>
             <button type="button" id="dp-gedenken-btn"
                     style="flex:1;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
@@ -1095,19 +1101,19 @@ window.Page_dog_profile = (() => {
         <div class="form-group">
           <label class="form-label">Name *</label>
           <input class="form-control" type="text" name="name"
-                 value="${UI.escape(dog?.name || '')}"
+                 value="${_esc(dog?.name || '')}"
                  placeholder="z. B. Ban Yaro" required>
         </div>
 
         <div class="form-group">
           <label class="form-label">
             Rasse
-            <span class="text-secondary">(optional)</span>
+            <span style="color:var(--c-text-secondary)">(optional)</span>
             ${UI.help('Verknüpfe deine Rasse mit unserem Wiki für personalisierte Pflegetipps.')}
           </label>
           <input class="form-control" type="text" name="rasse"
                  id="dp-rasse-input"
-                 value="${UI.escape(dog?.rasse || '')}"
+                 value="${_esc(dog?.rasse || '')}"
                  list="dp-rasse-list"
                  autocomplete="off"
                  placeholder="z. B. Mischling, Golden Retriever…">
@@ -1120,7 +1126,7 @@ window.Page_dog_profile = (() => {
           </div>
         </div>
 
-        <div class="grid-2">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
           <div class="form-group">
             <label class="form-label">Geburtstag</label>
             <input class="form-control" type="date" name="geburtstag"
@@ -1136,7 +1142,7 @@ window.Page_dog_profile = (() => {
           </div>
         </div>
 
-        <div class="grid-2">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
           <div class="form-group">
             <label class="form-label">Gewicht (kg)</label>
             <input class="form-control" type="number" name="gewicht_kg"
@@ -1154,14 +1160,14 @@ window.Page_dog_profile = (() => {
           </div>
         </div>
 
-        <div class="grid-2">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
           <div class="form-group">
             <label class="form-label">
               Chip-Nummer
               ${UI.help('Die 15-stellige Chip-Nummer findest du im Heimtierausweis oder beim Tierarzt.')}
             </label>
             <input class="form-control" type="text" name="chip_nr"
-                   value="${UI.escape(dog?.chip_nr || '')}" placeholder="15-stellig">
+                   value="${_esc(dog?.chip_nr || '')}" placeholder="15-stellig">
           </div>
           <div></div>
         </div>
@@ -1169,7 +1175,7 @@ window.Page_dog_profile = (() => {
         <div class="form-group">
           <label class="form-label">
             Felltyp
-            <span class="text-secondary">(optional)</span>
+            <span style="color:var(--c-text-secondary)">(optional)</span>
             ${UI.help('Der Felltyp wird für personalisierte Wetter-Hinweise genutzt.')}
           </label>
           <select class="form-control" name="fell_typ">
@@ -1186,10 +1192,10 @@ window.Page_dog_profile = (() => {
         <div class="form-group">
           <label class="form-label">
             Bio / Steckbrief
-            <span class="text-secondary">(optional)</span>
+            <span style="color:var(--c-text-secondary)">(optional)</span>
           </label>
           <textarea class="form-control" name="bio" rows="2"
-                    placeholder="Kurze Beschreibung…">${UI.escape(dog?.bio || '')}</textarea>
+                    placeholder="Kurze Beschreibung…">${_esc(dog?.bio || '')}</textarea>
         </div>
 
         <div class="form-group">
@@ -1210,7 +1216,7 @@ window.Page_dog_profile = (() => {
                         display:${dog?.foto_url ? 'block' : 'none'}">
             <label class="btn btn-secondary btn-sm" style="cursor:pointer;margin:0">
               <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#camera"></use></svg> Foto auswählen
-              <input type="file" name="foto" accept="image/*" class="hidden"
+              <input type="file" name="foto" accept="image/*" style="display:none"
                      id="dp-form-foto">
             </label>
             <button type="button" class="btn btn-secondary btn-sm" id="dp-rasse-erkennen-btn"
@@ -1219,7 +1225,7 @@ window.Page_dog_profile = (() => {
               Rasse erkennen
             </button>
             <input type="file" accept="image/jpeg,image/png,image/webp"
-                   id="dp-rasse-foto-input" class="hidden">
+                   id="dp-rasse-foto-input" style="display:none">
           </div>
           <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:4px">
             Foto hochladen um die Rasse per KI zu erkennen
@@ -1467,11 +1473,11 @@ window.Page_dog_profile = (() => {
         title: 'Kein Hund erkannt',
         body: `<div style="text-align:center;padding:var(--space-6) var(--space-2)">
           <div style="font-size:3rem;margin-bottom:var(--space-3)">🐾</div>
-          <p class="text-secondary">
+          <p style="color:var(--c-text-secondary)">
             Auf diesem Foto konnte kein Hund erkannt werden.<br>
             Bitte lade ein deutlicheres Foto hoch.
           </p>
-          ${data.hinweis ? `<p style="font-size:var(--text-sm);color:var(--c-text-muted);margin-top:var(--space-3)">${UI.escape(data.hinweis)}</p>` : ''}
+          ${data.hinweis ? `<p style="font-size:var(--text-sm);color:var(--c-text-muted);margin-top:var(--space-3)">${_esc(data.hinweis)}</p>` : ''}
         </div>`,
         footer: `<button class="btn btn-secondary" onclick="UI.modal.close()">Schließen</button>`,
       });
@@ -1484,24 +1490,24 @@ window.Page_dog_profile = (() => {
       return `
         <div class="rasse-result-card${isTop ? ' rasse-result-card--top' : ''}">
           <div style="display:flex;align-items:center;justify-content:space-between">
-            <div class="rasse-result-name">${isTop ? '🐕 ' : ''}${UI.escape(r.name)}</div>
+            <div class="rasse-result-name">${isTop ? '🐕 ' : ''}${_esc(r.name)}</div>
             <span class="rasse-result-pct${isTop ? '' : ' rasse-result-pct--dim'}">${r.sicherheit}%</span>
           </div>
           <div class="rasse-result-bar-wrap">
             <div class="rasse-result-bar${isTop ? '' : ' rasse-result-bar--dim'}"
                  style="width:${r.sicherheit}%"></div>
           </div>
-          ${r.beschreibung ? `<div class="rasse-result-desc">${UI.escape(r.beschreibung)}</div>` : ''}
+          ${r.beschreibung ? `<div class="rasse-result-desc">${_esc(r.beschreibung)}</div>` : ''}
           <div style="display:flex;gap:var(--space-2);margin-top:var(--space-3);flex-wrap:wrap">
             ${isTop ? `<button class="btn btn-primary btn-sm" data-action="uebernehmen"
-                data-rasse="${UI.escape(r.name)}" class="flex-1">
+                data-rasse="${_esc(r.name)}" style="flex:1">
               Rasse übernehmen
             </button>` : `<button class="btn btn-secondary btn-sm" data-action="uebernehmen"
-                data-rasse="${UI.escape(r.name)}" class="flex-1">
+                data-rasse="${_esc(r.name)}" style="flex:1">
               Diese wählen
             </button>`}
             ${r.wiki_slug ? `<button class="btn btn-ghost btn-sm" data-action="wiki"
-                data-slug="${UI.escape(r.wiki_slug)}">
+                data-slug="${_esc(r.wiki_slug)}">
               Im Wiki
             </button>` : ''}
           </div>
@@ -1515,7 +1521,7 @@ window.Page_dog_profile = (() => {
         <div style="padding-bottom:var(--space-2)">
           ${data.hinweis ? `<div style="background:var(--c-surface-2);border-radius:var(--radius-md);
               padding:var(--space-3);margin-bottom:var(--space-3);font-size:var(--text-sm);
-              color:var(--c-text-secondary)">ℹ️ ${UI.escape(data.hinweis)}</div>` : ''}
+              color:var(--c-text-secondary)">ℹ️ ${_esc(data.hinweis)}</div>` : ''}
           ${cardsHtml}
           <p style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:var(--space-2);
                     text-align:center">
@@ -1576,13 +1582,18 @@ window.Page_dog_profile = (() => {
       : `${j} Jahr${j !== 1 ? 'e' : ''} alt`;
   }
 
+  function _esc(str) {
+    if (!str) return '';
+    return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+              .replace(/"/g, '&quot;');
+  }
 
   // ----------------------------------------------------------
   // HUNDEPASS
   // ----------------------------------------------------------
   async function _showPassportModal(dog) {
     UI.modal.open({
-      title: `Hundepass — ${UI.escape(dog.name)}`,
+      title: `Hundepass — ${_esc(dog.name)}`,
       body:  `<div id="pp-body" style="min-height:200px">
         <div style="text-align:center;padding:var(--space-6)">
           <svg class="ph-icon" style="width:32px;height:32px;color:var(--c-primary)" aria-hidden="true">
@@ -1625,7 +1636,7 @@ window.Page_dog_profile = (() => {
     try {
       data = await API.get(`/passport/${dog.id}`);
     } catch (e) {
-      wrap.innerHTML = `<p class="text-danger">Fehler beim Laden: ${UI.escape(e.message)}</p>`;
+      wrap.innerHTML = `<p style="color:var(--c-danger)">Fehler beim Laden: ${_esc(e.message)}</p>`;
       return;
     }
 
@@ -1655,25 +1666,25 @@ window.Page_dog_profile = (() => {
             Bearbeiten
           </button>
         </div>
-        <div class="grid-2">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
           <div>
-            <div class="text-xs-secondary">Blutgruppe</div>
+            <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">Blutgruppe</div>
             <div id="pp-meta-blutgruppe" style="font-size:var(--text-sm);font-weight:500">
-              ${UI.escape(meta.blutgruppe) || '<span class="text-muted">nicht eingetragen</span>'}
+              ${_esc(meta.blutgruppe) || '<span style="color:var(--c-text-muted)">nicht eingetragen</span>'}
             </div>
           </div>
           <div>
-            <div class="text-xs-secondary">Allergien</div>
-            <div id="pp-meta-allergien" class="text-sm">
-              ${UI.escape(meta.allergien) || '<span class="text-muted">keine</span>'}
+            <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">Allergien</div>
+            <div id="pp-meta-allergien" style="font-size:var(--text-sm)">
+              ${_esc(meta.allergien) || '<span style="color:var(--c-text-muted)">keine</span>'}
             </div>
           </div>
         </div>
         ${meta.besonderheiten ? `
-        <div class="mt-3">
-          <div class="text-xs-secondary">Besonderheiten</div>
-          <div id="pp-meta-besonderheiten" class="text-sm">
-            ${UI.escape(meta.besonderheiten)}
+        <div style="margin-top:var(--space-3)">
+          <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">Besonderheiten</div>
+          <div id="pp-meta-besonderheiten" style="font-size:var(--text-sm)">
+            ${_esc(meta.besonderheiten)}
           </div>
         </div>` : ''}
       </div>
@@ -1697,13 +1708,13 @@ window.Page_dog_profile = (() => {
             : vaccs.map(v => `
               <div class="pp-vacc-row" data-id="${v.id}"
                    class="pp-data-row">
-                <div class="flex-1">
-                  <div style="font-weight:600;font-size:var(--text-sm)">${UI.escape(v.krankheit)}</div>
+                <div style="flex:1">
+                  <div style="font-weight:600;font-size:var(--text-sm)">${_esc(v.krankheit)}</div>
                   <div style="font-size:var(--text-xs);color:var(--c-text-secondary);margin-top:2px">
                     Gegeben: ${_fmt(v.datum)}
                     ${v.naechste ? ` · Nächste: ${_fmt(v.naechste)}` : ''}
-                    ${v.tierarzt ? ` · ${UI.escape(v.tierarzt)}` : ''}
-                    ${v.charge_nr ? ` · Charge: ${UI.escape(v.charge_nr)}` : ''}
+                    ${v.tierarzt ? ` · ${_esc(v.tierarzt)}` : ''}
+                    ${v.charge_nr ? ` · Charge: ${_esc(v.charge_nr)}` : ''}
                   </div>
                 </div>
                 <button class="btn btn-link btn-sm pp-vacc-del" data-id="${v.id}"
@@ -1716,7 +1727,7 @@ window.Page_dog_profile = (() => {
       </div>
 
       <!-- Medikamente -->
-      <div class="card p-4">
+      <div class="card" style="padding:var(--space-4)">
         <div style="display:flex;align-items:center;justify-content:space-between;
                     margin-bottom:var(--space-3)">
           <span style="font-weight:700;font-size:var(--text-sm)">
@@ -1734,13 +1745,13 @@ window.Page_dog_profile = (() => {
             : meds.map(m => `
               <div class="pp-med-row" data-id="${m.id}"
                    class="pp-data-row">
-                <div class="flex-1">
-                  <div style="font-weight:600;font-size:var(--text-sm)">${UI.escape(m.name)}</div>
+                <div style="flex:1">
+                  <div style="font-weight:600;font-size:var(--text-sm)">${_esc(m.name)}</div>
                   <div style="font-size:var(--text-xs);color:var(--c-text-secondary);margin-top:2px">
-                    ${m.dosierung ? `${UI.escape(m.dosierung)} · ` : ''}
+                    ${m.dosierung ? `${_esc(m.dosierung)} · ` : ''}
                     ${m.von ? `Von ${_fmt(m.von)}` : ''}
                     ${m.bis ? ` bis ${_fmt(m.bis)}` : m.von ? ' · dauerhaft' : ''}
-                    ${m.notiz ? ` · ${UI.escape(m.notiz)}` : ''}
+                    ${m.notiz ? ` · ${_esc(m.notiz)}` : ''}
                   </div>
                 </div>
                 <button class="btn btn-link btn-sm pp-med-del" data-id="${m.id}"
@@ -1802,17 +1813,17 @@ window.Page_dog_profile = (() => {
         <div class="form-group">
           <label class="form-label">Blutgruppe</label>
           <input id="pp-meta-bg" class="form-control" type="text"
-                 value="${UI.escape(current.blutgruppe || '')}" placeholder="z. B. DEA 1.1 positiv">
+                 value="${_esc(current.blutgruppe || '')}" placeholder="z. B. DEA 1.1 positiv">
         </div>
         <div class="form-group">
           <label class="form-label">Allergien</label>
           <textarea id="pp-meta-al" class="form-control" rows="2"
-                    placeholder="z. B. Hühnchen, Flohspeichel">${UI.escape(current.allergien || '')}</textarea>
+                    placeholder="z. B. Hühnchen, Flohspeichel">${_esc(current.allergien || '')}</textarea>
         </div>
         <div class="form-group">
           <label class="form-label">Besonderheiten</label>
           <textarea id="pp-meta-be" class="form-control" rows="2"
-                    placeholder="z. B. Herzprobleme, Angstpatient">${UI.escape(current.besonderheiten || '')}</textarea>
+                    placeholder="z. B. Herzprobleme, Angstpatient">${_esc(current.besonderheiten || '')}</textarea>
         </div>`,
       footer: `
         <div style="display:flex;gap:var(--space-2);justify-content:flex-end">
@@ -1860,7 +1871,7 @@ window.Page_dog_profile = (() => {
             <option value="DHPP (Kombi)">
           </datalist>
         </div>
-        <div class="grid-2">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
           <div class="form-group">
             <label class="form-label">Datum *</label>
             <input id="pp-vacc-datum" class="form-control" type="date" value="${today}">
@@ -1927,13 +1938,13 @@ window.Page_dog_profile = (() => {
           <input id="pp-med-dosierung" class="form-control" type="text"
                  placeholder="z. B. 1× täglich, 5 mg">
         </div>
-        <div class="grid-2">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
           <div class="form-group">
             <label class="form-label">Von</label>
             <input id="pp-med-von" class="form-control" type="date" value="${today}">
           </div>
           <div class="form-group">
-            <label class="form-label">Bis <span class="text-muted">(leer = dauerhaft)</span></label>
+            <label class="form-label">Bis <span style="color:var(--c-text-muted)">(leer = dauerhaft)</span></label>
             <input id="pp-med-bis" class="form-control" type="date">
           </div>
         </div>
@@ -1990,7 +2001,7 @@ window.Page_dog_profile = (() => {
         </p>
         <div style="display:flex;gap:var(--space-2);align-items:center">
           <input id="pp-sharelink-input" class="form-control" type="text" readonly
-                 value="${UI.escape(url)}" class="text-xs">
+                 value="${_esc(url)}" style="font-size:var(--text-xs)">
           <button class="btn btn-secondary btn-sm" id="pp-sharelink-copy" style="flex-shrink:0">
             <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#clipboard-text"></use></svg>
           </button>
@@ -2026,7 +2037,7 @@ window.Page_dog_profile = (() => {
       return;
     }
 
-    const name = UI.escape(data.dog_name);
+    const name = _esc(data.dog_name);
     const km   = data.gesamt_km || 0;
     const konfetti = km > 100;
 
@@ -2068,8 +2079,8 @@ window.Page_dog_profile = (() => {
         <div style="font-size:1rem;color:#d0c8b8;font-weight:600">Tagebucheinträge</div>
         ${data.fotos_gesamt > 0 ? `<div style="font-size:1.1rem;color:#a0c890;font-weight:700;margin-top:4px">📷 ${data.fotos_gesamt} Fotos</div>` : ''}
         ${data.gassi_tage > 0 ? `<div style="font-size:0.9rem;color:#888;margin-top:4px">🐾 ${data.gassi_tage} aktive Tage</div>` : ''}
-        ${data.lieblings_monat ? `<div style="font-size:0.85rem;color:#b89a6a;margin-top:4px">Meiste Einträge: ${UI.escape(data.lieblings_monat)}</div>` : ''}
-        ${aktivitaet ? `<div style="font-size:0.85rem;color:#888">Lieblingsaktivität: ${UI.escape(aktivitaet)}</div>` : ''}
+        ${data.lieblings_monat ? `<div style="font-size:0.85rem;color:#b89a6a;margin-top:4px">Meiste Einträge: ${_esc(data.lieblings_monat)}</div>` : ''}
+        ${aktivitaet ? `<div style="font-size:0.85rem;color:#888">Lieblingsaktivität: ${_esc(aktivitaet)}</div>` : ''}
       `),
       _card(`
         <div style="font-size:2rem">🌡️</div>
@@ -2115,8 +2126,8 @@ window.Page_dog_profile = (() => {
       </div>
       <div style="flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative">
         <div id="dp-wrapped-card-container" style="width:100%;max-width:400px;color:#fff;">${cards[0]}</div>
-        <button id="dp-wrapped-prev" style="position:absolute;left:8px;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.1);border:none;border-radius:50%;width:44px;height:44px;font-size:1.3rem;color:#fff;cursor:pointer;display:none;align-items:center;justify-content:center">‹</button>
-        <button id="dp-wrapped-next" style="position:absolute;right:8px;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.1);border:none;border-radius:50%;width:44px;height:44px;font-size:1.3rem;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center">›</button>
+        <button id="dp-wrapped-prev" style="position:absolute;left:8px;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.1);border:none;border-radius:50%;width:40px;height:40px;font-size:1.3rem;color:#fff;cursor:pointer;display:none;align-items:center;justify-content:center">‹</button>
+        <button id="dp-wrapped-next" style="position:absolute;right:8px;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.1);border:none;border-radius:50%;width:40px;height:40px;font-size:1.3rem;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center">›</button>
       </div>
       <div id="dp-wrapped-dots" style="display:flex;gap:8px;justify-content:center;padding:16px 0 32px">${renderDots()}</div>
     `;
@@ -2288,7 +2299,7 @@ window.Page_dog_profile = (() => {
   // ----------------------------------------------------------
   async function _showTimelineModal(dog) {
     UI.modal.open({
-      title: `Lebens-Timeline — ${UI.escape(dog.name)}`,
+      title: `Lebens-Timeline — ${_esc(dog.name)}`,
       body: `<div id="dp-timeline-body" style="min-height:200px;text-align:center;padding:var(--space-6)">
         <svg class="ph-icon" style="width:32px;height:32px;color:var(--c-primary)" aria-hidden="true">
           <use href="/icons/phosphor.svg#spinner-gap"></use>
@@ -2303,7 +2314,7 @@ window.Page_dog_profile = (() => {
       data = await API.get(`/dogs/${dog.id}/timeline`);
     } catch (e) {
       const b = document.getElementById('dp-timeline-body');
-      if (b) b.innerHTML = `<p class="text-danger">Fehler: ${UI.escape(e.message)}</p>`;
+      if (b) b.innerHTML = `<p style="color:var(--c-danger)">Fehler: ${_esc(e.message)}</p>`;
       return;
     }
 
@@ -2340,14 +2351,14 @@ window.Page_dog_profile = (() => {
     for (const ev of events) {
       const year = ev.datum ? ev.datum.substring(0, 4) : null;
       if (year && year !== lastYear) {
-        html += `<div class="tl-year">${UI.escape(year)}</div>`;
+        html += `<div class="tl-year">${_esc(year)}</div>`;
         lastYear = year;
       }
 
       const kat  = _KAT[ev.kategorie] || _KAT.tagebuch;
       const big  = ev.is_milestone;
 
-      let label = UI.escape(ev.titel);
+      let label = _esc(ev.titel);
       if (ev.is_first && ev.kategorie === 'tagebuch') label = `🎉 Erster Tagebucheintrag — ${label}`;
       if (ev.is_first && ev.kategorie === 'route')    label = `🎉 Erste Route — ${label}`;
       if (ev.is_first && ev.kategorie === 'training') label = `🎉 Erstes Training — ${label}`;
@@ -2365,13 +2376,13 @@ window.Page_dog_profile = (() => {
                box-shadow:${big ? `0 0 0 4px ${kat.color}22` : 'none'}"></div>
           <div class="tl-card">
             ${big && ev.foto_url ? `
-              <div class="tl-foto" style="background-image:url(${UI.escape(ev.foto_url)})"></div>` : ''}
+              <div class="tl-foto" style="background-image:url(${_esc(ev.foto_url)})"></div>` : ''}
             <div class="tl-meta">
               <span class="tl-badge" style="background:${kat.color}22;color:${kat.color}">
                 <svg class="ph-icon" style="width:11px;height:11px" aria-hidden="true">
                   <use href="/icons/phosphor.svg#${kat.icon}"></use>
                 </svg>
-                ${UI.escape(kat.label)}
+                ${_esc(kat.label)}
               </span>
               <span class="tl-date">${_fmtDate(ev.datum)}</span>
             </div>
@@ -2440,8 +2451,8 @@ window.Page_dog_profile = (() => {
       if (!data || data.count === 0) return;
       const hauptRasse = data.rassen[0]?.rasse || '';
       const label = data.count === 1
-        ? `1 anderer ${UI.escape(hauptRasse)}-Halter in der App`
-        : `${data.count} andere ${UI.escape(hauptRasse)}-Halter in der App`;
+        ? `1 anderer ${_esc(hauptRasse)}-Halter in der App`
+        : `${data.count} andere ${_esc(hauptRasse)}-Halter in der App`;
 
       el.innerHTML = `
         <button class="breed-community-chip" id="dp-breed-chip-btn">
@@ -2487,7 +2498,7 @@ window.Page_dog_profile = (() => {
         </form>`,
       footer: `
         <div class="w3-btn-stack">
-          <button type="submit" form="gedenken-form" id="gedenken-save-btn" class="btn btn-primary w-full">
+          <button type="submit" form="gedenken-form" id="gedenken-save-btn" class="btn btn-primary" style="width:100%">
             <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#heart"></use></svg>
             Gedenkseite erstellen
           </button>
@@ -2539,22 +2550,22 @@ window.Page_dog_profile = (() => {
         ${d.km_total ? `<div class="card" style="padding:var(--space-3);text-align:center">
           <svg class="ph-icon" style="width:20px;height:20px;color:var(--c-primary)" aria-hidden="true"><use href="/icons/phosphor.svg#path"></use></svg>
           <div style="font-size:var(--text-xl);font-weight:800;color:var(--c-primary)">${d.km_total}</div>
-          <div class="text-xs-secondary">km zusammen</div>
+          <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">km zusammen</div>
         </div>` : ''}
         ${d.diary_count ? `<div class="card" style="padding:var(--space-3);text-align:center">
           <svg class="ph-icon" style="width:20px;height:20px;color:var(--c-primary)" aria-hidden="true"><use href="/icons/phosphor.svg#book-open"></use></svg>
           <div style="font-size:var(--text-xl);font-weight:800;color:var(--c-primary)">${d.diary_count}</div>
-          <div class="text-xs-secondary">Tagebucheinträge</div>
+          <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">Tagebucheinträge</div>
         </div>` : ''}
         ${d.media_count ? `<div class="card" style="padding:var(--space-3);text-align:center">
           <svg class="ph-icon" style="width:20px;height:20px;color:var(--c-primary)" aria-hidden="true"><use href="/icons/phosphor.svg#images"></use></svg>
           <div style="font-size:var(--text-xl);font-weight:800;color:var(--c-primary)">${d.media_count}</div>
-          <div class="text-xs-secondary">Fotos</div>
+          <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">Fotos</div>
         </div>` : ''}
         ${d.gemeinsam_tage ? `<div class="card" style="padding:var(--space-3);text-align:center">
           <svg class="ph-icon" style="width:20px;height:20px;color:var(--c-primary)" aria-hidden="true"><use href="/icons/phosphor.svg#calendar-heart"></use></svg>
           <div style="font-size:var(--text-xl);font-weight:800;color:var(--c-primary)">${d.gemeinsam_tage}</div>
-          <div class="text-xs-secondary">gemeinsame Tage</div>
+          <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">gemeinsame Tage</div>
         </div>` : ''}
       </div>`;
 
@@ -2585,8 +2596,8 @@ window.Page_dog_profile = (() => {
           Professionelle Hilfe bei Tiertrauer: <strong>Tiertrauer-Hotline 0800 111 0 111</strong> (kostenlos)
         </div>
       </div>
-      <div id="gedenk-ki-wrap" class="mt-4">
-        <button id="gedenk-ki-btn" class="btn btn-secondary w-full">
+      <div id="gedenk-ki-wrap" style="margin-top:var(--space-4)">
+        <button id="gedenk-ki-btn" class="btn btn-secondary" style="width:100%">
           <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#sparkle"></use></svg>
           Persönlichen Abschiedstext erstellen
         </button>
diff --git a/backend/static/js/pages/ernaehrung.js b/backend/static/js/pages/ernaehrung.js
index bc7c46d..094e34e 100644
--- a/backend/static/js/pages/ernaehrung.js
+++ b/backend/static/js/pages/ernaehrung.js
@@ -21,6 +21,14 @@ window.Page_ernaehrung = (() => {
   // ------------------------------------------------------------------
   // Escape helper
   // ------------------------------------------------------------------
+  function _esc(s) {
+    if (s == null) return '';
+    return String(s)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+  }
 
   // ------------------------------------------------------------------
   // LIFECYCLE
@@ -148,17 +156,17 @@ window.Page_ernaehrung = (() => {
           <div class="ern-field">
             <label>⚖️ Gewicht (kg)</label>
             <input id="ern-gewicht" type="number" step="0.1" min="0.5" max="100"
-                   value="${UI.escape(gewichtDefault)}" placeholder="15">
+                   value="${_esc(gewichtDefault)}" placeholder="15">
           </div>
           <div class="ern-field">
             <label>🎂 Alter (Jahre)</label>
             <input id="ern-alter" type="number" step="0.5" min="0" max="25"
-                   value="${UI.escape(alterDefault)}" placeholder="3">
+                   value="${_esc(alterDefault)}" placeholder="3">
           </div>
         </div>
 
         <!-- Aktivität als Pill-Buttons -->
-        <div class="mb-4">
+        <div style="margin-bottom:var(--space-4)">
           <div class="ern-section-label">🏃 Aktivität</div>
           <div class="ern-pill-group">
             <button class="ern-pill" data-akt="gering">🛋️ Gemütlich</button>
@@ -201,7 +209,7 @@ window.Page_ernaehrung = (() => {
             <div class="by-form-group" style="margin:0">
               <label class="by-label">Marke / Produkt</label>
               <input id="ern-prof-marke" type="text" class="by-input"
-                     value="${UI.escape(_profil.marke)}" placeholder="z. B. Royal Canin">
+                     value="${_esc(_profil.marke)}" placeholder="z. B. Royal Canin">
             </div>
             <div class="by-form-group" style="margin:0">
               <label class="by-label">Portionen pro Tag</label>
@@ -211,7 +219,7 @@ window.Page_ernaehrung = (() => {
             <div class="by-form-group" style="margin:0">
               <label class="by-label">Notizen</label>
               <textarea id="ern-prof-notizen" class="by-input" rows="2"
-                        placeholder="Besonderheiten, Allergien...">${UI.escape(_profil.notizen)}</textarea>
+                        placeholder="Besonderheiten, Allergien...">${_esc(_profil.notizen)}</textarea>
             </div>
             <button class="btn btn-secondary" id="ern-prof-save-btn">
               <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#floppy-disk"></use></svg>
@@ -280,13 +288,13 @@ window.Page_ernaehrung = (() => {
         <div style="background:var(--c-surface);border-radius:var(--radius-md);
                     padding:var(--space-3);border:1px solid var(--c-border)">
           <div style="font-weight:600;margin-bottom:4px">🌾 Trockenfutter</div>
-          <div class="text-sm-secondary">
+          <div style="font-size:var(--text-sm);color:var(--c-text-secondary)">
             (~350 kcal/100g)
           </div>
           <div style="font-size:var(--text-lg);font-weight:600;margin-top:6px">
             ${trocken} g / Tag
           </div>
-          <div class="text-sm-secondary">
+          <div style="font-size:var(--text-sm);color:var(--c-text-secondary)">
             = ${Math.round(trocken/2)} g morgens + ${Math.round(trocken/2)} g abends
           </div>
         </div>
@@ -294,13 +302,13 @@ window.Page_ernaehrung = (() => {
         <div style="background:var(--c-surface);border-radius:var(--radius-md);
                     padding:var(--space-3);border:1px solid var(--c-border)">
           <div style="font-weight:600;margin-bottom:4px">🥫 Nassfutter</div>
-          <div class="text-sm-secondary">
+          <div style="font-size:var(--text-sm);color:var(--c-text-secondary)">
             (~85 kcal/100g)
           </div>
           <div style="font-size:var(--text-lg);font-weight:600;margin-top:6px">
             ${nass} g / Tag
           </div>
-          <div class="text-sm-secondary">
+          <div style="font-size:var(--text-sm);color:var(--c-text-secondary)">
             = ${Math.round(nass/2)} g morgens + ${Math.round(nass/2)} g abends
           </div>
         </div>
@@ -308,13 +316,13 @@ window.Page_ernaehrung = (() => {
         <div style="background:var(--c-surface);border-radius:var(--radius-md);
                     padding:var(--space-3);border:1px solid var(--c-border)">
           <div style="font-weight:600;margin-bottom:4px">🥩 BARF</div>
-          <div class="text-sm-secondary">
+          <div style="font-size:var(--text-sm);color:var(--c-text-secondary)">
             (~150 kcal/100g)
           </div>
           <div style="font-size:var(--text-lg);font-weight:600;margin-top:6px">
             ${barf} g / Tag
           </div>
-          <div class="text-sm-secondary">
+          <div style="font-size:var(--text-sm);color:var(--c-text-secondary)">
             = ${Math.round(barf/2)} g morgens + ${Math.round(barf/2)} g abends
           </div>
         </div>
@@ -474,8 +482,8 @@ window.Page_ernaehrung = (() => {
               <div style="display:flex;align-items:center;gap:var(--space-2)">
                 <span style="font-size:1.4rem">${item.emoji}</span>
                 <div>
-                  <div style="font-weight:600;font-size:var(--text-sm);color:var(--c-text)">${UI.escape(item.name)}</div>
-                  <div style="font-size:var(--text-xs);color:var(--c-danger)">${UI.escape(item.grund)}</div>
+                  <div style="font-weight:600;font-size:var(--text-sm);color:var(--c-text)">${_esc(item.name)}</div>
+                  <div style="font-size:var(--text-xs);color:var(--c-danger)">${_esc(item.grund)}</div>
                 </div>
               </div>
             </div>
@@ -503,7 +511,7 @@ window.Page_ernaehrung = (() => {
                     border:1px solid var(--c-border)">
           <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#robot"></use></svg>
           Der KI-Futterberater beantwortet Ernährungsfragen für
-          <strong>${UI.escape(dog?.name || 'deinen Hund')}</strong>.
+          <strong>${_esc(dog?.name || 'deinen Hund')}</strong>.
           Bei Gesundheitsfragen immer den Tierarzt zurate ziehen.
         </div>
 
@@ -516,8 +524,8 @@ window.Page_ernaehrung = (() => {
             'Welche Leckerlis sind gesund?',
           ].map(q => `
             <button class="btn btn-sm btn-secondary ern-ki-vorschlag"
-                    data-q="${UI.escape(q)}"
-                    class="text-xs">${UI.escape(q)}</button>
+                    data-q="${_esc(q)}"
+                    style="font-size:var(--text-xs)">${_esc(q)}</button>
           `).join('')}
         </div>
 
@@ -525,7 +533,7 @@ window.Page_ernaehrung = (() => {
         <div id="ern-ki-chat" style="min-height:80px;margin-bottom:var(--space-3)"></div>
 
         <!-- Eingabe -->
-        <div class="flex-gap-2">
+        <div style="display:flex;gap:var(--space-2)">
           <textarea id="ern-ki-frage" class="by-input" rows="2"
                     placeholder="Deine Frage zur Ernährung..."
                     style="flex:1;resize:vertical"></textarea>
@@ -569,7 +577,7 @@ window.Page_ernaehrung = (() => {
       <div style="display:flex;justify-content:flex-end;margin-bottom:var(--space-2)">
         <div style="background:var(--c-primary);color:#fff;border-radius:var(--radius-md);
                     padding:var(--space-2) var(--space-3);max-width:80%;font-size:var(--text-sm)">
-          ${UI.escape(frage)}
+          ${_esc(frage)}
         </div>
       </div>
     `);
@@ -578,7 +586,7 @@ window.Page_ernaehrung = (() => {
     // KI-Antwort Placeholder
     const placeholderId = `ern-ki-placeholder-${Date.now()}`;
     chatEl.insertAdjacentHTML('beforeend', `
-      <div id="${placeholderId}" class="mb-3">
+      <div id="${placeholderId}" style="margin-bottom:var(--space-3)">
         <div style="background:var(--c-surface);border:1px solid var(--c-border);
                     border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);
                     font-size:var(--text-sm);color:var(--c-text-muted)">
@@ -609,7 +617,7 @@ window.Page_ernaehrung = (() => {
         }
       }
 
-      const antwortHtml = UI.escape(antwort)
+      const antwortHtml = _esc(antwort)
         .replace(/\n\n/g, '</p><p style="margin:var(--space-1) 0">')
         .replace(/\n/g, '<br>');
 
@@ -738,7 +746,7 @@ window.Page_ernaehrung = (() => {
       const dl = document.getElementById('vert-futter-datalist');
       if (!dl) return;
       const names = [...new Set((list || []).map(e => e.futter_name))];
-      dl.innerHTML = names.map(n => `<option value="${UI.escape(n)}">`).join('');
+      dl.innerHTML = names.map(n => `<option value="${_esc(n)}">`).join('');
     }).catch(() => {});
 
     setTimeout(() => {
@@ -897,7 +905,7 @@ window.Page_ernaehrung = (() => {
     try {
       data = await API.dogs.futterAnalyse(dog.id);
     } catch (_) {
-      analyseEl.innerHTML = `<p class="text-sm-muted">Analyse nicht verfügbar.</p>`;
+      analyseEl.innerHTML = `<p style="color:var(--c-text-muted);font-size:var(--text-sm)">Analyse nicht verfügbar.</p>`;
       return;
     }
 
@@ -942,7 +950,7 @@ window.Page_ernaehrung = (() => {
         <svg class="ph-icon" aria-hidden="true" style="flex-shrink:0;color:var(--c-warning,#f59e0b);margin-top:1px">
           <use href="/icons/phosphor.svg#warning-circle"></use>
         </svg>
-        <span>${UI.escape(data.hinweis)}</span>
+        <span>${_esc(data.hinweis)}</span>
       </div>
     ` : '';
 
@@ -970,7 +978,7 @@ window.Page_ernaehrung = (() => {
               return `<span style="font-size:10px;font-weight:600;padding:2px 6px;
                                    border-radius:999px;border:1px solid ${chipColor};
                                    color:${chipColor};white-space:nowrap">
-                        ${UI.escape(KAT_LABELS[kat] || kat)} ×${cnt}
+                        ${_esc(KAT_LABELS[kat] || kat)} ×${cnt}
                       </span>`;
             }).join('');
           return `
@@ -980,17 +988,17 @@ window.Page_ernaehrung = (() => {
               <div style="min-width:0;flex:1">
                 <div style="font-weight:600;font-size:var(--text-sm);color:var(--c-text);
                             white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
-                  ${UI.escape(f.name)}
+                  ${_esc(f.name)}
                 </div>
-                <div class="text-xs-muted">
-                  ${UI.escape(TYP_LABELS[f.typ] || f.typ)} &middot; ${f.mahlzeiten} Mahlzeit${f.mahlzeiten !== 1 ? 'en' : ''}
+                <div style="font-size:var(--text-xs);color:var(--c-text-muted)">
+                  ${_esc(TYP_LABELS[f.typ] || f.typ)} &middot; ${f.mahlzeiten} Mahlzeit${f.mahlzeiten !== 1 ? 'en' : ''}
                   ${f.status !== 'neu' ? `&middot; <span style="color:var(--c-success,#22c55e)">+${f.positiv}</span> / <span style="color:var(--c-danger,#ef4444)">-${f.negativ}</span>` : ''}
                 </div>
                 ${katChips ? `<div style="display:flex;flex-wrap:wrap;gap:4px;margin-top:4px">${katChips}</div>` : ''}
               </div>
               <span style="flex-shrink:0;font-size:var(--text-xs);font-weight:700;
                            color:${cfg.color};white-space:nowrap">
-                ${UI.escape(cfg.label)}
+                ${_esc(cfg.label)}
               </span>
             </div>
           `;
@@ -1076,10 +1084,10 @@ window.Page_ernaehrung = (() => {
                 <svg class="ph-icon" aria-hidden="true" style="flex-shrink:0;color:var(--c-primary)">
                   <use href="/icons/phosphor.svg#bowl-food"></use>
                 </svg>
-                <div class="flex-1-min">
-                  <div style="font-weight:600;font-size:var(--text-sm)">${UI.escape(item.futter_name)}</div>
-                  <div class="text-xs-muted">
-                    ${UI.escape(item.datum)} ${UI.escape(item.uhrzeit)}
+                <div style="flex:1;min-width:0">
+                  <div style="font-weight:600;font-size:var(--text-sm)">${_esc(item.futter_name)}</div>
+                  <div style="font-size:var(--text-xs);color:var(--c-text-muted)">
+                    ${_esc(item.datum)} ${_esc(item.uhrzeit)}
                     ${item.menge_g ? ` &middot; ${item.menge_g} g` : ''}
                   </div>
                 </div>
@@ -1102,13 +1110,13 @@ window.Page_ernaehrung = (() => {
                 <svg class="ph-icon" aria-hidden="true" style="flex-shrink:0;color:${col}">
                   <use href="/icons/phosphor.svg#heartbeat"></use>
                 </svg>
-                <div class="flex-1-min">
+                <div style="flex:1;min-width:0">
                   <div style="font-weight:600;font-size:var(--text-sm);color:${col}">
-                    ${UI.escape(REAK_LABELS[item.reaktion_typ] || item.reaktion_typ)}
+                    ${_esc(REAK_LABELS[item.reaktion_typ] || item.reaktion_typ)}
                     <span style="font-weight:400;color:var(--c-text-muted)">(${item.intensitaet}/5)</span>
                   </div>
-                  <div class="text-xs-muted">
-                    ${UI.escape(item.datum)} ${UI.escape(item.uhrzeit)}
+                  <div style="font-size:var(--text-xs);color:var(--c-text-muted)">
+                    ${_esc(item.datum)} ${_esc(item.uhrzeit)}
                   </div>
                 </div>
                 <button class="btn-icon vert-del-reaktion" data-id="${item.id}"
diff --git a/backend/static/js/pages/erste-hilfe.js b/backend/static/js/pages/erste-hilfe.js
index e8f1582..570a450 100644
--- a/backend/static/js/pages/erste-hilfe.js
+++ b/backend/static/js/pages/erste-hilfe.js
@@ -32,17 +32,16 @@ window.Page_erste_hilfe = (() => {
       land:  'Österreich',
       flag:  'AT',
       eintraege: [
-        { label: 'Vergiftungsinformationszentrale Wien',           tel: '+4314064343',  display: '+43 1 406 43 43' },
-        { label: 'VetMedUni Wien — Kleintier-Notdienst (24h)',     tel: '+431250776900', display: '+43 1 25077-6900' },
+        { label: 'Vergiftungsinformationszentrale Wien', tel: '+431 4064343', display: '+43 1 4064343' },
+        { label: 'Veterinärmedizinische Universität Wien (Notfallklinik)', tel: null, display: 'TODO: Nummer einfügen' },
       ],
     },
     {
       land:  'Schweiz',
       flag:  'CH',
       eintraege: [
-        { label: 'Tox Info Suisse (in CH gratis)',                 tel: '145',           display: '145 (in CH)' },
-        { label: 'Tox Info Suisse (international)',                tel: '+41442515151',  display: '+41 44 251 51 51' },
-        { label: 'Tierspital Zürich — Kleintier-Notfall (24h)',    tel: '+41446358337',  display: '+41 44 635 83 37' },
+        { label: 'Tox Info Suisse (Tiergiftnotruf)', tel: null, display: 'TODO: Nummer einfügen (ggf. 145)' },
+        { label: 'Tierspital Zürich',                tel: null, display: 'TODO: Nummer einfügen' },
       ],
     },
   ];
@@ -254,13 +253,13 @@ window.Page_erste_hilfe = (() => {
         </div>
 
         ${KATEGORIEN.map(k => `
-          <div class="eh-tab-panel" id="eh-panel-${k.id}" class="hidden">
+          <div class="eh-tab-panel" id="eh-panel-${k.id}" style="display:none">
             ${k.eintraege.map((e, i) => _renderEintrag(e, k.id, i, k.color)).join('')}
           </div>
         `).join('')}
 
         <div style="margin-top:var(--space-6);padding:var(--space-4);background:var(--c-surface-2);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--c-text-secondary);line-height:1.6">
-          <svg class="ph-icon" aria-hidden="true" class="text-primary"><use href="/icons/phosphor.svg#info"></use></svg>
+          <svg class="ph-icon" aria-hidden="true" style="color:var(--c-primary)"><use href="/icons/phosphor.svg#info"></use></svg>
           Diese Inhalte ersetzen keinen Tierarztbesuch. Im Zweifel immer sofort zum Tierarzt oder den tierärztlichen Notdienst anrufen.
         </div>
       </div>
@@ -312,7 +311,7 @@ window.Page_erste_hilfe = (() => {
         <div style="font-size:var(--text-xs);font-weight:var(--weight-semibold);color:rgba(255,255,255,0.85);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:var(--space-1)">
           ${g.flag} · ${g.land}
         </div>
-        <div class="flex-col-gap-2">
+        <div style="display:flex;flex-direction:column;gap:var(--space-2)">
           ${g.eintraege.map(renderEintrag).join('')}
         </div>
       </div>
@@ -324,7 +323,7 @@ window.Page_erste_hilfe = (() => {
           <svg class="ph-icon" style="width:20px;height:20px" aria-hidden="true"><use href="/icons/phosphor.svg#siren"></use></svg>
           Tiergiftzentralen — jetzt anrufen
         </div>
-        <div class="flex-col-gap-3">
+        <div style="display:flex;flex-direction:column;gap:var(--space-3)">
           ${gruppen}
         </div>
         <p style="margin-top:var(--space-3);font-size:var(--text-xs);color:rgba(255,255,255,0.8)">
@@ -346,7 +345,7 @@ window.Page_erste_hilfe = (() => {
     return `
       <div class="card" style="padding:0;overflow:hidden;margin-bottom:var(--space-4)">
         <div style="padding:var(--space-3) var(--space-4);background:var(--c-surface-2);font-weight:var(--weight-semibold);font-size:var(--text-sm);display:flex;align-items:center;gap:var(--space-2)">
-          <svg class="ph-icon" aria-hidden="true" class="text-primary"><use href="/icons/phosphor.svg#list-bullets"></use></svg>
+          <svg class="ph-icon" aria-hidden="true" style="color:var(--c-primary)"><use href="/icons/phosphor.svg#list-bullets"></use></svg>
           Schnellübersicht: Was tun bei …
         </div>
         <div style="overflow-x:auto">
@@ -486,7 +485,7 @@ window.Page_erste_hilfe = (() => {
                     display:flex;align-items:center;justify-content:space-between;flex-shrink:0">
           <div>
             <div style="font-weight:var(--weight-semibold);font-size:var(--text-base)"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#note-pencil"></use></svg> Notiz</div>
-            <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:2px">${UI.escape(parentLabel)}</div>
+            <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:2px">${_esc(parentLabel)}</div>
           </div>
           <button id="by-note-close" style="background:none;border:none;cursor:pointer;font-size:1.4rem;color:var(--c-text-muted);padding:4px 8px" aria-label="Schließen">×</button>
         </div>
diff --git a/backend/static/js/pages/events.js b/backend/static/js/pages/events.js
index afb7e62..6ae45e7 100644
--- a/backend/static/js/pages/events.js
+++ b/backend/static/js/pages/events.js
@@ -75,7 +75,7 @@ window.Page_events = (() => {
           <button class="events-view-btn active" data-ev-view="liste">${UI.icon('list')} Liste</button>
           <button class="events-view-btn" data-ev-view="karte">${UI.icon('map-trifold')} Karte</button>
         </div>
-        <div class="flex-1"></div>
+        <div style="flex:1"></div>
         ${_state.user ? `<button class="btn btn-primary btn-sm" id="ev-new-btn">${UI.icon('plus')} Event</button>` : ''}
       </div>
 
@@ -102,7 +102,7 @@ window.Page_events = (() => {
       </div>
 
       <div class="events-list" id="ev-list"></div>
-      <div class="events-map" id="ev-map" class="hidden"></div>
+      <div class="events-map" id="ev-map" style="display:none"></div>
     `;
 
     _container.addEventListener('click', _onClick);
@@ -231,7 +231,7 @@ window.Page_events = (() => {
           ${_state.user ? `<button class="btn-icon ev-note-btn" data-ev-note-id="${ev.id}"
                               data-ev-note-label="${UI.escape(ev.titel + ' ' + ev.datum)}"
                               data-ev-note-ort="${UI.escape(ev.ort_name || '')}"
-                              title="Notiz" class="text-muted" onclick="event.stopPropagation()">
+                              title="Notiz" style="color:var(--c-text-muted)" onclick="event.stopPropagation()">
                               ${_icon('note-pencil')}</button>` : ''}
         </div>
       </div>
@@ -248,10 +248,8 @@ window.Page_events = (() => {
     await UI.loadLeaflet(true); // true = mit MarkerCluster
 
     if (!_map) {
-      _map = await UI.map.create('ev-map', {
-        center: [51.1657, 10.4515], zoom: 6,
-        zoomControl: true, attributionControl: false,
-      });
+      _map = L.map('ev-map', { zoomControl: true }).setView([51.1657, 10.4515], 6);
+      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(_map);
     }
 
     // Cluster-Gruppe aufräumen und neu befüllen
@@ -268,8 +266,12 @@ window.Page_events = (() => {
       const typ   = TYPEN.find(t => t.id === ev.typ) || TYPEN[TYPEN.length - 1];
       const d     = new Date(ev.datum + 'T00:00:00');
       const datum = d.toLocaleDateString('de-DE', { day: 'numeric', month: 'short', year: 'numeric' });
-      // Events nutzen rotierten Diamant-Marker (nicht Kreis) — UI.map.svgMarker mit custom HTML
-      const html = `<div style="width:32px;height:32px;border-radius:50% 50% 50% 0;background:${color};border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 2px 6px rgba(0,0,0,0.3);transform:rotate(-45deg);color:#fff"><svg style="width:14px;height:14px;transform:rotate(45deg);fill:currentColor" viewBox="0 0 256 256"><use href="/icons/phosphor.svg#${typ.icon}"></use></svg></div>`;
+      // Events nutzen rotierten Diamant-Marker (nicht Kreis) — UI.leafletMarker() nicht anwendbar
+      const icon  = L.divIcon({
+        className: '',
+        html: `<div style="width:32px;height:32px;border-radius:50% 50% 50% 0;background:${color};border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 2px 6px rgba(0,0,0,0.3);transform:rotate(-45deg);color:#fff"><svg style="width:14px;height:14px;transform:rotate(45deg);fill:currentColor" viewBox="0 0 256 256"><use href="/icons/phosphor.svg#${typ.icon}"></use></svg></div>`,
+        iconSize: [32, 32], iconAnchor: [16, 32],
+      });
       const popup = `
         <div style="min-width:180px">
           <strong>${UI.escape(ev.titel)}</strong><br>
@@ -280,7 +282,7 @@ window.Page_events = (() => {
              style="font-size:12px;color:var(--c-primary,#2563eb)">Details</a>
         </div>
       `;
-      const m = UI.map.svgMarker(ev.lat, ev.lon, html, { size: 32, anchorY: 32 }).bindPopup(popup);
+      const m = L.marker([ev.lat, ev.lon], { icon }).bindPopup(popup);
       _clusterGroup.addLayer(m);
       _markers.push(m);
       bounds.push([ev.lat, ev.lon]);
@@ -494,7 +496,7 @@ window.Page_events = (() => {
           <label class="form-label">GPS-Position</label>
           <div id="ev-location-picker"></div>
         </div>
-        <div class="form-group mt-3">
+        <div class="form-group" style="margin-top:var(--space-3)">
           <label class="form-label">Beschreibung</label>
           <textarea class="form-control" name="beschreibung" rows="3">${ev?.beschreibung || ''}</textarea>
         </div>
@@ -507,10 +509,10 @@ window.Page_events = (() => {
 
     const footer = `
       <div style="display:flex;flex-direction:column;gap:var(--space-2);width:100%">
-        <button class="btn btn-primary" type="submit" form="${id}" id="ev-submit-btn" class="w-full">
+        <button class="btn btn-primary" type="submit" form="${id}" id="ev-submit-btn" style="width:100%">
           ${isEdit ? 'Speichern' : 'Event erstellen'}
         </button>
-        <div class="flex-gap-2">
+        <div style="display:flex;gap:var(--space-2)">
           ${isEdit ? `<button type="button" class="btn btn-danger" id="ev-form-delete">Löschen</button>` : ''}
           <button class="btn btn-secondary flex-1" onclick="UI.modal.close()">Abbrechen</button>
         </div>
@@ -670,7 +672,7 @@ window.Page_events = (() => {
       <div style="width:100%;max-width:600px;background:var(--c-surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;
                   padding:var(--space-4);box-sizing:border-box;max-height:80vh;display:flex;flex-direction:column">
         <div style="display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)">
-          <svg class="ph-icon" aria-hidden="true" class="text-primary"><use href="/icons/phosphor.svg#note-pencil"></use></svg>
+          <svg class="ph-icon" aria-hidden="true" style="color:var(--c-primary)"><use href="/icons/phosphor.svg#note-pencil"></use></svg>
           <span style="font-weight:600;flex:1"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#note-pencil"></use></svg> Notiz — ${UI.escape(parentLabel)}</span>
           <button id="ev-note-close" style="background:none;border:none;cursor:pointer;color:var(--c-text-muted);padding:4px">
             <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#x"></use></svg>
diff --git a/backend/static/js/pages/expenses.js b/backend/static/js/pages/expenses.js
index 0a69315..c516c40 100644
--- a/backend/static/js/pages/expenses.js
+++ b/backend/static/js/pages/expenses.js
@@ -71,7 +71,7 @@ window.Page_expenses = (() => {
     if (dogs.length < 2) return '';
     const pills = [{ id: null, name: 'Alle' }, ...dogs].map(d => `
       <button class="exp-dog-pill${_selectedDogId === d.id ? ' active' : ''}" data-dog="${d.id ?? ''}">
-        ${d.id ? UI.icon('paw-print') : ''} ${UI.escape(d.name)}
+        ${d.id ? UI.icon('paw-print') : ''} ${_esc(d.name)}
       </button>`).join('');
     return `<div class="exp-dog-selector" id="exp-dog-selector">${pills}</div>`;
   }
@@ -87,7 +87,7 @@ window.Page_expenses = (() => {
       </div>
       ${_dogSelectorHtml()}
       <div id="exp-content"></div>
-      <button class="list-fab" id="exp-fab" title="Neue Ausgabe">
+      <button class="exp-fab" id="exp-fab" title="Neue Ausgabe">
         ${UI.icon('plus')}
       </button>
     `;
@@ -162,7 +162,7 @@ window.Page_expenses = (() => {
           <div class="exp-kachel-icon" style="background:${k.color}20;color:${k.color}">
             ${UI.icon(k.icon)}
           </div>
-          <div class="exp-kachel-betrag text-primary">${_fmt(jahr)}</div>
+          <div class="exp-kachel-betrag" style="color:var(--c-primary)">${_fmt(jahr)}</div>
           <div class="exp-kachel-label">${k.label}</div>
           ${monatLine}
           <div class="exp-kachel-add">${UI.icon('plus')} eintragen</div>
@@ -283,28 +283,28 @@ window.Page_expenses = (() => {
           const datum = new Date(e.datum + 'T00:00:00')
             .toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' });
           const dogBadge = e.dog_name
-            ? `<span>${UI.icon('paw-print')} ${UI.escape(e.dog_name)}</span>`
+            ? `<span class="exp-dog-badge">${UI.icon('paw-print')} ${_esc(e.dog_name)}</span>`
             : '';
           const notiz = e.notiz
-            ? `<div class="list-item-text">${UI.escape(e.notiz)}</div>`
+            ? `<span class="exp-entry-notiz">${_esc(e.notiz)}</span>`
             : '';
           return `
-            <div class="list-item-card list-item-card--clickable exp-entry" data-id="${e.id}">
-              <div class="list-item-meta-badge" style="--meta-color:${k.color}">
+            <div class="exp-entry" data-id="${e.id}">
+              <div class="exp-entry-icon-badge" style="--kat-color:${k.color}">
                 ${UI.icon(k.icon)}
               </div>
-              <div class="list-item-body">
-                <div class="list-item-title">${k.label}</div>
-                ${notiz}
-                <div class="list-item-meta-row">
-                  <span>${datum}</span>
-                  ${dogBadge ? `· ${dogBadge}` : ''}
+              <div class="exp-entry-body">
+                <div class="exp-entry-head">
+                  <span class="exp-entry-datum">${datum}</span>
+                  <span class="exp-entry-kat">${k.label}</span>
+                  ${dogBadge}
                 </div>
+                ${notiz}
               </div>
-              <div class="list-item-amount list-item-amount--negative">${_fmt(e.betrag)}</div>
-              <div class="list-item-actions">
-                <button class="list-item-action-btn list-item-action-btn--danger exp-entry-del"
-                        data-del="${e.id}" title="Löschen" aria-label="Eintrag löschen">
+              <div class="exp-entry-right">
+                <div class="exp-entry-betrag">${_fmt(e.betrag)}</div>
+                <button class="exp-entry-del" data-del="${e.id}" title="Löschen"
+                        aria-label="Eintrag löschen">
                   ${UI.icon('trash')}
                 </button>
               </div>
@@ -313,15 +313,15 @@ window.Page_expenses = (() => {
 
         return `
           <div class="exp-month-group">
-            <div class="list-group-header" style="display:flex;justify-content:space-between;align-items:baseline">
-              <span>${titel}</span>
-              <span style="text-transform:none;font-weight:700;color:var(--c-text)">${_fmt(summe)}</span>
+            <div class="exp-month-header">
+              <span class="exp-month-title">${titel}</span>
+              <span class="exp-month-summe">${_fmt(summe)}</span>
             </div>
             ${rows}
           </div>`;
       }).join('');
 
-    el.innerHTML = `<div class="list-shell">${html}</div><div style="height:80px"></div>`;
+    el.innerHTML = `<div class="exp-list">${html}</div><div style="height:80px"></div>`;
 
     // Klick auf Zeile → Bearbeiten (nur wenn nicht Löschen-Button)
     el.querySelectorAll('.exp-entry').forEach(row => {
@@ -372,26 +372,30 @@ window.Page_expenses = (() => {
             .toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })
         : '—';
       return `
-        <div class="list-item-card${r.aktiv ? '' : ' list-item-card--inactive'}" data-rid="${r.id}">
-          <div class="list-item-meta-badge" style="--meta-color:${k.color}">${UI.icon(k.icon)}</div>
-          <div class="list-item-body">
-            <div class="list-item-title">${k.label}</div>
-            ${r.notiz ? `<div class="list-item-text">${UI.escape(r.notiz)}</div>` : ''}
-            <div class="list-item-meta-row">
-              <span>${HAEUFIGKEIT_LABEL[r.haeufigkeit] || r.haeufigkeit}</span>
-              · <span>${UI.icon('calendar')} ${naechste}</span>
-              ${r.dog_name ? `· <span>${UI.icon('paw-print')} ${UI.escape(r.dog_name)}</span>` : ''}
-              ${!r.aktiv ? '· <span>Pausiert</span>' : ''}
+        <div class="exp-recurring-card${r.aktiv ? '' : ' exp-recurring-card--inaktiv'}" data-rid="${r.id}">
+          <div class="exp-entry-icon-badge" style="--kat-color:${k.color}">${UI.icon(k.icon)}</div>
+          <div class="exp-entry-body">
+            <div class="exp-entry-head">
+              <span class="exp-entry-kat">${k.label}</span>
+              <span class="exp-recurring-freq">${HAEUFIGKEIT_LABEL[r.haeufigkeit] || r.haeufigkeit}</span>
+              ${r.dog_name ? `<span class="exp-dog-badge">${UI.icon('paw-print')} ${_esc(r.dog_name)}</span>` : ''}
+            </div>
+            ${r.notiz ? `<div class="exp-entry-notiz">${_esc(r.notiz)}</div>` : ''}
+            <div class="exp-recurring-next">
+              ${UI.icon('calendar')} Nächste Buchung: <strong>${naechste}</strong>
+              ${!r.aktiv ? '<span class="exp-badge-inaktiv">Pausiert</span>' : ''}
             </div>
           </div>
-          <div class="list-item-amount list-item-amount--negative">${_fmt(r.betrag)}</div>
-          <div class="list-item-actions">
-            <button class="list-item-action-btn exp-recurring-toggle" data-rid="${r.id}" data-aktiv="${r.aktiv}"
-                    title="${r.aktiv ? 'Pausieren' : 'Aktivieren'}">
-              ${UI.icon(r.aktiv ? 'pause' : 'play')}
-            </button>
-            <button class="list-item-action-btn list-item-action-btn--danger exp-recurring-del" data-rid="${r.id}"
-                    title="Löschen">${UI.icon('trash')}</button>
+          <div class="exp-entry-right">
+            <div class="exp-entry-betrag">${_fmt(r.betrag)}</div>
+            <div style="display:flex;gap:var(--space-1);margin-top:var(--space-1)">
+              <button class="exp-icon-btn exp-recurring-toggle" data-rid="${r.id}" data-aktiv="${r.aktiv}"
+                      title="${r.aktiv ? 'Pausieren' : 'Aktivieren'}">
+                ${UI.icon(r.aktiv ? 'pause' : 'play')}
+              </button>
+              <button class="exp-icon-btn exp-icon-btn--danger exp-recurring-del" data-rid="${r.id}"
+                      title="Löschen">${UI.icon('trash')}</button>
+            </div>
           </div>
         </div>`;
     }).join('');
@@ -403,7 +407,7 @@ window.Page_expenses = (() => {
         </button>
       </div>
       ${recurring.length
-        ? `<div class="list-shell">${cards}</div>`
+        ? `<div class="exp-list">${cards}</div>`
         : UI.emptyState({ icon: UI.icon('arrows-clockwise'),
             title: 'Keine Daueraufträge',
             text: 'Erfasse regelmäßige Ausgaben wie Hundesteuer oder Versicherung.' })}
@@ -444,7 +448,7 @@ window.Page_expenses = (() => {
     ].map(k => `<option value="${k.id}" ${r?.kategorie === k.id ? 'selected' : ''}>${k.label}</option>`).join('');
 
     const dogOptions = (_appState.dogs || []).map(d =>
-      `<option value="${d.id}" ${r?.dog_id === d.id ? 'selected' : ''}>${UI.escape(d.name)}</option>`
+      `<option value="${d.id}" ${r?.dog_id === d.id ? 'selected' : ''}>${_esc(d.name)}</option>`
     ).join('');
 
     const body = `
@@ -454,8 +458,9 @@ window.Page_expenses = (() => {
           <select class="form-control" name="kategorie">${katOptions}</select>
         </div>
         <div class="form-group">
-          <label class="form-label">Betrag</label>
-          ${UI.moneyInput({ name: 'betrag', value: r?.betrag ?? '', required: true })}
+          <label class="form-label">Betrag (€)</label>
+          <input class="form-control" type="number" name="betrag" step="0.01" min="0.01"
+                 value="${r?.betrag || ''}" placeholder="0,00" required>
         </div>
         <div class="form-group">
           <label class="form-label">Häufigkeit</label>
@@ -472,15 +477,15 @@ window.Page_expenses = (() => {
         </div>
         ${dogOptions ? `
         <div class="form-group">
-          <label class="form-label">Hund <span class="text-muted">(optional)</span></label>
+          <label class="form-label">Hund <span style="color:var(--c-text-muted)">(optional)</span></label>
           <select class="form-control" name="dog_id">
             <option value="">Kein Hund</option>${dogOptions}
           </select>
         </div>` : ''}
         <div class="form-group">
-          <label class="form-label">Bezeichnung <span class="text-muted">(optional)</span></label>
+          <label class="form-label">Bezeichnung <span style="color:var(--c-text-muted)">(optional)</span></label>
           <input class="form-control" type="text" name="notiz"
-                 value="${UI.escape(r?.notiz || '')}" placeholder="z.B. Haftpflicht Allianz">
+                 value="${_esc(r?.notiz || '')}" placeholder="z.B. Haftpflicht Allianz">
         </div>
       </form>`;
 
@@ -496,7 +501,7 @@ window.Page_expenses = (() => {
       const fd  = UI.formData(e.target);
       const payload = {
         kategorie:   fd.kategorie,
-        betrag:      UI.parseMoney(fd.betrag),
+        betrag:      parseFloat(fd.betrag),
         haeufigkeit: fd.haeufigkeit,
         startdatum:  fd.startdatum,
         notiz:       fd.notiz || null,
@@ -683,13 +688,13 @@ window.Page_expenses = (() => {
 
     const defaultDogId = entry?.dog_id ?? _selectedDogId;
     const dogOptions = (_appState.dogs || []).map(d =>
-      `<option value="${d.id}"${defaultDogId === d.id ? ' selected' : ''}>${UI.escape(d.name)}</option>`
+      `<option value="${d.id}"${defaultDogId === d.id ? ' selected' : ''}>${_esc(d.name)}</option>`
     ).join('');
 
     // Kategorie-Kacheln statt Dropdown
     const katKacheln = KATEGORIEN.map(k => `
       <label class="exp-kat-tile${selKat === k.id ? ' exp-kat-tile--sel' : ''}" data-kat="${k.id}">
-        <input type="radio" name="kategorie" value="${k.id}" ${selKat === k.id ? 'checked' : ''} class="hidden">
+        <input type="radio" name="kategorie" value="${k.id}" ${selKat === k.id ? 'checked' : ''} style="display:none">
         <span class="exp-kat-tile-icon" style="color:${k.color}">${UI.icon(k.icon)}</span>
         <span class="exp-kat-tile-label">${k.label}</span>
       </label>`).join('');
@@ -702,10 +707,15 @@ window.Page_expenses = (() => {
           <div class="exp-kat-grid">${katKacheln}</div>
         </div>
 
-        <div class="grid-2">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
           <div class="form-group" style="margin-bottom:0">
             <label class="form-label">Betrag</label>
-            ${UI.moneyInput({ name: 'betrag', value: entry?.betrag ?? '', required: true })}
+            <div class="exp-betrag-wrap">
+              <span class="exp-betrag-prefix">€</span>
+              <input type="number" name="betrag" class="form-control exp-betrag-input"
+                     value="${entry?.betrag || ''}" min="0.01" step="0.01"
+                     placeholder="0,00" required>
+            </div>
           </div>
           <div class="form-group" style="margin-bottom:0">
             <label class="form-label">Datum</label>
@@ -725,7 +735,7 @@ window.Page_expenses = (() => {
         <div class="form-group">
           <label class="form-label">Notiz <span class="form-label-hint">(optional)</span></label>
           <input type="text" name="notiz" class="form-control"
-                 value="${UI.escape(entry?.notiz || '')}"
+                 value="${_esc(entry?.notiz || '')}"
                  placeholder="z.B. Hundesteuer 2026, Allianz Haftpflicht …">
         </div>
 
@@ -800,7 +810,7 @@ window.Page_expenses = (() => {
       const fd      = UI.formData(ev.target);
       const payload = {
         kategorie: fd.kategorie,
-        betrag:    UI.parseMoney(fd.betrag),
+        betrag:    parseFloat(fd.betrag),
         datum:     fd.datum,
         notiz:     fd.notiz || null,
         dog_id:    fd.dog_id ? parseInt(fd.dog_id) : null,
@@ -852,5 +862,14 @@ window.Page_expenses = (() => {
     return Math.round(val) + ' €';
   }
 
+  function _esc(s) {
+    if (!s) return '';
+    return String(s)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+  }
+
   return { init, refresh };
 })();
diff --git a/backend/static/js/pages/forum.js b/backend/static/js/pages/forum.js
index e2dfe19..a76fa04 100644
--- a/backend/static/js/pages/forum.js
+++ b/backend/static/js/pages/forum.js
@@ -39,7 +39,12 @@ window.Page_forum = (() => {
   // ----------------------------------------------------------
   // Helpers
   // ----------------------------------------------------------
-function _fmtDate(iso) {
+  function _esc(s) {
+    return String(s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;')
+                          .replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+  }
+
+  function _fmtDate(iso) {
     if (!iso) return '—';
     const d = new Date(iso);
     const now = new Date();
@@ -94,7 +99,7 @@ function _fmtDate(iso) {
           <h2 class="forum-header-title">Forum</h2>
           <div class="forum-header-actions">
             ${isMod ? `<button class="btn btn-ghost btn-sm" id="forum-mod-btn" title="Moderationsberichte">${UI.icon('warning')}</button>` : ''}
-            <button class="btn btn-ghost btn-sm" id="forum-rules-btn" title="Regeln & Netiquette" class="text-muted">${UI.icon('info')} Regeln</button>
+            <button class="btn btn-ghost btn-sm" id="forum-rules-btn" title="Regeln & Netiquette" style="color:var(--c-text-muted)">${UI.icon('info')} Regeln</button>
             <button class="btn btn-primary btn-sm" id="forum-new-btn">${UI.icon('plus')} Neues Thema</button>
           </div>
         </div>
@@ -103,7 +108,7 @@ function _fmtDate(iso) {
         <div class="forum-category-tabs by-tabs" id="forum-tabs">
           ${KATEGORIEN.map(k => `
             <button class="by-tab ${k.key === _aktivKat ? 'active' : ''}"
-                    data-kat="${k.key}"><span class="by-tab-text">${UI.escape(k.label)}</span></button>
+                    data-kat="${k.key}"><span class="by-tab-text">${_esc(k.label)}</span></button>
           `).join('')}
           <button class="by-tab ${_activeSection === 'map' ? 'active' : ''}"
                   data-section="map"><span class="by-tab-text">${UI.icon('users')} Mitgliederkarte</span></button>
@@ -212,7 +217,7 @@ function _fmtDate(iso) {
         .format(new Date(+year, +month - 1, 1));
       const top = data.top?.[0];
       const winnerLine = top
-        ? `🥇 ${UI.escape(top.name)}${top.rasse ? ` · ${UI.escape(top.rasse)}` : ''}`
+        ? `🥇 ${_esc(top.name)}${top.rasse ? ` · ${_esc(top.rasse)}` : ''}`
         : 'Noch keine Stimmen';
       const metaLine = top
         ? `${top.stimmen} Stimme${top.stimmen !== 1 ? 'n' : ''}`
@@ -222,7 +227,7 @@ function _fmtDate(iso) {
         <div class="forum-hdm-tile" id="forum-hdm-tile">
           <div class="forum-hdm-tile-trophy">🏆</div>
           <div class="forum-hdm-tile-body">
-            <div class="forum-hdm-tile-title">Hund des Monats · ${UI.escape(monthName)}</div>
+            <div class="forum-hdm-tile-title">Hund des Monats · ${_esc(monthName)}</div>
             <div class="forum-hdm-tile-winner">${winnerLine}</div>
             <div class="forum-hdm-tile-meta">${metaLine}</div>
           </div>
@@ -246,16 +251,16 @@ function _fmtDate(iso) {
       ? data.top.slice(0, 5).map((dog, i) => {
           const medal = ['🥇','🥈','🥉','4️⃣','5️⃣'][i];
           const av = dog.foto_url
-            ? `<img src="${UI.escape(dog.foto_url)}" alt="${UI.escape(dog.name)}" class="hdm-top-av-img">`
-            : `<span class="hdm-top-av-placeholder">${UI.escape(dog.name.charAt(0).toUpperCase())}</span>`;
-          const vorname = dog.besitzer_name ? UI.escape(dog.besitzer_name.split(' ')[0]) : '';
+            ? `<img src="${_esc(dog.foto_url)}" alt="${_esc(dog.name)}" class="hdm-top-av-img">`
+            : `<span class="hdm-top-av-placeholder">${_esc(dog.name.charAt(0).toUpperCase())}</span>`;
+          const vorname = dog.besitzer_name ? _esc(dog.besitzer_name.split(' ')[0]) : '';
           return `
             <div class="hdm-top-entry">
               <span class="hdm-top-medal">${medal}</span>
               <div class="hdm-top-av">${av}</div>
               <div class="hdm-top-info">
-                <div class="hdm-top-name">${UI.escape(dog.name)}</div>
-                ${dog.rasse ? `<div class="hdm-top-rasse">${UI.escape(dog.rasse)}</div>` : ''}
+                <div class="hdm-top-name">${_esc(dog.name)}</div>
+                ${dog.rasse ? `<div class="hdm-top-rasse">${_esc(dog.rasse)}</div>` : ''}
                 ${vorname ? `<div class="hdm-top-besitzer">von ${vorname}</div>` : ''}
               </div>
               <div class="hdm-top-stimmen">${dog.stimmen} ${UI.icon('star')}</div>
@@ -275,7 +280,7 @@ function _fmtDate(iso) {
            <div class="hdm-kandidaten-search">
              <input type="search" id="hdm-search" class="form-control"
                     placeholder="Name oder Rasse suchen …" autocomplete="off"
-                    class="text-sm">
+                    style="font-size:var(--text-sm)">
            </div>
            <div id="hdm-kandidaten-grid" class="hdm-vote-grid">
              ${UI.skeleton(3)}
@@ -286,7 +291,7 @@ function _fmtDate(iso) {
       <div class="hdm-header">
         <div class="hdm-trophy">🏆</div>
         <h2 class="hdm-title">Hund des Monats</h2>
-        <div class="hdm-monat">${UI.escape(monthName)}</div>
+        <div class="hdm-monat">${_esc(monthName)}</div>
       </div>
       ${voteHint}
       <div class="hdm-section">
@@ -315,16 +320,16 @@ function _fmtDate(iso) {
       grid.innerHTML = list.map(dog => {
         const isVoted = data.user_vote === dog.id;
         const av = dog.foto_url
-          ? `<img src="${UI.escape(dog.foto_url)}" alt="${UI.escape(dog.name)}" class="hdm-vote-av-img">`
-          : `<span class="hdm-vote-av-placeholder">${UI.escape(dog.name.charAt(0).toUpperCase())}</span>`;
-        const vorname = dog.besitzer_name ? UI.escape(dog.besitzer_name.split(' ')[0]) : '';
+          ? `<img src="${_esc(dog.foto_url)}" alt="${_esc(dog.name)}" class="hdm-vote-av-img">`
+          : `<span class="hdm-vote-av-placeholder">${_esc(dog.name.charAt(0).toUpperCase())}</span>`;
+        const vorname = dog.besitzer_name ? _esc(dog.besitzer_name.split(' ')[0]) : '';
         return `
           <div class="hdm-vote-card${isVoted ? ' hdm-vote-card--voted' : ''}">
             <div class="hdm-vote-av">${av}</div>
-            <div class="hdm-vote-name">${UI.escape(dog.name)}</div>
-            ${dog.rasse ? `<div class="hdm-vote-rasse">${UI.escape(dog.rasse)}</div>` : ''}
-            ${vorname ? `<div class="hdm-vote-besitzer text-xs-muted">von ${vorname}</div>` : ''}
-            ${dog.stimmen > 0 ? `<div class="text-xs-muted">${dog.stimmen} ${UI.icon('star')}</div>` : ''}
+            <div class="hdm-vote-name">${_esc(dog.name)}</div>
+            ${dog.rasse ? `<div class="hdm-vote-rasse">${_esc(dog.rasse)}</div>` : ''}
+            ${vorname ? `<div class="hdm-vote-besitzer" style="font-size:var(--text-xs);color:var(--c-text-muted)">von ${vorname}</div>` : ''}
+            ${dog.stimmen > 0 ? `<div style="font-size:var(--text-xs);color:var(--c-text-muted)">${dog.stimmen} ${UI.icon('star')}</div>` : ''}
             <button class="btn btn-sm ${isVoted ? 'btn-primary' : 'btn-secondary'} hdm-vote-btn"
                     data-dog-id="${dog.id}" ${isVoted ? 'disabled' : ''}>
               ${isVoted ? `${UI.icon('check-circle')} Gewählt` : 'Abstimmen'}
@@ -406,8 +411,8 @@ function _fmtDate(iso) {
       el.innerHTML = `
         <div style="text-align:center;padding:var(--space-10) var(--space-4)">
           <div style="font-size:3rem;margin-bottom:var(--space-3)">${UI.icon('chat-circle-dots')}</div>
-          <p class="text-secondary">Noch keine Beiträge in dieser Kategorie.</p>
-          <button class="btn btn-primary mt-4" id="forum-first-btn">
+          <p style="color:var(--c-text-secondary)">Noch keine Beiträge in dieser Kategorie.</p>
+          <button class="btn btn-primary" style="margin-top:var(--space-4)" id="forum-first-btn">
             Ersten Beitrag erstellen
           </button>
         </div>`;
@@ -438,31 +443,31 @@ function _fmtDate(iso) {
 
   function _threadCardHTML(t) {
     const preview = t.text_preview
-      ? UI.escape(t.text_preview.slice(0, 120)) + (t.text_preview.length >= 120 ? '…' : '')
+      ? _esc(t.text_preview.slice(0, 120)) + (t.text_preview.length >= 120 ? '…' : '')
       : '';
     const pinBadge = t.is_pinned ? `<span class="forum-pin-badge" title="Angepinnt">${UI.icon('push-pin')}</span>` : '';
     const lockBadge = t.is_locked ? `<span class="forum-lock-badge" title="Gesperrt">${UI.icon('lock')}</span>` : '';
     const fotoHtml = t.foto_preview
       ? /\.(mp4|mov|webm|m4v|avi)$/i.test(t.foto_preview)
         ? `<div class="forum-card-thumb forum-card-thumb--video" style="display:flex;align-items:center;justify-content:center;background:var(--c-surface-2)">${UI.icon('video-camera')}</div>`
-        : `<img class="forum-card-thumb" src="${UI.escape(t.foto_preview_url || t.foto_preview)}"
-             ${(t.foto_preview_url && t.foto_preview) ? `srcset="${UI.escape(t.foto_preview_url)} 800w" sizes="120px"` : ''}
+        : `<img class="forum-card-thumb" src="${_esc(t.foto_preview_url || t.foto_preview)}"
+             ${(t.foto_preview_url && t.foto_preview) ? `srcset="${_esc(t.foto_preview_url)} 800w" sizes="120px"` : ''}
              alt="" loading="lazy"
-             onerror="this.src='${UI.escape(t.foto_preview)}'">`
+             onerror="this.src='${_esc(t.foto_preview)}'">`
       : '';
 
     return `
       <div class="forum-thread-card" data-id="${t.id}">
         <div class="forum-card-top">
-          <span class="forum-category-badge forum-category-badge--${UI.escape(t.kategorie)}">${UI.escape(t.kategorie)}</span>
+          <span class="forum-category-badge forum-category-badge--${_esc(t.kategorie)}">${_esc(t.kategorie)}</span>
           ${pinBadge}${lockBadge}
         </div>
         <div class="forum-card-content">
           <div class="forum-card-main">
-            <div class="forum-card-title">${UI.escape(t.titel)}</div>
+            <div class="forum-card-title">${_esc(t.titel)}</div>
             ${preview ? `<div class="forum-card-preview">${preview}</div>` : ''}
             <div class="forum-card-meta">
-              <span>${UI.icon('user')} ${UI.escape(t.autor_name || 'Unbekannt')}</span>
+              <span>${UI.icon('user')} ${_esc(t.autor_name || 'Unbekannt')}</span>
               <span>${UI.icon('calendar-dots')} ${_fmtDate(t.created_at)}</span>
               <span>${UI.icon('chat-circle-dots')} ${t.antworten || 0}</span>
               <span class="${t.user_liked ? 'forum-liked' : ''}">${UI.icon('heart')} ${t.likes || 0}</span>
@@ -488,7 +493,7 @@ function _fmtDate(iso) {
         document.getElementById('forum-main').innerHTML = `
           <div style="text-align:center;padding:var(--space-8)">
             <div style="font-size:2rem;margin-bottom:var(--space-2)">${UI.icon('magnifying-glass')}</div>
-            <p class="text-secondary">Keine Ergebnisse für „${UI.escape(q)}"</p>
+            <p style="color:var(--c-text-secondary)">Keine Ergebnisse für „${_esc(q)}"</p>
           </div>`;
         return;
       }
@@ -528,19 +533,19 @@ function _fmtDate(iso) {
         <button class="btn btn-ghost btn-sm forum-mod-lock" title="${thread.is_locked ? 'Entsperren' : 'Sperren'}">
           ${UI.icon('lock')} ${thread.is_locked ? 'Entsperren' : 'Sperren'}
         </button>
-        <button class="btn btn-ghost btn-sm forum-mod-delete-thread text-danger">${UI.icon('trash')} Thread</button>
+        <button class="btn btn-ghost btn-sm forum-mod-delete-thread" style="color:var(--c-danger)">${UI.icon('trash')} Thread</button>
       </div>` : '';
 
     const _forumMediaHtml = (u) => {
       if (u.endsWith('.pdf'))
-        return `<a href="${UI.escape(u)}" target="_blank" rel="noopener" class="forum-pdf-card">
-                  ${UI.icon('file-text')} <span>${UI.escape(u.split('/').pop())}</span></a>`;
+        return `<a href="${_esc(u)}" target="_blank" rel="noopener" class="forum-pdf-card">
+                  ${UI.icon('file-text')} <span>${_esc(u.split('/').pop())}</span></a>`;
       if (/\.(mp4|mov|webm|m4v|avi)$/i.test(u)) {
         const poster = u.replace(/\.[^.]+$/, '_thumb.jpg');
-        return `<video src="${UI.escape(u)}" poster="${UI.escape(poster)}" controls playsinline
+        return `<video src="${_esc(u)}" poster="${_esc(poster)}" controls playsinline
                        style="max-width:100%;max-height:320px;border-radius:var(--radius-md);display:block"></video>`;
       }
-      return `<img src="${UI.escape(u)}" class="forum-foto-img" data-src="${UI.escape(u)}" alt="" loading="lazy">`;
+      return `<img src="${_esc(u)}" class="forum-foto-img" data-src="${_esc(u)}" alt="" loading="lazy">`;
     };
     const fotoGallery = (thread.foto_urls?.length)
       ? `<div class="forum-foto-grid">${thread.foto_urls.map(_forumMediaHtml).join('')}</div>`
@@ -560,7 +565,7 @@ function _fmtDate(iso) {
         <div class="forum-reply-actions">
           <label class="btn btn-ghost btn-sm forum-upload-label" title="Foto anhängen">
             ${UI.icon('camera')}
-            <input type="file" accept="image/*" id="forum-reply-file" class="hidden">
+            <input type="file" accept="image/*" id="forum-reply-file" style="display:none">
           </label>
           <div id="forum-reply-previews" class="forum-upload-previews"></div>
         </div>
@@ -573,20 +578,20 @@ function _fmtDate(iso) {
       <div class="forum-thread-detail">
         ${modToolbar}
         <div class="forum-thread-header-row">
-          <span class="forum-category-badge forum-category-badge--${UI.escape(thread.kategorie)}">${UI.escape(thread.kategorie)}</span>
+          <span class="forum-category-badge forum-category-badge--${_esc(thread.kategorie)}">${_esc(thread.kategorie)}</span>
           <span style="color:var(--c-text-muted);font-size:0.8rem">${_fmtDate(thread.created_at)}</span>
           ${thread.is_pinned ? `<span>${UI.icon('push-pin')}</span>` : ''}
           ${thread.is_locked ? `<span>${UI.icon('lock')}</span>` : ''}
         </div>
 
         <div class="forum-thread-body">
-          <p style="white-space:pre-wrap;word-break:break-word">${UI.escape(thread.text)}</p>
+          <p style="white-space:pre-wrap;word-break:break-word">${_esc(thread.text)}</p>
           ${fotoGallery}
         </div>
 
         <div class="forum-thread-author-row">
-          <div class="forum-avatar">${UI.escape(_initial(thread.autor_name))}</div>
-          <span style="font-size:0.85rem;color:var(--c-text-secondary)">${UI.escape(thread.autor_name || 'Unbekannt')}</span>
+          <div class="forum-avatar">${_esc(_initial(thread.autor_name))}</div>
+          <span style="font-size:0.85rem;color:var(--c-text-secondary)">${_esc(thread.autor_name || 'Unbekannt')}</span>
           ${thread.autor_founder_number ? `<span style="font-size:10px;font-weight:700;background:#7c3aed;color:#fff;padding:1px 5px;border-radius:4px">Gründer #${thread.autor_founder_number}</span>` : ''}
           <div style="margin-left:auto;display:flex;gap:var(--space-2);align-items:center">
             <button class="${likeClass}" id="thread-like-btn" data-count="${thread.likes || 0}">
@@ -618,7 +623,7 @@ function _fmtDate(iso) {
       </div>
     ` : `<button type="button" class="btn btn-primary w-full" id="ft-close">Schließen</button>`;
 
-    UI.modal.open({ title: `${UI.icon('chat-circle-dots')} ${UI.escape(thread.titel)}`, body, footer });
+    UI.modal.open({ title: `${UI.icon('chat-circle-dots')} ${_esc(thread.titel)}`, body, footer });
 
     // Close
     document.getElementById('ft-close')?.addEventListener('click', UI.modal.close);
@@ -773,7 +778,7 @@ function _fmtDate(iso) {
     const isOwn = uid && uid === p.user_id;
     const fotoHtml = (p.foto_urls?.length)
       ? `<div class="forum-foto-grid">${p.foto_urls.map(u =>
-          `<img src="${UI.escape(u)}" class="forum-foto-img" data-src="${UI.escape(u)}" alt="" loading="lazy">`
+          `<img src="${_esc(u)}" class="forum-foto-img" data-src="${_esc(u)}" alt="" loading="lazy">`
         ).join('')}</div>`
       : '';
 
@@ -783,13 +788,13 @@ function _fmtDate(iso) {
     return `
       <div class="forum-post" data-post-id="${p.id}" data-user-id="${p.user_id || ''}">
         <div class="forum-post-header">
-          <div class="forum-avatar forum-avatar--sm">${UI.escape(_initial(p.autor_name))}</div>
-          <span class="forum-post-author">${UI.escape(p.autor_name || 'Unbekannt')}</span>
+          <div class="forum-avatar forum-avatar--sm">${_esc(_initial(p.autor_name))}</div>
+          <span class="forum-post-author">${_esc(p.autor_name || 'Unbekannt')}</span>
           ${p.autor_founder_number ? `<span style="font-size:10px;font-weight:700;background:#7c3aed;color:#fff;padding:1px 5px;border-radius:4px">Gründer #${p.autor_founder_number}</span>` : ''}
           <span class="forum-post-date">${_fmtDate(p.created_at)}</span>
         </div>
         <div class="forum-post-body">
-          <div class="forum-post-text">${UI.escape(p.text)}</div>
+          <div class="forum-post-text">${_esc(p.text)}</div>
           ${fotoHtml}
         </div>
         <div class="forum-post-actions">
@@ -798,7 +803,7 @@ function _fmtDate(iso) {
           </button>
           ${(!isOwn && uid) ? `<button class="forum-icon-btn forum-post-report" data-post-id="${p.id}" title="Melden">${UI.icon('flag')}</button>` : ''}
           <div style="margin-left:auto;display:flex;gap:4px">
-            ${isOwn ? `<button class="forum-icon-btn forum-post-edit" data-post-id="${p.id}" data-text="${UI.escape(p.text || '')}" title="Bearbeiten">${UI.icon('pencil-simple')}</button>` : ''}
+            ${isOwn ? `<button class="forum-icon-btn forum-post-edit" data-post-id="${p.id}" data-text="${_esc(p.text || '')}" title="Bearbeiten">${UI.icon('pencil-simple')}</button>` : ''}
             ${canDelete ? `<button class="forum-icon-btn forum-icon-btn--danger forum-post-delete" data-post-id="${p.id}" title="Löschen">${UI.icon('trash')}</button>` : ''}
           </div>
         </div>
@@ -857,7 +862,7 @@ function _fmtDate(iso) {
         try {
           await API.forum.deletePost(postId);
           if (postEl) {
-            postEl.innerHTML = '<em class="text-muted">Beitrag wurde entfernt</em>';
+            postEl.innerHTML = '<em style="color:var(--c-text-muted)">Beitrag wurde entfernt</em>';
             postEl.className = 'forum-post forum-post--deleted';
           }
           const idx = _threads.findIndex(t => t.id === threadId);
@@ -986,7 +991,7 @@ function _fmtDate(iso) {
   // ----------------------------------------------------------
   function _showCreateForm() {
     const katOptions = KATEGORIEN.filter(k => k.key !== 'alle').map(k =>
-      `<option value="${k.key}" ${k.key === _aktivKat ? 'selected' : ''}>${UI.escape(k.label)}</option>`
+      `<option value="${k.key}" ${k.key === _aktivKat ? 'selected' : ''}>${_esc(k.label)}</option>`
     ).join('');
 
     const body = `
@@ -1006,16 +1011,16 @@ function _fmtDate(iso) {
                     placeholder="Beschreibe dein Thema ausführlich…" required></textarea>
         </div>
         <div class="form-group">
-          <label class="form-label">Standort <span class="text-secondary">(optional)</span></label>
+          <label class="form-label">Standort <span style="color:var(--c-text-secondary)">(optional)</span></label>
           <div id="forum-location-picker"></div>
         </div>
         <div class="form-group">
           <label class="form-label">Fotos / Dateien (max. 5)</label>
           <div class="forum-upload-area">
             <label class="btn btn-secondary btn-sm" for="forum-thread-files">${UI.icon('image')} Fotos / Video / PDF</label>
-            <input type="file" id="forum-thread-files" accept="image/*,video/*,application/pdf" multiple class="hidden">
+            <input type="file" id="forum-thread-files" accept="image/*,video/*,application/pdf" multiple style="display:none">
           </div>
-          <div id="forum-thread-previews" class="forum-upload-previews mt-2"></div>
+          <div id="forum-thread-previews" class="forum-upload-previews" style="margin-top:var(--space-2)"></div>
         </div>
       </form>
       <p style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:var(--space-3)">
@@ -1236,12 +1241,12 @@ function _fmtDate(iso) {
                    background:var(--c-primary);color:#fff;font-size:13px;font-weight:700;
                    display:flex;align-items:center;justify-content:center;
                    box-shadow:0 2px 5px rgba(0,0,0,0.35);
-                   border:2px solid rgba(255,255,255,0.8)">${UI.escape((m.vorname||'?')[0].toUpperCase())}</div>`,
+                   border:2px solid rgba(255,255,255,0.8)">${_esc((m.vorname||'?')[0].toUpperCase())}</div>`,
           iconSize: [32, 32], iconAnchor: [16, 16],
         });
         _clusterGroup.addLayer(
           L.marker([m.lat, m.lon], { icon })
-            .bindPopup(`<strong>${UI.escape(m.vorname || '?')}</strong>`)
+            .bindPopup(`<strong>${_esc(m.vorname || '?')}</strong>`)
         );
       });
       _map.addLayer(_clusterGroup);
@@ -1290,14 +1295,14 @@ function _fmtDate(iso) {
       ? `<div class="forum-mod-reports">
           ${reports.map(r => `
             <div class="forum-mod-report-item" data-id="${r.id}">
-              <div class="text-sm">
-                <strong>${UI.escape(r.target_type)} #${r.target_id}</strong>
-                — ${UI.escape(r.grund)}
+              <div style="font-size:var(--text-sm)">
+                <strong>${_esc(r.target_type)} #${r.target_id}</strong>
+                — ${_esc(r.grund)}
               </div>
-              <div class="text-xs-muted">
-                von ${UI.escape(r.melder_name || '?')} · ${_fmtDate(r.created_at)}
+              <div style="font-size:var(--text-xs);color:var(--c-text-muted)">
+                von ${_esc(r.melder_name || '?')} · ${_fmtDate(r.created_at)}
               </div>
-              <button class="btn btn-sm btn-secondary forum-resolve-btn" data-id="${r.id}" class="mt-2">
+              <button class="btn btn-sm btn-secondary forum-resolve-btn" data-id="${r.id}" style="margin-top:var(--space-2)">
                 ${UI.icon('check')} Erledigt
               </button>
             </div>`).join('')}
@@ -1329,7 +1334,7 @@ function _fmtDate(iso) {
       title: 'Antwort bearbeiten',
       body: `<form id="${id}">
         <div class="form-group">
-          <textarea class="form-control" name="text" rows="5" required>${UI.escape(currentText)}</textarea>
+          <textarea class="form-control" name="text" rows="5" required>${_esc(currentText)}</textarea>
         </div>
       </form>`,
       footer: `
@@ -1368,14 +1373,14 @@ function _fmtDate(iso) {
       body: `<form id="${id}">
         <div class="form-group">
           <label class="form-label">Titel</label>
-          <input class="form-control" name="titel" value="${UI.escape(thread.titel || '')}" required>
+          <input class="form-control" name="titel" value="${_esc(thread.titel || '')}" required>
         </div>
         <div class="form-group">
           <label class="form-label">Text</label>
-          <textarea class="form-control" name="text" rows="5">${UI.escape(thread.text || '')}</textarea>
+          <textarea class="form-control" name="text" rows="5">${_esc(thread.text || '')}</textarea>
         </div>
         <div class="form-group">
-          <label class="form-label">Standort <span class="text-secondary">(optional)</span></label>
+          <label class="form-label">Standort <span style="color:var(--c-text-secondary)">(optional)</span></label>
           <div id="forum-edit-location-picker"></div>
         </div>
       </form>`,
@@ -1421,7 +1426,7 @@ function _fmtDate(iso) {
     const lb = document.createElement('div');
     lb.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9999;display:flex;align-items:center;justify-content:center;cursor:zoom-out';
     lb.innerHTML = `<img src="${UI.escape(src)}" style="max-width:100%;max-height:100%;object-fit:contain;touch-action:pinch-zoom">
-      <button style="position:absolute;top:16px;right:16px;background:rgba(255,255,255,.2);border:none;border-radius:50%;width:44px;height:44px;color:#fff;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center">✕</button>`;
+      <button style="position:absolute;top:16px;right:16px;background:rgba(255,255,255,.2);border:none;border-radius:50%;width:40px;height:40px;color:#fff;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center">✕</button>`;
     lb.addEventListener('click', () => lb.remove());
     document.body.appendChild(lb);
   }
diff --git a/backend/static/js/pages/friends.js b/backend/static/js/pages/friends.js
index 9c68959..3f2e690 100644
--- a/backend/static/js/pages/friends.js
+++ b/backend/static/js/pages/friends.js
@@ -51,17 +51,17 @@ window.Page_friends = (() => {
             <div>
               <div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
                            color:var(--c-text)">Dein Freundes-Link</div>
-              <div class="text-xs-secondary">
+              <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">
                 Teile ihn — der andere tippt drauf und findet dich sofort.
               </div>
             </div>
           </div>
-          <div class="flex-gap-2">
+          <div style="display:flex;gap:var(--space-2)">
             <div style="flex:1;padding:var(--space-2) var(--space-3);
                         background:var(--c-surface-2);border-radius:var(--radius-md);
                         font-size:var(--text-xs);color:var(--c-text-secondary);
                         overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
-              banyaro.app/#friends?suche=${UI.escape(encodeURIComponent(myName))}
+              banyaro.app/#friends?suche=${_esc(encodeURIComponent(myName))}
             </div>
             <button class="btn btn-ghost btn-sm" id="fr-copy-btn" title="Link kopieren">
               <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#link"></use></svg>
@@ -82,7 +82,7 @@ window.Page_friends = (() => {
           </svg>
           <input id="fr-search" type="search" autocomplete="off"
                  placeholder="Namen eines Hundebesitzers suchen…"
-                 value="${UI.escape(prefill || '')}"
+                 value="${_esc(prefill || '')}"
                  style="width:100%;box-sizing:border-box;
                         padding:var(--space-3) var(--space-3) var(--space-3) 2.5rem;
                         border:1.5px solid var(--c-border);border-radius:var(--radius-lg);
@@ -278,19 +278,17 @@ window.Page_friends = (() => {
     const text    = item.text || '';
     const page    = _ACTIVITY_PAGE[item.type] || '';
     const dogLabel = item.dog_name
-      ? `<span class="fr-activity-dog">${UI.escape(item.dog_name)}</span>`
+      ? `<span class="fr-activity-dog">${_esc(item.dog_name)}</span>`
       : '';
 
     const avatar = item.dog_foto
-      ? `<img src="${UI.escape(item.dog_foto)}" alt="${UI.escape(item.dog_name || '')}"
-              loading="lazy" decoding="async" onerror="this.style.display='none'"
+      ? `<img src="${_esc(item.dog_foto)}" alt="${_esc(item.dog_name || '')}"
               class="fr-activity-avatar">`
       : item.avatar_url
-        ? `<img src="${UI.escape(item.avatar_url)}" alt="${UI.escape(item.user_name)}"
-                loading="lazy" decoding="async" onerror="this.style.display='none'"
+        ? `<img src="${_esc(item.avatar_url)}" alt="${_esc(item.user_name)}"
                 class="fr-activity-avatar">`
         : `<div class="fr-activity-avatar fr-activity-avatar--initial">
-             ${UI.escape((item.user_name || '?')[0].toUpperCase())}
+             ${_esc((item.user_name || '?')[0].toUpperCase())}
            </div>`;
 
     const tag = page ? `button type="button"` : `div`;
@@ -303,17 +301,17 @@ window.Page_friends = (() => {
           ${avatar}
           <div class="fr-activity-icon-badge">
             <svg class="ph-icon" style="width:10px;height:10px" aria-hidden="true">
-              <use href="/icons/phosphor.svg#${UI.escape(item.icon)}"></use>
+              <use href="/icons/phosphor.svg#${_esc(item.icon)}"></use>
             </svg>
           </div>
         </div>
         <div class="fr-activity-body">
           <div class="fr-activity-meta">
-            <span class="fr-activity-user">${UI.escape(item.user_name)}</span>
+            <span class="fr-activity-user">${_esc(item.user_name)}</span>
             ${dogLabel}
           </div>
-          ${text ? `<div class="fr-activity-text">${UI.escape(text)}</div>` : ''}
-          <div class="fr-activity-time">${UI.escape(ago)}</div>
+          ${text ? `<div class="fr-activity-text">${_esc(text)}</div>` : ''}
+          <div class="fr-activity-time">${_esc(ago)}</div>
         </div>
       </${page ? 'button' : 'div'}>
     `;
@@ -353,7 +351,7 @@ window.Page_friends = (() => {
               <div style="flex:1;min-width:120px">
                 <div style="font-weight:var(--weight-semibold);color:var(--c-text);
                              overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
-                  ${UI.escape(r.requester_name)}
+                  ${_esc(r.requester_name)}
                 </div>
                 ${_dogPills(r.dogs, 2)}
               </div>
@@ -392,12 +390,12 @@ window.Page_friends = (() => {
                           display:flex;align-items:center;justify-content:center;
                           font-weight:var(--weight-bold);color:var(--c-text-secondary);
                           font-size:var(--text-sm);flex-shrink:0">
-                ${UI.escape((r.addressee_name || '?')[0].toUpperCase())}
+                ${_esc((r.addressee_name || '?')[0].toUpperCase())}
               </div>
-              <div class="flex-1">
+              <div style="flex:1">
                 <div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
-                             color:var(--c-text)">${UI.escape(r.addressee_name)}</div>
-                <div class="text-xs-muted">Anfrage ausstehend</div>
+                             color:var(--c-text)">${_esc(r.addressee_name)}</div>
+                <div style="font-size:var(--text-xs);color:var(--c-text-muted)">Anfrage ausstehend</div>
               </div>
               <button class="btn btn-ghost btn-sm"
                       onclick="Page_friends._cancel(${r.id})" title="Zurückziehen">
@@ -473,20 +471,20 @@ window.Page_friends = (() => {
       <div class="card fr-card" style="padding:var(--space-4);margin-bottom:var(--space-3);cursor:pointer;
                                         transition:box-shadow 0.15s"
            data-friend-id="${f.friend_id}"
-           data-friend-name="${UI.escape(f.friend_name)}"
-           data-dogs="${UI.escape(JSON.stringify(dogs))}"
-           data-profile="${UI.escape(JSON.stringify(profile))}">
+           data-friend-name="${_esc(f.friend_name)}"
+           data-dogs="${_esc(JSON.stringify(dogs))}"
+           data-profile="${_esc(JSON.stringify(profile))}">
         <div style="display:flex;align-items:center;gap:var(--space-3)">
 
           <!-- Avatar (User-Avatar, erstes Hunde-Foto oder Initiale) -->
           ${_userAvatar(f.friend_name, dogs[0], f.avatar_url)}
 
           <!-- Name + Infos + Hunde -->
-          <div class="flex-1-min">
+          <div style="flex:1;min-width:0">
             <div style="display:flex;align-items:center;flex-wrap:wrap;gap:2px;
                          margin-bottom:var(--space-1)">
               <span style="font-weight:var(--weight-semibold);color:var(--c-text)">
-                ${UI.escape(f.friend_name)}
+                ${_esc(f.friend_name)}
               </span>
               ${_erfahrungSpan(f.erfahrung)}
             </div>
@@ -497,7 +495,7 @@ window.Page_friends = (() => {
                 ? `<div style="display:flex;flex-wrap:wrap;gap:var(--space-1);align-items:center">
                      ${_dogPills(dogs, 3)}
                    </div>`
-                : `<div class="text-xs-muted">Noch kein Hund eingetragen</div>`
+                : `<div style="font-size:var(--text-xs);color:var(--c-text-muted)">Noch kein Hund eingetragen</div>`
               }
             </div>
           </div>
@@ -506,7 +504,7 @@ window.Page_friends = (() => {
           <div style="display:flex;gap:var(--space-1);flex-shrink:0">
             <button class="btn btn-ghost btn-sm fr-note-btn"
                     data-fr-note-id="${f.friend_id}"
-                    data-fr-note-name="${UI.escape(f.friend_name)}"
+                    data-fr-note-name="${_esc(f.friend_name)}"
                     title="Notiz"
                     onclick="event.stopPropagation()">
               <svg class="ph-icon"><use href="/icons/phosphor.svg#note-pencil"></use></svg>
@@ -538,14 +536,13 @@ window.Page_friends = (() => {
       <div style="display:flex;gap:var(--space-2);margin-top:var(--space-3);
                   padding-top:var(--space-3);border-top:1px solid var(--c-border)">
         ${withPhotos.slice(0, 4).map(d => `
-          <div class="text-center">
-            <img src="${UI.escape(d.foto_url)}" alt="${UI.escape(d.name)}"
-                 loading="lazy" decoding="async" onerror="this.style.display='none'"
+          <div style="text-align:center">
+            <img src="${_esc(d.foto_url)}" alt="${_esc(d.name)}"
                  style="width:44px;height:44px;border-radius:50%;object-fit:cover;
                         border:2px solid var(--c-surface)">
             <div style="font-size:10px;color:var(--c-text-muted);margin-top:2px;
                          max-width:44px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
-              ${UI.escape(d.name)}
+              ${_esc(d.name)}
             </div>
           </div>
         `).join('')}
@@ -561,10 +558,9 @@ window.Page_friends = (() => {
       ? `<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
                      gap:var(--space-3);margin-top:var(--space-4)">
            ${dogs.map(d => `
-             <div class="text-center">
+             <div style="text-align:center">
                ${d.foto_url
-                 ? `<img src="${UI.escape(d.foto_url)}" alt="${UI.escape(d.name)}"
-                         loading="lazy" decoding="async" onerror="this.style.display='none'"
+                 ? `<img src="${_esc(d.foto_url)}" alt="${_esc(d.name)}"
                          style="width:72px;height:72px;border-radius:50%;object-fit:cover;
                                 border:2px solid var(--c-primary);margin-bottom:var(--space-2)">`
                  : `<div style="width:72px;height:72px;border-radius:50%;
@@ -573,9 +569,9 @@ window.Page_friends = (() => {
                                 font-size:1.75rem;margin:0 auto var(--space-2)">🐕</div>`
                }
                <div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
-                            color:var(--c-text)">${UI.escape(d.name)}</div>
+                            color:var(--c-text)">${_esc(d.name)}</div>
                ${d.rasse
-                 ? `<div class="text-xs-secondary">${UI.escape(d.rasse)}</div>`
+                 ? `<div style="font-size:var(--text-xs);color:var(--c-text-secondary)">${_esc(d.rasse)}</div>`
                  : ''}
              </div>
            `).join('')}
@@ -589,24 +585,24 @@ window.Page_friends = (() => {
       if (profile.wohnort) {
         parts.push(`<div style="display:flex;align-items:center;gap:var(--space-2);
                                 font-size:var(--text-sm);color:var(--c-text-secondary)">
-          📍 ${UI.escape(profile.wohnort)}
+          📍 ${_esc(profile.wohnort)}
         </div>`);
       }
       if (profile.erfahrung && _erfahrungBadge[profile.erfahrung]) {
-        parts.push(`<div class="text-sm-secondary">
+        parts.push(`<div style="font-size:var(--text-sm);color:var(--c-text-secondary)">
           ${_erfahrungBadge[profile.erfahrung]}
         </div>`);
       }
       if (profile.bio && profile.profil_sichtbarkeit !== 'private') {
         parts.push(`<div style="font-size:var(--text-sm);color:var(--c-text);
                                 line-height:1.5;padding-top:var(--space-2)">
-          ${UI.escape(profile.bio)}
+          ${_esc(profile.bio)}
         </div>`);
       }
       if (profile.social_link) {
         parts.push(`<div style="font-size:var(--text-xs);word-break:break-all">
-          <a href="${UI.escape(profile.social_link)}" target="_blank" rel="noopener noreferrer"
-             class="text-primary">${UI.escape(profile.social_link)}</a>
+          <a href="${_esc(profile.social_link)}" target="_blank" rel="noopener noreferrer"
+             style="color:var(--c-primary)">${_esc(profile.social_link)}</a>
         </div>`);
       }
       if (!parts.length) return '';
@@ -627,7 +623,7 @@ window.Page_friends = (() => {
       </div>` : '';
 
     UI.modal.open({
-      title: UI.escape(friendName),
+      title: _esc(friendName),
       body: `
         <div>
           ${badgesHTML}
@@ -642,7 +638,7 @@ window.Page_friends = (() => {
           Nachricht schreiben
         </button>
         <button class="btn btn-ghost" id="modal-remove-btn" form=""
-                class="text-danger">
+                style="color:var(--c-danger)">
           <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#user-minus"></use></svg>
           Entfernen
         </button>
@@ -683,11 +679,11 @@ window.Page_friends = (() => {
                         padding:var(--space-3) var(--space-4);
                         ${i < results.length - 1 ? 'border-bottom:1px solid var(--c-border)' : ''}">
               ${_userAvatar(u.name, null, u.avatar_url)}
-              <div class="flex-1-min">
+              <div style="flex:1;min-width:0">
                 <div style="display:flex;align-items:center;flex-wrap:wrap;gap:4px;
                              margin-bottom:2px">
                   <span style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
-                               color:var(--c-text)">${UI.escape(u.name)}</span>
+                               color:var(--c-text)">${_esc(u.name)}</span>
                   ${u.is_founder ? `<span style="font-size:10px;font-weight:700;background:#7c3aed;color:#fff;padding:1px 5px;border-radius:4px">${u.founder_number ? `Gründer #${u.founder_number}` : 'Gründer'}</span>` : ''}
                   ${u.is_partner ? `<span style="font-size:10px;font-weight:700;background:#0ea5e9;color:#fff;padding:1px 5px;border-radius:4px">Partner</span>` : ''}
                   ${_erfahrungSpan(u.erfahrung)}
@@ -697,12 +693,12 @@ window.Page_friends = (() => {
                 ${u.dogs?.length
                   ? `<div style="font-size:var(--text-xs);color:var(--c-text-secondary);
                                  margin-top:2px">
-                       ${u.dogs.map(d => UI.escape(d.name) + (d.rasse ? ` · ${UI.escape(d.rasse)}` : '')).join(' &nbsp;|&nbsp; ')}
+                       ${u.dogs.map(d => _esc(d.name) + (d.rasse ? ` · ${_esc(d.rasse)}` : '')).join(' &nbsp;|&nbsp; ')}
                      </div>`
                   : ''}
               </div>
               <button class="btn btn-primary btn-sm fr-add-btn" title="Anfrage senden"
-                      data-user-id="${u.id}" data-user-name="${UI.escape(u.name)}">
+                      data-user-id="${u.id}" data-user-name="${_esc(u.name)}">
                 <svg class="ph-icon"><use href="/icons/phosphor.svg#user-plus"></use></svg>
               </button>
             </div>
@@ -786,14 +782,12 @@ window.Page_friends = (() => {
   // ----------------------------------------------------------
   function _userAvatar(name, firstDog, avatarUrl) {
     if (avatarUrl) {
-      return `<img src="${UI.escape(avatarUrl)}" alt="${UI.escape(name)}"
-                   loading="lazy" decoding="async" onerror="this.style.display='none'"
+      return `<img src="${_esc(avatarUrl)}" alt="${_esc(name)}"
                    style="width:44px;height:44px;border-radius:50%;object-fit:cover;
                           border:2px solid var(--c-primary);flex-shrink:0">`;
     }
     if (firstDog?.foto_url) {
-      return `<img src="${UI.escape(firstDog.foto_url)}" alt="${UI.escape(firstDog.name)}"
-                   loading="lazy" decoding="async" onerror="this.style.display='none'"
+      return `<img src="${_esc(firstDog.foto_url)}" alt="${_esc(firstDog.name)}"
                    style="width:44px;height:44px;border-radius:50%;object-fit:cover;
                           border:2px solid var(--c-primary);flex-shrink:0">`;
     }
@@ -803,7 +797,7 @@ window.Page_friends = (() => {
                   border:2px solid var(--c-primary);
                   display:flex;align-items:center;justify-content:center;
                   font-weight:var(--weight-bold);color:var(--c-primary)">
-        ${UI.escape((name || '?')[0].toUpperCase())}
+        ${_esc((name || '?')[0].toUpperCase())}
       </div>`;
   }
 
@@ -823,7 +817,7 @@ window.Page_friends = (() => {
 
   function _wohnortLine(wohnort) {
     if (!wohnort) return '';
-    return `<span class="text-xs-muted">📍 ${UI.escape(wohnort)}</span>`;
+    return `<span style="font-size:var(--text-xs);color:var(--c-text-muted)">📍 ${_esc(wohnort)}</span>`;
   }
 
   function _bioLine(bio, sichtbarkeit) {
@@ -832,7 +826,7 @@ window.Page_friends = (() => {
     return `<div style="font-size:var(--text-xs);color:var(--c-text-secondary);
                         margin-top:var(--space-1);line-height:1.4;
                         overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;
-                        -webkit-box-orient:vertical">${UI.escape(text)}</div>`;
+                        -webkit-box-orient:vertical">${_esc(text)}</div>`;
   }
 
   function _dogPills(dogs, max) {
@@ -844,7 +838,7 @@ window.Page_friends = (() => {
         ${visible.map(d => `
           <span style="font-size:10px;padding:1px 6px;border-radius:var(--radius-full);
                        background:var(--c-surface-2);color:var(--c-text-secondary)">
-            🐕 ${UI.escape(d.name)}${d.rasse ? ` · ${UI.escape(d.rasse)}` : ''}
+            🐕 ${_esc(d.name)}${d.rasse ? ` · ${_esc(d.rasse)}` : ''}
           </span>
         `).join('')}
         ${rest > 0 ? `<span style="font-size:10px;color:var(--c-text-muted)">+${rest}</span>` : ''}
@@ -852,6 +846,11 @@ window.Page_friends = (() => {
     `;
   }
 
+  function _esc(s) {
+    if (!s) return '';
+    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+  }
+
   function _emptyState(icon, title, text, cta = '') {
     return `<div class="empty-state">
       <svg class="ph-icon empty-state-icon" aria-hidden="true">
@@ -881,7 +880,7 @@ window.Page_friends = (() => {
                     display:flex;align-items:center;justify-content:space-between;flex-shrink:0">
           <div>
             <div style="font-weight:var(--weight-semibold);font-size:var(--text-base)"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#note-pencil"></use></svg> Notiz</div>
-            <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:2px">${UI.escape(parentLabel)}</div>
+            <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:2px">${_esc(parentLabel)}</div>
           </div>
           <button id="by-note-close" style="background:none;border:none;cursor:pointer;font-size:1.4rem;color:var(--c-text-muted);padding:4px 8px" aria-label="Schließen">×</button>
         </div>
diff --git a/backend/static/js/pages/gruender.js b/backend/static/js/pages/gruender.js
index b528c59..100891e 100644
--- a/backend/static/js/pages/gruender.js
+++ b/backend/static/js/pages/gruender.js
@@ -82,7 +82,7 @@ window.Page_gruender = (() => {
         <p style="font-size:var(--text-xs);color:var(--c-text-muted);margin:0 0 var(--space-4)">
           Unsere Partner treten gegeneinander an — wer bringt die meisten Gründer?
         </p>
-        <div class="flex-col-gap-2">
+        <div style="display:flex;flex-direction:column;gap:var(--space-2)">
           ${d.partners.map((p, i) => {
             const medal = i === 0 ? '🥇' : i === 1 ? '🥈' : i === 2 ? '🥉' : `#${i+1}`;
             const barPct = d.partners[0].uses > 0 ? Math.round((p.uses / d.partners[0].uses) * 100) : 0;
@@ -91,8 +91,8 @@ window.Page_gruender = (() => {
                           padding:var(--space-3);border-radius:var(--radius-md);
                           background:${i === 0 ? 'linear-gradient(135deg,#fef9c3,#fef3c7)' : 'var(--c-surface-2)'}">
                 <div style="font-size:22px;min-width:32px;text-align:center">${medal}</div>
-                <div class="flex-1-min">
-                  <div style="font-weight:700;font-size:var(--text-sm)">${UI.escape(p.label)}</div>
+                <div style="flex:1;min-width:0">
+                  <div style="font-weight:700;font-size:var(--text-sm)">${_esc(p.label)}</div>
                   <div style="background:var(--c-surface-3,rgba(0,0,0,.08));border-radius:var(--radius-full);
                                height:6px;margin-top:var(--space-1);overflow:hidden">
                     <div style="background:#7c3aed;width:${barPct}%;height:100%;
@@ -120,7 +120,7 @@ window.Page_gruender = (() => {
                          background:var(--c-surface-2);display:flex;align-items:center;gap:var(--space-2)">
               <span style="font-size:var(--text-xs);font-weight:800;color:#7c3aed;min-width:28px">#${f.founder_number}</span>
               <span style="font-size:var(--text-sm);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
-                ${UI.escape(f.name)}
+                ${_esc(f.name)}
               </span>
             </div>
           `).join('')}
@@ -131,19 +131,23 @@ window.Page_gruender = (() => {
               <span style="font-size:var(--text-xs);font-weight:800;color:var(--c-text-muted);min-width:28px">
                 #${d.total + i + 1}
               </span>
-              <span class="text-sm-muted">frei</span>
+              <span style="font-size:var(--text-sm);color:var(--c-text-muted)">frei</span>
             </div>
           `).join('')}
         </div>
       </div>` : `
       <div class="by-card" style="padding:var(--space-6);text-align:center">
-        <p class="text-sm-muted">
+        <p style="color:var(--c-text-muted);font-size:var(--text-sm)">
           Noch keine Gründer — sei der Erste!
         </p>
       </div>`}
     `;
   }
 
+  function _esc(s) {
+    return String(s || '').replace(/[&<>"']/g, c =>
+      ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+  }
 
   return { init, refresh, onDogChange };
 
diff --git a/backend/static/js/pages/health.js b/backend/static/js/pages/health.js
index 78f2430..61eb95c 100644
--- a/backend/static/js/pages/health.js
+++ b/backend/static/js/pages/health.js
@@ -92,7 +92,7 @@ window.Page_health = (() => {
         <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#wave-sine"></use></svg>
         <span class="health-transponder-label">Transponder:</span>
         <span class="health-transponder-nr" id="health-transponder-nr">
-          ${dog?.chip_nr ? `<strong>${UI.escape(dog.chip_nr)}</strong>` : '<em class="text-muted">nicht eingetragen</em>'}
+          ${dog?.chip_nr ? `<strong>${_esc(dog.chip_nr)}</strong>` : '<em style="color:var(--c-text-muted)">nicht eingetragen</em>'}
         </span>
         <button class="btn btn-link btn-sm health-transponder-edit" id="health-transponder-edit"
                 style="padding:0;font-size:var(--text-xs);color:var(--c-text-muted)">
@@ -194,12 +194,12 @@ window.Page_health = (() => {
                         background:var(--c-surface);border-radius:var(--radius-md);
                         border-left:3px solid ${ampel.color === 'red' ? '#ef4444' : ampel.color === 'yellow' ? '#f59e0b' : '#22c55e'}">
               <span style="font-size:1.2rem">${ICONS[e._typ] || '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#clipboard-text"></use></svg>'}</span>
-              <div class="flex-1-min">
+              <div style="flex:1;min-width:0">
                 <div style="font-size:var(--text-sm);font-weight:var(--weight-medium);
                             white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
-                  ${UI.escape(e.bezeichnung)}
+                  ${_esc(e.bezeichnung)}
                 </div>
-                <div class="text-xs-muted">
+                <div style="font-size:var(--text-xs);color:var(--c-text-muted)">
                   ${ageLabel} · ${dateStr}
                 </div>
               </div>
@@ -376,22 +376,22 @@ window.Page_health = (() => {
       const praxis = _praxen.find(p => p.id === e.tierarzt_id);
       const vetName = praxis?.name || e.tierarzt_name || '';
       return `
-        <div class="list-item-card list-item-card--clickable health-card" data-id="${e.id}" data-action="open-entry">
+        <div class="health-card" data-id="${e.id}" data-action="open-entry">
           <div class="health-card-ampel ampel-${ampel.color}" title="${ampel.label}"></div>
-          <div class="list-item-body">
-            <div class="list-item-title">${UI.escape(e.bezeichnung)}</div>
-            <div class="list-item-meta-row">
+          <div class="health-card-body">
+            <div class="health-card-title">${_esc(e.bezeichnung)}</div>
+            <div class="health-card-meta">
               ${UI.time.format(e.datum + 'T00:00:00')}
-              ${e.charge_nr ? ` · Ch.-Nr: ${UI.escape(e.charge_nr)}` : ''}
+              ${e.charge_nr ? ` · Ch.-Nr: ${_esc(e.charge_nr)}` : ''}
             </div>
-            ${vetName ? `<div style="font-size:var(--text-sm);color:var(--c-text-secondary);margin-top:var(--space-1)"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#first-aid"></use></svg> ${UI.escape(vetName)}</div>` : ''}
+            ${vetName ? `<div style="font-size:var(--text-sm);color:var(--c-text-secondary);margin-top:var(--space-1)"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#first-aid"></use></svg> ${_esc(vetName)}</div>` : ''}
             ${e.naechstes ? `<div class="health-card-next ampel-text-${ampel.color}">
               Nächste Impfung: ${UI.time.format(e.naechstes + 'T00:00:00')} ${ampel.icon}
             </div>` : ''}
-            ${e.notiz ? `<div class="list-item-text">${UI.escape(e.notiz)}</div>` : ''}
+            ${e.notiz ? `<div class="health-card-note">${_esc(e.notiz)}</div>` : ''}
             <button class="btn btn-ghost btn-xs" style="margin-top:var(--space-2);font-size:var(--text-xs);color:var(--c-text-muted);padding:2px 6px"
                     data-action="open-note" data-entry-id="${e.id}"
-                    data-label="${UI.escape(e.bezeichnung)}"
+                    data-label="${_esc(e.bezeichnung)}"
                     onclick="event.stopPropagation()"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#note-pencil"></use></svg> Notiz</button>
           </div>
         </div>
@@ -424,23 +424,23 @@ window.Page_health = (() => {
       const praxisName = praxis?.name || e.tierarzt_name || '';
       const praxisOrt  = praxis ? [praxis.plz, praxis.ort].filter(Boolean).join(' ') : '';
       return `
-        <div class="list-item-card list-item-card--clickable health-card" data-id="${e.id}" data-action="open-entry">
-          <div class="list-item-body">
-            <div class="list-item-title">${UI.escape(e.bezeichnung)}</div>
-            <div class="list-item-meta-row">
+        <div class="health-card" data-id="${e.id}" data-action="open-entry">
+          <div class="health-card-body">
+            <div class="health-card-title">${_esc(e.bezeichnung)}</div>
+            <div class="health-card-meta">
               ${UI.time.format(e.datum + 'T00:00:00')}
               ${e.kosten != null ? ` · ${Number(e.kosten).toFixed(2)} €` : ''}
             </div>
             ${praxisName ? `
               <div style="display:flex;align-items:center;gap:var(--space-1);
                           margin-top:var(--space-1);font-size:var(--text-sm);color:var(--c-text-secondary)">
-                <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#first-aid"></use></svg> ${UI.escape(praxisName)}${praxisOrt ? ` · ${UI.escape(praxisOrt)}` : ''}
+                <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#first-aid"></use></svg> ${_esc(praxisName)}${praxisOrt ? ` · ${_esc(praxisOrt)}` : ''}
               </div>` : ''}
-            ${e.diagnose ? `<div class="list-item-text"><b>Diagnose:</b> ${UI.escape(e.diagnose)}</div>` : ''}
-            ${e.notiz    ? `<div class="list-item-text">${UI.escape(e.notiz)}</div>` : ''}
+            ${e.diagnose ? `<div class="health-card-note"><b>Diagnose:</b> ${_esc(e.diagnose)}</div>` : ''}
+            ${e.notiz    ? `<div class="health-card-note">${_esc(e.notiz)}</div>` : ''}
             <button class="btn btn-ghost btn-xs" style="margin-top:var(--space-2);font-size:var(--text-xs);color:var(--c-text-muted);padding:2px 6px"
                     data-action="open-note" data-entry-id="${e.id}"
-                    data-label="${UI.escape(e.bezeichnung)}"
+                    data-label="${_esc(e.bezeichnung)}"
                     onclick="event.stopPropagation()"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#note-pencil"></use></svg> Notiz</button>
           </div>
         </div>
@@ -479,22 +479,21 @@ window.Page_health = (() => {
     const chart = _renderWeightChart(chartEntries);
 
     const items = sorted.slice().reverse().map(e => `
-      <div class="list-item-card list-item-card--clickable health-card" data-id="${e.id}" data-action="open-entry">
-        <div class="list-item-body">
-          <div style="display:flex;justify-content:space-between;align-items:center;width:100%">
-            <span class="list-item-meta-row" style="margin:0">
-              ${UI.time.format(e.datum + 'T00:00:00')}
-            </span>
-            <span class="list-item-amount">
-              ${e.wert} <span class="text-sm-secondary">${e.einheit || 'kg'}</span>
-            </span>
-          </div>
-          ${e.notiz ? `<div class="list-item-text" style="padding-top:var(--space-1)">${UI.escape(e.notiz)}</div>` : ''}
-          <button class="btn btn-ghost btn-xs" style="margin-top:var(--space-1);font-size:var(--text-xs);color:var(--c-text-muted);padding:2px 6px"
-                  data-action="open-note" data-entry-id="${e.id}"
-                  data-label="Gewicht ${UI.escape(e.datum)}"
-                  onclick="event.stopPropagation()"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#note-pencil"></use></svg> Notiz</button>
+      <div class="health-card" data-id="${e.id}" data-action="open-entry"
+           style="padding:var(--space-3) var(--space-4)">
+        <div style="display:flex;justify-content:space-between;align-items:center;width:100%">
+          <span style="font-size:var(--text-sm);color:var(--c-text-secondary)">
+            ${UI.time.format(e.datum + 'T00:00:00')}
+          </span>
+          <span style="font-weight:var(--weight-bold);font-size:var(--text-lg)">
+            ${e.wert} <span style="font-size:var(--text-sm);color:var(--c-text-secondary)">${e.einheit || 'kg'}</span>
+          </span>
         </div>
+        ${e.notiz ? `<div class="health-card-note" style="padding-top:var(--space-1)">${_esc(e.notiz)}</div>` : ''}
+        <button class="btn btn-ghost btn-xs" style="margin-top:var(--space-1);font-size:var(--text-xs);color:var(--c-text-muted);padding:2px 6px"
+                data-action="open-note" data-entry-id="${e.id}"
+                data-label="Gewicht ${_esc(e.datum)}"
+                onclick="event.stopPropagation()"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#note-pencil"></use></svg> Notiz</button>
       </div>
     `).join('');
 
@@ -513,7 +512,7 @@ window.Page_health = (() => {
         </div>
         ${chart}
       </div>` : ''}
-      <div class="health-list mt-2">${items}</div>
+      <div class="health-list" style="margin-top:var(--space-2)">${items}</div>
       <div style="text-align:center;padding:var(--space-4)">${addBtn}</div>
     `;
   }
@@ -694,7 +693,7 @@ window.Page_health = (() => {
           <span style="font-size:1.5rem">${UI.icon('gender-female')}</span>
           <div>
             <div style="font-size:var(--text-sm);font-weight:var(--weight-semibold)">Nächste Läufigkeit erwartet</div>
-            <div class="text-sm-secondary">${label}
+            <div style="font-size:var(--text-sm);color:var(--c-text-secondary)">${label}
               ${avgInterval ? ` · Ø ${avgInterval} Tage Abstand` : ''}
             </div>
           </div>
@@ -715,22 +714,22 @@ window.Page_health = (() => {
         ? Math.round((new Date(e.datum) - new Date(prev.datum)) / 86400000)
         : null;
       return `
-        <div class="list-item-card list-item-card--clickable health-card" data-id="${e.id}" data-action="open-entry">
+        <div class="health-card" data-id="${e.id}" data-action="open-entry">
           <div style="width:36px;height:36px;border-radius:50%;background:var(--c-primary);
                       display:flex;align-items:center;justify-content:center;
                       flex-shrink:0;color:var(--c-text-inverse)">
             ${UI.icon('gender-female')}
           </div>
-          <div class="list-item-body">
-            <div class="list-item-title">Läufigkeit · ${UI.time.format(e.datum + 'T00:00:00')}</div>
-            <div class="list-item-meta-row">
+          <div class="health-card-body">
+            <div class="health-card-title">Läufigkeit · ${UI.time.format(e.datum + 'T00:00:00')}</div>
+            <div class="health-card-meta">
               ${e.wert ? `Dauer: ${e.wert} Tage` : 'Dauer nicht angegeben'}
               ${interval ? ` · Abstand zur Vorherigen: ${interval} Tage` : ''}
             </div>
-            ${e.notiz ? `<div class="list-item-text">${UI.escape(e.notiz)}</div>` : ''}
+            ${e.notiz ? `<div class="health-card-note">${_esc(e.notiz)}</div>` : ''}
             <button class="btn btn-ghost btn-xs" style="margin-top:var(--space-2);font-size:var(--text-xs);color:var(--c-text-muted);padding:2px 6px"
                     data-action="open-note" data-entry-id="${e.id}"
-                    data-label="Läufigkeit ${UI.escape(e.datum)}"
+                    data-label="Läufigkeit ${_esc(e.datum)}"
                     onclick="event.stopPropagation()"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#note-pencil"></use></svg> Notiz</button>
           </div>
         </div>`;
@@ -738,7 +737,7 @@ window.Page_health = (() => {
 
     return `
       ${banner}
-      <div class="health-list mt-4">${items}</div>
+      <div class="health-list" style="margin-top:var(--space-4)">${items}</div>
       <div style="text-align:center;padding:var(--space-4)">${addBtn}</div>`;
   }
 
@@ -755,20 +754,20 @@ window.Page_health = (() => {
     const inaktive = entries.filter(e => !e.aktiv);
 
     const renderGroup = (items, label) => items.length ? `
-      <div class="list-group-header by-section-label">${label}</div>
+      <div class="by-section-label">${label}</div>
       ${items.map(e => `
-        <div class="list-item-card list-item-card--clickable health-card${e.aktiv ? '' : ' list-item-card--inactive health-card--inactive'}" data-id="${e.id}" data-action="open-entry">
-          <div class="list-item-body">
-            <div class="list-item-title">${UI.escape(e.bezeichnung)}</div>
-            <div class="list-item-meta-row">
-              ${e.dosierung ? UI.escape(e.dosierung) : ''}
-              ${e.haeufigkeit ? ` · ${UI.escape(e.haeufigkeit)}` : ''}
+        <div class="health-card${e.aktiv ? '' : ' health-card--inactive'}" data-id="${e.id}" data-action="open-entry">
+          <div class="health-card-body">
+            <div class="health-card-title">${_esc(e.bezeichnung)}</div>
+            <div class="health-card-meta">
+              ${e.dosierung ? _esc(e.dosierung) : ''}
+              ${e.haeufigkeit ? ` · ${_esc(e.haeufigkeit)}` : ''}
               ${e.bis_datum ? ` · bis ${UI.time.format(e.bis_datum + 'T00:00:00')}` : ''}
             </div>
-            ${e.notiz ? `<div class="list-item-text">${UI.escape(e.notiz)}</div>` : ''}
+            ${e.notiz ? `<div class="health-card-note">${_esc(e.notiz)}</div>` : ''}
             <button class="btn btn-ghost btn-xs" style="margin-top:var(--space-2);font-size:var(--text-xs);color:var(--c-text-muted);padding:2px 6px"
                     data-action="open-note" data-entry-id="${e.id}"
-                    data-label="${UI.escape(e.bezeichnung)}"
+                    data-label="${_esc(e.bezeichnung)}"
                     onclick="event.stopPropagation()"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#note-pencil"></use></svg> Notiz</button>
           </div>
         </div>
@@ -796,20 +795,20 @@ window.Page_health = (() => {
     const SCHWEREGRAD = { leicht: '🟡', mittel: '🟠', schwer: '🔴' };
 
     const items = entries.map(e => `
-      <div class="list-item-card list-item-card--clickable health-card" data-id="${e.id}" data-action="open-entry">
-        <div class="list-item-body">
-          <div class="list-item-title">
-            ${e.schweregrad ? SCHWEREGRAD[e.schweregrad] || '' : ''} ${UI.escape(e.bezeichnung)}
+      <div class="health-card" data-id="${e.id}" data-action="open-entry">
+        <div class="health-card-body">
+          <div class="health-card-title">
+            ${e.schweregrad ? SCHWEREGRAD[e.schweregrad] || '' : ''} ${_esc(e.bezeichnung)}
           </div>
-          <div class="list-item-meta-row">
+          <div class="health-card-meta">
             Erstmals: ${UI.time.format(e.datum + 'T00:00:00')}
-            ${e.schweregrad ? ` · Schweregrad: ${UI.escape(e.schweregrad)}` : ''}
+            ${e.schweregrad ? ` · Schweregrad: ${_esc(e.schweregrad)}` : ''}
           </div>
-          ${e.reaktion ? `<div class="list-item-text"><b>Reaktion:</b> ${UI.escape(e.reaktion)}</div>` : ''}
-          ${e.notiz    ? `<div class="list-item-text">${UI.escape(e.notiz)}</div>` : ''}
+          ${e.reaktion ? `<div class="health-card-note"><b>Reaktion:</b> ${_esc(e.reaktion)}</div>` : ''}
+          ${e.notiz    ? `<div class="health-card-note">${_esc(e.notiz)}</div>` : ''}
           <button class="btn btn-ghost btn-xs" style="margin-top:var(--space-2);font-size:var(--text-xs);color:var(--c-text-muted);padding:2px 6px"
                   data-action="open-note" data-entry-id="${e.id}"
-                  data-label="${UI.escape(e.bezeichnung)}"
+                  data-label="${_esc(e.bezeichnung)}"
                   onclick="event.stopPropagation()"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#note-pencil"></use></svg> Notiz</button>
         </div>
       </div>
@@ -838,38 +837,39 @@ window.Page_health = (() => {
       const count    = mediaList.length;
 
       return `
-        <div class="list-item-card list-item-card--clickable health-card" data-id="${e.id}" data-action="open-entry">
+        <div class="health-card" data-id="${e.id}" data-action="open-entry">
           ${firstImg
-            ? `<img src="${UI.escape(firstImg.url)}" class="list-item-thumb health-doc-thumb" alt="Vorschau">`
+            ? `<img src="${_esc(firstImg.url)}" class="health-doc-thumb" alt="Vorschau"
+                    style="width:64px;height:64px;object-fit:cover;border-radius:var(--radius-md);flex-shrink:0">`
             : `<div style="width:48px;height:48px;display:flex;align-items:center;justify-content:center;
                            font-size:2rem;flex-shrink:0"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#file-text"></use></svg></div>`}
-          <div class="list-item-body">
-            <div class="list-item-title">${UI.escape(e.bezeichnung)}</div>
-            <div class="list-item-meta-row">
+          <div class="health-card-body">
+            <div class="health-card-title">${_esc(e.bezeichnung)}</div>
+            <div class="health-card-meta">
               ${UI.time.format(e.datum + 'T00:00:00')}
               ${count > 1 ? ` · ${count} Dateien` : ''}
             </div>
-            ${e.notiz ? `<div class="list-item-text">${UI.escape(e.notiz)}</div>` : ''}
+            ${e.notiz ? `<div class="health-card-note">${_esc(e.notiz)}</div>` : ''}
             <button class="btn btn-ghost btn-xs" style="margin-top:var(--space-2);font-size:var(--text-xs);color:var(--c-text-muted);padding:2px 6px"
                     data-action="open-note" data-entry-id="${e.id}"
-                    data-label="${UI.escape(e.bezeichnung)}"
+                    data-label="${_esc(e.bezeichnung)}"
                     onclick="event.stopPropagation()"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#note-pencil"></use></svg> Notiz</button>
             ${count
               ? `<div style="display:flex;gap:var(--space-2);margin-top:var(--space-2);align-items:center;flex-wrap:wrap">
                    ${mediaList.slice(0, 3).map(m => m.media_type === 'pdf'
-                     ? `<a href="${UI.escape(m.url)}" target="_blank" rel="noopener"
+                     ? `<a href="${_esc(m.url)}" target="_blank" rel="noopener"
                            class="btn btn-secondary btn-sm" style="display:inline-flex"
                            onclick="event.stopPropagation()">
                           <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#file-text"></use></svg> PDF
                         </a>`
-                     : `<a href="${UI.escape(m.url)}" target="_blank" rel="noopener"
+                     : `<a href="${_esc(m.url)}" target="_blank" rel="noopener"
                            class="btn btn-secondary btn-sm" style="display:inline-flex"
                            onclick="event.stopPropagation()">
                           <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#image"></use></svg> Bild
                         </a>`
                    ).join('')}
                  </div>`
-              : `<span class="text-xs-muted">Noch keine Datei hochgeladen</span>`}
+              : `<span style="font-size:var(--text-xs);color:var(--c-text-muted)">Noch keine Datei hochgeladen</span>`}
           </div>
         </div>
       `;
@@ -990,14 +990,14 @@ window.Page_health = (() => {
       : (entry.datei_url ? [{ id: null, url: entry.datei_url, media_type: entry.datei_typ || 'image' }] : []);
 
     const mediaHtml = mediaItems.length
-      ? `<div class="health-media-gallery mt-4">
+      ? `<div class="health-media-gallery" style="margin-top:var(--space-4)">
           ${mediaItems.map(m => m.media_type === 'pdf'
-            ? `<a href="${UI.escape(m.url)}" target="_blank" rel="noopener"
+            ? `<a href="${_esc(m.url)}" target="_blank" rel="noopener"
                   class="btn btn-secondary btn-sm health-media-gallery-pdf">
                  <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#file-text"></use></svg> PDF öffnen
                </a>`
-            : `<a href="${UI.escape(m.url)}" target="_blank" rel="noopener" class="health-media-gallery-img">
-                 <img src="${UI.escape(m.url)}" alt="Bild" loading="lazy">
+            : `<a href="${_esc(m.url)}" target="_blank" rel="noopener" class="health-media-gallery-img">
+                 <img src="${_esc(m.url)}" alt="Bild" loading="lazy">
                </a>`
           ).join('')}
          </div>`
@@ -1015,7 +1015,7 @@ window.Page_health = (() => {
       ? `${tabInfo.icon} ${entry.wert} ${entry.einheit || 'kg'}`
       : entry.typ === 'laeufigkeit'
         ? `${tabInfo.icon} Läufigkeit ${UI.time.format(entry.datum + 'T00:00:00')}`
-        : `${tabInfo.icon} ${UI.escape(entry.bezeichnung)}`;
+        : `${tabInfo.icon} ${_esc(entry.bezeichnung)}`;
     UI.modal.open({ title: modalTitle, body });
 
     document.getElementById('health-detail-edit')?.addEventListener('click', () => {
@@ -1041,23 +1041,23 @@ window.Page_health = (() => {
       const praxis = _praxen.find(p => p.id === e.tierarzt_id);
       if (praxis) {
         const adresse = [praxis.strasse, [praxis.plz, praxis.ort].filter(Boolean).join(' ')].filter(Boolean).join(', ');
-        const tel     = praxis.telefon ? ` · <a href="tel:${UI.escape(praxis.telefon)}">${UI.escape(praxis.telefon)}</a>` : '';
-        const oh      = praxis.opening_hours ? `<br><small class="text-secondary">🕐 ${UI.escape(_fmtOeffnungszeiten(praxis.opening_hours))}</small>` : '';
-        rows.push(['Praxis', `<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#first-aid"></use></svg> ${UI.escape(praxis.name)}${adresse ? `<br><small class="text-secondary">${UI.escape(adresse)}${tel}</small>` : tel}${oh}`]);
+        const tel     = praxis.telefon ? ` · <a href="tel:${_esc(praxis.telefon)}">${_esc(praxis.telefon)}</a>` : '';
+        const oh      = praxis.opening_hours ? `<br><small style="color:var(--c-text-secondary)">🕐 ${_esc(_fmtOeffnungszeiten(praxis.opening_hours))}</small>` : '';
+        rows.push(['Praxis', `<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#first-aid"></use></svg> ${_esc(praxis.name)}${adresse ? `<br><small style="color:var(--c-text-secondary)">${_esc(adresse)}${tel}</small>` : tel}${oh}`]);
       }
     } else if (e.tierarzt_name) {
-      rows.push(['Tierarzt',  UI.escape(e.tierarzt_name)]);
+      rows.push(['Tierarzt',  _esc(e.tierarzt_name)]);
     }
-    if (e.charge_nr)    rows.push(['Charge-Nr.', UI.escape(e.charge_nr)]);
+    if (e.charge_nr)    rows.push(['Charge-Nr.', _esc(e.charge_nr)]);
     if (e.kosten != null) rows.push(['Kosten',   `${Number(e.kosten).toFixed(2)} €`]);
-    if (e.diagnose)     rows.push(['Diagnose',   UI.escape(e.diagnose)]);
+    if (e.diagnose)     rows.push(['Diagnose',   _esc(e.diagnose)]);
     if (e.wert)         rows.push(['Gewicht',    `${e.wert} ${e.einheit || 'kg'}`]);
-    if (e.dosierung)    rows.push(['Dosierung',  UI.escape(e.dosierung)]);
-    if (e.haeufigkeit)  rows.push(['Häufigkeit', UI.escape(e.haeufigkeit)]);
+    if (e.dosierung)    rows.push(['Dosierung',  _esc(e.dosierung)]);
+    if (e.haeufigkeit)  rows.push(['Häufigkeit', _esc(e.haeufigkeit)]);
     if (e.bis_datum)    rows.push(['Bis',        UI.time.format(e.bis_datum + 'T00:00:00')]);
-    if (e.schweregrad)  rows.push(['Schweregrad',UI.escape(e.schweregrad)]);
-    if (e.reaktion)     rows.push(['Reaktion',   UI.escape(e.reaktion)]);
-    if (e.notiz)        rows.push(['Notiz',      UI.escape(e.notiz)]);
+    if (e.schweregrad)  rows.push(['Schweregrad',_esc(e.schweregrad)]);
+    if (e.reaktion)     rows.push(['Reaktion',   _esc(e.reaktion)]);
+    if (e.notiz)        rows.push(['Notiz',      _esc(e.notiz)]);
 
     return `<dl class="health-detail-dl">${
       rows.map(([k, v]) => `<dt>${k}</dt><dd>${v}</dd>`).join('')
@@ -1077,7 +1077,7 @@ window.Page_health = (() => {
         <div class="form-group">
           <label class="form-label">Bezeichnung *</label>
           <input class="form-control" type="text" name="bezeichnung"
-                 value="${UI.escape(entry?.bezeichnung || '')}" required
+                 value="${_esc(entry?.bezeichnung || '')}" required
                  placeholder="${_formPlaceholder(t)}">
         </div>` : ''}
       <div class="form-group">
@@ -1091,7 +1091,7 @@ window.Page_health = (() => {
     const notizField  = `
       <div class="form-group">
         <label class="form-label">Notiz</label>
-        <textarea class="form-control" name="notiz" rows="3">${UI.escape(entry?.notiz || '')}</textarea>
+        <textarea class="form-control" name="notiz" rows="3">${_esc(entry?.notiz || '')}</textarea>
       </div>
     `;
 
@@ -1110,7 +1110,7 @@ window.Page_health = (() => {
         : '';
       return `<div class="health-media-thumb" data-media-id="${m.id || ''}">
         ${isImg
-          ? `<img src="${UI.escape(m.url)}" alt="Vorschau">`
+          ? `<img src="${_esc(m.url)}" alt="Vorschau">`
           : `<div class="health-media-thumb-pdf"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#file-text"></use></svg><span>PDF</span></div>`}
         ${removeBtn}
       </div>`;
@@ -1143,8 +1143,8 @@ window.Page_health = (() => {
 
     const footer = `
       <div style="display:flex;flex-direction:column;gap:var(--space-2);width:100%">
-        <button type="submit" form="health-form" class="btn btn-primary w-full">${isEdit ? 'Speichern' : 'Erstellen'}</button>
-        <div class="flex-gap-2">
+        <button type="submit" form="health-form" class="btn btn-primary" style="width:100%">${isEdit ? 'Speichern' : 'Erstellen'}</button>
+        <div style="display:flex;gap:var(--space-2)">
           ${isEdit ? `<button type="button" class="btn btn-danger" id="health-form-delete">Löschen</button>` : ''}
           <button type="button" class="btn btn-secondary flex-1" id="health-form-cancel">Abbrechen</button>
         </div>
@@ -1174,7 +1174,7 @@ window.Page_health = (() => {
             const thumb = document.createElement('div');
             thumb.className = 'health-media-thumb health-media-thumb--pending';
             if (isPdf) {
-              thumb.innerHTML = `<div class="health-media-thumb-pdf"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#file-text"></use></svg><span>PDF</span></div><small>${UI.escape(f.name.slice(0, 18))}</small>`;
+              thumb.innerHTML = `<div class="health-media-thumb-pdf"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#file-text"></use></svg><span>PDF</span></div><small>${_esc(f.name.slice(0, 18))}</small>`;
             } else {
               const img = document.createElement('img');
               img.src = URL.createObjectURL(f);
@@ -1331,7 +1331,7 @@ window.Page_health = (() => {
           <option value="">– optional –</option>
           ${aktivePraxen.map(p => `
             <option value="${p.id}" ${entry?.tierarzt_id === p.id ? 'selected' : ''}>
-              ${UI.escape(p.name)}${p.ort ? ` · ${UI.escape(p.ort)}` : ''}
+              ${_esc(p.name)}${p.ort ? ` · ${_esc(p.ort)}` : ''}
             </option>`).join('')}
         </select>
       </div>`;
@@ -1350,7 +1350,7 @@ window.Page_health = (() => {
         ${_praxisSelectField(entry)}
         <div class="form-group">
           <label class="form-label">Chargen-Nr.</label>
-          <input class="form-control" type="text" name="charge_nr" value="${UI.escape(entry?.charge_nr || '')}">
+          <input class="form-control" type="text" name="charge_nr" value="${_esc(entry?.charge_nr || '')}">
         </div>
       `;
       case 'entwurmung': return `
@@ -1373,7 +1373,7 @@ window.Page_health = (() => {
                  ${aktivePraxen.map(p => `
                    <option value="${p.id}"
                            ${entry?.tierarzt_id === p.id ? 'selected' : ''}>
-                     ${UI.escape(p.name)}${p.ort ? ` · ${UI.escape(p.ort)}` : ''}
+                     ${_esc(p.name)}${p.ort ? ` · ${_esc(p.ort)}` : ''}
                    </option>`).join('')}
                </select>
              </div>`
@@ -1384,15 +1384,15 @@ window.Page_health = (() => {
                  <button type="button" class="btn btn-ghost btn-sm" style="padding:0;font-size:inherit"
                          data-action="goto-praxen">Praxis im Tab Praxen anlegen</button>
                </div>
-               <label class="form-label mt-2">Tierarzt / Praxis (Freitext)</label>
+               <label class="form-label" style="margin-top:var(--space-2)">Tierarzt / Praxis (Freitext)</label>
                <input class="form-control" name="tierarzt_name"
-                      value="${UI.escape(entry?.tierarzt_name || '')}" placeholder="Dr. Muster">
+                      value="${_esc(entry?.tierarzt_name || '')}" placeholder="Dr. Muster">
              </div>`;
         return `
           ${praxisField}
           <div class="form-group">
             <label class="form-label">Diagnose</label>
-            <textarea class="form-control" name="diagnose" rows="2">${UI.escape(entry?.diagnose || '')}</textarea>
+            <textarea class="form-control" name="diagnose" rows="2">${_esc(entry?.diagnose || '')}</textarea>
           </div>
           <div class="form-group">
             <label class="form-label">Kosten (€)</label>
@@ -1416,14 +1416,14 @@ window.Page_health = (() => {
         <div class="form-group">
           <label class="form-label">Dosierung</label>
           <input class="form-control" type="text" name="dosierung"
-                 value="${UI.escape(entry?.dosierung || '')}" placeholder="z.B. 1 Tablette">
+                 value="${_esc(entry?.dosierung || '')}" placeholder="z.B. 1 Tablette">
         </div>
         <div class="form-group">
           <label class="form-label">Häufigkeit</label>
           <input class="form-control" type="text" name="haeufigkeit"
-                 value="${UI.escape(entry?.haeufigkeit || '')}" placeholder="z.B. täglich, 2x wöchentlich">
+                 value="${_esc(entry?.haeufigkeit || '')}" placeholder="z.B. täglich, 2x wöchentlich">
         </div>
-        <div class="grid-2">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
           <div class="form-group">
             <label class="form-label">Gabe bis (optional)</label>
             <input class="form-control" type="date" name="bis_datum" value="${entry?.bis_datum || ''}">
@@ -1450,7 +1450,7 @@ window.Page_health = (() => {
         </div>
         <div class="form-group">
           <label class="form-label">Reaktion / Symptome</label>
-          <textarea class="form-control" name="reaktion" rows="2">${UI.escape(entry?.reaktion || '')}</textarea>
+          <textarea class="form-control" name="reaktion" rows="2">${_esc(entry?.reaktion || '')}</textarea>
         </div>
       `;
       case 'laeufigkeit': {
@@ -1486,7 +1486,7 @@ window.Page_health = (() => {
           </div>` : '';
         return `
           ${lastInfo}
-          <div class="grid-2">
+          <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
             <div class="form-group">
               <label class="form-label">Dauer (Tage)</label>
               <input class="form-control" type="number" min="1" max="60" name="wert"
@@ -1512,7 +1512,7 @@ window.Page_health = (() => {
                         text-transform:uppercase;letter-spacing:0.05em;margin-bottom:var(--space-3)">
               Zucht (optional)
             </div>
-            <div class="grid-2">
+            <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
               <div class="form-group">
                 <label class="form-label">Deckdatum</label>
                 <input class="form-control" type="date" name="deckdatum"
@@ -1623,36 +1623,36 @@ window.Page_health = (() => {
       const ratingHtml = hasRating
         ? `<div style="display:flex;align-items:center;gap:var(--space-1);margin-top:var(--space-1);font-size:var(--text-sm)">
              ${stars}
-             <span class="text-secondary">${p.avg_rating.toFixed(1)} (${p.anz_bewertungen} Bew.)</span>
+             <span style="color:var(--c-text-secondary)">${p.avg_rating.toFixed(1)} (${p.anz_bewertungen} Bew.)</span>
            </div>`
         : `<div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:var(--space-1)">Noch keine Bewertungen</div>`;
       return `
-      <div class="list-item-card list-item-card--clickable health-card praxis-card${!p.aktiv ? ' list-item-card--inactive health-card--inactive' : ''}"
+      <div class="health-card praxis-card${!p.aktiv ? ' health-card--inactive' : ''}"
            data-praxis-id="${p.id}" data-action="open-praxis">
         <div style="font-size:1.5rem"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#${p.ist_notfallpraxis ? 'warning' : 'first-aid'}"></use></svg></div>
-        <div class="list-item-body">
-          <div class="list-item-title">
-            ${UI.escape(p.name)}
+        <div class="health-card-body">
+          <div class="health-card-title">
+            ${_esc(p.name)}
             ${!p.aktiv ? '<span style="font-size:var(--text-xs);color:var(--c-text-secondary);font-weight:400"> · Ehemalig</span>' : ''}
           </div>
           ${(p.strasse || p.plz || p.ort) ? `
-            <div class="list-item-meta-row">
+            <div class="health-card-meta">
               ${[p.strasse, [p.plz, p.ort].filter(Boolean).join(' ')].filter(Boolean).map(_esc).join(', ')}
             </div>` : ''}
           ${p.opening_hours ? `
-            <div class="list-item-meta-row" style="margin-top:var(--space-1)">
+            <div class="health-card-meta" style="margin-top:var(--space-1)">
               <svg class="ph-icon" aria-hidden="true" style="font-size:0.9em"><use href="/icons/phosphor.svg#clock"></use></svg>
-              ${UI.escape(_fmtOeffnungszeiten(p.opening_hours))}
+              ${_esc(_fmtOeffnungszeiten(p.opening_hours))}
             </div>` : ''}
           ${ratingHtml}
           <div style="display:flex;gap:var(--space-2);margin-top:var(--space-2);flex-wrap:wrap">
             ${p.telefon ? `
-              <a href="tel:${UI.escape(p.telefon)}" class="btn btn-secondary btn-sm"
+              <a href="tel:${_esc(p.telefon)}" class="btn btn-secondary btn-sm"
                  onclick="event.stopPropagation()">
                 <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#phone"></use></svg> Anrufen
               </a>` : ''}
             ${p.notfall_telefon ? `
-              <a href="tel:${UI.escape(p.notfall_telefon)}" class="btn btn-danger btn-sm"
+              <a href="tel:${_esc(p.notfall_telefon)}" class="btn btn-danger btn-sm"
                  onclick="event.stopPropagation()">
                 <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#warning"></use></svg> Notfall
               </a>` : ''}
@@ -1688,7 +1688,7 @@ window.Page_health = (() => {
 
 
     const favCard = _favoritVet ? `
-      <div class="mb-4">
+      <div style="margin-bottom:var(--space-4)">
         <div style="font-size:var(--text-xs);font-weight:600;color:var(--c-primary);
                     text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-2)">
           ${UI.icon('heart')} Mein Tierarzt
@@ -1749,7 +1749,7 @@ window.Page_health = (() => {
   async function _showPraxisDetail(praxis) {
     // Erst mit Lade-Spinner öffnen, dann Daten laden
     UI.modal.open({
-      title: UI.escape(praxis.name),
+      title: _esc(praxis.name),
       body: `<div style="text-align:center;padding:var(--space-6)">
                <svg class="ph-icon spin" aria-hidden="true" style="font-size:2rem">
                  <use href="/icons/phosphor.svg#spinner-gap"></use>
@@ -1794,7 +1794,7 @@ window.Page_health = (() => {
           <div style="padding:var(--space-3) 0;border-bottom:1px solid var(--c-border)">
             <div style="display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-1)">
               ${_renderStarsReadonly(k.gesamt)}
-              <span class="text-xs-muted">
+              <span style="font-size:var(--text-xs);color:var(--c-text-muted)">
                 ${k.created_at ? k.created_at.slice(0, 10) : ''}
               </span>
             </div>
@@ -1804,9 +1804,9 @@ window.Page_health = (() => {
                 ${k.freundlichkeit ? `<span>Freundlichkeit: ${_renderStarsReadonly(k.freundlichkeit)}</span>` : ''}
                 ${k.kompetenz      ? `<span>Kompetenz: ${_renderStarsReadonly(k.kompetenz)}</span>` : ''}
               </div>` : ''}
-            <p style="margin:0;font-size:var(--text-sm)">${UI.escape(k.text || '')}</p>
+            <p style="margin:0;font-size:var(--text-sm)">${_esc(k.text || '')}</p>
           </div>`).join('')
-      : `<p class="text-sm-muted">Noch keine Kommentare.</p>`;
+      : `<p style="color:var(--c-text-muted);font-size:var(--text-sm)">Noch keine Kommentare.</p>`;
 
     const bewBody = anz_bewertungen === 0
       ? `<p style="color:var(--c-text-muted);text-align:center;padding:var(--space-4) 0">
@@ -1814,12 +1814,12 @@ window.Page_health = (() => {
          </p>`
       : `
         <div style="display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-4)">
-          <div class="text-center">
+          <div style="text-align:center">
             <div style="font-size:3rem;font-weight:700;line-height:1">${avg_rating.toFixed(1)}</div>
             <div>${_renderStarsReadonly(avg_rating)}</div>
-            <div class="text-xs-muted">${anz_bewertungen} Bewertung${anz_bewertungen !== 1 ? 'en' : ''}</div>
+            <div style="font-size:var(--text-xs);color:var(--c-text-muted)">${anz_bewertungen} Bewertung${anz_bewertungen !== 1 ? 'en' : ''}</div>
           </div>
-          <div class="flex-1">${balken}</div>
+          <div style="flex:1">${balken}</div>
         </div>
         <div>${kommentarHtml}</div>`;
 
@@ -1845,31 +1845,31 @@ window.Page_health = (() => {
           ${_renderStarsInput('gesamt', cur.gesamt || 0)}
           <input type="hidden" name="gesamt" id="bew-gesamt" value="${cur.gesamt || 0}">
         </div>
-        <div class="form-group mt-3">
+        <div class="form-group" style="margin-top:var(--space-3)">
           <label class="form-label">Wartezeit</label>
           ${_renderStarsInput('wartezeit', cur.wartezeit || 0)}
           <input type="hidden" name="wartezeit" id="bew-wartezeit" value="${cur.wartezeit || 0}">
         </div>
-        <div class="form-group mt-3">
+        <div class="form-group" style="margin-top:var(--space-3)">
           <label class="form-label">Freundlichkeit</label>
           ${_renderStarsInput('freundlichkeit', cur.freundlichkeit || 0)}
           <input type="hidden" name="freundlichkeit" id="bew-freundlichkeit" value="${cur.freundlichkeit || 0}">
         </div>
-        <div class="form-group mt-3">
+        <div class="form-group" style="margin-top:var(--space-3)">
           <label class="form-label">Kompetenz</label>
           ${_renderStarsInput('kompetenz', cur.kompetenz || 0)}
           <input type="hidden" name="kompetenz" id="bew-kompetenz" value="${cur.kompetenz || 0}">
         </div>
-        <div class="form-group mt-3">
+        <div class="form-group" style="margin-top:var(--space-3)">
           <label class="form-label">Kommentar <span style="font-weight:400;color:var(--c-text-muted)">(optional, anonym)</span></label>
           <textarea class="form-control" name="text" maxlength="500" rows="3"
-                    placeholder="Deine Erfahrungen mit dieser Praxis…">${UI.escape(cur.text || '')}</textarea>
+                    placeholder="Deine Erfahrungen mit dieser Praxis…">${_esc(cur.text || '')}</textarea>
           <div style="font-size:var(--text-xs);color:var(--c-text-muted);text-align:right">max. 500 Zeichen</div>
         </div>
       </form>`;
 
     UI.modal.open({
-      title: `${UI.escape(praxis.name)} bewerten`,
+      title: `${_esc(praxis.name)} bewerten`,
       body,
       footer: `
         <button class="btn btn-secondary" onclick="UI.modal.close()">Abbrechen</button>
@@ -1948,41 +1948,41 @@ window.Page_health = (() => {
           <div class="form-group">
             <label class="form-label">Name der Praxis *</label>
             <input class="form-control" type="text" name="name"
-                   value="${UI.escape(praxis?.name || '')}" placeholder="Dr. Muster Tierarztpraxis" required>
+                   value="${_esc(praxis?.name || '')}" placeholder="Dr. Muster Tierarztpraxis" required>
           </div>
           <div class="form-group">
             <label class="form-label">Straße &amp; Hausnummer</label>
             <input class="form-control" type="text" name="strasse"
-                   value="${UI.escape(praxis?.strasse || '')}" placeholder="Musterstraße 1">
+                   value="${_esc(praxis?.strasse || '')}" placeholder="Musterstraße 1">
           </div>
           <div style="display:grid;grid-template-columns:120px 1fr;gap:var(--space-3)">
             <div class="form-group">
               <label class="form-label">PLZ</label>
               <input class="form-control" type="text" name="plz" inputmode="numeric"
-                     value="${UI.escape(praxis?.plz || '')}" placeholder="12345">
+                     value="${_esc(praxis?.plz || '')}" placeholder="12345">
             </div>
             <div class="form-group">
               <label class="form-label">Ort</label>
               <input class="form-control" type="text" name="ort"
-                     value="${UI.escape(praxis?.ort || '')}" placeholder="Musterstadt">
+                     value="${_esc(praxis?.ort || '')}" placeholder="Musterstadt">
             </div>
           </div>
-          <div class="grid-2">
+          <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
             <div class="form-group">
               <label class="form-label">Telefon</label>
               <input class="form-control" type="tel" name="telefon"
-                     value="${UI.escape(praxis?.telefon || '')}" placeholder="089 123456">
+                     value="${_esc(praxis?.telefon || '')}" placeholder="089 123456">
             </div>
             <div class="form-group">
               <label class="form-label">Notfall-Telefon</label>
               <input class="form-control" type="tel" name="notfall_telefon"
-                     value="${UI.escape(praxis?.notfall_telefon || '')}" placeholder="089 999999">
+                     value="${_esc(praxis?.notfall_telefon || '')}" placeholder="089 999999">
             </div>
           </div>
           <div class="form-group">
             <label class="form-label">E-Mail</label>
             <input class="form-control" type="email" name="email"
-                   value="${UI.escape(praxis?.email || '')}" placeholder="praxis@beispiel.de">
+                   value="${_esc(praxis?.email || '')}" placeholder="praxis@beispiel.de">
           </div>
           <div class="form-group">
             <label class="form-label">
@@ -1994,14 +1994,14 @@ window.Page_health = (() => {
             </label>
             <input class="form-control" type="text" name="opening_hours"
                    id="praxis-opening-hours"
-                   value="${UI.escape(praxis?.opening_hours || '')}"
+                   value="${_esc(praxis?.opening_hours || '')}"
                    placeholder="z.B. Mo–Fr 08:00–18:00 · Sa 09:00–13:00">
             <div id="praxis-osm-results" style="display:none;margin-top:var(--space-2)"></div>
           </div>
           <div class="form-group">
             <label class="form-label">Notizen</label>
             <textarea class="form-control" name="notizen" rows="2"
-                      placeholder="Besonderheiten, interne Hinweise…">${UI.escape(praxis?.notizen || '')}</textarea>
+                      placeholder="Besonderheiten, interne Hinweise…">${_esc(praxis?.notizen || '')}</textarea>
           </div>
           <div class="form-group">
             <label class="form-label" style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer">
@@ -2037,26 +2037,26 @@ window.Page_health = (() => {
         const hits = await API.tieraerzte.osmNearby(pos.lat, pos.lon);
         if (!hits.length) {
           resultsEl.style.display = 'block';
-          resultsEl.innerHTML = '<p class="text-sm-secondary">Keine Praxen in der Nähe im OSM-Cache gefunden.</p>';
+          resultsEl.innerHTML = '<p style="font-size:var(--text-sm);color:var(--c-text-secondary)">Keine Praxen in der Nähe im OSM-Cache gefunden.</p>';
         } else {
           resultsEl.style.display = 'block';
           resultsEl.innerHTML = hits.map(h => `
-            <div class="health-card mb-2">
+            <div class="health-card" style="margin-bottom:var(--space-2)">
               <div style="cursor:pointer;flex:1"
-                   data-osm-id="${UI.escape(h.osm_id)}"
-                   data-name="${UI.escape(h.name)}"
-                   data-oh="${UI.escape(h.opening_hours || '')}"
-                   data-phone="${UI.escape(h.phone || '')}"
+                   data-osm-id="${_esc(h.osm_id)}"
+                   data-name="${_esc(h.name)}"
+                   data-oh="${_esc(h.opening_hours || '')}"
+                   data-phone="${_esc(h.phone || '')}"
                    data-action="pick-osm">
-                <div style="font-weight:600">${UI.escape(h.name)}</div>
-                ${h.opening_hours_fmt ? `<div class="text-sm-secondary">${UI.escape(h.opening_hours_fmt)}</div>` : '<div class="text-sm-muted">Öffnungszeiten unbekannt</div>'}
-                <div class="text-xs-secondary">${h.distanz_km} km entfernt</div>
+                <div style="font-weight:600">${_esc(h.name)}</div>
+                ${h.opening_hours_fmt ? `<div style="font-size:var(--text-sm);color:var(--c-text-secondary)">${_esc(h.opening_hours_fmt)}</div>` : '<div style="font-size:var(--text-sm);color:var(--c-text-muted)">Öffnungszeiten unbekannt</div>'}
+                <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">${h.distanz_km} km entfernt</div>
               </div>
               <button class="btn btn-secondary btn-sm" style="flex-shrink:0;align-self:flex-start"
                       data-action="korrigieren"
-                      data-osm-id="${UI.escape(h.osm_id)}"
-                      data-poi-name="${UI.escape(h.name)}"
-                      data-current-oh="${UI.escape(h.opening_hours || '')}">
+                      data-osm-id="${_esc(h.osm_id)}"
+                      data-poi-name="${_esc(h.name)}"
+                      data-current-oh="${_esc(h.opening_hours || '')}">
                 ✏️
               </button>
             </div>
@@ -2130,8 +2130,8 @@ window.Page_health = (() => {
   // ----------------------------------------------------------
   function _renderSymptomCheck(content) {
     content.innerHTML = `
-      <div class="p-4">
-        <div class="card p-4">
+      <div style="padding:var(--space-4)">
+        <div class="card" style="padding:var(--space-4)">
           <p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin:0 0 var(--space-4)">
             Beschreibe die Symptome deines Hundes. Die KI gibt eine erste Einschätzung — kein Ersatz für den Tierarzt.
           </p>
@@ -2140,7 +2140,7 @@ window.Page_health = (() => {
             <textarea id="symptom-input" class="form-control" rows="4"
                       placeholder="z.B. frisst nicht, trinkt viel, schläft mehr als sonst..."></textarea>
           </div>
-          <button id="symptom-submit-btn" class="btn btn-primary w-full">
+          <button id="symptom-submit-btn" class="btn btn-primary" style="width:100%">
             Symptome analysieren <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#magnifying-glass"></use></svg>
           </button>
           <div id="symptom-result" style="display:none;margin-top:var(--space-5)"></div>
@@ -2199,11 +2199,11 @@ window.Page_health = (() => {
           tierarzt_sofort:{ badgeClass: 'badge-danger', icon: 'first-aid-kit',   label: 'Sofort zum Tierarzt!' },
           notfall:       { badgeClass: 'badge-danger',  icon: 'first-aid-kit',   label: 'Notfall — sofort zum Tierarzt!' },
         };
-        const d = DRINGLICHKEIT[result.dringlichkeit] || { badgeClass: 'badge-primary', icon: 'info', label: UI.escape(result.dringlichkeit) };
+        const d = DRINGLICHKEIT[result.dringlichkeit] || { badgeClass: 'badge-primary', icon: 'info', label: _esc(result.dringlichkeit) };
 
         const hinweiseHtml = (result.hinweise || []).length
           ? `<ul style="margin:var(--space-2) 0 0;padding-left:var(--space-5);font-size:var(--text-sm)">
-               ${result.hinweise.map(h => `<li style="margin-bottom:var(--space-1)">${UI.escape(h)}</li>`).join('')}
+               ${result.hinweise.map(h => `<li style="margin-bottom:var(--space-1)">${_esc(h)}</li>`).join('')}
              </ul>`
           : '';
 
@@ -2211,7 +2211,7 @@ window.Page_health = (() => {
           ? `<div style="margin-top:var(--space-3);padding:var(--space-3);
                          background:var(--c-surface-alt,var(--c-surface));
                          border-radius:var(--radius-md);font-size:var(--text-sm)">
-               <strong>Zum Tierarzt wenn:</strong> ${UI.escape(result.zum_tierarzt_wenn)}
+               <strong>Zum Tierarzt wenn:</strong> ${_esc(result.zum_tierarzt_wenn)}
              </div>`
           : '';
 
@@ -2223,7 +2223,7 @@ window.Page_health = (() => {
             </span>
           </div>
           ${result.einschaetzung
-            ? `<p style="font-size:var(--text-sm);line-height:1.6;margin:0">${UI.escape(result.einschaetzung)}</p>`
+            ? `<p style="font-size:var(--text-sm);line-height:1.6;margin:0">${_esc(result.einschaetzung)}</p>`
             : ''}
           ${hinweiseHtml}
           ${zumTierarztHtml}
@@ -2244,7 +2244,7 @@ window.Page_health = (() => {
         <div class="mb-3">
           <label class="form-label">Chip-Nummer (15-stellig)</label>
           <input id="transponder-input" class="form-control" type="text"
-                 value="${UI.escape(currentNr)}" placeholder="z.B. 276009200123456" maxlength="20">
+                 value="${_esc(currentNr)}" placeholder="z.B. 276009200123456" maxlength="20">
         </div>`,
       footer: `
         <button class="btn btn-secondary" onclick="UI.modal.close()">Abbrechen</button>
@@ -2260,8 +2260,8 @@ window.Page_health = (() => {
         UI.modal.close();
         const nrEl = _container.querySelector('#health-transponder-nr');
         if (nrEl) nrEl.innerHTML = nr
-          ? `<strong>${UI.escape(nr)}</strong>`
-          : '<em class="text-muted">nicht eingetragen</em>';
+          ? `<strong>${_esc(nr)}</strong>`
+          : '<em style="color:var(--c-text-muted)">nicht eingetragen</em>';
       } catch (e) {
         UI.setLoading(btn, false);
         UI.toast('Fehler beim Speichern', 'error');
@@ -2286,8 +2286,8 @@ window.Page_health = (() => {
         ? new Date(neuester.erstellt_at).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })
         : '';
       const preview = neuester.bericht.length > 180
-        ? UI.escape(neuester.bericht.slice(0, 180)) + '&hellip;'
-        : UI.escape(neuester.bericht);
+        ? _esc(neuester.bericht.slice(0, 180)) + '&hellip;'
+        : _esc(neuester.bericht);
       el.innerHTML = `
         <div class="health-ki-bericht-banner" style="
           background:var(--c-surface-2,#f7f2eb);
@@ -2299,7 +2299,7 @@ window.Page_health = (() => {
         ">
           <div style="display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-1)">
             <svg class="ph-icon" aria-hidden="true" style="flex-shrink:0"><use href="/icons/phosphor.svg#star"></use></svg>
-            <strong class="text-sm">KI-Gesundheitsbericht</strong>
+            <strong style="font-size:var(--text-sm)">KI-Gesundheitsbericht</strong>
             ${datum ? `<span style="font-size:var(--text-xs);color:var(--c-text-muted);margin-left:auto">${datum}</span>` : ''}
           </div>
           <div style="font-size:var(--text-sm);color:var(--c-text-muted);line-height:1.5">${preview}</div>
@@ -2318,7 +2318,7 @@ window.Page_health = (() => {
               <button onclick="window._kiPrev()" style="padding:6px 16px;border-radius:999px;
                 border:1.5px solid var(--c-border);background:var(--c-surface);cursor:pointer;
                 font-size:var(--text-sm);${idx >= berichte.length-1 ? 'opacity:.3;pointer-events:none' : ''}">‹ Älter</button>
-              <span class="text-xs-muted">${idx+1} / ${berichte.length}</span>
+              <span style="font-size:var(--text-xs);color:var(--c-text-muted)">${idx+1} / ${berichte.length}</span>
               <button onclick="window._kiNext()" style="padding:6px 16px;border-radius:999px;
                 border:1.5px solid var(--c-border);background:var(--c-surface);cursor:pointer;
                 font-size:var(--text-sm);${idx <= 0 ? 'opacity:.3;pointer-events:none' : ''}">Neuer ›</button>
@@ -2327,7 +2327,7 @@ window.Page_health = (() => {
             title: `${UI.icon('star')} KI-Gesundheitsberichte`,
             body: `${nav}
               <div style="font-size:var(--text-xs);color:var(--c-text-muted);text-align:center;margin-bottom:8px">${fmtDate(b)}</div>
-              <div style="white-space:pre-wrap;line-height:1.7;font-size:var(--text-sm)">${UI.escape(b.bericht)}</div>`,
+              <div style="white-space:pre-wrap;line-height:1.7;font-size:var(--text-sm)">${_esc(b.bericht)}</div>`,
           });
         }
 
@@ -2357,30 +2357,30 @@ window.Page_health = (() => {
       });
 
       el.innerHTML = `
-        <div class="mb-3">
+        <div style="margin-bottom:var(--space-3)">
           <div style="font-size:var(--text-xs);font-weight:600;color:var(--c-text-muted);
                       text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-2)">
             Terminvorschläge
           </div>
-          <div class="flex-col-gap-2">
+          <div style="display:flex;flex-direction:column;gap:var(--space-2)">
             ${vorschlaege.map(v => {
               const badge = v.ueberfaellig
                 ? `<span style="font-size:var(--text-xs);color:var(--c-danger);font-weight:600">Überfällig seit ${_fmtDatum(v.naechstes)}</span>`
                 : `<span style="font-size:var(--text-xs);color:var(--c-warning);font-weight:600">Fällig am ${_fmtDatum(v.naechstes)}</span>`;
               return `
                 <div class="health-card" style="flex-direction:row;align-items:center;gap:var(--space-3)">
-                  <div class="flex-1-min">
-                    <div style="font-weight:600;font-size:var(--text-sm)">${UI.escape(v.bezeichnung)}</div>
-                    <div class="text-xs-secondary">${UI.escape(v.label)}${v.praxis_name ? ' · ' + UI.escape(v.praxis_name) : ''}</div>
+                  <div style="flex:1;min-width:0">
+                    <div style="font-weight:600;font-size:var(--text-sm)">${_esc(v.bezeichnung)}</div>
+                    <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">${_esc(v.label)}${v.praxis_name ? ' · ' + _esc(v.praxis_name) : ''}</div>
                     ${badge}
                   </div>
                   <div style="text-align:right;flex-shrink:0">
-                    <div class="text-xs-muted">Vorschlag</div>
+                    <div style="font-size:var(--text-xs);color:var(--c-text-muted)">Vorschlag</div>
                     <div style="font-size:var(--text-sm);font-weight:600">${_fmtDatum(v.datum_vorschlag)}</div>
-                    <div class="text-xs-secondary">${v.uhrzeit_vorschlag} Uhr</div>
+                    <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">${v.uhrzeit_vorschlag} Uhr</div>
                     <button class="btn btn-primary btn-sm" style="margin-top:var(--space-1)"
                             data-action="termin-anlegen"
-                            data-v='${UI.escape(JSON.stringify(v))}'>
+                            data-v='${_esc(JSON.stringify(v))}'>
                       <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#calendar-plus"></use></svg> In Kalender
                     </button>
                   </div>
@@ -2417,21 +2417,21 @@ window.Page_health = (() => {
         <form id="termin-form">
           <div class="form-group">
             <label class="form-label">Bezeichnung</label>
-            <input class="form-control" type="text" name="titel" value="${UI.escape(titel)}" required>
+            <input class="form-control" type="text" name="titel" value="${_esc(titel)}" required>
           </div>
-          <div class="grid-2">
+          <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
             <div class="form-group">
               <label class="form-label">Datum</label>
-              <input class="form-control" type="date" name="datum" value="${UI.escape(v.datum_vorschlag)}" required>
+              <input class="form-control" type="date" name="datum" value="${_esc(v.datum_vorschlag)}" required>
             </div>
             <div class="form-group">
               <label class="form-label">Uhrzeit</label>
-              <input class="form-control" type="time" name="uhrzeit" value="${UI.escape(v.uhrzeit_vorschlag)}">
+              <input class="form-control" type="time" name="uhrzeit" value="${_esc(v.uhrzeit_vorschlag)}">
             </div>
           </div>
           <div class="form-group">
             <label class="form-label">Notiz</label>
-            <input class="form-control" type="text" name="beschreibung" value="${UI.escape(beschreibung)}">
+            <input class="form-control" type="text" name="beschreibung" value="${_esc(beschreibung)}">
           </div>
         </form>
       `,
@@ -2484,33 +2484,33 @@ window.Page_health = (() => {
                     text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-2)">
           Mein Tierarzt
         </div>
-        <div class="list-item-card health-card" style="align-items:flex-start">
+        <div class="health-card" style="align-items:flex-start">
           <div style="font-size:1.6rem;flex-shrink:0">
             <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#first-aid"></use></svg>
           </div>
-          <div class="list-item-body flex-1-min">
+          <div class="health-card-body" style="flex:1;min-width:0">
             ${vet ? `
-              <div class="list-item-title">${UI.escape(vet.name)}</div>
-              ${adresse ? `<div class="list-item-meta-row">${UI.escape(adresse)}</div>` : ''}
+              <div class="health-card-title">${_esc(vet.name)}</div>
+              ${adresse ? `<div class="health-card-meta">${_esc(adresse)}</div>` : ''}
               ${vet.telefon ? `
-                <div class="mt-2">
-                  <a href="tel:${UI.escape(vet.telefon)}" class="btn btn-secondary btn-sm"
+                <div style="margin-top:var(--space-2)">
+                  <a href="tel:${_esc(vet.telefon)}" class="btn btn-secondary btn-sm"
                      onclick="event.stopPropagation()">
-                    <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#phone"></use></svg> ${UI.escape(vet.telefon)}
+                    <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#phone"></use></svg> ${_esc(vet.telefon)}
                   </a>
                 </div>` : ''}
               ${vet.notfall_telefon ? `
                 <div style="margin-top:var(--space-1)">
-                  <a href="tel:${UI.escape(vet.notfall_telefon)}" class="btn btn-danger btn-sm"
+                  <a href="tel:${_esc(vet.notfall_telefon)}" class="btn btn-danger btn-sm"
                      onclick="event.stopPropagation()">
-                    <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#warning"></use></svg> Notfall: ${UI.escape(vet.notfall_telefon)}
+                    <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#warning"></use></svg> Notfall: ${_esc(vet.notfall_telefon)}
                   </a>
                 </div>` : ''}
             ` : `
-              <div class="text-sm-muted">
+              <div style="color:var(--c-text-muted);font-size:var(--text-sm)">
                 Noch kein Tierarzt als Favorit gespeichert.
               </div>
-              <button class="btn btn-secondary btn-sm mt-2"
+              <button class="btn btn-secondary btn-sm" style="margin-top:var(--space-2)"
                       id="health-suche-tierarzt-btn">
                 <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#map-pin"></use></svg> Tierarzt suchen
               </button>
@@ -2579,25 +2579,25 @@ window.Page_health = (() => {
           const isImg  = !['pdf'].includes(doc.file_type);
           const datum  = doc.datum ? UI.time.format(doc.datum + 'T00:00:00') : '';
           return `
-            <div class="list-item-card health-card" style="align-items:flex-start">
+            <div class="health-card" style="align-items:flex-start">
               <div style="font-size:1.4rem;flex-shrink:0;color:var(--c-primary)">
-                <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#${UI.escape(icon)}"></use></svg>
+                <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#${_esc(icon)}"></use></svg>
               </div>
-              <div class="list-item-body flex-1-min">
-                <div class="list-item-title">${UI.escape(doc.titel)}</div>
-                <div class="list-item-meta-row">
-                  ${UI.escape(label)}${datum ? ' · ' + datum : ''}
-                  ${doc.vet_name ? ' · <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#first-aid"></use></svg> ' + UI.escape(doc.vet_name) : ''}
+              <div class="health-card-body" style="flex:1;min-width:0">
+                <div class="health-card-title">${_esc(doc.titel)}</div>
+                <div class="health-card-meta">
+                  ${_esc(label)}${datum ? ' · ' + datum : ''}
+                  ${doc.vet_name ? ' · <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#first-aid"></use></svg> ' + _esc(doc.vet_name) : ''}
                 </div>
-                ${doc.beschreibung ? `<div class="list-item-text">${UI.escape(doc.beschreibung)}</div>` : ''}
+                ${doc.beschreibung ? `<div class="health-card-note">${_esc(doc.beschreibung)}</div>` : ''}
                 <div style="display:flex;gap:var(--space-2);margin-top:var(--space-2);flex-wrap:wrap">
-                  <a href="${UI.escape(doc.file_path)}" target="_blank" rel="noopener"
+                  <a href="${_esc(doc.file_path)}" target="_blank" rel="noopener"
                      class="btn btn-secondary btn-sm" onclick="event.stopPropagation()">
                     ${isImg
                       ? '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#image"></use></svg> Bild öffnen'
                       : '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#file-text"></use></svg> PDF öffnen'}
                   </a>
-                  <button class="btn btn-ghost btn-xs text-danger"
+                  <button class="btn btn-ghost btn-xs" style="color:var(--c-danger)"
                           data-action="delete-hdoc" data-doc-id="${doc.id}"
                           onclick="event.stopPropagation()">
                     <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#trash"></use></svg>
@@ -2680,7 +2680,7 @@ window.Page_health = (() => {
               <select class="form-control" name="vet_id">
                 <option value="">– optional –</option>
                 ${aktivePraxen.map(p =>
-                  `<option value="${p.id}">${UI.escape(p.name)}${p.ort ? ' · ' + UI.escape(p.ort) : ''}</option>`
+                  `<option value="${p.id}">${_esc(p.name)}${p.ort ? ' · ' + _esc(p.ort) : ''}</option>`
                 ).join('')}
               </select>
             </div>` : ''}
@@ -2776,7 +2776,7 @@ window.Page_health = (() => {
       else if (res.saved_count !== undefined) UI.toast.info(`${res.saved_count} Bericht(e) in DB`, { duration: 8000 });
       UI.modal.open({
         title: `${UI.icon('star')} KI-Gesundheitsbericht`,
-        body: `<div style="white-space:pre-wrap;line-height:1.7;font-size:var(--text-sm)">${UI.escape(zusammenfassung)}</div>`,
+        body: `<div style="white-space:pre-wrap;line-height:1.7;font-size:var(--text-sm)">${_esc(zusammenfassung)}</div>`,
       });
       // Berichte-Liste nach Generierung frisch laden (Cache-Buster)
       _loadKiBerichte(_appState.activeDog.id, true);
@@ -2796,25 +2796,32 @@ window.Page_health = (() => {
   // ----------------------------------------------------------
   // HELPER
   // ----------------------------------------------------------
-function _showPoiKorrekturModal(osmId, poiName, currentOh) {
+  function _esc(str) {
+    if (!str) return '';
+    return String(str)
+      .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+  }
+
+  function _showPoiKorrekturModal(osmId, poiName, currentOh) {
     UI.modal.open({
       title: 'Öffnungszeiten korrigieren',
       body: `
         <p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin-bottom:var(--space-3)">
-          Korrektur für <strong>${UI.escape(poiName)}</strong>.<br>
+          Korrektur für <strong>${_esc(poiName)}</strong>.<br>
           Dein Vorschlag wird von einem Moderator geprüft und dann für alle übernommen.
         </p>
         <form id="poi-korrektur-form">
           <div class="form-group">
             <label class="form-label">Aktuelle Angabe</label>
-            <input class="form-control" type="text" value="${UI.escape(currentOh)}" disabled
-                   class="text-muted">
+            <input class="form-control" type="text" value="${_esc(currentOh)}" disabled
+                   style="color:var(--c-text-muted)">
           </div>
           <div class="form-group">
             <label class="form-label">Korrekte Öffnungszeiten *</label>
             <input class="form-control" type="text" name="new_value" required
                    placeholder="z.B. Mo–Fr 08:00–18:00 · Sa 09:00–13:00"
-                   value="${UI.escape(currentOh)}">
+                   value="${_esc(currentOh)}">
           </div>
         </form>
       `,
@@ -2865,7 +2872,7 @@ function _showPoiKorrekturModal(osmId, poiName, currentOh) {
                     display:flex;align-items:center;justify-content:space-between;flex-shrink:0">
           <div>
             <div style="font-weight:var(--weight-semibold);font-size:var(--text-base)"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#note-pencil"></use></svg> Notiz</div>
-            <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:2px">${UI.escape(parentLabel)}</div>
+            <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:2px">${_esc(parentLabel)}</div>
           </div>
           <button id="by-note-close" style="background:none;border:none;cursor:pointer;font-size:1.4rem;color:var(--c-text-muted);padding:4px 8px" aria-label="Schließen">×</button>
         </div>
@@ -2949,9 +2956,9 @@ function _showPoiKorrekturModal(osmId, poiName, currentOh) {
         </p>
         <div class="form-group">
           <textarea id="ki-tierarzt-symptom" class="form-control" rows="4"
-                    placeholder="${UI.escape(placeholder)}"></textarea>
+                    placeholder="${_esc(placeholder)}"></textarea>
         </div>
-        <div id="ki-tierarzt-result" class="hidden"></div>
+        <div id="ki-tierarzt-result" style="display:none"></div>
         <div style="margin-top:var(--space-3);padding:var(--space-3);
                     background:#fff3cd;border-radius:var(--radius-md);
                     font-size:var(--text-xs);color:#856404;
@@ -3011,7 +3018,7 @@ function _showPoiKorrekturModal(osmId, poiName, currentOh) {
             return;
           }
 
-          const antwortHtml = UI.escape(result.antwort)
+          const antwortHtml = _esc(result.antwort)
             .replace(/\n\n/g, '</p><p style="margin:var(--space-2) 0">')
             .replace(/\n/g, '<br>');
           const restHtml = result.limit - result.anfragen_heute > 0
@@ -3069,23 +3076,21 @@ function _showPoiKorrekturModal(osmId, poiName, currentOh) {
     const fmt = d => { try { const p = d.split('-'); return `${parseInt(p[2])}.${parseInt(p[1])}.${p[0]}`; } catch { return d; } };
 
     wrap.style.display = '';
-    wrap.classList.add('list-reminders-banner');
     wrap.innerHTML = items.slice(0, 3).map(r => {
       const overdue = r.ueberfaellig;
-      const modifier = overdue ? 'list-reminder-item--urgent'
-                     : r.delta_tage <= 3 ? 'list-reminder-item--warning'
-                     : '';
       const color   = overdue ? 'var(--c-danger,#ef4444)' : r.delta_tage <= 3 ? '#f59e0b' : 'var(--c-primary)';
+      const bg      = overdue ? 'rgba(239,68,68,0.08)' : r.delta_tage <= 3 ? 'rgba(245,158,11,0.08)' : 'var(--c-primary-subtle)';
       const label   = overdue ? `Überfällig seit ${Math.abs(r.delta_tage)} Tag${Math.abs(r.delta_tage)!==1?'en':''}` :
                       r.delta_tage === 0 ? 'Heute fällig' :
                       `in ${r.delta_tage} Tag${r.delta_tage!==1?'en':''}`;
       return `
-        <div class="list-reminder-item ${modifier}">
+        <div style="display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);
+                    background:${bg};border-radius:var(--radius-md);border-left:3px solid ${color}">
           <svg class="ph-icon" style="width:16px;height:16px;color:${color};flex-shrink:0" aria-hidden="true">
             <use href="/icons/phosphor.svg#bell-ringing"></use>
           </svg>
-          <div class="flex-1-min">
-            <span style="font-weight:600;font-size:var(--text-sm);color:var(--c-text)">${UI.escape(r.bezeichnung)}</span>
+          <div style="flex:1;min-width:0">
+            <span style="font-weight:600;font-size:var(--text-sm);color:var(--c-text)">${_esc(r.bezeichnung)}</span>
             <span style="font-size:var(--text-xs);color:var(--c-text-secondary);margin-left:var(--space-1)">${TYPE_LABEL[r.typ] || r.typ}</span>
           </div>
           <span style="font-size:var(--text-xs);font-weight:600;color:${color};white-space:nowrap">${label}</span>
@@ -3115,8 +3120,8 @@ function _showPoiKorrekturModal(osmId, poiName, currentOh) {
       <div class="card" style="padding:var(--space-4);margin-bottom:var(--space-3)" data-ins-id="${p.id}">
         <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-2)">
           <div>
-            <div style="font-weight:700;font-size:var(--text-base)">${UI.escape(p.anbieter)}</div>
-            ${p.police_nr ? `<div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:2px">Police: ${UI.escape(p.police_nr)}</div>` : ''}
+            <div style="font-weight:700;font-size:var(--text-base)">${_esc(p.anbieter)}</div>
+            ${p.police_nr ? `<div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:2px">Police: ${_esc(p.police_nr)}</div>` : ''}
           </div>
           <div style="display:flex;gap:var(--space-1)">
             <button class="btn btn-ghost btn-sm ins-edit-btn" data-id="${p.id}" style="padding:4px 8px">
@@ -3128,15 +3133,15 @@ function _showPoiKorrekturModal(osmId, poiName, currentOh) {
           </div>
         </div>
         <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);margin-top:var(--space-3);font-size:var(--text-sm)">
-          <div><span class="text-secondary">Jahresbeitrag</span><br><strong>${_fmtEur(p.jahresbeitrag)}</strong></div>
-          <div><span class="text-secondary">Läuft ab</span><br><strong>${_fmtDate(p.ablaufdatum)}</strong></div>
-          ${p.kontakt ? `<div style="grid-column:1/-1"><span class="text-secondary">Kontakt</span><br>${UI.escape(p.kontakt)}</div>` : ''}
-          ${p.notizen ? `<div style="grid-column:1/-1"><span class="text-secondary">Notizen</span><br>${UI.escape(p.notizen)}</div>` : ''}
+          <div><span style="color:var(--c-text-secondary)">Jahresbeitrag</span><br><strong>${_fmtEur(p.jahresbeitrag)}</strong></div>
+          <div><span style="color:var(--c-text-secondary)">Läuft ab</span><br><strong>${_fmtDate(p.ablaufdatum)}</strong></div>
+          ${p.kontakt ? `<div style="grid-column:1/-1"><span style="color:var(--c-text-secondary)">Kontakt</span><br>${_esc(p.kontakt)}</div>` : ''}
+          ${p.notizen ? `<div style="grid-column:1/-1"><span style="color:var(--c-text-secondary)">Notizen</span><br>${_esc(p.notizen)}</div>` : ''}
         </div>
       </div>`).join('') : `
       <div style="text-align:center;padding:var(--space-6);color:var(--c-text-muted)">
         <svg class="ph-icon" style="width:2.5rem;height:2.5rem;margin-bottom:var(--space-3);display:block;margin-inline:auto" aria-hidden="true"><use href="/icons/phosphor.svg#shield-check"></use></svg>
-        <div class="text-sm">Noch keine Versicherung eingetragen.</div>
+        <div style="font-size:var(--text-sm)">Noch keine Versicherung eingetragen.</div>
       </div>`;
 
     content.innerHTML = `<div style="padding:var(--space-4) 0">
@@ -3165,12 +3170,12 @@ function _showPoiKorrekturModal(osmId, poiName, currentOh) {
     const id = `ins-form-${Date.now()}`;
     const body = `<form id="${id}">
       <div class="by-form-group"><label class="by-label">Anbieter *</label>
-        <input type="text" name="anbieter" class="form-control by-input" value="${UI.escape(existing?.anbieter||'')}" required placeholder="z. B. HUK-Coburg">
+        <input type="text" name="anbieter" class="form-control by-input" value="${_esc(existing?.anbieter||'')}" required placeholder="z. B. HUK-Coburg">
       </div>
       <div class="by-form-group"><label class="by-label">Police-Nr.</label>
-        <input type="text" name="police_nr" class="form-control by-input" value="${UI.escape(existing?.police_nr||'')}" placeholder="optional">
+        <input type="text" name="police_nr" class="form-control by-input" value="${_esc(existing?.police_nr||'')}" placeholder="optional">
       </div>
-      <div class="grid-2">
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
         <div class="by-form-group"><label class="by-label">Jahresbeitrag (€)</label>
           <input type="number" name="jahresbeitrag" class="form-control by-input" value="${existing?.jahresbeitrag||''}" min="0" step="0.01" placeholder="z. B. 149.00">
         </div>
@@ -3179,10 +3184,10 @@ function _showPoiKorrekturModal(osmId, poiName, currentOh) {
         </div>
       </div>
       <div class="by-form-group"><label class="by-label">Kontakt / Telefon</label>
-        <input type="text" name="kontakt" class="form-control by-input" value="${UI.escape(existing?.kontakt||'')}" placeholder="optional">
+        <input type="text" name="kontakt" class="form-control by-input" value="${_esc(existing?.kontakt||'')}" placeholder="optional">
       </div>
       <div class="by-form-group"><label class="by-label">Notizen</label>
-        <textarea name="notizen" class="form-control by-input" rows="2">${UI.escape(existing?.notizen||'')}</textarea>
+        <textarea name="notizen" class="form-control by-input" rows="2">${_esc(existing?.notizen||'')}</textarea>
       </div>
     </form>`;
     const footer = `
@@ -3262,14 +3267,14 @@ function _showPoiKorrekturModal(osmId, poiName, currentOh) {
       return `
         <div class="card" style="padding:var(--space-3);margin-bottom:var(--space-2);display:flex;align-items:flex-start;gap:var(--space-3)">
           <div style="width:3px;border-radius:2px;background:${color};align-self:stretch;flex-shrink:0"></div>
-          <div class="flex-1-min">
+          <div style="flex:1;min-width:0">
             <div style="display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap">
-              <span style="font-weight:700;font-size:var(--text-sm);color:${color}">${UI.escape(katLabel)}</span>
-              ${trigLabel ? `<span style="font-size:var(--text-xs);background:var(--c-surface-2);padding:1px 6px;border-radius:100px;color:var(--c-text-secondary)">${UI.escape(trigLabel)}</span>` : ''}
+              <span style="font-weight:700;font-size:var(--text-sm);color:${color}">${_esc(katLabel)}</span>
+              ${trigLabel ? `<span style="font-size:var(--text-xs);background:var(--c-surface-2);padding:1px 6px;border-radius:100px;color:var(--c-text-secondary)">${_esc(trigLabel)}</span>` : ''}
               <span style="font-size:var(--text-xs);color:var(--c-text-muted);margin-left:auto">${fmtDate(e.datum)}${e.uhrzeit ? ' ' + e.uhrzeit : ''}</span>
             </div>
             <div style="display:flex;gap:3px;margin-top:4px">${dots}</div>
-            ${e.notiz ? `<div style="font-size:var(--text-xs);color:var(--c-text-secondary);margin-top:4px">${UI.escape(e.notiz)}</div>` : ''}
+            ${e.notiz ? `<div style="font-size:var(--text-xs);color:var(--c-text-secondary);margin-top:4px">${_esc(e.notiz)}</div>` : ''}
           </div>
           <button class="btn btn-ghost btn-sm beh-del-btn" data-id="${e.id}" style="padding:4px 6px;color:var(--c-danger);flex-shrink:0">
             <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#trash"></use></svg>
@@ -3278,7 +3283,7 @@ function _showPoiKorrekturModal(osmId, poiName, currentOh) {
     }).join('') : `
       <div style="text-align:center;padding:var(--space-6);color:var(--c-text-muted)">
         <svg class="ph-icon" style="width:2.5rem;height:2.5rem;margin-bottom:var(--space-3);display:block;margin-inline:auto" aria-hidden="true"><use href="/icons/phosphor.svg#brain"></use></svg>
-        <div class="text-sm">Noch keine Einträge. Protokolliere auffälliges Verhalten um Muster zu erkennen.</div>
+        <div style="font-size:var(--text-sm)">Noch keine Einträge. Protokolliere auffälliges Verhalten um Muster zu erkennen.</div>
       </div>`;
 
     content.innerHTML = `<div style="padding:var(--space-4) 0">
@@ -3304,7 +3309,7 @@ function _showPoiKorrekturModal(osmId, poiName, currentOh) {
     const today = new Date().toISOString().slice(0, 10);
     const nowTime = (() => { const d=new Date(); return `${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`; })();
     const body = `<form id="${id}">
-      <div class="grid-2">
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
         <div class="by-form-group"><label class="by-label">Datum</label>
           <input type="date" name="datum" class="form-control by-input" value="${today}" required>
         </div>
@@ -3319,7 +3324,7 @@ function _showPoiKorrekturModal(osmId, poiName, currentOh) {
         </select>
       </div>
       <div class="by-form-group"><label class="by-label">Intensität (1 = gering, 5 = stark)</label>
-        <div class="flex-gap-2">
+        <div style="display:flex;gap:var(--space-2)">
           ${[1,2,3,4,5].map(n => `<button type="button" class="beh-int-btn" data-val="${n}"
             style="flex:1;padding:10px;border-radius:8px;border:1.5px solid var(--c-border);
                    background:${n<=3?'var(--c-primary)':'var(--c-bg-card)'};
diff --git a/backend/static/js/pages/hilfe.js b/backend/static/js/pages/hilfe.js
index f6f4dde..bcee0cc 100644
--- a/backend/static/js/pages/hilfe.js
+++ b/backend/static/js/pages/hilfe.js
@@ -103,7 +103,7 @@ window.Page_hilfe = (() => {
           </p>
           <p style="font-size:var(--text-sm);color:var(--c-text-muted);margin:0">
             ${_search
-              ? `Zu "${UI.escape(_search)}" wurde nichts gefunden.`
+              ? `Zu "${_esc(_search)}" wurde nichts gefunden.`
               : 'Noch keine FAQ-Artikel vorhanden.'}
           </p>
         </div>
@@ -136,7 +136,7 @@ window.Page_hilfe = (() => {
                       color:var(--c-text-secondary);text-transform:uppercase;
                       letter-spacing:0.08em;padding:var(--space-1) 0 var(--space-2);
                       margin-bottom:var(--space-1)">
-            ${UI.escape(label)}
+            ${_esc(label)}
           </div>
           <div style="display:flex;flex-direction:column;gap:var(--space-1)">
       `;
@@ -148,12 +148,12 @@ window.Page_hilfe = (() => {
         // Highlight Suchtreffer in der Frage
         const frageHtml = _search
           ? _highlight(a.frage, _search)
-          : UI.escape(a.frage);
+          : _esc(a.frage);
 
         // Antwort: Zeilenumbrüche in <br> wandeln
         const antwortHtml = _search
           ? _highlight(a.antwort, _search).replace(/\n/g, '<br>')
-          : UI.escape(a.antwort).replace(/\n/g, '<br>');
+          : _esc(a.antwort).replace(/\n/g, '<br>');
 
         // Bei aktiver Suche: Antwort gleich aufgeklappt
         const openByDefault = !!_search;
@@ -169,7 +169,7 @@ window.Page_hilfe = (() => {
                            display:flex;align-items:flex-start;gap:var(--space-2);
                            font-size:var(--text-sm);font-weight:600;
                            color:var(--c-text);line-height:1.4">
-              <span class="flex-1">${frageHtml}</span>
+              <span style="flex:1">${frageHtml}</span>
               <svg id="${chevronId}" class="ph-icon" aria-hidden="true"
                    style="width:1rem;height:1rem;flex-shrink:0;margin-top:2px;
                           color:var(--c-text-muted);
@@ -222,12 +222,20 @@ window.Page_hilfe = (() => {
   }
 
   // ----------------------------------------------------------
+  function _esc(s) {
+    if (s == null) return '';
+    return String(s)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+  }
 
   function _highlight(text, term) {
     if (!term) return text;
     const safe = term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
     const re   = new RegExp(`(${safe})`, 'gi');
-    return UI.escape(text).replace(re,
+    return _esc(text).replace(re,
       '<mark style="background:var(--c-warning-bg,#fef3c7);color:inherit;border-radius:2px">$1</mark>'
     );
   }
diff --git a/backend/static/js/pages/impressum.js b/backend/static/js/pages/impressum.js
index 0f2c22e..fa4d585 100644
--- a/backend/static/js/pages/impressum.js
+++ b/backend/static/js/pages/impressum.js
@@ -26,12 +26,12 @@ window.Page_impressum = (() => {
                      color:var(--c-text);margin:0 0 var(--space-2)">Kontakt</h2>
           <p style="font-size:var(--text-sm);color:var(--c-text-secondary);line-height:1.7;margin:0 0 var(--space-4)">
             E-Mail: <a href="mailto:hallo@banyaro.app"
-                       class="text-primary">hallo@banyaro.app</a><br>
+                       style="color:var(--c-primary)">hallo@banyaro.app</a><br>
             Oder nutze das Formular — wir antworten in der Regel innerhalb von 24 Stunden.
           </p>
 
-          <form id="contact-form" class="flex-col-gap-3">
-            <div class="grid-2">
+          <form id="contact-form" style="display:flex;flex-direction:column;gap:var(--space-3)">
+            <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
               <div>
                 <label for="cf-name" style="display:block;font-size:var(--text-xs);font-weight:600;margin-bottom:4px;color:var(--c-text)">Name *</label>
                 <input id="cf-name" type="text" required maxlength="100"
diff --git a/backend/static/js/pages/jobs.js b/backend/static/js/pages/jobs.js
index 7a07034..875fe2c 100644
--- a/backend/static/js/pages/jobs.js
+++ b/backend/static/js/pages/jobs.js
@@ -7,6 +7,7 @@ window.Page_jobs = (() => {
   let _container = null;
   let _appState  = null;
 
+  const _esc = s => UI.escape(s ?? '');
   const _ph  = (name, size = 22) =>
     `<svg class="ph-icon" aria-hidden="true" style="width:${size}px;height:${size}px;flex-shrink:0;color:var(--c-primary)"><use href="/icons/phosphor.svg#${name}"></use></svg>`;
 
@@ -43,7 +44,7 @@ window.Page_jobs = (() => {
         </div>
 
         <!-- Stellenbeschreibung -->
-        <div class="card mb-4">
+        <div class="card" style="margin-bottom:var(--space-4)">
           <div style="padding:var(--space-5)">
             <h2 style="font-size:var(--text-lg);font-weight:700;margin:0 0 var(--space-4);color:var(--c-primary)">Die Stelle</h2>
             <div style="display:grid;gap:var(--space-3)">
@@ -75,7 +76,7 @@ window.Page_jobs = (() => {
         </div>
 
         <!-- Wen wir suchen -->
-        <div class="card mb-4">
+        <div class="card" style="margin-bottom:var(--space-4)">
           <div style="padding:var(--space-5)">
             <h2 style="font-size:var(--text-lg);font-weight:700;margin:0 0 var(--space-4);color:var(--c-primary)">Wen wir suchen</h2>
             <ul style="margin:0;padding-left:var(--space-5);display:grid;gap:var(--space-2);color:var(--c-text-secondary);font-size:var(--text-sm)">
@@ -120,7 +121,7 @@ window.Page_jobs = (() => {
     const s = statusMap[app.status] || statusMap.pending;
     return `
       <div class="card" style="padding:var(--space-5);text-align:center">
-        <div class="mb-3">
+        <div style="margin-bottom:var(--space-3)">
           <svg class="ph-icon" aria-hidden="true" style="width:48px;height:48px;color:${s.color}"><use href="/icons/phosphor.svg#${s.icon}"></use></svg>
         </div>
         <div style="font-weight:700;color:${s.color};font-size:var(--text-lg);margin-bottom:var(--space-2)">${s.text}</div>
@@ -129,7 +130,7 @@ window.Page_jobs = (() => {
         </div>
         ${app.admin_note ? `<div style="margin-top:var(--space-3);background:var(--c-surface-2);
           border-radius:var(--radius-md);padding:var(--space-3);font-size:var(--text-sm);
-          color:var(--c-text-secondary);text-align:left">${UI.escape(app.admin_note)}</div>` : ''}
+          color:var(--c-text-secondary);text-align:left">${_esc(app.admin_note)}</div>` : ''}
       </div>`;
   }
 
@@ -146,13 +147,13 @@ window.Page_jobs = (() => {
             <div class="form-group">
               <label class="form-label">Dein Name *</label>
               <input class="form-control" type="text" name="name"
-                     value="${u ? UI.escape(u.name) : ''}" placeholder="Vorname oder Nickname" required>
+                     value="${u ? _esc(u.name) : ''}" placeholder="Vorname oder Nickname" required>
             </div>
 
             <div class="form-group">
               <label class="form-label">E-Mail *</label>
               <input class="form-control" type="email" name="email"
-                     value="${u ? UI.escape(u.email || '') : ''}" placeholder="deine@email.de" required>
+                     value="${u ? _esc(u.email || '') : ''}" placeholder="deine@email.de" required>
             </div>
 
             <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-3)">
@@ -193,7 +194,7 @@ window.Page_jobs = (() => {
               <label class="form-label">Anhänge (optional)</label>
               <input class="form-control" type="file" name="files" id="jobs-files"
                      multiple accept=".pdf,.jpg,.jpeg,.png,.webp,.mp4,.mov"
-                     class="p-2">
+                     style="padding:var(--space-2)">
               <p style="margin:var(--space-1) 0 0;font-size:var(--text-xs);color:var(--c-text-muted)">
                 Beispiel-Posts, Portfolio, kurzes Video von dir und deinem Hund — max. 3 Dateien, je 10 MB.
                 PDF, Bild oder Video.
@@ -204,7 +205,7 @@ window.Page_jobs = (() => {
               padding:var(--space-3);font-size:var(--text-sm);color:var(--c-text-secondary);
               margin-bottom:var(--space-4)">
               💡 <b>Tipp:</b> Wenn du dich vorher
-              <a href="#" id="jobs-login-link" class="text-primary">anmeldest oder registrierst</a>,
+              <a href="#" id="jobs-login-link" style="color:var(--c-primary)">anmeldest oder registrierst</a>,
               bekommst du sofort den 14-tägigen Luna-Probezugang.
             </div>` : ''}
 
diff --git a/backend/static/js/pages/knigge.js b/backend/static/js/pages/knigge.js
index 0d1f3ce..3a6e895 100644
--- a/backend/static/js/pages/knigge.js
+++ b/backend/static/js/pages/knigge.js
@@ -135,11 +135,11 @@ window.Page_knigge = (() => {
     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>${UI.escape(b.titel)}</strong></span>
+          <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">${UI.escape(b.tipps)}</p>
+          <p style="color:var(--c-text);line-height:1.6">${_esc(b.tipps)}</p>
         </div>
       </div>
     `).join('');
@@ -173,16 +173,16 @@ window.Page_knigge = (() => {
   // ----------------------------------------------------------
   function _renderVoting() {
     const cards = SZENARIEN.map(s => `
-      <div class="card mb-4" id="sz-${s.id}">
+      <div class="card" style="margin-bottom:var(--space-4)" id="sz-${s.id}">
         <p style="font-weight:var(--weight-semibold);margin:0;padding:var(--space-5) var(--space-5) var(--space-3);line-height:1.5">
-          ${UI.escape(s.frage)}
+          ${_esc(s.frage)}
         </p>
         <div class="knigge-vote-options" id="opts-${s.id}" style="padding:0 var(--space-5) var(--space-5)">
           ${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">
-              ${UI.escape(a.text)}
+              ${_esc(a.text)}
             </button>
           `).join('')}
         </div>
@@ -260,12 +260,12 @@ window.Page_knigge = (() => {
         ? 'var(--c-success, #22c55e)'
         : (isU && !isR ? 'var(--c-danger, #ef4444)' : 'var(--c-border)');
       return `
-        <div class="mb-3">
+        <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') + ' ' : ''}${UI.escape(a.text)}${isR ? ' ' + UI.icon('check') : ''}
+              ${isU ? UI.icon('arrow-right') + ' ' : ''}${_esc(a.text)}${isR ? ' ' + UI.icon('check') : ''}
             </span>
-            <span class="text-secondary">${pct}% (${cnt})</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>
@@ -282,7 +282,7 @@ window.Page_knigge = (() => {
       <div style="margin-bottom:var(--space-4);padding:0 var(--space-5)">${bars}</div>
       <div style="background:var(--c-surface-2);border-radius:var(--radius-md);padding:var(--space-3) var(--space-5);font-size:var(--text-sm);line-height:1.5">
         ${badge}
-        <span class="text-secondary">${UI.escape(szenario.erklaerung)}</span>
+        <span style="color:var(--c-text-secondary)">${_esc(szenario.erklaerung)}</span>
       </div>
     `;
   }
@@ -300,8 +300,8 @@ window.Page_knigge = (() => {
         <textarea id="ki-situation-input" class="form-control"
                   rows="3"
                   placeholder="Beschreibe deine Situation…"
-                  class="mb-3"></textarea>
-        <button class="btn btn-primary" id="ki-rat-btn" class="w-full">
+                  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>
@@ -336,7 +336,7 @@ window.Page_knigge = (() => {
                       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>
-            ${UI.escape(data.rat)}
+            ${_esc(data.rat)}
           </div>
         `;
         result.style.display = 'block';
@@ -347,7 +347,7 @@ window.Page_knigge = (() => {
                       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.'
-              : UI.escape(err.message || 'Fehler beim KI-Abruf.')}
+              : _esc(err.message || 'Fehler beim KI-Abruf.')}
           </div>
         `;
         result.style.display = 'block';
@@ -400,7 +400,16 @@ window.Page_knigge = (() => {
   // ----------------------------------------------------------
   // 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 };
diff --git a/backend/static/js/pages/laeufi.js b/backend/static/js/pages/laeufi.js
index 0147376..e0fdb68 100644
--- a/backend/static/js/pages/laeufi.js
+++ b/backend/static/js/pages/laeufi.js
@@ -14,7 +14,7 @@ window.Page_laeufi = (() => {
     _appState  = appState;
     if (!appState.user || !['breeder','admin'].includes(appState.user.rolle)) {
       _container.innerHTML = `<div style="text-align:center;padding:var(--space-10)">
-        <p class="text-secondary">Nur für verifizierte Züchter.</p></div>`;
+        <p style="color:var(--c-text-secondary)">Nur für verifizierte Züchter.</p></div>`;
       return;
     }
     API.breeder.status().then(s => {
@@ -53,7 +53,7 @@ window.Page_laeufi = (() => {
                   padding:var(--space-3) var(--space-4);
                   display:flex;align-items:center;gap:var(--space-3)">
         ${logoHtml}
-        <div class="flex-1-min">
+        <div style="flex:1;min-width:0">
           <h2 style="margin:0 0 2px;font-size:var(--text-lg);font-weight:700;
                      color:var(--c-text);white-space:nowrap;overflow:hidden;
                      text-overflow:ellipsis;line-height:1.2">${UI.escape(zwinger)}</h2>
@@ -61,7 +61,7 @@ window.Page_laeufi = (() => {
             <svg style="width:11px;height:11px;color:var(--c-primary);flex-shrink:0" viewBox="0 0 256 256">
               <use href="/icons/phosphor.svg#lock-key"></use>
             </svg>
-            <span class="text-xs-secondary">Privater Bereich · Nur du siehst das</span>
+            <span style="font-size:var(--text-xs);color:var(--c-text-secondary)">Privater Bereich · Nur du siehst das</span>
           </div>
         </div>
       </div>`;
@@ -89,7 +89,7 @@ window.Page_laeufi = (() => {
       _renderHundeList();
     } catch (err) {
       document.getElementById('laeufi-list').innerHTML =
-        `<p class="text-danger">${UI.escape(err.message || 'Fehler')}</p>`;
+        `<p style="color:var(--c-danger)">${UI.escape(err.message || 'Fehler')}</p>`;
     }
   }
 
@@ -129,22 +129,22 @@ window.Page_laeufi = (() => {
         <div id="laeufi-toggle-${h.id}"
              style="padding:var(--space-4);display:flex;align-items:center;gap:var(--space-3);
                     cursor:pointer;user-select:none">
-          <div class="flex-1-min">
+          <div style="flex:1;min-width:0">
             <div style="display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap">
               <span style="font-size:var(--text-base);font-weight:700">${UI.escape(h.name)}</span>
-              ${h.rufname ? `<span class="text-sm-muted">"${UI.escape(h.rufname)}"</span>` : ''}
-              ${alter ? `<span class="text-xs-muted">${alter}</span>` : ''}
+              ${h.rufname ? `<span style="color:var(--c-text-muted);font-size:var(--text-sm)">"${UI.escape(h.rufname)}"</span>` : ''}
+              ${alter ? `<span style="font-size:var(--text-xs);color:var(--c-text-muted)">${alter}</span>` : ''}
             </div>
             ${h.rasse_text || h.farbe ? `<div style="font-size:var(--text-xs);color:var(--c-text-secondary);margin-top:2px">
               ${[h.rasse_text, h.farbe].filter(Boolean).map(s => UI.escape(s)).join(' · ')}
             </div>` : ''}
           </div>
-          <span class="text-muted">${UI.icon('caret-down')}</span>
+          <span style="color:var(--c-text-muted)">${UI.icon('caret-down')}</span>
         </div>
         <div id="laeufi-detail-${h.id}" style="display:none;border-top:1px solid var(--c-border)">
           <div id="laeufi-content-${h.id}"
-               class="p-4">
-            <p class="text-sm-muted">Lädt…</p>
+               style="padding:var(--space-4)">
+            <p style="color:var(--c-text-muted);font-size:var(--text-sm)">Lädt…</p>
           </div>
         </div>
       </div>`;
@@ -177,7 +177,7 @@ window.Page_laeufi = (() => {
       ]);
       _renderHundContent(el, hundId, laeufiList, deckList);
     } catch (err) {
-      el.innerHTML = `<p class="text-danger">${UI.escape(err.message || 'Fehler')}</p>`;
+      el.innerHTML = `<p style="color:var(--c-danger)">${UI.escape(err.message || 'Fehler')}</p>`;
     }
   }
 
@@ -270,11 +270,11 @@ window.Page_laeufi = (() => {
     return list.map(l => `
       <div style="background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-md);
                   padding:var(--space-3);margin-bottom:var(--space-2);display:flex;gap:var(--space-3);align-items:flex-start">
-        <div class="flex-1-min">
+        <div style="flex:1;min-width:0">
           <div style="display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap">
             <span style="font-weight:600;font-size:var(--text-sm)">${_fmtDate(l.beginn)}</span>
-            ${l.ende ? `<span class="text-xs-muted">→ ${_fmtDate(l.ende)}</span>
-              <span class="text-xs-muted">${_daysDiff(l.beginn, l.ende)} Tage</span>` : ''}
+            ${l.ende ? `<span style="font-size:var(--text-xs);color:var(--c-text-muted)">→ ${_fmtDate(l.ende)}</span>
+              <span style="font-size:var(--text-xs);color:var(--c-text-muted)">${_daysDiff(l.beginn, l.ende)} Tage</span>` : ''}
           </div>
           ${l.notiz ? `<p style="font-size:var(--text-xs);color:var(--c-text-secondary);margin:var(--space-1) 0 0;font-style:italic">${UI.escape(l.notiz)}</p>` : ''}
         </div>
@@ -286,7 +286,7 @@ window.Page_laeufi = (() => {
             ${UI.icon('pencil-simple')}
           </button>
           <button class="btn btn-ghost btn-xs laeufi-delete-btn" data-id="${l.id}"
-                  title="Löschen" class="text-danger">
+                  title="Löschen" style="color:var(--c-danger)">
             ${UI.icon('trash')}
           </button>
         </div>
@@ -314,7 +314,7 @@ window.Page_laeufi = (() => {
                     margin-bottom:var(--space-3);overflow:hidden">
           <!-- Deck-Header -->
           <div style="padding:var(--space-3);display:flex;gap:var(--space-3);align-items:flex-start">
-            <div class="flex-1-min">
+            <div style="flex:1;min-width:0">
               <div style="display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-1)">
                 <span style="font-weight:700;font-size:var(--text-sm)">${UI.icon('heart')} Deckung ${_fmtDate(d.deckdatum)}</span>
                 <span style="background:${tc.color}1a;color:${tc.color};border:1px solid ${tc.color}30;
@@ -335,7 +335,7 @@ window.Page_laeufi = (() => {
             </div>
             <div style="display:flex;gap:var(--space-1);flex-shrink:0">
               <button class="btn btn-ghost btn-xs deck-edit-btn" data-id="${d.id}" title="Bearbeiten">${UI.icon('pencil-simple')}</button>
-              <button class="btn btn-ghost btn-xs deck-delete-btn" data-id="${d.id}" title="Löschen" class="text-danger">${UI.icon('trash')}</button>
+              <button class="btn btn-ghost btn-xs deck-delete-btn" data-id="${d.id}" title="Löschen" style="color:var(--c-danger)">${UI.icon('trash')}</button>
             </div>
           </div>
           <!-- Meilensteine -->
@@ -358,7 +358,7 @@ window.Page_laeufi = (() => {
                            color:${m.vorbei ? 'white' : 'var(--c-text-muted)'};font-size:9px">
                 ${m.vorbei ? '✓' : m.tag}
               </span>
-              <span class="text-secondary">${_fmtDate(m.datum)}</span>
+              <span style="color:var(--c-text-secondary)">${_fmtDate(m.datum)}</span>
               <span style="color:${m.vorbei ? 'var(--c-text-muted)' : 'var(--c-text)'};font-weight:${m.vorbei ? '400' : '600'}">
                 ${UI.escape(m.label)}
               </span>
@@ -377,8 +377,8 @@ window.Page_laeufi = (() => {
     UI.modal.open({
       title: isEdit ? 'Läufigkeit bearbeiten' : 'Läufigkeit eintragen',
       body: `
-        <form id="laeufi-form" class="flex-col-gap-3">
-          <div class="grid-2">
+        <form id="laeufi-form" style="display:flex;flex-direction:column;gap:var(--space-3)">
+          <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
             <div class="form-group">
               <label class="form-label">Beginn *</label>
               <input class="form-control" type="date" name="beginn" required value="${v.beginn || today}">
@@ -421,8 +421,8 @@ window.Page_laeufi = (() => {
     UI.modal.open({
       title: isEdit ? 'Deckung bearbeiten' : 'Deckung eintragen',
       body: `
-        <form id="deck-form" class="flex-col-gap-3">
-          <div class="grid-2">
+        <form id="deck-form" style="display:flex;flex-direction:column;gap:var(--space-3)">
+          <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
             <div class="form-group">
               <label class="form-label">Deckdatum *</label>
               <input class="form-control" type="date" name="deckdatum" required value="${v.deckdatum || today}">
@@ -435,7 +435,7 @@ window.Page_laeufi = (() => {
               </select>
             </div>
           </div>
-          <div class="grid-2">
+          <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
             <div class="form-group">
               <label class="form-label">Rüde</label>
               <input class="form-control" name="ruede_name" placeholder="Name des Deckrüden"
@@ -451,7 +451,7 @@ window.Page_laeufi = (() => {
               </select>
             </div>
           </div>
-          <div class="grid-2">
+          <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
             <div class="form-group">
               <label class="form-label">Trächtigkeitsstatus</label>
               <select class="form-control" name="traechtig">
@@ -503,7 +503,7 @@ window.Page_laeufi = (() => {
   async function _showProgModal(hundId, laeufi) {
     UI.modal.open({
       title: `Progesterontests — ${_fmtDate(laeufi.beginn)}`,
-      body: `<div id="prog-modal-content"><p class="text-muted">Lädt…</p></div>`,
+      body: `<div id="prog-modal-content"><p style="color:var(--c-text-muted)">Lädt…</p></div>`,
       footer: `
         <button class="btn btn-secondary" onclick="UI.modal.close()">Schließen</button>
         <button class="btn btn-primary" id="prog-add-btn">${UI.icon('plus')} Test eintragen</button>`,
@@ -535,7 +535,7 @@ window.Page_laeufi = (() => {
         <tbody>
           ${tests.map(t => `
             <tr style="border-top:1px solid var(--c-border)">
-              <td class="p-2">${_fmtDate(t.datum)}</td>
+              <td style="padding:var(--space-2)">${_fmtDate(t.datum)}</td>
               <td style="text-align:right;padding:var(--space-2);font-weight:600">
                 ${t.wert != null ? `${t.wert} ${UI.escape(t.einheit)}` : '—'}
                 ${t.wert != null ? `<span style="font-size:10px;margin-left:4px;color:var(--c-text-muted)">${_progEinschaetzung(t.wert, t.einheit)}</span>` : ''}
@@ -543,7 +543,7 @@ window.Page_laeufi = (() => {
               <td style="padding:var(--space-2);color:var(--c-text-secondary)">${t.labor ? UI.escape(t.labor) : '—'}</td>
               <td style="padding:var(--space-2);text-align:right">
                 <button class="btn btn-ghost btn-xs prog-delete-btn" data-id="${t.id}"
-                        class="text-danger">${UI.icon('trash')}</button>
+                        style="color:var(--c-danger)">${UI.icon('trash')}</button>
               </td>
             </tr>`).join('')}
         </tbody>
@@ -572,8 +572,8 @@ window.Page_laeufi = (() => {
     UI.modal.open({
       title: 'Progesterontest eintragen',
       body: `
-        <form id="prog-form" class="flex-col-gap-3">
-          <div class="grid-2">
+        <form id="prog-form" style="display:flex;flex-direction:column;gap:var(--space-3)">
+          <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
             <div class="form-group">
               <label class="form-label">Datum *</label>
               <input class="form-control" type="date" name="datum" required value="${today}">
@@ -586,7 +586,7 @@ window.Page_laeufi = (() => {
               </select>
             </div>
           </div>
-          <div class="grid-2">
+          <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
             <div class="form-group">
               <label class="form-label">Wert</label>
               <input class="form-control" type="number" step="0.01" name="wert" placeholder="z.B. 8.5">
diff --git a/backend/static/js/pages/litters.js b/backend/static/js/pages/litters.js
index 6ef1748..f6f1883 100644
--- a/backend/static/js/pages/litters.js
+++ b/backend/static/js/pages/litters.js
@@ -19,11 +19,15 @@ window.Page_litters = (() => {
     return `
       <div style="text-align:center;padding:var(--space-10) var(--space-4)">
         <div style="font-size:3rem;margin-bottom:var(--space-3)">${UI.icon(icon)}</div>
-        <h3 style="margin:0 0 var(--space-2)">${UI.escape(title)}</h3>
-        <p style="color:var(--c-text-secondary);margin:0">${UI.escape(text)}</p>
+        <h3 style="margin:0 0 var(--space-2)">${_esc(title)}</h3>
+        <p style="color:var(--c-text-secondary);margin:0">${_esc(text)}</p>
       </div>`;
   }
 
+  function _esc(s) {
+    return UI.escape ? UI.escape(s || '') : (s || '').replace(/[&<>"']/g, c =>
+      ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+  }
 
   function _statusBadge(status) {
     const map = {
@@ -33,7 +37,7 @@ window.Page_litters = (() => {
       abgeschlossen: { label: 'Abgeschlossen',   cls: 'badge-muted'   },
     };
     const s = map[status] || { label: status, cls: 'badge-muted' };
-    return `<span class="badge ${s.cls}">${UI.escape(s.label)}</span>`;
+    return `<span class="badge ${s.cls}">${_esc(s.label)}</span>`;
   }
 
   function _fmtDate(iso) {
@@ -55,7 +59,7 @@ window.Page_litters = (() => {
       abgegeben:  { label: 'Abgegeben',  cls: 'badge-muted'   },
     };
     const s = map[status] || { label: status, cls: 'badge-muted' };
-    return `<span class="badge badge-sm ${s.cls}">${UI.escape(s.label)}</span>`;
+    return `<span class="badge badge-sm ${s.cls}">${_esc(s.label)}</span>`;
   }
 
   // ----------------------------------------------------------
@@ -97,7 +101,7 @@ window.Page_litters = (() => {
     const zwinger = _breederInfo?.zwingername || 'Mein Zwinger';
     const logoUrl = _breederInfo?.logo_url   || null;
     const logoHtml = logoUrl
-      ? `<img src="${UI.escape(logoUrl)}" alt="Logo"
+      ? `<img src="${_esc(logoUrl)}" alt="Logo"
               style="width:48px;height:48px;border-radius:50%;object-fit:cover;
                      border:2px solid rgba(196,132,58,.5);flex-shrink:0"
               onerror="this.style.display='none'">`
@@ -114,15 +118,15 @@ window.Page_litters = (() => {
                   padding:var(--space-3) var(--space-4);
                   display:flex;align-items:center;gap:var(--space-3)">
         ${logoHtml}
-        <div class="flex-1-min">
+        <div style="flex:1;min-width:0">
           <h2 style="margin:0 0 2px;font-size:var(--text-lg);font-weight:700;
                      color:var(--c-text);white-space:nowrap;overflow:hidden;
-                     text-overflow:ellipsis;line-height:1.2">${UI.escape(zwinger)}</h2>
+                     text-overflow:ellipsis;line-height:1.2">${_esc(zwinger)}</h2>
           <div style="display:flex;align-items:center;gap:var(--space-2)">
             <svg style="width:11px;height:11px;color:var(--c-primary);flex-shrink:0" viewBox="0 0 256 256">
               <use href="/icons/phosphor.svg#lock-key"></use>
             </svg>
-            <span class="text-xs-secondary">Privater Bereich · Nur du siehst das</span>
+            <span style="font-size:var(--text-xs);color:var(--c-text-secondary)">Privater Bereich · Nur du siehst das</span>
           </div>
         </div>
       </div>`;
@@ -228,7 +232,7 @@ window.Page_litters = (() => {
       el.innerHTML = `
         <div style="text-align:center;padding:var(--space-8) var(--space-4);
                     border:1px dashed var(--c-border);border-radius:var(--radius-lg)">
-          <p class="text-muted">Keine Würfe für diesen Filter.</p>
+          <p style="color:var(--c-text-muted)">Keine Würfe für diesen Filter.</p>
         </div>`;
       return;
     }
@@ -244,8 +248,8 @@ window.Page_litters = (() => {
       el.innerHTML = `
         <div style="text-align:center;padding:var(--space-10) var(--space-4)">
           <div style="font-size:3rem;margin-bottom:var(--space-3)">${UI.icon('dog')}</div>
-          <p class="text-secondary">Noch keine Würfe angelegt.</p>
-          <button class="btn btn-primary mt-4" id="litters-first-btn">
+          <p style="color:var(--c-text-secondary)">Noch keine Würfe angelegt.</p>
+          <button class="btn btn-primary" style="margin-top:var(--space-4)" id="litters-first-btn">
             ${UI.icon('plus')} Ersten Wurf anlegen
           </button>
         </div>`;
@@ -311,7 +315,7 @@ window.Page_litters = (() => {
   function _litterCardHTML(l) {
     const verfuegbar  = l.welpen_verfuegbar != null ? l.welpen_verfuegbar : '?';
     const gesamt      = l.welpen_gesamt     != null ? l.welpen_gesamt     : '?';
-    const elternLabel = [l.vater_name, l.mutter_name].filter(Boolean).map(n => UI.escape(n)).join(' × ') || '—';
+    const elternLabel = [l.vater_name, l.mutter_name].filter(Boolean).map(n => _esc(n)).join(' × ') || '—';
 
     // Datum + Countdown
     let datumChip = '';
@@ -321,10 +325,10 @@ window.Page_litters = (() => {
       const label = l.geburt_datum ? `Geburt ${_fmtDate(l.geburt_datum)}` : `Erwartet ${_fmtDate(l.erwartetes_datum)}`;
       let countdownHtml = '';
       if (days !== null && !l.geburt_datum) {
-        const c = days < 0 ? `<span class="text-danger">überfällig</span>`
-                : days === 0 ? `<span class="text-success">heute!</span>`
+        const c = days < 0 ? `<span style="color:var(--c-danger)">überfällig</span>`
+                : days === 0 ? `<span style="color:var(--c-success)">heute!</span>`
                 : days <= 7  ? `<span style="color:var(--c-warning,#f59e0b)">${days}d</span>`
-                : `<span class="text-muted">${days}d</span>`;
+                : `<span style="color:var(--c-text-muted)">${days}d</span>`;
         countdownHtml = ` · ${c}`;
       }
       datumChip = `<span style="display:inline-flex;align-items:center;gap:4px;font-size:var(--text-xs);color:var(--c-text-secondary)">${UI.icon('calendar-dots')} ${label}${countdownHtml}</span>`;
@@ -337,7 +341,7 @@ window.Page_litters = (() => {
     const welpenChip = `<span style="display:inline-flex;align-items:center;gap:3px;font-size:var(--text-xs);color:var(--c-text-secondary)">${UI.icon('dog')} ${verfuegbar}/${gesamt} verfügbar</span>`;
 
     const preisChip = l.preis_spanne
-      ? `<span style="display:inline-flex;align-items:center;gap:3px;font-size:var(--text-xs);color:var(--c-text-secondary)">${UI.icon('currency-eur')} ${UI.escape(l.preis_spanne)}</span>`
+      ? `<span style="display:inline-flex;align-items:center;gap:3px;font-size:var(--text-xs);color:var(--c-text-secondary)">${UI.icon('currency-eur')} ${_esc(l.preis_spanne)}</span>`
       : '';
 
     return `
@@ -351,11 +355,11 @@ window.Page_litters = (() => {
             <div style="min-width:0">
               ${(l.wurf_rang || l.wurf_name) ? `
               <div style="display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-1)">
-                ${l.wurf_rang ? `<span style="background:var(--c-primary);color:white;border-radius:999px;padding:1px 10px;font-size:var(--text-xs);font-weight:700">${UI.escape(l.wurf_rang)}-Wurf</span>` : ''}
-                ${l.wurf_name ? `<span style="font-size:var(--text-base);font-weight:700;color:var(--c-text)">${UI.escape(l.wurf_name)}</span>` : ''}
+                ${l.wurf_rang ? `<span style="background:var(--c-primary);color:white;border-radius:999px;padding:1px 10px;font-size:var(--text-xs);font-weight:700">${_esc(l.wurf_rang)}-Wurf</span>` : ''}
+                ${l.wurf_name ? `<span style="font-size:var(--text-base);font-weight:700;color:var(--c-text)">${_esc(l.wurf_name)}</span>` : ''}
               </div>` : ''}
               <div style="display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-2)">
-                <span class="text-sm-secondary">${elternLabel}</span>
+                <span style="font-size:var(--text-sm);color:var(--c-text-secondary)">${elternLabel}</span>
                 ${_statusBadge(l.status)}
                 ${sichtbarChip}
               </div>
@@ -386,21 +390,21 @@ window.Page_litters = (() => {
                 ${UI.icon('pencil-simple')}
               </button>
               <button class="btn btn-ghost btn-sm litters-delete-btn" data-id="${l.id}" title="Löschen"
-                      class="text-danger">
+                      style="color:var(--c-danger)">
                 ${UI.icon('trash')}
               </button>
             </div>
           </div>
-          ${l.beschreibung ? `<p style="margin-top:var(--space-2);font-size:var(--text-sm);color:var(--c-text-secondary);line-height:1.5">${UI.escape(l.beschreibung)}</p>` : ''}
+          ${l.beschreibung ? `<p style="margin-top:var(--space-2);font-size:var(--text-sm);color:var(--c-text-secondary);line-height:1.5">${_esc(l.beschreibung)}</p>` : ''}
         </div>
 
         <!-- Welpen-Bereich -->
         <div id="puppies-wrap-${l.id}" style="display:none;padding:var(--space-3) var(--space-4)">
           <div id="puppies-inner-${l.id}">
-            <p class="text-sm-muted">Lädt…</p>
+            <p style="color:var(--c-text-muted);font-size:var(--text-sm)">Lädt…</p>
           </div>
           <button class="btn btn-secondary btn-sm litters-add-puppy-btn" data-id="${l.id}"
-                  class="mt-3">
+                  style="margin-top:var(--space-3)">
             ${UI.icon('plus')} Welpen hinzufügen
           </button>
         </div>
@@ -408,10 +412,10 @@ window.Page_litters = (() => {
         <!-- Wartelisten-Bereich -->
         <div id="waitlist-wrap-${l.id}" style="display:none;padding:var(--space-3) var(--space-4)">
           <div id="waitlist-inner-${l.id}">
-            <p class="text-sm-muted">Lädt…</p>
+            <p style="color:var(--c-text-muted);font-size:var(--text-sm)">Lädt…</p>
           </div>
           <button class="btn btn-secondary btn-sm litters-add-waitlist-btn" data-id="${l.id}"
-                  class="mt-3">
+                  style="margin-top:var(--space-3)">
             ${UI.icon('plus')} Interessent eintragen
           </button>
         </div>
@@ -451,13 +455,13 @@ window.Page_litters = (() => {
       const puppies = await API.litters.puppies(litterId);
       _renderPuppies(inner, litterId, puppies);
     } catch (err) {
-      inner.innerHTML = `<p style="color:var(--c-danger);font-size:var(--text-sm)">${UI.escape(err.message || 'Fehler beim Laden.')}</p>`;
+      inner.innerHTML = `<p style="color:var(--c-danger);font-size:var(--text-sm)">${_esc(err.message || 'Fehler beim Laden.')}</p>`;
     }
   }
 
   function _renderPuppies(container, litterId, puppies) {
     if (!puppies.length) {
-      container.innerHTML = `<p class="text-sm-muted">Noch keine Welpen eingetragen.</p>`;
+      container.innerHTML = `<p style="color:var(--c-text-muted);font-size:var(--text-sm)">Noch keine Welpen eingetragen.</p>`;
       return;
     }
 
@@ -465,10 +469,10 @@ window.Page_litters = (() => {
       <div class="litters-puppy-row" data-puppy-id="${p.id}">
         <div class="litters-puppy-info">
           ${_genderIcon(p.geschlecht)}
-          <span class="litters-puppy-name">${p.name ? UI.escape(p.name) : '<em class="text-muted">Unbenannt</em>'}</span>
-          ${p.farbe ? `<span style="color:var(--c-text-secondary);font-size:var(--text-xs)">${UI.escape(p.farbe)}</span>` : ''}
+          <span class="litters-puppy-name">${p.name ? _esc(p.name) : '<em style="color:var(--c-text-muted)">Unbenannt</em>'}</span>
+          ${p.farbe ? `<span style="color:var(--c-text-secondary);font-size:var(--text-xs)">${_esc(p.farbe)}</span>` : ''}
           ${_puppyStatusBadge(p.status)}
-          <span class="litters-puppy-last-weight" id="puppy-last-weight-${p.id}" class="text-xs-secondary"></span>
+          <span class="litters-puppy-last-weight" id="puppy-last-weight-${p.id}" style="font-size:var(--text-xs);color:var(--c-text-secondary)"></span>
         </div>
         <div class="litters-puppy-actions">
           <button class="btn btn-ghost btn-xs litters-puppy-photo-btn" data-litter-id="${litterId}" data-puppy-id="${p.id}"
@@ -538,16 +542,16 @@ window.Page_litters = (() => {
     const puppyLabel = puppy.name || 'Welpe';
 
     const body = `
-      <div id="weight-history" class="mb-3">
-        <p class="text-sm-muted">Lädt…</p>
+      <div id="weight-history" style="margin-bottom:var(--space-3)">
+        <p style="color:var(--c-text-muted);font-size:var(--text-sm)">Lädt…</p>
       </div>
       <hr style="margin:var(--space-3) 0;border:none;border-top:1px solid var(--c-border)">
       <form id="weight-form" style="display:flex;gap:var(--space-2);align-items:flex-end">
-        <div class="flex-1">
+        <div style="flex:1">
           <label style="display:block;font-size:var(--text-xs);color:var(--c-text-secondary);margin-bottom:var(--space-1)">Gewicht (g)</label>
           <input class="form-control" name="gewicht_g" type="number" min="1" max="99999" step="1" required placeholder="z. B. 420">
         </div>
-        <div class="flex-1">
+        <div style="flex:1">
           <label style="display:block;font-size:var(--text-xs);color:var(--c-text-secondary);margin-bottom:var(--space-1)">Datum</label>
           <input class="form-control" name="gemessen_am" type="date" required value="${today}">
         </div>
@@ -561,7 +565,7 @@ window.Page_litters = (() => {
     `;
 
     UI.modal.open({
-      title: `${UI.icon('scales')} Gewichtsverlauf — ${UI.escape(puppyLabel)}`,
+      title: `${UI.icon('scales')} Gewichtsverlauf — ${_esc(puppyLabel)}`,
       body,
       footer,
     });
@@ -596,7 +600,7 @@ window.Page_litters = (() => {
     try {
       const weights = await API.get(`/litters/puppies/${puppyId}/weights`);
       if (!weights || !weights.length) {
-        el.innerHTML = `<p class="text-sm-muted">Noch keine Messungen eingetragen.</p>`;
+        el.innerHTML = `<p style="color:var(--c-text-muted);font-size:var(--text-sm)">Noch keine Messungen eingetragen.</p>`;
         return;
       }
 
@@ -626,22 +630,22 @@ window.Page_litters = (() => {
       el.innerHTML = `
         <!-- Stats-Zeile -->
         <div style="display:flex;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-3)">
-          <div class="text-center">
-            <div class="text-xs-muted">Aktuell</div>
+          <div style="text-align:center">
+            <div style="font-size:var(--text-xs);color:var(--c-text-muted)">Aktuell</div>
             <div style="font-size:var(--text-base);font-weight:700;color:var(--c-primary)">${last} g</div>
           </div>
-          <div class="text-center">
-            <div class="text-xs-muted">Zunahme</div>
+          <div style="text-align:center">
+            <div style="font-size:var(--text-xs);color:var(--c-text-muted)">Zunahme</div>
             <div style="font-size:var(--text-base);font-weight:700;color:${gain >= 0 ? 'var(--c-success)' : 'var(--c-danger)'}">
               ${gain >= 0 ? '+' : ''}${gain} g
             </div>
           </div>
-          <div class="text-center">
-            <div class="text-xs-muted">Ø tägl.</div>
+          <div style="text-align:center">
+            <div style="font-size:var(--text-xs);color:var(--c-text-muted)">Ø tägl.</div>
             <div style="font-size:var(--text-base);font-weight:700;color:var(--c-text)">${dailyGain} g</div>
           </div>
-          <div class="text-center">
-            <div class="text-xs-muted">Messungen</div>
+          <div style="text-align:center">
+            <div style="font-size:var(--text-xs);color:var(--c-text-muted)">Messungen</div>
             <div style="font-size:var(--text-base);font-weight:700;color:var(--c-text)">${weights.length}</div>
           </div>
         </div>
@@ -691,7 +695,7 @@ window.Page_litters = (() => {
           </tbody>
         </table>`;
     } catch (err) {
-      el.innerHTML = `<p style="color:var(--c-danger);font-size:var(--text-sm)">${UI.escape(err.message || 'Fehler beim Laden.')}</p>`;
+      el.innerHTML = `<p style="color:var(--c-danger);font-size:var(--text-sm)">${_esc(err.message || 'Fehler beim Laden.')}</p>`;
     }
   }
 
@@ -733,7 +737,7 @@ window.Page_litters = (() => {
         btn.innerHTML = `${UI.icon('list-bullets')} Warteliste${active ? ` <span style="background:var(--c-primary);color:white;border-radius:999px;padding:0 6px;font-size:10px;font-weight:700">${active}</span>` : ''}`;
       }
     } catch (err) {
-      inner.innerHTML = `<p style="color:var(--c-danger);font-size:var(--text-sm)">${UI.escape(err.message || 'Fehler.')}</p>`;
+      inner.innerHTML = `<p style="color:var(--c-danger);font-size:var(--text-sm)">${_esc(err.message || 'Fehler.')}</p>`;
     }
   }
 
@@ -760,34 +764,34 @@ window.Page_litters = (() => {
         <div style="text-align:center;padding:var(--space-6) var(--space-4);border:1px dashed var(--c-border);border-radius:var(--radius-md)">
           <div style="font-size:2rem;margin-bottom:var(--space-2)">${UI.icon('users')}</div>
           <p style="font-weight:600;font-size:var(--text-sm);color:var(--c-text);margin-bottom:var(--space-1)">Noch keine Interessenten</p>
-          <p class="text-xs-muted">Trage Anfragen ein — mit Wunsch-Geschlecht, Kontaktdaten und Status.</p>
+          <p style="font-size:var(--text-xs);color:var(--c-text-muted)">Trage Anfragen ein — mit Wunsch-Geschlecht, Kontaktdaten und Status.</p>
         </div>`;
       return;
     }
 
     container.innerHTML = header + `
-      <div class="flex-col-gap-2">
+      <div style="display:flex;flex-direction:column;gap:var(--space-2)">
         ${entries.map((e, i) => `
           <div style="background:var(--c-bg-secondary);border-radius:var(--radius-md);padding:var(--space-3) var(--space-3);display:flex;gap:var(--space-3);align-items:flex-start" data-entry-id="${e.id}">
             <div style="background:var(--c-primary);color:white;border-radius:50%;width:1.6rem;height:1.6rem;display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:700;flex-shrink:0;margin-top:2px">${i + 1}</div>
-            <div class="flex-1-min">
+            <div style="flex:1;min-width:0">
               <div style="display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-1)">
-                <span style="font-weight:600;font-size:var(--text-sm)">${UI.escape(e.name)}</span>
+                <span style="font-weight:600;font-size:var(--text-sm)">${_esc(e.name)}</span>
                 ${_wlStatusBadge(e.status)}
-                ${e.wunsch_geschlecht && e.wunsch_geschlecht !== 'egal' ? `<span class="text-xs-secondary">${e.wunsch_geschlecht === 'maennlich' ? '♂ Rüde' : '♀ Hündin'}</span>` : ''}
-                ${e.wunsch_farbe ? `<span class="text-xs-secondary">${UI.escape(e.wunsch_farbe)}</span>` : ''}
+                ${e.wunsch_geschlecht && e.wunsch_geschlecht !== 'egal' ? `<span style="font-size:var(--text-xs);color:var(--c-text-secondary)">${e.wunsch_geschlecht === 'maennlich' ? '♂ Rüde' : '♀ Hündin'}</span>` : ''}
+                ${e.wunsch_farbe ? `<span style="font-size:var(--text-xs);color:var(--c-text-secondary)">${_esc(e.wunsch_farbe)}</span>` : ''}
               </div>
               <div style="display:flex;gap:var(--space-4);flex-wrap:wrap;font-size:var(--text-xs);color:var(--c-text-secondary)">
-                ${e.email ? `<span>${UI.icon('envelope')} ${UI.escape(e.email)}</span>` : ''}
-                ${e.telefon ? `<span>${UI.icon('phone')} ${UI.escape(e.telefon)}</span>` : ''}
+                ${e.email ? `<span>${UI.icon('envelope')} ${_esc(e.email)}</span>` : ''}
+                ${e.telefon ? `<span>${UI.icon('phone')} ${_esc(e.telefon)}</span>` : ''}
                 <span>${UI.icon('calendar-dots')} ${e.created_at ? e.created_at.slice(0, 10) : '—'}</span>
               </div>
-              ${e.nachricht ? `<div style="margin-top:var(--space-1);font-size:var(--text-xs);color:var(--c-text-secondary);font-style:italic">"${UI.escape(e.nachricht)}"</div>` : ''}
-              ${e.notiz ? `<div style="margin-top:var(--space-1);font-size:var(--text-xs);background:var(--c-warning-bg,#fffbeb);color:#92400e;border-radius:4px;padding:2px 6px">${UI.icon('note-pencil')} ${UI.escape(e.notiz)}</div>` : ''}
+              ${e.nachricht ? `<div style="margin-top:var(--space-1);font-size:var(--text-xs);color:var(--c-text-secondary);font-style:italic">"${_esc(e.nachricht)}"</div>` : ''}
+              ${e.notiz ? `<div style="margin-top:var(--space-1);font-size:var(--text-xs);background:var(--c-warning-bg,#fffbeb);color:#92400e;border-radius:4px;padding:2px 6px">${UI.icon('note-pencil')} ${_esc(e.notiz)}</div>` : ''}
             </div>
             <div style="display:flex;gap:var(--space-1);flex-shrink:0">
               <button class="btn btn-ghost btn-xs wl-edit-btn" data-entry-id="${e.id}" title="Bearbeiten">${UI.icon('pencil-simple')}</button>
-              <button class="btn btn-ghost btn-xs wl-delete-btn" data-entry-id="${e.id}" title="Entfernen" class="text-danger">${UI.icon('trash')}</button>
+              <button class="btn btn-ghost btn-xs wl-delete-btn" data-entry-id="${e.id}" title="Entfernen" style="color:var(--c-danger)">${UI.icon('trash')}</button>
             </div>
           </div>`).join('')}
       </div>`;
@@ -816,22 +820,22 @@ window.Page_litters = (() => {
     UI.modal.open({
       title: isEdit ? 'Interessent bearbeiten' : 'Interessent eintragen',
       body: `
-        <form id="wl-form" class="flex-col-gap-3">
+        <form id="wl-form" style="display:flex;flex-direction:column;gap:var(--space-3)">
           <div class="form-group">
             <label class="form-label">Name *</label>
-            <input class="form-control" name="name" required value="${UI.escape(v.name || '')}">
+            <input class="form-control" name="name" required value="${_esc(v.name || '')}">
           </div>
-          <div class="grid-2">
+          <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
             <div class="form-group">
               <label class="form-label">E-Mail</label>
-              <input class="form-control" type="email" name="email" value="${UI.escape(v.email || '')}">
+              <input class="form-control" type="email" name="email" value="${_esc(v.email || '')}">
             </div>
             <div class="form-group">
               <label class="form-label">Telefon</label>
-              <input class="form-control" name="telefon" value="${UI.escape(v.telefon || '')}">
+              <input class="form-control" name="telefon" value="${_esc(v.telefon || '')}">
             </div>
           </div>
-          <div class="grid-2">
+          <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
             <div class="form-group">
               <label class="form-label">Wunsch Geschlecht</label>
               <select class="form-control" name="wunsch_geschlecht">
@@ -842,14 +846,14 @@ window.Page_litters = (() => {
             </div>
             <div class="form-group">
               <label class="form-label">Wunsch Farbe</label>
-              <input class="form-control" name="wunsch_farbe" placeholder="z.B. schwarz-weiß" value="${UI.escape(v.wunsch_farbe || '')}">
+              <input class="form-control" name="wunsch_farbe" placeholder="z.B. schwarz-weiß" value="${_esc(v.wunsch_farbe || '')}">
             </div>
           </div>
           <div class="form-group">
             <label class="form-label">Nachricht des Interessenten</label>
-            <textarea class="form-control" name="nachricht" rows="2" placeholder="Was hat der Interessent geschrieben?">${UI.escape(v.nachricht || '')}</textarea>
+            <textarea class="form-control" name="nachricht" rows="2" placeholder="Was hat der Interessent geschrieben?">${_esc(v.nachricht || '')}</textarea>
           </div>
-          <div class="grid-2">
+          <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
             <div class="form-group">
               <label class="form-label">Status</label>
               <select class="form-control" name="status">
@@ -863,7 +867,7 @@ window.Page_litters = (() => {
           </div>
           <div class="form-group">
             <label class="form-label">Interne Notiz</label>
-            <input class="form-control" name="notiz" placeholder="Nur für dich sichtbar" value="${UI.escape(v.notiz || '')}">
+            <input class="form-control" name="notiz" placeholder="Nur für dich sichtbar" value="${_esc(v.notiz || '')}">
           </div>
         </form>`,
       footer: `
@@ -915,15 +919,15 @@ window.Page_litters = (() => {
     const buildSelect = (name, idName, list, currentId, currentName, placeholder) => {
       const opts = list.map(h => {
         const label = h.name + (h.rufname ? ` (${h.rufname})` : '') + (h.zuchtbuchnummer ? ` · ${h.zuchtbuchnummer}` : '');
-        return `<option value="${h.id}" data-name="${UI.escape(h.name)}" ${currentId == h.id ? 'selected' : ''}>${UI.escape(label)}</option>`;
+        return `<option value="${h.id}" data-name="${_esc(h.name)}" ${currentId == h.id ? 'selected' : ''}>${_esc(label)}</option>`;
       }).join('');
       return `
-        <select class="form-control" name="${idName}" id="${idName}-sel" class="mb-2">
+        <select class="form-control" name="${idName}" id="${idName}-sel" style="margin-bottom:var(--space-2)">
           <option value="">— ${placeholder} —</option>
           ${opts}
         </select>
         <input class="form-control" type="text" name="${name}" id="${name}-txt"
-               value="${UI.escape(currentName || '')}" placeholder="oder Namen frei eingeben">`;
+               value="${_esc(currentName || '')}" placeholder="oder Namen frei eingeben">`;
     };
 
     const rangOpts = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('').map(l =>
@@ -945,11 +949,11 @@ window.Page_litters = (() => {
             <label class="form-label">Wurf-Name <span style="font-weight:normal;color:var(--c-text-muted)">(optional)</span></label>
             <input class="form-control" type="text" name="wurf_name"
                    placeholder="z.B. Vatertags-Wurf, Frühlings-Wurf …"
-                   value="${UI.escape(v.wurf_name || '')}">
+                   value="${_esc(v.wurf_name || '')}">
           </div>
         </div>
 
-        <div class="grid-2">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
           <div class="form-group">
             <label class="form-label">Vater</label>
             ${buildSelect('vater_name', 'vater_id', maennlich, v.vater_id, v.vater_name, 'Aus Zuchtkartei')}
@@ -964,18 +968,18 @@ window.Page_litters = (() => {
           <div class="form-group">
             <label class="form-label">Erwarteter Geburtstermin <span style="font-weight:normal;color:var(--c-text-muted)">(geplant)</span></label>
             <input class="form-control" type="date" name="erwartetes_datum"
-                   value="${UI.escape(v.erwartetes_datum || '')}">
+                   value="${_esc(v.erwartetes_datum || '')}">
             <p style="font-size:var(--text-xs);color:var(--c-text-muted);margin:4px 0 0">Für geplante Würfe / laufende Trächtigkeit</p>
           </div>
           <div class="form-group">
             <label class="form-label">Geburtsdatum <span style="font-weight:normal;color:var(--c-text-muted)">(tatsächlich)</span></label>
             <input class="form-control" type="date" name="geburt_datum"
-                   value="${UI.escape(v.geburt_datum || '')}">
+                   value="${_esc(v.geburt_datum || '')}">
             <p style="font-size:var(--text-xs);color:var(--c-text-muted);margin:4px 0 0">Wenn die Welpen bereits geboren sind</p>
           </div>
         </div>
 
-        <div class="grid-2">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
           <div class="form-group">
             <label class="form-label">Welpen gesamt</label>
             <input class="form-control" type="number" name="welpen_gesamt" min="0"
@@ -1001,19 +1005,19 @@ window.Page_litters = (() => {
         <div class="form-group">
           <label class="form-label">Preisspanne</label>
           <input class="form-control" type="text" name="preis_spanne"
-                 value="${UI.escape(v.preis_spanne || '')}" placeholder="z. B. 1.500 – 2.000 €">
+                 value="${_esc(v.preis_spanne || '')}" placeholder="z. B. 1.500 – 2.000 €">
         </div>
 
         <div class="form-group">
-          <label class="form-label">Beschreibung <span class="text-secondary">(optional)</span></label>
+          <label class="form-label">Beschreibung <span style="color:var(--c-text-secondary)">(optional)</span></label>
           <textarea class="form-control" name="beschreibung" rows="3"
-                    placeholder="Elternlinie, Besonderheiten, Charakter…">${UI.escape(v.beschreibung || '')}</textarea>
+                    placeholder="Elternlinie, Besonderheiten, Charakter…">${_esc(v.beschreibung || '')}</textarea>
         </div>
 
         <div class="form-group">
-          <label class="form-label">Gesundheitstests <span class="text-secondary">(optional)</span></label>
+          <label class="form-label">Gesundheitstests <span style="color:var(--c-text-secondary)">(optional)</span></label>
           <textarea class="form-control" name="gesundheitstests" rows="2"
-                    placeholder="HD, ED, Gentest, Augenkontrolle…">${UI.escape(v.gesundheitstests || '')}</textarea>
+                    placeholder="HD, ED, Gentest, Augenkontrolle…">${_esc(v.gesundheitstests || '')}</textarea>
         </div>
 
         <div class="form-group">
@@ -1024,9 +1028,9 @@ window.Page_litters = (() => {
         </div>
 
         <div class="form-group">
-          <label class="form-label">Sichtbar bis <span class="text-secondary">(optional)</span></label>
+          <label class="form-label">Sichtbar bis <span style="color:var(--c-text-secondary)">(optional)</span></label>
           <input class="form-control" type="date" name="sichtbar_bis"
-                 value="${UI.escape(v.sichtbar_bis || '')}">
+                 value="${_esc(v.sichtbar_bis || '')}">
         </div>
 
       </form>
@@ -1130,11 +1134,11 @@ window.Page_litters = (() => {
     const body = `
       <form id="puppy-form" autocomplete="off">
 
-        <div class="grid-2">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
           <div class="form-group">
-            <label class="form-label">Name <span class="text-secondary">(optional)</span></label>
+            <label class="form-label">Name <span style="color:var(--c-text-secondary)">(optional)</span></label>
             <input class="form-control" type="text" name="name"
-                   value="${UI.escape(v.name || '')}" placeholder="z. B. Max">
+                   value="${_esc(v.name || '')}" placeholder="z. B. Max">
           </div>
           <div class="form-group">
             <label class="form-label">Geschlecht</label>
@@ -1149,7 +1153,7 @@ window.Page_litters = (() => {
         <div class="form-group">
           <label class="form-label">Farbe / Fellzeichnung</label>
           <input class="form-control" type="text" name="farbe"
-                 value="${UI.escape(v.farbe || '')}" placeholder="z. B. schwarz-braun">
+                 value="${_esc(v.farbe || '')}" placeholder="z. B. schwarz-braun">
         </div>
 
         <div class="form-group">
@@ -1161,11 +1165,11 @@ window.Page_litters = (() => {
           </select>
         </div>
 
-        <div class="grid-2">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
           <div class="form-group">
             <label class="form-label">Chip-Nr.</label>
             <input class="form-control" type="text" name="chip_nr"
-                   value="${UI.escape(v.chip_nr || '')}" placeholder="15-stellig">
+                   value="${_esc(v.chip_nr || '')}" placeholder="15-stellig">
           </div>
           <div class="form-group">
             <label class="form-label">Geburtsgewicht (g)</label>
@@ -1182,9 +1186,9 @@ window.Page_litters = (() => {
         </div>
 
         <div class="form-group">
-          <label class="form-label">Notiz <span class="text-secondary">(intern)</span></label>
+          <label class="form-label">Notiz <span style="color:var(--c-text-secondary)">(intern)</span></label>
           <textarea class="form-control" name="notiz" rows="2"
-                    placeholder="Interne Notizen…">${UI.escape(v.notiz || '')}</textarea>
+                    placeholder="Interne Notizen…">${_esc(v.notiz || '')}</textarea>
         </div>
 
       </form>
@@ -1245,22 +1249,22 @@ window.Page_litters = (() => {
     const body = `
       <form id="contract-form" autocomplete="off">
         <div class="form-group">
-          <label class="form-label">Name des Käufers <span class="text-danger">*</span></label>
+          <label class="form-label">Name des Käufers <span style="color:var(--c-danger)">*</span></label>
           <input class="form-control" type="text" name="kaeufer_name" required
                  placeholder="Vor- und Nachname">
         </div>
         <div class="form-group">
-          <label class="form-label">Adresse des Käufers <span class="text-danger">*</span></label>
+          <label class="form-label">Adresse des Käufers <span style="color:var(--c-danger)">*</span></label>
           <textarea class="form-control" name="kaeufer_adresse" rows="2" required
                     placeholder="Straße, PLZ, Ort"></textarea>
         </div>
         <div class="form-group">
-          <label class="form-label">E-Mail des Käufers <span class="text-secondary">(optional)</span></label>
+          <label class="form-label">E-Mail des Käufers <span style="color:var(--c-text-secondary)">(optional)</span></label>
           <input class="form-control" type="email" name="kaeufer_email"
                  placeholder="kaeufer@beispiel.de">
         </div>
         <div class="form-group">
-          <label class="form-label">Kaufpreis <span class="text-secondary">(optional)</span></label>
+          <label class="form-label">Kaufpreis <span style="color:var(--c-text-secondary)">(optional)</span></label>
           <input class="form-control" type="text" name="preis"
                  placeholder="z. B. 1.500 €">
         </div>
@@ -1275,7 +1279,7 @@ window.Page_litters = (() => {
     `;
 
     UI.modal.open({
-      title: `${UI.icon('file-text')} Kaufvertrag — ${UI.escape(puppyLabel)}`,
+      title: `${UI.icon('file-text')} Kaufvertrag — ${_esc(puppyLabel)}`,
       body,
       footer,
     });
@@ -1313,11 +1317,11 @@ window.Page_litters = (() => {
     const visOrder = ['public', 'inquiry', 'private'];
 
     const body = `
-      <div id="${galleryId}" class="mb-4">
-        <p class="text-sm-muted">Lädt…</p>
+      <div id="${galleryId}" style="margin-bottom:var(--space-4)">
+        <p style="color:var(--c-text-muted);font-size:var(--text-sm)">Lädt…</p>
       </div>
       <hr style="margin:var(--space-3) 0;border:none;border-top:1px solid var(--c-border)">
-      <form id="${uploadFormId}" class="flex-col-gap-2">
+      <form id="${uploadFormId}" style="display:flex;flex-direction:column;gap:var(--space-2)">
         <label style="font-size:var(--text-sm);font-weight:var(--weight-semibold)">
           ${UI.icon('upload-simple')} Foto hochladen
         </label>
@@ -1332,7 +1336,7 @@ window.Page_litters = (() => {
     `;
 
     UI.modal.open({
-      title: `${UI.icon('images')} Fotos — ${UI.escape(label)}`,
+      title: `${UI.icon('images')} Fotos — ${_esc(label)}`,
       body,
       footer,
     });
@@ -1344,7 +1348,7 @@ window.Page_litters = (() => {
       try {
         const photos = await API.breederPhotos.list(entityType, entityId);
         if (!photos.length) {
-          el.innerHTML = `<p class="text-sm-muted">Noch keine Fotos vorhanden.</p>`;
+          el.innerHTML = `<p style="color:var(--c-text-muted);font-size:var(--text-sm)">Noch keine Fotos vorhanden.</p>`;
           return;
         }
         el.innerHTML = `
@@ -1354,21 +1358,21 @@ window.Page_litters = (() => {
               const vis   = visLabels[ph.visibility] || visLabels.private;
               return `
                 <div style="position:relative;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--c-border);aspect-ratio:1">
-                  <a href="${UI.escape(ph.url || '')}" target="_blank" rel="noopener noreferrer">
-                    <img src="${UI.escape(thumb)}" alt="${UI.escape(ph.caption || '')}"
+                  <a href="${_esc(ph.url || '')}" target="_blank" rel="noopener noreferrer">
+                    <img src="${_esc(thumb)}" alt="${_esc(ph.caption || '')}"
                          loading="lazy"
                          style="width:100%;height:100%;object-fit:cover;display:block"
                          onerror="this.src='/static/img/placeholder.webp'">
                   </a>
                   <button class="photos-vis-btn"
                           data-photo-id="${ph.id}"
-                          data-vis="${UI.escape(ph.visibility)}"
+                          data-vis="${_esc(ph.visibility)}"
                           title="Sichtbarkeit ändern"
                           style="position:absolute;bottom:0;left:0;right:0;
                                  background:${vis.color};color:#fff;
                                  border:none;cursor:pointer;font-size:10px;padding:2px 4px;
                                  white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
-                    ${UI.escape(vis.text)}
+                    ${_esc(vis.text)}
                   </button>
                   <button class="photos-del-btn"
                           data-photo-id="${ph.id}"
@@ -1414,7 +1418,7 @@ window.Page_litters = (() => {
 
       } catch (err) {
         const el = document.getElementById(galleryId);
-        if (el) el.innerHTML = `<p style="color:var(--c-danger);font-size:var(--text-sm)">${UI.escape(err.message || 'Fehler beim Laden.')}</p>`;
+        if (el) el.innerHTML = `<p style="color:var(--c-danger);font-size:var(--text-sm)">${_esc(err.message || 'Fehler beim Laden.')}</p>`;
       }
     }
 
@@ -1460,13 +1464,13 @@ window.Page_litters = (() => {
     const issueHTML = (welfare.issues || []).map(i => `
       <div style="display:flex;gap:8px;padding:8px 0;border-bottom:1px solid rgba(0,0,0,.06)">
         <span style="color:${color};flex-shrink:0">${UI.icon('warning')}</span>
-        <span class="text-sm">${UI.escape(i.text)}</span>
+        <span style="font-size:var(--text-sm)">${_esc(i.text)}</span>
       </div>`).join('');
 
     const okHTML = (welfare.ok_points || []).map(p => `
       <div style="display:flex;gap:8px;padding:4px 0">
         <span style="color:#16a34a;flex-shrink:0">${UI.icon('check')}</span>
-        <span class="text-sm-secondary">${UI.escape(p)}</span>
+        <span style="font-size:var(--text-sm);color:var(--c-text-secondary)">${_esc(p)}</span>
       </div>`).join('');
 
     const isProblematic = welfare.level === 'warning' || welfare.level === 'critical';
@@ -1496,7 +1500,7 @@ window.Page_litters = (() => {
             Trotzdem fortfahren
           </button>
         </div>` : `
-        <button class="btn btn-primary" data-modal-close class="w-full">
+        <button class="btn btn-primary" data-modal-close style="width:100%">
           ${UI.icon('check')} Verstanden
         </button>`,
     });
@@ -1536,7 +1540,7 @@ window.Page_litters = (() => {
     } catch (err) {
       UI.modal.open({
         title: `${UI.icon('sparkle')} KI-Wurfankündigung`,
-        body: `<p class="text-danger">${UI.escape(err.message || 'Fehler beim Generieren.')}</p>`,
+        body: `<p style="color:var(--c-danger)">${_esc(err.message || 'Fehler beim Generieren.')}</p>`,
         footer: `<button class="btn btn-secondary" data-modal-close>Schließen</button>`,
       });
       return;
@@ -1544,7 +1548,7 @@ window.Page_litters = (() => {
 
     UI.modal.open({
       title: `${UI.icon('sparkle')} KI-Wurfankündigung`,
-      body: `<div style="white-space:pre-wrap;font-size:var(--text-sm);line-height:1.6">${UI.escape(text)}</div>`,
+      body: `<div style="white-space:pre-wrap;font-size:var(--text-sm);line-height:1.6">${_esc(text)}</div>`,
       footer: `
         <button class="btn btn-secondary flex-1" id="ki-announce-copy">
           ${UI.icon('clipboard-text')} Kopieren
diff --git a/backend/static/js/pages/lost.js b/backend/static/js/pages/lost.js
index ef4aab5..db23517 100644
--- a/backend/static/js/pages/lost.js
+++ b/backend/static/js/pages/lost.js
@@ -130,24 +130,54 @@ window.Page_lost = (() => {
     document.getElementById('lost-btn-report')
       ?.addEventListener('click', _showReportForm);
 
-    await _initMap();
+    await _loadLeaflet();
+    _initMap();
     setTimeout(() => _map?.invalidateSize(), 100);
     await _locateAndLoad();
   }
 
   // ----------------------------------------------------------
-  // KARTE INITIALISIEREN (lädt Leaflet via UI.map.create)
+  // LEAFLET DYNAMISCH LADEN
   // ----------------------------------------------------------
-  async function _initMap() {
+  async function _loadLeaflet() {
+    if (_leafletLoaded || window.L) { _leafletLoaded = true; return; }
+
+    await new Promise(resolve => {
+      if (document.querySelector('link[href*="leaflet"]')) { resolve(); return; }
+      const link  = document.createElement('link');
+      link.rel    = 'stylesheet';
+      link.href   = '/css/leaflet.css';
+      link.onload = resolve;
+      link.onerror = resolve;
+      document.head.appendChild(link);
+    });
+
+    await new Promise((resolve, reject) => {
+      if (document.querySelector('script[src*="leaflet"]')) { resolve(); return; }
+      const s   = document.createElement('script');
+      s.src     = '/js/leaflet.js';
+      s.onload  = resolve;
+      s.onerror = reject;
+      document.head.appendChild(s);
+    });
+
+    _leafletLoaded = true;
+  }
+
+  // ----------------------------------------------------------
+  // KARTE INITIALISIEREN
+  // ----------------------------------------------------------
+  function _initMap() {
     _injectStyles();
     const mapEl = document.getElementById('lost-map');
-    if (!mapEl || _map) return;
+    if (!mapEl || !window.L || _map) return;
 
-    _map = await UI.map.create('lost-map', {
-      center: [51.1657, 10.4515], zoom: 6,
-      zoomControl: true, attributionControl: false,
-    });
-    _leafletLoaded = true;
+    _map = L.map('lost-map', { zoomControl: true, attributionControl: false })
+            .setView([51.1657, 10.4515], 6);
+
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      maxZoom: 19,
+    }).addTo(_map);
   }
 
   // ----------------------------------------------------------
@@ -273,21 +303,26 @@ window.Page_lost = (() => {
     _reports.forEach(r => {
       const dotColor = r._isPending ? '#d97706' : '#e74c3c';
       const anim     = r._isPending ? 'by-lost-pulse-p' : 'by-lost-pulse-r';
-      const html     = `<div style="background:${dotColor};color:#fff;border-radius:50%;
+      const icon = L.divIcon({
+        className : '',
+        html      : `<div style="background:${dotColor};color:#fff;border-radius:50%;
                         width:34px;height:34px;
                         display:flex;align-items:center;justify-content:center;
                         font-size:17px;border:2px solid #fff;
-                        animation:${anim} 1.8s ease-in-out infinite">🐕</div>`;
+                        animation:${anim} 1.8s ease-in-out infinite">🐕</div>`,
+        iconSize   : [34, 34],
+        iconAnchor : [17, 17],
+      });
 
       const distStr = r.distanz_m !== undefined
         ? (r.distanz_m < 1000 ? `${Math.round(r.distanz_m)} m` : `${(r.distanz_m / 1000).toFixed(1)} km`)
         : '';
 
-      const marker = UI.map.svgMarker(r.lat, r.lon, html, { size: 34, anchorY: 17 })
+      const marker = L.marker([r.lat, r.lon], { icon })
         .addTo(_map)
         .bindPopup(`
-          <b>🔍 ${UI.escape(r.name)}</b><br>
-          ${r.rasse ? UI.escape(r.rasse) + '<br>' : ''}
+          <b>🔍 ${_escape(r.name)}</b><br>
+          ${r.rasse ? _escape(r.rasse) + '<br>' : ''}
           ${distStr ? `<small>📍 ${distStr} entfernt</small><br>` : ''}
           ${r._isPending ? '<small>⏳ Sync ausstehend</small><br>' : ''}
           <small>📅 ${_fmtDate(r.created_at)}</small>
@@ -378,14 +413,14 @@ window.Page_lost = (() => {
                            border-radius:var(--radius-md);flex-shrink:0;
                            display:flex;align-items:center;justify-content:center;
                            font-size:2rem">🐕</div>`}
-          <div class="flex-1-min">
+          <div style="flex:1;min-width:0">
             <div style="display:flex;align-items:center;gap:var(--space-2);
                         margin-bottom:var(--space-1);flex-wrap:wrap">
               <span style="font-weight:var(--weight-semibold);font-size:var(--text-base)">
-                ${UI.escape(r.name)}
+                ${_escape(r.name)}
               </span>
               ${r.rasse
-                ? `<span class="badge">${UI.escape(r.rasse)}</span>`
+                ? `<span class="badge">${_escape(r.rasse)}</span>`
                 : ''}
               ${isOwn
                 ? '<span class="badge badge-warning">Meine Meldung</span>'
@@ -399,11 +434,11 @@ window.Page_lost = (() => {
             </div>
             <p style="margin:0 0 var(--space-1);font-size:var(--text-sm);
                       color:var(--c-text)">
-              ${UI.escape(r.beschreibung.slice(0, 120))}${r.beschreibung.length > 120 ? '…' : ''}
+              ${_escape(r.beschreibung.slice(0, 120))}${r.beschreibung.length > 120 ? '…' : ''}
             </p>
-            <div class="text-xs-secondary">
+            <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">
               Gemeldet ${_fmtDate(r.created_at)}
-              ${r.melder_name ? '· ' + UI.escape(r.melder_name.split(' ')[0]) : ''}
+              ${r.melder_name ? '· ' + _escape(r.melder_name.split(' ')[0]) : ''}
             </div>
             ${r._isPending
               ? `<div style="margin-top:var(--space-2);display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap">
@@ -415,10 +450,10 @@ window.Page_lost = (() => {
                      🗑 Verwerfen
                    </button>
                  </div>`
-              : (_appState.user ? `<div class="mt-2">
+              : (_appState.user ? `<div style="margin-top:var(--space-2)">
                    <button class="btn btn-ghost btn-xs lost-note-btn"
                            data-lost-note-id="${r.id}"
-                           data-lost-note-name="${UI.escape(r.name)}"
+                           data-lost-note-name="${_escape(r.name)}"
                            title="Notiz" onclick="event.stopPropagation()">
                      <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#note-pencil"></use></svg> Notiz
                    </button>
@@ -447,19 +482,19 @@ window.Page_lost = (() => {
         : ''}
 
       <div style="display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-3)">
-        <span class="badge badge-danger">🐕 ${UI.escape(r.name)}</span>
-        ${r.rasse ? `<span class="badge">${UI.escape(r.rasse)}</span>` : ''}
+        <span class="badge badge-danger">🐕 ${_escape(r.name)}</span>
+        ${r.rasse ? `<span class="badge">${_escape(r.rasse)}</span>` : ''}
       </div>
 
       <p style="white-space:pre-wrap;margin-bottom:var(--space-3)">
-        ${UI.escape(r.beschreibung)}
+        ${_escape(r.beschreibung)}
       </p>
 
       <div style="font-size:var(--text-sm);color:var(--c-text-secondary);
                   margin-bottom:var(--space-4);line-height:1.8">
         <div>📍 ${r.lat.toFixed(5)}, ${r.lon.toFixed(5)}${distStr ? ' (' + distStr + ' entfernt)' : ''}</div>
         <div>📅 Gemeldet: ${_fmtDate(r.created_at)}</div>
-        ${r.melder_name ? `<div>👤 Gemeldet von: ${UI.escape(r.melder_name.split(' ')[0])}</div>` : ''}
+        ${r.melder_name ? `<div>👤 Gemeldet von: ${_escape(r.melder_name.split(' ')[0])}</div>` : ''}
       </div>
 
       <div style="display:flex;gap:var(--space-2);flex-wrap:wrap">
@@ -473,7 +508,7 @@ window.Page_lost = (() => {
       </div>
     `;
 
-    UI.modal.open({ title: `🔍 ${UI.escape(r.name)} wird vermisst`, body });
+    UI.modal.open({ title: `🔍 ${_escape(r.name)} wird vermisst`, body });
 
     document.getElementById('detail-lost-map')?.addEventListener('click', () => {
       UI.modal.close();
@@ -511,10 +546,10 @@ window.Page_lost = (() => {
   // ----------------------------------------------------------
   function _showFoundDialog(r) {
     UI.modal.open({
-      title: `🎉 ${UI.escape(r.name)} gefunden?`,
+      title: `🎉 ${_escape(r.name)} gefunden?`,
       body: `
         <p style="color:var(--c-text-secondary);margin-bottom:var(--space-4)">
-          Wurde ${UI.escape(r.name)} wiedergefunden? Die Meldung wird als
+          Wurde ${_escape(r.name)} wiedergefunden? Die Meldung wird als
           abgeschlossen markiert und aus der Liste entfernt.
         </p>
       `,
@@ -555,7 +590,7 @@ window.Page_lost = (() => {
     const dogs      = _appState.dogs || [];
     const dogOpts   = dogs.length > 0
       ? `<option value="">— kein registrierter Hund —</option>` +
-        dogs.map(d => `<option value="${d.id}">${UI.escape(d.name)}${d.rasse ? ' (' + UI.escape(d.rasse) + ')' : ''}</option>`).join('')
+        dogs.map(d => `<option value="${d.id}">${_escape(d.name)}${d.rasse ? ' (' + _escape(d.rasse) + ')' : ''}</option>`).join('')
       : '';
 
     const body = `
@@ -565,7 +600,7 @@ window.Page_lost = (() => {
         <div class="form-group">
           <label class="form-label">
             Registrierter Hund
-            <span class="text-secondary">(optional)</span>
+            <span style="color:var(--c-text-secondary)">(optional)</span>
           </label>
           <select class="form-control" name="dog_id" id="lf-dog-select">
             ${dogOpts}
@@ -581,7 +616,7 @@ window.Page_lost = (() => {
         <div class="form-group">
           <label class="form-label">
             Rasse
-            <span class="text-secondary">(optional)</span>
+            <span style="color:var(--c-text-secondary)">(optional)</span>
           </label>
           <input class="form-control" type="text" name="rasse"
                  placeholder="z. B. Labrador">
@@ -608,7 +643,7 @@ window.Page_lost = (() => {
           </div>
           <input type="hidden" name="lat" id="lf-lat">
           <input type="hidden" name="lon" id="lf-lon">
-          <small id="lf-gps-hint" class="text-secondary">
+          <small id="lf-gps-hint" style="color:var(--c-text-secondary)">
             ${_userPos
               ? '✅ Aktueller Standort vorausgefüllt'
               : 'GPS-Button drücken um Standort zu ermitteln'}
@@ -618,7 +653,7 @@ window.Page_lost = (() => {
         <div class="form-group">
           <label class="form-label">
             Foto
-            <span class="text-secondary">(optional)</span>
+            <span style="color:var(--c-text-secondary)">(optional)</span>
           </label>
           <input class="form-control" type="file" name="photo"
                  accept="image/*" capture="environment">
@@ -790,7 +825,17 @@ window.Page_lost = (() => {
       day: '2-digit', month: '2-digit', year: 'numeric'
     });
   }
-function _emptyState(icon, title, text, cta = '') {
+
+  function _escape(str) {
+    if (!str) return '';
+    return String(str)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+  }
+
+  function _emptyState(icon, title, text, cta = '') {
     return `<div class="empty-state">
       <svg class="ph-icon empty-state-icon" aria-hidden="true">
         <use href="/icons/phosphor.svg#${icon}"></use>
@@ -819,7 +864,7 @@ function _emptyState(icon, title, text, cta = '') {
                     display:flex;align-items:center;justify-content:space-between;flex-shrink:0">
           <div>
             <div style="font-weight:var(--weight-semibold);font-size:var(--text-base)"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#note-pencil"></use></svg> Notiz</div>
-            <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:2px">${UI.escape(parentLabel)}</div>
+            <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:2px">${_escape(parentLabel)}</div>
           </div>
           <button id="by-note-close" style="background:none;border:none;cursor:pointer;font-size:1.4rem;color:var(--c-text-muted);padding:4px 8px" aria-label="Schließen">×</button>
         </div>
diff --git a/backend/static/js/pages/map.js b/backend/static/js/pages/map.js
index 7b70409..13adfce 100644
--- a/backend/static/js/pages/map.js
+++ b/backend/static/js/pages/map.js
@@ -221,7 +221,7 @@ window.Page_map = (() => {
 
         <div class="map-statusbar" id="map-statusbar">
           <span id="map-zoom-info"></span>
-          <span id="map-osm-status" class="hidden"></span>
+          <span id="map-osm-status" style="display:none"></span>
           <span class="map-statusbar-sep map-weather-chip--hidden" id="map-weather-sep">·</span>
           <span class="map-weather-chip--hidden" id="map-weather-info"></span>
         </div>
@@ -1344,15 +1344,15 @@ window.Page_map = (() => {
       });
 
       const marker = L.marker([b.location_lat, b.location_lng], { icon, zIndexOffset: t.z ?? 0 })
-        .bindTooltip(UI.escape(b.zwingername), { direction: 'top', offset: [0, -16] });
+        .bindTooltip(_esc(b.zwingername), { direction: 'top', offset: [0, -16] });
 
       marker.on('click', () => {
-        const rasseText = b.rasse_text ? `<div style="font-size:12px;color:#666;margin-bottom:4px">${UI.escape(b.rasse_text)}</div>` : '';
-        const stadtText = b.stadt      ? `<div style="font-size:12px;color:#888;margin-bottom:8px">${UI.escape(b.stadt)}</div>`      : '';
+        const rasseText = b.rasse_text ? `<div style="font-size:12px;color:#666;margin-bottom:4px">${_esc(b.rasse_text)}</div>` : '';
+        const stadtText = b.stadt      ? `<div style="font-size:12px;color:#888;margin-bottom:8px">${_esc(b.stadt)}</div>`      : '';
 
         marker.bindPopup(`
           <div style="min-width:170px;max-width:240px">
-            <div style="font-weight:600;margin-bottom:6px">${t.icon} ${UI.escape(b.zwingername)}</div>
+            <div style="font-weight:600;margin-bottom:6px">${t.icon} ${_esc(b.zwingername)}</div>
             ${rasseText}${stadtText}
             <button class="btn btn-primary btn-sm" id="breeder-profile-btn">Profil ansehen</button>
           </div>
@@ -1780,7 +1780,7 @@ window.Page_map = (() => {
                                   border:1.5px solid var(--c-border);border-radius:100px;cursor:pointer;
                                   font-size:var(--text-xs);font-weight:600;user-select:none">
               <input type="checkbox" name="dog_ids" value="${d.id}" ${checked ? 'checked' : ''}
-                     class="rec-dog-cb hidden">
+                     style="display:none" class="rec-dog-cb">
               ${av}<span>${UI.escape(d.name)}</span>
             </label>`;
           }).join('')}
@@ -1798,7 +1798,7 @@ window.Page_map = (() => {
           <input class="form-control" type="text" name="name"
                  placeholder="Wird automatisch ermittelt…" required>
         </div>
-        <div class="grid-2">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
           <div class="form-group">
             <label class="form-label">Schwierigkeit</label>
             <select class="form-control" name="schwierigkeit">
@@ -1842,7 +1842,7 @@ window.Page_map = (() => {
           </label>
         </div>
         <div class="form-group">
-          <label class="form-label">Beschreibung <span class="text-secondary">(optional)</span></label>
+          <label class="form-label">Beschreibung <span style="color:var(--c-text-secondary)">(optional)</span></label>
           <textarea class="form-control" name="beschreibung" rows="2"
                     placeholder="Besonderheiten, Highlights, Tipps…"></textarea>
         </div>
diff --git a/backend/static/js/pages/moderation.js b/backend/static/js/pages/moderation.js
index 048fef5..031fc11 100644
--- a/backend/static/js/pages/moderation.js
+++ b/backend/static/js/pages/moderation.js
@@ -161,20 +161,20 @@ window.Page_moderation = (() => {
       <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
                   gap:var(--space-4)">
         ${fotos.map(f => `
-          <div class="card p-4" data-id="${f.id}">
-            <a href="#wiki?rasse=${UI.escape(f.rasse_slug)}" style="display:block;text-decoration:none">
-              <img src="${UI.escape(f.foto_url)}" alt=""
+          <div class="card" style="padding:var(--space-4)" data-id="${f.id}">
+            <a href="#wiki?rasse=${_esc(f.rasse_slug)}" style="display:block;text-decoration:none">
+              <img src="${_esc(f.foto_url)}" alt=""
                    style="width:100%;height:140px;object-fit:cover;
                           border-radius:var(--radius-md);margin-bottom:var(--space-3)">
             </a>
             <div style="font-weight:var(--weight-semibold);font-size:var(--text-sm)">
-              ${UI.escape(f.rasse_name || f.rasse_slug)}
+              ${_esc(f.rasse_name || f.rasse_slug)}
             </div>
             <div style="font-size:var(--text-xs);color:var(--c-text-muted);
                         margin-bottom:var(--space-2)">
-              von ${UI.escape(f.user_name)}
+              von ${_esc(f.user_name)}
             </div>
-            <div class="mb-3">
+            <div style="margin-bottom:var(--space-3)">
               ${f.rights_confirmed
                 ? `<span style="font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;
                                background:#dcfce7;color:#166534">✓ Bildrechte bestätigt</span>`
@@ -183,17 +183,17 @@ window.Page_moderation = (() => {
             </div>
             ${f.aktuell_foto ? `
               <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-bottom:4px">Aktuell:</div>
-              <img src="${UI.escape(f.aktuell_foto)}" alt="Aktuell"
+              <img src="${_esc(f.aktuell_foto)}" alt="Aktuell"
                    style="width:100%;height:70px;object-fit:cover;
                           border-radius:var(--radius-sm);opacity:.5;
                           margin-bottom:var(--space-3)">
             ` : `<div style="font-size:var(--text-xs);color:var(--c-warning);
                              margin-bottom:var(--space-3)">Noch kein Foto vorhanden</div>`}
-            <div class="flex-gap-2">
+            <div style="display:flex;gap:var(--space-2)">
               <button class="btn btn-sm btn-primary mod-foto-approve"
-                      data-id="${f.id}" class="flex-1"><svg class="ph-icon" style="width:14px;height:14px" aria-hidden="true"><use href="/icons/phosphor.svg#check"></use></svg> Freigeben</button>
+                      data-id="${f.id}" style="flex:1"><svg class="ph-icon" style="width:14px;height:14px" aria-hidden="true"><use href="/icons/phosphor.svg#check"></use></svg> Freigeben</button>
               <button class="btn btn-sm btn-ghost mod-foto-reject"
-                      data-id="${f.id}" class="text-danger"><svg class="ph-icon" style="width:14px;height:14px" aria-hidden="true"><use href="/icons/phosphor.svg#x"></use></svg> Ablehnen</button>
+                      data-id="${f.id}" style="color:var(--c-danger)"><svg class="ph-icon" style="width:14px;height:14px" aria-hidden="true"><use href="/icons/phosphor.svg#x"></use></svg> Ablehnen</button>
             </div>
           </div>
         `).join('')}
@@ -287,7 +287,7 @@ window.Page_moderation = (() => {
     el.innerHTML = `
       <div style="margin-bottom:var(--space-2);font-size:var(--text-xs);
                   color:var(--c-text-muted)">${total} Nutzer gefunden</div>
-      <div class="flex-col-gap-2">
+      <div style="display:flex;flex-direction:column;gap:var(--space-2)">
         ${visible.map(u => {
           const isAdminUser = u.rolle === 'admin' || u.is_admin;
           const canAction   = isAdmin && !isAdminUser;
@@ -299,23 +299,23 @@ window.Page_moderation = (() => {
                           background:var(--c-surface-2);
                           display:flex;align-items:center;justify-content:center;
                           font-weight:var(--weight-bold);color:var(--c-text-secondary)">
-                ${UI.escape(u.name[0].toUpperCase())}
+                ${_esc(u.name[0].toUpperCase())}
               </div>
-              <div class="flex-1-min">
+              <div style="flex:1;min-width:0">
                 <div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
                              color:var(--c-text)">
-                  ${UI.escape(u.name)}
+                  ${_esc(u.name)}
                   ${u.is_banned ? `<span style="font-size:10px;padding:1px 5px;
                                               border-radius:3px;background:var(--c-danger);
                                               color:#fff;margin-left:4px">GESPERRT</span>` : ''}
                 </div>
-                <div class="text-xs-muted">
-                  ${UI.escape(u.email)} ·
+                <div style="font-size:var(--text-xs);color:var(--c-text-muted)">
+                  ${_esc(u.email)} ·
                   <span style="color:${
                     u.rolle === 'admin' ? 'var(--c-danger)'
                     : u.rolle === 'moderator' ? '#f59e0b'
                     : 'var(--c-text-muted)'}">
-                    ${UI.escape(u.rolle)}
+                    ${_esc(u.rolle)}
                   </span>
                 </div>
               </div>
@@ -323,13 +323,13 @@ window.Page_moderation = (() => {
                 ${canAction
                   ? (u.is_banned
                     ? `<button class="btn btn-sm btn-ghost mod-unban"
-                               data-uid="${u.id}" data-name="${UI.escape(u.name)}"
-                               title="Sperre aufheben" class="text-success">
+                               data-uid="${u.id}" data-name="${_esc(u.name)}"
+                               title="Sperre aufheben" style="color:var(--c-success)">
                          ${UI.icon('lock-open')}
                        </button>`
                     : `<button class="btn btn-sm btn-ghost mod-ban"
-                               data-uid="${u.id}" data-name="${UI.escape(u.name)}"
-                               title="Sperren" class="text-danger">
+                               data-uid="${u.id}" data-name="${_esc(u.name)}"
+                               title="Sperren" style="color:var(--c-danger)">
                          ${UI.icon('lock')}
                        </button>`)
                   : ''
@@ -400,27 +400,27 @@ window.Page_moderation = (() => {
       return;
     }
     el.innerHTML = `
-      <div class="flex-col-gap-3">
+      <div style="display:flex;flex-direction:column;gap:var(--space-3)">
         ${reports.map(r => `
           <div class="card" style="padding:var(--space-4);
                border-left:3px solid var(--c-danger)">
             <div style="display:flex;align-items:flex-start;gap:var(--space-3)">
-              <div class="flex-1-min">
+              <div style="flex:1;min-width:0">
                 <div style="font-size:var(--text-xs);color:var(--c-text-muted);
                              margin-bottom:var(--space-1)">
-                  ${UI.escape(r.target_type)} #${r.target_id} ·
-                  Gemeldet von <strong>${UI.escape(r.melder_name)}</strong>
+                  ${_esc(r.target_type)} #${r.target_id} ·
+                  Gemeldet von <strong>${_esc(r.melder_name)}</strong>
                 </div>
                 <div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
                              color:var(--c-text);margin-bottom:var(--space-1)">
-                  Grund: ${UI.escape(r.grund)}
+                  Grund: ${_esc(r.grund)}
                 </div>
                 ${r.content_preview ? `
                   <div style="font-size:var(--text-xs);color:var(--c-text-secondary);
                                padding:var(--space-2) var(--space-3);
                                background:var(--c-surface-2);
                                border-radius:var(--radius-sm)">
-                    ${UI.escape(r.content_preview)}
+                    ${_esc(r.content_preview)}
                   </div>` : ''}
               </div>
               <button class="btn btn-sm btn-primary mod-resolve-btn"
@@ -476,14 +476,14 @@ window.Page_moderation = (() => {
     const STATUS_COLOR = { pending: 'var(--c-warning)', approved: 'var(--c-success,#22c55e)', rejected: 'var(--c-danger)' };
 
     el.innerHTML = `
-      <div class="flex-col-gap-3">
+      <div style="display:flex;flex-direction:column;gap:var(--space-3)">
         ${edits.map(e => `
-          <div class="card p-4" data-edit-id="${e.id}">
+          <div class="card" style="padding:var(--space-4)" data-edit-id="${e.id}">
             <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-2);flex-wrap:wrap">
               <div>
-                <div style="font-weight:600">${UI.escape(e.poi_name)}</div>
-                <div class="text-xs-muted">
-                  OSM-ID: ${UI.escape(e.osm_id)} · Feld: ${UI.escape(e.field)} · von ${UI.escape(e.einreicher_name)}
+                <div style="font-weight:600">${_esc(e.poi_name)}</div>
+                <div style="font-size:var(--text-xs);color:var(--c-text-muted)">
+                  OSM-ID: ${_esc(e.osm_id)} · Feld: ${_esc(e.field)} · von ${_esc(e.einreicher_name)}
                   · ${new Date(e.created_at).toLocaleDateString('de-DE')}
                 </div>
               </div>
@@ -494,11 +494,11 @@ window.Page_moderation = (() => {
             <div style="margin-top:var(--space-3);display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)">
               <div style="background:var(--c-surface-2);border-radius:var(--radius-sm);padding:var(--space-2)">
                 <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-bottom:2px">Aktuell</div>
-                <div class="text-sm">${UI.escape(e.old_value) || '<em class="text-muted">leer</em>'}</div>
+                <div style="font-size:var(--text-sm)">${_esc(e.old_value) || '<em style="color:var(--c-text-muted)">leer</em>'}</div>
               </div>
               <div style="background:var(--c-surface-2);border-radius:var(--radius-sm);padding:var(--space-2)">
                 <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-bottom:2px">Vorschlag</div>
-                <div style="font-size:var(--text-sm);font-weight:600">${UI.escape(e.new_value)}</div>
+                <div style="font-size:var(--text-sm);font-weight:600">${_esc(e.new_value)}</div>
               </div>
             </div>
             ${e.status === 'pending' ? `
@@ -532,6 +532,15 @@ window.Page_moderation = (() => {
     });
   }
 
+  function _esc(s) {
+    if (!s) return '';
+    return String(s)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+  }
+
   // ------------------------------------------------------------------
   return { init, refresh, onDogChange };
 
diff --git a/backend/static/js/pages/movies.js b/backend/static/js/pages/movies.js
index 565a1e8..a36cf73 100644
--- a/backend/static/js/pages/movies.js
+++ b/backend/static/js/pages/movies.js
@@ -88,7 +88,7 @@ window.Page_movies = (() => {
         <div class="movies-search-row">
           <svg class="ph-icon movies-search-icon" aria-hidden="true"><use href="/icons/phosphor.svg#magnifying-glass"></use></svg>
           <input type="search" id="movies-search" class="form-control movies-search-input"
-            placeholder="Film, Serie oder Rasse suchen …" value="${UI.escape(_search)}" autocomplete="off">
+            placeholder="Film, Serie oder Rasse suchen …" value="${_esc(_search)}" autocomplete="off">
         </div>
         <div class="movies-filter-row">
           <button class="movies-filter-btn${_filter === 'alle'      ? ' movies-filter-btn--active' : ''}" data-filter="alle">Alle</button>
@@ -96,7 +96,7 @@ window.Page_movies = (() => {
           <button class="movies-filter-btn${_filter === 'ueberlebt' ? ' movies-filter-btn--active' : ''}" data-filter="ueberlebt"><svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#paw-print"></use></svg> Hund überlebt</button>
           <button class="movies-filter-btn${_filter === 'top'       ? ' movies-filter-btn--active' : ''}" data-filter="top"><svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#star"></use></svg> Top</button>
         </div>
-        <div class="movies-filter-row mt-2">
+        <div class="movies-filter-row" style="margin-top:var(--space-2)">
           <button class="movies-filter-btn movies-type-btn${_typ === 'alle'  ? ' movies-filter-btn--active' : ''}" data-typ="alle">Alle</button>
           <button class="movies-filter-btn movies-type-btn${_typ === 'film'  ? ' movies-filter-btn--active' : ''}" data-typ="film"><svg class="ph-icon" aria-hidden="true" style="width:15px;height:15px"><use href="/icons/phosphor.svg#film-slate"></use></svg> Filme</button>
           <button class="movies-filter-btn movies-type-btn${_typ === 'serie' ? ' movies-filter-btn--active' : ''}" data-typ="serie"><svg class="ph-icon" aria-hidden="true" style="width:15px;height:15px"><use href="/icons/phosphor.svg#list"></use></svg> Serien</button>
@@ -201,18 +201,18 @@ window.Page_movies = (() => {
     const stars = _starsHtml(film.bewertung_avg, film.id, film.user_rating, false);
     const _ico = name => `<svg class="ph-icon" aria-hidden="true" style="width:12px;height:12px;vertical-align:middle"><use href="/icons/phosphor.svg#${name}"></use></svg>`;
     const typLabel = film.typ === 'serie' ? `${_ico('list')} Serie` : film.typ === 'doku' ? `${_ico('camera')} Doku` : '';
-    const imdb = film.imdb_rating ? `<span class="text-xs-muted">IMDb ${film.imdb_rating}</span>` : '';
-    const streaming = film.streaming ? `<span class="text-xs-muted">${UI.escape(film.streaming)}</span>` : '';
+    const imdb = film.imdb_rating ? `<span style="font-size:var(--text-xs);color:var(--c-text-muted)">IMDb ${film.imdb_rating}</span>` : '';
+    const streaming = film.streaming ? `<span style="font-size:var(--text-xs);color:var(--c-text-muted)">${_esc(film.streaming)}</span>` : '';
 
     return `
-      <div class="movie-card" data-film-id="${UI.escape(film.id)}">
+      <div class="movie-card" data-film-id="${_esc(film.id)}">
         <div class="movie-card-emoji">${film.bild_emoji}</div>
         <div class="movie-card-body">
-          <div class="movie-card-title">${UI.escape(film.titel)} <span class="movie-card-year">(${film.jahr})</span></div>
+          <div class="movie-card-title">${_esc(film.titel)} <span class="movie-card-year">(${film.jahr})</span></div>
           <div class="movie-card-genre" style="display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap">
-            <span>${UI.escape(film.genre)}</span>${typLabel ? `<span class="text-xs-muted">${typLabel}</span>` : ''}
+            <span>${_esc(film.genre)}</span>${typLabel ? `<span style="font-size:var(--text-xs);color:var(--c-text-muted)">${typLabel}</span>` : ''}
           </div>
-          <div class="movie-card-rasse"><svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#paw-print"></use></svg> ${UI.escape(film.hund_rasse)}</div>
+          <div class="movie-card-rasse"><svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#paw-print"></use></svg> ${_esc(film.hund_rasse)}</div>
           ${tag}
           <div style="display:flex;gap:var(--space-3);margin-top:var(--space-1)">${imdb}${streaming}</div>
           <div class="movie-card-stars">${stars}</div>
@@ -234,17 +234,17 @@ window.Page_movies = (() => {
     const body = `
       <div class="movie-modal-emoji">${film.bild_emoji}</div>
       <div style="display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-3)">
-        <span class="badge badge-primary">${UI.escape(film.genre)}</span>
-        <span class="badge"><svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#paw-print"></use></svg> ${UI.escape(film.hund_rasse)}</span>
+        <span class="badge badge-primary">${_esc(film.genre)}</span>
+        <span class="badge"><svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#paw-print"></use></svg> ${_esc(film.hund_rasse)}</span>
         <span class="badge">${film.jahr}</span>
       </div>
       <div class="${bannerClass}" style="margin-bottom:var(--space-4);font-size:var(--text-base)">${bannerText}</div>
-      <p style="line-height:1.6;color:var(--c-text);margin-bottom:var(--space-5)">${UI.escape(film.beschreibung)}</p>
-      <div class="mb-2">
+      <p style="line-height:1.6;color:var(--c-text);margin-bottom:var(--space-5)">${_esc(film.beschreibung)}</p>
+      <div style="margin-bottom:var(--space-2)">
         <strong>Community-Bewertung:</strong>
       </div>
-      <div id="modal-stars-${UI.escape(film.id)}">${stars}</div>
-      <div id="modal-avg-${UI.escape(film.id)}" style="font-size:var(--text-sm);color:var(--c-text-secondary);margin-top:var(--space-1)">
+      <div id="modal-stars-${_esc(film.id)}">${stars}</div>
+      <div id="modal-avg-${_esc(film.id)}" style="font-size:var(--text-sm);color:var(--c-text-secondary);margin-top:var(--space-1)">
         Ø ${film.bewertung_avg} von ${film.bewertung_cnt || 0} Bewertungen
       </div>
       ${loginHint}
@@ -262,9 +262,9 @@ window.Page_movies = (() => {
     const filled = Math.round(avg);
     const stars = [1,2,3,4,5].map(i => {
       const active = i <= (userRating || filled) ? ' movie-star--active' : '';
-      return `<span class="movie-star${active}" data-film-id="${UI.escape(filmId)}" data-val="${i}"><svg class="ph-icon" aria-hidden="true" style="width:16px;height:16px"><use href="/icons/phosphor.svg#star"></use></svg></span>`;
+      return `<span class="movie-star${active}" data-film-id="${_esc(filmId)}" data-val="${i}"><svg class="ph-icon" aria-hidden="true" style="width:16px;height:16px"><use href="/icons/phosphor.svg#star"></use></svg></span>`;
     }).join('');
-    return `<div class="movie-star-rating" data-film-id="${UI.escape(filmId)}">${stars} <span class="movie-star-avg">${avg}</span></div>`;
+    return `<div class="movie-star-rating" data-film-id="${_esc(filmId)}">${stars} <span class="movie-star-avg">${avg}</span></div>`;
   }
 
   function _bindStarRatings(container) {
@@ -339,9 +339,9 @@ window.Page_movies = (() => {
           <div class="movie-promi-card">
             <div class="movie-promi-emoji">${p.emoji}</div>
             <div class="movie-promi-body">
-              <div class="movie-promi-name">${UI.escape(p.name)}</div>
-              <div class="movie-promi-rasse">${UI.escape(p.rasse)}</div>
-              <div class="movie-promi-text">${UI.escape(p.bekannt_fuer)}</div>
+              <div class="movie-promi-name">${_esc(p.name)}</div>
+              <div class="movie-promi-rasse">${_esc(p.rasse)}</div>
+              <div class="movie-promi-text">${_esc(p.bekannt_fuer)}</div>
             </div>
           </div>
         `).join('')}
@@ -370,13 +370,13 @@ window.Page_movies = (() => {
       const voteCards = _appState.dogs.map(dog => {
         const isVoted = data.user_vote === dog.id;
         const av = dog.foto_url
-          ? `<img src="${UI.escape(dog.foto_url)}" alt="${UI.escape(dog.name)}" class="hdm-vote-av-img">`
-          : `<span class="hdm-vote-av-placeholder">${UI.escape(dog.name.charAt(0).toUpperCase())}</span>`;
+          ? `<img src="${_esc(dog.foto_url)}" alt="${_esc(dog.name)}" class="hdm-vote-av-img">`
+          : `<span class="hdm-vote-av-placeholder">${_esc(dog.name.charAt(0).toUpperCase())}</span>`;
         return `
           <div class="hdm-vote-card${isVoted ? ' hdm-vote-card--voted' : ''}" data-dog-id="${dog.id}">
             <div class="hdm-vote-av">${av}</div>
-            <div class="hdm-vote-name">${UI.escape(dog.name)}</div>
-            ${dog.rasse ? `<div class="hdm-vote-rasse">${UI.escape(dog.rasse)}</div>` : ''}
+            <div class="hdm-vote-name">${_esc(dog.name)}</div>
+            ${dog.rasse ? `<div class="hdm-vote-rasse">${_esc(dog.rasse)}</div>` : ''}
             <button class="btn${isVoted ? ' btn-primary' : ' btn-secondary'} hdm-vote-btn" data-dog-id="${dog.id}">
               ${isVoted ? '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#check-circle"></use></svg> Gewählt' : 'Abstimmen'}
             </button>
@@ -405,16 +405,16 @@ window.Page_movies = (() => {
       ? data.top.slice(0, 5).map((dog, i) => {
           const medal = ['🥇','🥈','🥉','4️⃣','5️⃣'][i] || `${i+1}.`;
           const av = dog.foto_url
-            ? `<img src="${UI.escape(dog.foto_url)}" alt="${UI.escape(dog.name)}" class="hdm-top-av-img">`
-            : `<span class="hdm-top-av-placeholder">${UI.escape(dog.name.charAt(0).toUpperCase())}</span>`;
-          const vorname = dog.besitzer_name ? UI.escape(dog.besitzer_name.split(' ')[0]) : '';
+            ? `<img src="${_esc(dog.foto_url)}" alt="${_esc(dog.name)}" class="hdm-top-av-img">`
+            : `<span class="hdm-top-av-placeholder">${_esc(dog.name.charAt(0).toUpperCase())}</span>`;
+          const vorname = dog.besitzer_name ? _esc(dog.besitzer_name.split(' ')[0]) : '';
           return `
             <div class="hdm-top-entry">
               <span class="hdm-top-medal">${medal}</span>
               <div class="hdm-top-av">${av}</div>
               <div class="hdm-top-info">
-                <div class="hdm-top-name">${UI.escape(dog.name)}</div>
-                ${dog.rasse ? `<div class="hdm-top-rasse">${UI.escape(dog.rasse)}</div>` : ''}
+                <div class="hdm-top-name">${_esc(dog.name)}</div>
+                ${dog.rasse ? `<div class="hdm-top-rasse">${_esc(dog.rasse)}</div>` : ''}
                 ${vorname ? `<div class="hdm-top-besitzer">von ${vorname}</div>` : ''}
               </div>
               <div class="hdm-top-stimmen">${dog.stimmen} <svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#star"></use></svg></div>
@@ -427,7 +427,7 @@ window.Page_movies = (() => {
       <div class="hdm-header">
         <div class="hdm-trophy">🏆</div>
         <h2 class="hdm-title">Hund des Monats</h2>
-        <div class="hdm-monat">${UI.escape(monthName)}</div>
+        <div class="hdm-monat">${_esc(monthName)}</div>
       </div>
 
       ${voteSection}
@@ -465,7 +465,16 @@ window.Page_movies = (() => {
   // ----------------------------------------------------------
   // HELPER
   // ----------------------------------------------------------
-// ----------------------------------------------------------
+  function _esc(str) {
+    if (!str && str !== 0) return '';
+    return String(str)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+  }
+
+  // ----------------------------------------------------------
   // PUBLIC
   // ----------------------------------------------------------
   return { init, refresh };
diff --git a/backend/static/js/pages/notes.js b/backend/static/js/pages/notes.js
index 6fceffe..d78797d 100644
--- a/backend/static/js/pages/notes.js
+++ b/backend/static/js/pages/notes.js
@@ -47,6 +47,14 @@ window.Page_notes = (() => {
   // ----------------------------------------------------------
   // Hilfsfunktionen
   // ----------------------------------------------------------
+  function _esc(s) {
+    if (!s) return '';
+    return String(s)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+  }
 
   function _formatTime(isoStr) {
     if (!isoStr) return '';
@@ -68,10 +76,7 @@ window.Page_notes = (() => {
     } catch (_) { return 'Älteres'; }
   }
 
-  function _truncate(str, max = 600) {
-    // Karten zeigen max 5 Zeilen via CSS-Clamp — Text muss lang genug
-    // sein dass die Clamp greift. Bei sehr langen Notes: vor Clamp abschneiden
-    // damit der String nicht riesig in der DOM-Page steht.
+  function _truncate(str, max = 150) {
     if (!str) return '';
     return str.length > max ? str.slice(0, max) + '…' : str;
   }
@@ -120,7 +125,7 @@ window.Page_notes = (() => {
       .filter(([, items]) => items.length > 0)
       .map(([label, items]) => `
         <div class="notes-group">
-          <div class="list-group-header">${UI.escape(label)}</div>
+          <div class="notes-group-label">${_esc(label)}</div>
           ${items.map(_noteCard).join('')}
         </div>
       `).join('');
@@ -161,9 +166,9 @@ window.Page_notes = (() => {
         <div class="notes-filter-chips">
           ${RUBRIKEN.map(r => `
             <button class="notes-chip ${_filterType === r.type ? 'notes-chip--active' : ''}"
-                    data-type="${UI.escape(r.type)}"
+                    data-type="${_esc(r.type)}"
                     style="${_filterType === r.type ? `--chip-color:${r.color}` : ''}">
-              ${UI.escape(r.label)}
+              ${_esc(r.label)}
             </button>
           `).join('')}
         </div>
@@ -173,7 +178,7 @@ window.Page_notes = (() => {
           <div class="notes-search-wrap">
             <svg class="ph-icon notes-search-icon" aria-hidden="true"><use href="/icons/phosphor.svg#magnifying-glass"></use></svg>
             <input id="notes-search" type="search" class="notes-search-input"
-                   placeholder="Suche…" value="${UI.escape(_searchQ)}">
+                   placeholder="Suche…" value="${_esc(_searchQ)}">
           </div>
           <div class="notes-sort-btns">
             <button class="notes-sort-btn ${_sortMode === 'newest' ? 'notes-sort-btn--active' : ''}"
@@ -238,32 +243,21 @@ window.Page_notes = (() => {
 
         /* Gruppen */
         .notes-group { display: flex; flex-direction: column; gap: var(--space-2); }
-        /* TODO nach Migration entfernen: ersetzt durch .list-group-header in lists.css */
         .notes-group-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .05em; padding: var(--space-1) 0; }
 
-        /* Karten — Notes-spezifischer Override: vertikales Layout statt horizontalem .list-item-card */
-        .notes-card { flex-direction: column; gap: var(--space-2); }
-        .notes-card-top { display: flex; align-items: flex-start; gap: var(--space-2); width: 100%; }
-        /* TODO nach Migration entfernen: ersetzt durch .list-item-chip */
-        /* .notes-rubrik-chip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: var(--weight-semibold); padding: 2px var(--space-2); border-radius: 999px; flex-shrink: 0; } */
+        /* Karten */
+        .notes-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
+        .notes-card-top { display: flex; align-items: flex-start; gap: var(--space-2); }
+        .notes-rubrik-chip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: var(--weight-semibold); padding: 2px var(--space-2); border-radius: 999px; flex-shrink: 0; }
         .notes-parent-label { font-size: var(--text-xs); color: var(--c-text-secondary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-self: center; }
-        /* TODO nach Migration entfernen: ersetzt durch .list-item-meta-row */
-        /* .notes-card-meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--c-text-muted); } */
-        /* Notes-Override: Actions in Top-Zeile rechts ausrichten (statt align-self:center bei list-item-actions) */
-        .notes-card-actions { margin-left: auto; align-self: flex-start; }
-        /* Notes-Override: Newlines (pre-wrap) + max 5 Zeilen mit "…", Rest in Detail-Modal */
-        .notes-card-text { line-height: 1.55; white-space: pre-wrap; margin: 0; color: var(--c-text);
-          display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
-        /* Detail-Modal: voller Notiz-Text scrollbar */
-        .notes-detail-text { white-space: pre-wrap; line-height: 1.6; font-size: var(--text-base);
-          color: var(--c-text); margin: 0; max-height: 60vh; overflow-y: auto; }
-        /* TODO nach Migration entfernen: ersetzt durch .list-item-micro-badges / .list-item-micro-badge */
-        /* .notes-micro-badges { display: flex; flex-wrap: wrap; gap: var(--space-1); } */
-        /* .notes-micro-badge { font-size: var(--text-xs); padding: 2px 6px; border-radius: var(--radius-sm); background: var(--c-surface-2); color: var(--c-text-secondary); } */
-        /* TODO nach Migration entfernen: ersetzt durch .list-item-action-btn / --danger */
-        /* .notes-action-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md); border: 1px solid var(--c-border); background: var(--c-surface-2); color: var(--c-text-muted); cursor: pointer; font-size: 1rem; transition: background .15s, color .15s; } */
-        /* .notes-action-btn:hover { background: var(--c-surface); color: var(--c-text); } */
-        /* .notes-action-btn--danger:hover { background: #fef2f2; color: var(--c-danger); border-color: var(--c-danger); } */
+        .notes-card-meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--c-text-muted); }
+        .notes-card-actions { display: flex; gap: var(--space-2); margin-left: auto; flex-shrink: 0; }
+        .notes-card-text { font-size: var(--text-sm); color: var(--c-text); line-height: 1.55; white-space: pre-wrap; margin: 0; }
+        .notes-micro-badges { display: flex; flex-wrap: wrap; gap: var(--space-1); }
+        .notes-micro-badge { font-size: var(--text-xs); padding: 2px 6px; border-radius: var(--radius-sm); background: var(--c-surface-2); color: var(--c-text-secondary); }
+        .notes-action-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md); border: 1px solid var(--c-border); background: var(--c-surface-2); color: var(--c-text-muted); cursor: pointer; font-size: 1rem; transition: background .15s, color .15s; }
+        .notes-action-btn:hover { background: var(--c-surface); color: var(--c-text); }
+        .notes-action-btn--danger:hover { background: #fef2f2; color: var(--c-danger); border-color: var(--c-danger); }
 
         .notes-list { display: flex; flex-direction: column; gap: var(--space-4); }
         @keyframes spin { to { transform: rotate(360deg); } }
@@ -291,11 +285,11 @@ window.Page_notes = (() => {
             <button class="notes-ki-btn" id="notes-ki-analyse-btn" ${_kiLoading ? 'disabled' : ''}>
               ${_kiLoading ? '<svg class="ph-icon" aria-hidden="true" style="animation:spin 1s linear infinite"><use href="/icons/phosphor.svg#spinner-gap"></use></svg> Analysiere…' : 'Analysieren'}
             </button>
-            ${_kiError ? `<div class="notes-ki-error"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#warning-circle"></use></svg> ${UI.escape(_kiError)}</div>` : ''}
+            ${_kiError ? `<div class="notes-ki-error"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#warning-circle"></use></svg> ${_esc(_kiError)}</div>` : ''}
             ${_kiSuggestions ? `
               <div class="notes-ki-suggestions">
                 <ul>
-                  ${_kiSuggestions.map(s => `<li>${UI.escape(s)}</li>`).join('')}
+                  ${_kiSuggestions.map(s => `<li>${_esc(s)}</li>`).join('')}
                 </ul>
               </div>
             ` : ''}
@@ -320,42 +314,43 @@ window.Page_notes = (() => {
     const hasLocation = !!note.location_name;
 
     return `
-      <div class="list-item-card list-item-card--clickable notes-card" data-id="${note.id}">
+      <div class="notes-card" data-id="${note.id}">
         <!-- Top-Zeile: Rubrik-Chip + parent_label + Zeit + Buttons -->
         <div class="notes-card-top">
-          <span class="list-item-chip" style="--chip-color:${rb.color}">
+          <span class="notes-rubrik-chip"
+                style="background:${rb.color}22;color:${rb.color}">
             <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#${rb.icon}"></use></svg>
-            ${UI.escape(rb.label)}
+            ${_esc(rb.label)}
           </span>
           ${note.parent_label
-            ? `<span class="notes-parent-label" title="${UI.escape(note.parent_label)}">${UI.escape(note.parent_label)}</span>`
+            ? `<span class="notes-parent-label" title="${_esc(note.parent_label)}">${_esc(note.parent_label)}</span>`
             : ''
           }
-          <div class="list-item-actions notes-card-actions">
-            <button class="list-item-action-btn notes-edit-btn" data-id="${note.id}" title="Bearbeiten">
+          <div class="notes-card-actions">
+            <button class="notes-action-btn notes-edit-btn" data-id="${note.id}" title="Bearbeiten">
               <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#pencil"></use></svg>
             </button>
-            <button class="list-item-action-btn list-item-action-btn--danger notes-delete-btn" data-id="${note.id}" title="Löschen">
+            <button class="notes-action-btn notes-action-btn--danger notes-delete-btn" data-id="${note.id}" title="Löschen">
               <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#trash"></use></svg>
             </button>
           </div>
         </div>
 
         <!-- Notiztext -->
-        <p class="list-item-text notes-card-text">${UI.escape(_truncate(note.text))}</p>
+        <p class="notes-card-text">${_esc(_truncate(note.text))}</p>
 
         <!-- Micro-Badges -->
         ${microBadges.length ? `
-          <div class="list-item-micro-badges">
-            ${microBadges.map(b => `<span class="list-item-micro-badge">${UI.escape(b)}</span>`).join('')}
+          <div class="notes-micro-badges">
+            ${microBadges.map(b => `<span class="notes-micro-badge">${_esc(b)}</span>`).join('')}
           </div>
         ` : ''}
 
         <!-- Meta: Zeit + Ort -->
-        <div class="list-item-meta-row">
+        <div class="notes-card-meta">
           <svg class="ph-icon" aria-hidden="true" style="width:12px;height:12px"><use href="/icons/phosphor.svg#clock"></use></svg>
-          ${UI.escape(_formatTime(note.updated_at || note.created_at))}
-          ${hasLocation ? `<svg class="ph-icon" aria-hidden="true" style="width:12px;height:12px"><use href="/icons/phosphor.svg#map-pin"></use></svg> ${UI.escape(note.location_name)}` : ''}
+          ${_esc(_formatTime(note.updated_at || note.created_at))}
+          ${hasLocation ? `<svg class="ph-icon" aria-hidden="true" style="width:12px;height:12px"><use href="/icons/phosphor.svg#map-pin"></use></svg> ${_esc(note.location_name)}` : ''}
         </div>
       </div>
     `;
@@ -465,64 +460,6 @@ window.Page_notes = (() => {
         }
       });
     });
-
-    // Karte selbst klickbar → Detail-Modal mit vollem Text
-    _container.querySelectorAll('.notes-card').forEach(card => {
-      card.addEventListener('click', e => {
-        // Klicks auf Action-Buttons nicht doppelt verarbeiten
-        if (e.target.closest('.list-item-action-btn')) return;
-        const note = _notes.find(n => n.id === parseInt(card.dataset.id, 10));
-        if (note) _openDetailModal(note);
-      });
-    });
-  }
-
-  // ----------------------------------------------------------
-  // Detail-Modal: voller Notiz-Text + Meta + Bearbeiten/Löschen
-  // ----------------------------------------------------------
-  function _openDetailModal(note) {
-    const rb = RUBRIKEN.find(r => r.id === note.rubrik) || RUBRIKEN[0];
-    const meta = (() => { try { return JSON.parse(note.meta || '{}'); } catch { return {}; } })();
-    const microBadges = [];
-    if (meta.erfolg)        microBadges.push(`🐾 ${meta.erfolg}/5`);
-    if (meta.umgebung)      microBadges.push({ zuhause: '🏠 Zuhause', natur: '🌿 Natur', stadt: '🌆 Stadt' }[meta.umgebung] || meta.umgebung);
-    if (meta.hund_stimmung) microBadges.push({ super: '😊 Super', ok: '😐 Ok', mude: '😔 Müde' }[meta.hund_stimmung] || meta.hund_stimmung);
-
-    UI.modal.open({
-      title: `${UI.icon(rb.icon)} ${UI.escape(rb.label)}`,
-      body: `
-        <div class="flex-col-gap-3">
-          ${note.parent_label
-            ? `<div class="text-sm-secondary"><strong>${UI.escape(note.parent_label)}</strong></div>` : ''}
-
-          <p class="notes-detail-text">${UI.escape(note.text || '')}</p>
-
-          ${microBadges.length ? `
-            <div class="list-item-micro-badges">
-              ${microBadges.map(b => `<span class="list-item-micro-badge">${UI.escape(b)}</span>`).join('')}
-            </div>` : ''}
-
-          <div class="list-item-meta-row" style="margin-top:var(--space-2)">
-            <svg class="ph-icon icon-sm" aria-hidden="true"><use href="/icons/phosphor.svg#clock"></use></svg>
-            ${UI.escape(_formatTime(note.updated_at || note.created_at))}
-            ${note.location_name
-              ? `<svg class="ph-icon icon-sm" aria-hidden="true"><use href="/icons/phosphor.svg#map-pin"></use></svg> ${UI.escape(note.location_name)}` : ''}
-          </div>
-        </div>
-      `,
-      footer: `
-        <div class="flex-gap-2" style="width:100%">
-          <button class="btn btn-ghost flex-1" id="notes-detail-edit">
-            ${UI.icon('pencil')} Bearbeiten
-          </button>
-          <button class="btn btn-secondary" data-modal-close>Schließen</button>
-        </div>
-      `,
-    });
-    document.getElementById('notes-detail-edit')?.addEventListener('click', () => {
-      UI.modal.close();
-      _openEditModal(note);
-    });
   }
 
   // ----------------------------------------------------------
@@ -562,7 +499,7 @@ window.Page_notes = (() => {
           <h3 style="font-size:var(--text-base);font-weight:700;margin:0 0 var(--space-4)">Neue Notiz</h3>
 
           <!-- Kategorie-Auswahl -->
-          <div class="mb-4">
+          <div style="margin-bottom:var(--space-4)">
             <label style="display:block;font-size:var(--text-sm);font-weight:600;color:var(--c-text);margin-bottom:var(--space-2)">Kategorie</label>
             <div style="display:flex;flex-wrap:wrap;gap:var(--space-2)">
               ${ERSTELL_RUBRIKEN.map(r => `
@@ -571,13 +508,13 @@ window.Page_notes = (() => {
                                border-radius:999px;border:1.5px solid ${_selType===r.type ? r.color : 'var(--c-border)'};
                                background:${_selType===r.type ? r.color+'22' : 'var(--c-surface-2)'};
                                color:${_selType===r.type ? r.color : 'var(--c-text-secondary)'};cursor:pointer">
-                  ${UI.escape(r.label)}
+                  ${_esc(r.label)}
                 </button>`).join('')}
             </div>
           </div>
 
           <!-- Text -->
-          <div class="mb-4">
+          <div style="margin-bottom:var(--space-4)">
             <label style="display:block;font-size:var(--text-sm);font-weight:600;color:var(--c-text);margin-bottom:var(--space-2)">Notiz</label>
             <textarea id="nc-text" rows="5" placeholder="Was möchtest du festhalten…"
                       style="width:100%;padding:var(--space-3);border:1.5px solid var(--c-border);
@@ -587,9 +524,9 @@ window.Page_notes = (() => {
                              box-sizing:border-box"></textarea>
           </div>
 
-          <div class="flex-gap-3">
-            <button id="nc-cancel" class="btn btn-ghost flex-1">Abbrechen</button>
-            <button id="nc-save" class="btn btn-primary flex-1">Speichern</button>
+          <div style="display:flex;gap:var(--space-3)">
+            <button id="nc-cancel" class="btn btn-ghost" style="flex:1">Abbrechen</button>
+            <button id="nc-save" class="btn btn-primary" style="flex:1">Speichern</button>
           </div>
         </div>`;
     };
@@ -664,7 +601,7 @@ window.Page_notes = (() => {
           <span style="display:inline-flex;align-items:center;gap:4px;font-size:var(--text-xs);
                        font-weight:var(--weight-semibold);padding:2px var(--space-2);border-radius:999px;
                        background:${rb.color}22;color:${rb.color}">
-            <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#${rb.icon}"></use></svg> ${UI.escape(rb.label)}
+            <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#${rb.icon}"></use></svg> ${_esc(rb.label)}
           </span>
           <h3 style="font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--c-text);margin:0">
             Notiz bearbeiten
@@ -682,7 +619,7 @@ window.Page_notes = (() => {
                              border-radius:var(--radius-md);font-size:var(--text-sm);
                              font-family:var(--font-sans);background:var(--c-surface);
                              color:var(--c-text);resize:vertical;outline:none;line-height:1.5;
-                             box-sizing:border-box">${UI.escape(note.text)}</textarea>
+                             box-sizing:border-box">${_esc(note.text)}</textarea>
           </div>
 
           ${note.parent_type === 'training_session' ? `
@@ -690,7 +627,7 @@ window.Page_notes = (() => {
           <div>
             <label style="display:block;font-size:var(--text-sm);font-weight:var(--weight-semibold);
                           color:var(--c-text);margin-bottom:var(--space-2)">Bewertung</label>
-            <div class="flex-gap-2">
+            <div style="display:flex;gap:var(--space-2)">
               ${[1,2,3,4,5].map(n => `
                 <button type="button" class="notes-pfote" data-val="${n}"
                         style="font-size:1.3rem;border:1.5px solid var(--c-border);border-radius:var(--radius-md);
@@ -705,7 +642,7 @@ window.Page_notes = (() => {
           <div>
             <label style="display:block;font-size:var(--text-sm);font-weight:var(--weight-semibold);
                           color:var(--c-text);margin-bottom:var(--space-2)">Umgebung</label>
-            <div class="flex-gap-2">
+            <div style="display:flex;gap:var(--space-2)">
               ${[['🏠','zuhause'],['🌿','natur'],['🌆','stadt']].map(([emoji,val]) => `
                 <button type="button" class="notes-umgebung" data-val="${val}"
                         style="font-size:1.2rem;border:1.5px solid var(--c-border);border-radius:var(--radius-md);
@@ -720,7 +657,7 @@ window.Page_notes = (() => {
           <div>
             <label style="display:block;font-size:var(--text-sm);font-weight:var(--weight-semibold);
                           color:var(--c-text);margin-bottom:var(--space-2)">Stimmung des Hundes</label>
-            <div class="flex-gap-2">
+            <div style="display:flex;gap:var(--space-2)">
               ${[['😊','super'],['😐','ok'],['😔','mude']].map(([emoji,val]) => `
                 <button type="button" class="notes-stimmung" data-val="${val}"
                         style="font-size:1.2rem;border:1.5px solid var(--c-border);border-radius:var(--radius-md);
diff --git a/backend/static/js/pages/onboarding.js b/backend/static/js/pages/onboarding.js
index c292f03..a8fd9b7 100644
--- a/backend/static/js/pages/onboarding.js
+++ b/backend/static/js/pages/onboarding.js
@@ -85,7 +85,7 @@ window.Page_onboarding = (() => {
   // ----------------------------------------------------------
   function _step1() {
     return `
-      <div class="text-center">
+      <div style="text-align:center">
 
         <!-- Logo -->
         <div style="margin-bottom:var(--space-6)">
@@ -133,19 +133,19 @@ window.Page_onboarding = (() => {
               <div>
                 <div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
                              color:var(--c-text)">${title}</div>
-                <div class="text-xs-secondary">${desc}</div>
+                <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">${desc}</div>
               </div>
             </div>
           `).join('')}
         </div>
 
         <!-- Buttons -->
-        <div class="flex-col-gap-3">
-          <button class="btn btn-primary" id="ob-next-btn" class="w-full">
+        <div style="display:flex;flex-direction:column;gap:var(--space-3)">
+          <button class="btn btn-primary" id="ob-next-btn" style="width:100%">
             <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#arrow-right"></use></svg>
             Los geht's
           </button>
-          <button class="btn btn-ghost" id="ob-skip-btn" class="w-full">
+          <button class="btn btn-ghost" id="ob-skip-btn" style="width:100%">
             Überspringen
           </button>
         </div>
@@ -222,7 +222,7 @@ window.Page_onboarding = (() => {
               <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#camera"></use></svg>
               <span id="ob-photo-label">Foto auswählen</span>
               <input type="file" name="foto" id="ob-photo-input"
-                     accept="image/*" class="hidden">
+                     accept="image/*" style="display:none">
             </label>
           </div>
 
@@ -234,13 +234,13 @@ window.Page_onboarding = (() => {
             <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#arrow-left"></use></svg>
           </button>
           <button type="submit" form="ob-dog-form" class="btn btn-primary" id="ob-save-btn"
-                  class="flex-1">
+                  style="flex:1">
             <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#dog"></use></svg>
             Hund anlegen
           </button>
         </div>
         <div style="text-align:center;margin-top:var(--space-3)">
-          <button class="btn btn-ghost" id="ob-skip-btn" class="text-sm">
+          <button class="btn btn-ghost" id="ob-skip-btn" style="font-size:var(--text-sm)">
             Ohne Hund fortfahren
           </button>
         </div>
@@ -255,7 +255,7 @@ window.Page_onboarding = (() => {
   function _step3() {
     const dogName = _appState.activeDog?.name;
     return `
-      <div class="text-center">
+      <div style="text-align:center">
 
         <!-- Erfolgs-Icon -->
         <div style="margin-bottom:var(--space-6)">
@@ -276,7 +276,7 @@ window.Page_onboarding = (() => {
         ${dogName ? `
           <p style="font-size:var(--text-base);color:var(--c-text-secondary);
                     line-height:1.6;margin:0 0 var(--space-3)">
-            <strong>${UI.escape(dogName)}</strong> ist jetzt in Ban Yaro.
+            <strong>${_esc(dogName)}</strong> ist jetzt in Ban Yaro.
             Du kannst jetzt Einträge im Tagebuch anlegen, die Gesundheit pflegen
             und viele weitere Funktionen nutzen.
           </p>
@@ -294,13 +294,13 @@ window.Page_onboarding = (() => {
         </p>
 
         <!-- CTA -->
-        <div class="flex-col-gap-3">
-          <button class="btn btn-primary" id="ob-diary-btn" class="w-full">
+        <div style="display:flex;flex-direction:column;gap:var(--space-3)">
+          <button class="btn btn-primary" id="ob-diary-btn" style="width:100%">
             <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#book-open"></use></svg>
             Zum Tagebuch
           </button>
           ${dogName ? `
-            <button class="btn btn-secondary" id="ob-profile-btn" class="w-full">
+            <button class="btn btn-secondary" id="ob-profile-btn" style="width:100%">
               <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#dog"></use></svg>
               Profil vervollständigen
             </button>
@@ -416,7 +416,7 @@ window.Page_onboarding = (() => {
       }
       App.renderDogSwitcher();
 
-      UI.toast.success(`${UI.escape(dog.name)} wurde angelegt!`);
+      UI.toast.success(`${_esc(dog.name)} wurde angelegt!`);
 
       _step = 3;
       _render();
@@ -452,6 +452,9 @@ window.Page_onboarding = (() => {
   // ----------------------------------------------------------
   // HELPER
   // ----------------------------------------------------------
+  function _esc(s) {
+    return UI.escape(s || '');
+  }
 
   // ----------------------------------------------------------
   // PUBLIC
diff --git a/backend/static/js/pages/partner-profil.js b/backend/static/js/pages/partner-profil.js
deleted file mode 100644
index 0035f12..0000000
--- a/backend/static/js/pages/partner-profil.js
+++ /dev/null
@@ -1,274 +0,0 @@
-/* ============================================================
-   BAN YARO — Partner-Profil-Editor
-   Nur für User mit is_partner=1.
-   ============================================================ */
-
-window.Page_partner_profil = (() => {
-
-  let _container = null;
-  let _profile   = null;
-
-  async function init(container, appState) {
-    _container = container;
-    _render();
-    await _load();
-  }
-
-  function refresh() { _load(); }
-  function onDogChange() {}
-
-  function _render() {
-    _container.innerHTML = `
-      <div style="max-width:640px;margin:0 auto;padding:var(--space-4)">
-        <div style="margin-bottom:var(--space-5)">
-          <h1 style="font-size:var(--text-xl);font-weight:800;margin:0 0 var(--space-1)">
-            Mein Partner-Profil
-          </h1>
-          <p style="color:var(--c-text-secondary);font-size:var(--text-sm);margin:0">
-            Richte deine öffentliche Präsenz auf der Partner-Seite ein.
-            Nach dem Absenden prüfen wir dein Profil und schalten es frei.
-          </p>
-        </div>
-        <div id="pp-content">
-          <div style="text-align:center;padding:var(--space-8);color:var(--c-text-muted)">Lade…</div>
-        </div>
-      </div>
-    `;
-  }
-
-  async function _load() {
-    const el = _container.querySelector('#pp-content');
-    try {
-      const d = await API.get('/partner/my-profile');
-      _profile = d.profile || {};
-      _profile._storage_mb       = d.storage_mb       || 0;
-      _profile._storage_limit_mb = d.storage_limit_mb || 200;
-      el.innerHTML = _renderEditor();
-      _bindEvents(el);
-    } catch (e) {
-      el.innerHTML = `<p class="text-danger">${e.message}</p>`;
-    }
-  }
-
-  function _statusBadge() {
-    if (!_profile?.submitted_at && !_profile?.approved) return '';
-    const a = _profile.approved;
-    if (a === 1)  return `<span style="background:#dcfce7;color:#16a34a;padding:3px 10px;border-radius:999px;font-size:var(--text-xs);font-weight:700">✓ Freigegeben</span>`;
-    if (a === -1) return `<span style="background:#fee2e2;color:#dc2626;padding:3px 10px;border-radius:999px;font-size:var(--text-xs);font-weight:700">✗ Abgelehnt</span>`;
-    if (_profile.submitted_at) return `<span style="background:#fef9c3;color:#a16207;padding:3px 10px;border-radius:999px;font-size:var(--text-xs);font-weight:700">⏳ In Prüfung</span>`;
-    return `<span style="color:var(--c-text-muted);font-size:var(--text-xs)">Entwurf</span>`;
-  }
-
-  function _renderEditor() {
-    const p = _profile || {};
-    const photos = p.photos || [];
-    return `
-      <!-- Status -->
-      <div style="display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)">
-        <span class="text-sm-muted">Status:</span>
-        ${_statusBadge() || '<span style="color:var(--c-text-muted);font-size:var(--text-xs)">Noch kein Profil angelegt</span>'}
-      </div>
-
-      <!-- Logo -->
-      <div class="card" style="padding:var(--space-4);margin-bottom:var(--space-3)">
-        <div style="font-size:var(--text-xs);font-weight:700;text-transform:uppercase;
-                    letter-spacing:.06em;color:var(--c-text-muted);margin-bottom:var(--space-3)">Logo</div>
-        <div style="display:flex;align-items:center;gap:var(--space-4)">
-          <div id="pp-logo-preview" style="width:80px;height:80px;border-radius:var(--radius-md);
-               background:var(--c-surface-2);display:flex;align-items:center;justify-content:center;
-               overflow:hidden;flex-shrink:0">
-            ${p.logo_url
-              ? `<img src="${UI.escape(p.logo_url)}" style="width:100%;height:100%;object-fit:contain">`
-              : `<svg class="ph-icon" style="width:32px;height:32px;opacity:.3"><use href="/icons/phosphor.svg#image"></use></svg>`}
-          </div>
-          <div>
-            <label class="btn btn-secondary btn-sm" style="cursor:pointer">
-              Logo hochladen
-              <input type="file" id="pp-logo-input" accept="image/*" class="hidden">
-            </label>
-            <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:var(--space-1)">
-              PNG, JPG oder WebP · max. 5 MB · wird quadratisch zugeschnitten
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Texte -->
-      <div class="card" style="padding:var(--space-4);margin-bottom:var(--space-3)">
-        <div style="font-size:var(--text-xs);font-weight:700;text-transform:uppercase;
-                    letter-spacing:.06em;color:var(--c-text-muted);margin-bottom:var(--space-3)">Texte</div>
-        <form id="pp-text-form" class="flex-col-gap-3">
-          <div class="form-group">
-            <label class="form-label">Anzeigename *</label>
-            <input class="form-control" name="display_name" type="text" maxlength="60" required
-                   placeholder="z. B. Hundeblog Musterfrau"
-                   value="${UI.escape(p.display_name || '')}">
-          </div>
-          <div class="form-group">
-            <label class="form-label">Kurzslogan <span style="font-weight:400;color:var(--c-text-muted)">(max. 80 Zeichen)</span></label>
-            <input class="form-control" name="tagline" type="text" maxlength="80"
-                   placeholder="z. B. Hundetrainerin · 15.000 Follower auf Instagram"
-                   value="${UI.escape(p.tagline || '')}">
-          </div>
-          <div class="form-group">
-            <label class="form-label">Über dich / euer Kanal</label>
-            <textarea class="form-control" name="bio" rows="4" maxlength="500"
-                      placeholder="Wer bist du, was machst du, was verbindet dich mit Hunden?">${UI.escape(p.bio || p.pp_bio || '')}</textarea>
-          </div>
-          <div class="form-group">
-            <label class="form-label">Website</label>
-            <input class="form-control" name="website" type="url"
-                   placeholder="https://deine-seite.de"
-                   value="${UI.escape(p.website || '')}">
-          </div>
-          <div class="form-group">
-            <label class="form-label">Instagram</label>
-            <input class="form-control" name="instagram" type="text"
-                   placeholder="@deinkanal"
-                   value="${UI.escape(p.instagram || '')}">
-          </div>
-          <button type="submit" class="btn btn-secondary btn-sm" style="align-self:flex-start">
-            Texte speichern
-          </button>
-        </form>
-      </div>
-
-      <!-- Fotos -->
-      <div class="card" style="padding:var(--space-4);margin-bottom:var(--space-3)">
-        <div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--space-2)">
-          <div style="font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--c-text-muted)">
-            Fotos & Videos <span style="font-weight:400">(max. 6)</span>
-          </div>
-        </div>
-        <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-bottom:var(--space-2)">
-          JPG, PNG, HEIC, MP4, MOV · max. 200 MB pro Datei
-        </div>
-        <div class="mb-3">
-          ${_storageBar(p._storage_mb || 0, p._storage_limit_mb || 200)}
-        </div>
-        <div id="pp-photos-grid" style="display:grid;grid-template-columns:repeat(3,1fr);
-             gap:var(--space-2);margin-bottom:var(--space-3)">
-          ${photos.map((url, i) => {
-            const isVid = url.endsWith('.mp4') || url.endsWith('.webm');
-            return `
-            <div style="position:relative;aspect-ratio:1;border-radius:var(--radius-md);overflow:hidden;
-                        background:var(--c-surface-2)">
-              ${isVid
-                ? `<video src="${UI.escape(url)}" style="width:100%;height:100%;object-fit:cover" muted playsinline loop
-                          onmouseenter="this.play()" onmouseleave="this.pause()"></video>
-                   <div style="position:absolute;bottom:4px;left:4px;background:rgba(0,0,0,.55);
-                                border-radius:4px;padding:1px 5px;font-size:10px;color:#fff">▶ Video</div>`
-                : `<img src="${UI.escape(url)}" style="width:100%;height:100%;object-fit:cover">`}
-              <button class="pp-photo-del" data-idx="${i}"
-                      style="position:absolute;top:4px;right:4px;background:rgba(0,0,0,.6);
-                             border:none;border-radius:50%;width:24px;height:24px;cursor:pointer;
-                             color:#fff;font-size:14px;display:flex;align-items:center;justify-content:center">
-                ×
-              </button>
-            </div>`;
-          }).join('')}
-          ${photos.length < 6 ? `
-            <label style="aspect-ratio:1;border-radius:var(--radius-md);border:2px dashed var(--c-border);
-                          display:flex;align-items:center;justify-content:center;cursor:pointer;
-                          color:var(--c-text-muted);flex-direction:column;gap:4px">
-              <svg class="ph-icon" style="width:24px;height:24px"><use href="/icons/phosphor.svg#plus"></use></svg>
-              <span style="font-size:10px">Foto</span>
-              <input type="file" id="pp-photo-input" accept="image/*,video/*" class="hidden">
-            </label>` : ''}
-        </div>
-      </div>
-
-      <!-- Absenden -->
-      <div style="display:flex;gap:var(--space-3);justify-content:flex-end;margin-top:var(--space-4)">
-        <button id="pp-submit-btn" class="btn btn-primary">
-          Zur Freigabe einreichen
-        </button>
-      </div>
-    `;
-  }
-
-  function _bindEvents(el) {
-    // Logo hochladen
-    el.querySelector('#pp-logo-input')?.addEventListener('change', async e => {
-      const file = e.target.files[0];
-      if (!file) return;
-      const fd = new FormData();
-      fd.append('file', file);
-      try {
-        const r = await API.upload('/partner/my-profile/logo', fd);
-        el.querySelector('#pp-logo-preview').innerHTML =
-          `<img src="${UI.escape(r.logo_url)}" style="width:100%;height:100%;object-fit:contain">`;
-        _profile = { ..._profile, logo_url: r.logo_url };
-        UI.toast.success('Logo gespeichert.');
-      } catch (err) { UI.toast.error(err.message); }
-    });
-
-    // Texte speichern
-    el.querySelector('#pp-text-form')?.addEventListener('submit', async e => {
-      e.preventDefault();
-      const btn = e.target.querySelector('[type="submit"]');
-      const fd  = UI.formData(e.target);
-      await UI.asyncButton(btn, async () => {
-        await API.put('/partner/my-profile', fd);
-        _profile = { ..._profile, ...fd };
-        UI.toast.success('Gespeichert.');
-      });
-    });
-
-    // Foto/Video hochladen
-    el.querySelector('#pp-photo-input')?.addEventListener('change', async e => {
-      const file = e.target.files[0];
-      if (!file) return;
-      const isVideo = file.type.startsWith('video/');
-      const fd = new FormData();
-      fd.append('file', file);
-      if (isVideo) UI.toast.info('Video wird hochgeladen und komprimiert – das kann 1–2 Minuten dauern …', 120_000);
-      try {
-        const r = await API.upload('/partner/my-profile/photos', fd);
-        _profile = { ..._profile, photos: r.photos };
-        await _load();
-        UI.toast.success(isVideo ? 'Video hinzugefügt.' : 'Foto hinzugefügt.');
-      } catch (err) { UI.toast.error(err.message); }
-    });
-
-    // Foto löschen
-    el.querySelectorAll('.pp-photo-del').forEach(btn => {
-      btn.addEventListener('click', async () => {
-        const idx = parseInt(btn.dataset.idx);
-        try {
-          const r = await API.post(`/partner/my-profile/photos/${idx}/delete`, {});
-          _profile = { ..._profile, photos: r.photos };
-          await _load();
-        } catch (err) { UI.toast.error(err.message); }
-      });
-    });
-
-    // Einreichen
-    el.querySelector('#pp-submit-btn')?.addEventListener('click', async () => {
-      const btn = el.querySelector('#pp-submit-btn');
-      await UI.asyncButton(btn, async () => {
-        await API.post('/partner/my-profile/submit', {});
-        UI.toast.success('Eingereicht! Wir prüfen dein Profil und schalten es bald frei.');
-        await _load();
-      });
-    });
-  }
-
-  function _storageBar(usedMb, limitMb) {
-    const pct  = Math.min(100, Math.round((usedMb / limitMb) * 100));
-    const color = pct > 85 ? '#dc2626' : pct > 60 ? '#f59e0b' : '#22c55e';
-    return `
-      <div style="display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--c-text-muted)">
-        <div style="flex:1;height:4px;background:var(--c-surface-2);border-radius:2px;overflow:hidden">
-          <div style="width:${pct}%;height:100%;background:${color};border-radius:2px;transition:width .4s"></div>
-        </div>
-        <span style="white-space:nowrap;color:${pct > 85 ? '#dc2626' : 'var(--c-text-muted)'}">
-          ${usedMb.toFixed(1)} / ${limitMb} MB
-        </span>
-      </div>`;
-  }
-
-
-  return { init, refresh, onDogChange };
-
-})();
diff --git a/backend/static/js/pages/partner.js b/backend/static/js/pages/partner.js
deleted file mode 100644
index a59b2b2..0000000
--- a/backend/static/js/pages/partner.js
+++ /dev/null
@@ -1,149 +0,0 @@
-/* ============================================================
-   BAN YARO — Partner-Seite
-   Showcase der offiziellen Ban Yaro Partner.
-   ============================================================ */
-
-window.Page_partner = (() => {
-
-  let _container = null;
-
-  async function init(container) {
-    _container = container;
-    _render();
-    _load();
-  }
-
-  function refresh() { _load(); }
-  function onDogChange() {}
-
-  function _render() {
-    _container.innerHTML = `
-      <div style="max-width:680px;margin:0 auto;padding:var(--space-4)">
-        <div style="text-align:center;margin-bottom:var(--space-6)">
-          <div style="font-size:48px;margin-bottom:var(--space-2)">🤝</div>
-          <h1 style="font-size:var(--text-2xl);font-weight:800;margin:0 0 var(--space-2)">
-            Unsere Partner
-          </h1>
-          <p style="color:var(--c-text-secondary);font-size:var(--text-sm);max-width:480px;margin:0 auto">
-            Diese Menschen glauben an Ban Yaro — und helfen uns, die Community zu wachsen.
-            Über ihre persönlichen Einladungscodes können sie neue Gründer vermitteln.
-          </p>
-        </div>
-        <div id="partner-content">
-          <div style="text-align:center;padding:var(--space-8);color:var(--c-text-muted)">Lade…</div>
-        </div>
-      </div>
-    `;
-  }
-
-  async function _load() {
-    const el = _container.querySelector('#partner-content');
-    try {
-      const d = await API.get('/partners/public');
-      if (!d?.partners) throw new Error('Keine Daten.');
-      el.innerHTML = _renderPartners(d.partners);
-    } catch (e) {
-      el.innerHTML = `<p style="color:var(--c-text-muted);text-align:center">${e.message || 'Fehler beim Laden.'}</p>`;
-    }
-  }
-
-  function _renderPartners(partners) {
-    if (!partners.length) {
-      return `
-        <div class="by-card" style="padding:var(--space-6);text-align:center">
-          <p class="text-sm-muted">
-            Noch keine Partner — das könnte schon bald du sein.
-          </p>
-        </div>
-        ${_cta()}
-      `;
-    }
-
-    const COLORS = [
-      'linear-gradient(135deg,#7c3aed,#a855f7)',
-      'linear-gradient(135deg,#2563eb,#3b82f6)',
-      'linear-gradient(135deg,#059669,#10b981)',
-      'linear-gradient(135deg,#d97706,#f59e0b)',
-      'linear-gradient(135deg,#db2777,#ec4899)',
-    ];
-
-    return `
-      <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-3);margin-bottom:var(--space-5)">
-        ${partners.map((p, i) => {
-          const initial = (p.name || '?')[0].toUpperCase();
-          const grad    = COLORS[i % COLORS.length];
-          return `
-            <div class="by-card" style="padding:var(--space-4);position:relative;overflow:hidden">
-              <div style="position:absolute;top:0;left:0;right:0;height:3px;background:${grad}"></div>
-              <div style="display:flex;align-items:center;gap:var(--space-3)">
-                        ${p.logo_url
-                  ? `<img src="${UI.escape(p.logo_url)}" alt=""
-                          style="width:56px;height:56px;border-radius:var(--radius-md);object-fit:contain;flex-shrink:0;background:var(--c-surface-2);padding:4px">`
-                  : p.avatar_url
-                  ? `<img src="${UI.escape(p.avatar_url)}" alt=""
-                          style="width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0">`
-                  : `<div style="width:56px;height:56px;border-radius:50%;flex-shrink:0;
-                                 background:${grad};display:flex;align-items:center;
-                                 justify-content:center;font-size:24px;font-weight:800;color:#fff">
-                       ${initial}
-                     </div>`
-                }
-                <div class="flex-1-min">
-                  <div style="font-weight:700;font-size:var(--text-base)">${UI.escape(p.display_name || p.name)}</div>
-                  ${p.tagline ? `<div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:1px">${UI.escape(p.tagline)}</div>` : ''}
-                  <div style="display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-1)">
-                    ${p.website ? `<a href="${UI.escape(p.website)}" target="_blank" rel="noopener"
-                       style="font-size:var(--text-xs);color:var(--c-primary)">
-                       🌐 ${UI.escape(p.website.replace(/^https?:\/\//, ''))}</a>` : ''}
-                    ${p.instagram ? `<span class="text-xs-muted">📸 ${UI.escape(p.instagram)}</span>` : ''}
-                  </div>
-                </div>
-              </div>
-              ${p.pp_bio || p.bio ? `<p style="margin:var(--space-3) 0 0;font-size:var(--text-sm);
-                                   color:var(--c-text-secondary);line-height:1.5">
-                           ${UI.escape(p.pp_bio || p.bio)}
-                         </p>` : ''}
-              ${p.photos?.length ? `
-              <div style="display:grid;grid-template-columns:repeat(${Math.min(p.photos.length,3)},1fr);
-                           gap:var(--space-1);margin-top:var(--space-3);border-radius:var(--radius-md);overflow:hidden">
-                ${p.photos.slice(0,3).map(url => {
-                  const isVid = url.endsWith('.mp4') || url.endsWith('.webm');
-                  return isVid
-                    ? `<video src="${UI.escape(url)}" style="width:100%;aspect-ratio:1;object-fit:cover"
-                              muted playsinline loop autoplay></video>`
-                    : `<img src="${UI.escape(url)}" style="width:100%;aspect-ratio:1;object-fit:cover">`;
-                }).join('')}
-              </div>` : ''}
-            </div>
-          `;
-        }).join('')}
-      </div>
-      ${_cta()}
-    `;
-  }
-
-  function _cta() {
-    return `
-      <div class="by-card" style="padding:var(--space-5);text-align:center;
-           background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(168,85,247,.08));
-           border:1px solid rgba(124,58,237,.2)">
-        <div style="font-size:var(--text-base);font-weight:700;margin-bottom:var(--space-2)">
-          Du möchtest Partner werden?
-        </div>
-        <p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin:0 0 var(--space-3)">
-          Schreib uns — wir richten deinen persönlichen Einladungscode ein.
-        </p>
-        <a href="mailto:partner@banyaro.app?subject=Ban Yaro Partner"
-           style="display:inline-block;padding:10px 24px;background:linear-gradient(135deg,#7c3aed,#a855f7);
-                  color:#fff;border-radius:var(--radius-full);font-weight:700;
-                  font-size:var(--text-sm);text-decoration:none">
-          📧 partner@banyaro.app
-        </a>
-      </div>
-    `;
-  }
-
-
-  return { init, refresh, onDogChange };
-
-})();
diff --git a/backend/static/js/pages/personality.js b/backend/static/js/pages/personality.js
index 6a3bbbc..e1f159b 100644
--- a/backend/static/js/pages/personality.js
+++ b/backend/static/js/pages/personality.js
@@ -237,7 +237,7 @@ window.Page_personality = (() => {
         <!-- Fortschritt -->
         <div style="padding:var(--space-4) var(--space-4) 0">
           <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
-            <span class="text-xs-muted">
+            <span style="font-size:var(--text-xs);color:var(--c-text-muted)">
               Frage ${_current + 1} von ${FRAGEN.length}
             </span>
             <span style="font-size:var(--text-xs);font-weight:600;color:var(--c-primary)">${pct}%</span>
@@ -344,7 +344,7 @@ window.Page_personality = (() => {
         return `
           <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px">
             <span style="font-size:1rem;width:24px;text-align:center">${tp.emoji}</span>
-            <div class="flex-1">
+            <div style="flex:1">
               <div style="height:8px;background:var(--c-border);border-radius:4px;overflow:hidden">
                 <div style="height:100%;width:${pct}%;background:${tp.color};border-radius:4px;transition:width .6s"></div>
               </div>
@@ -414,7 +414,7 @@ window.Page_personality = (() => {
           <div style="padding:var(--space-3) var(--space-4);font-size:var(--text-xs);font-weight:600;
                       color:var(--c-text-secondary);text-transform:uppercase;letter-spacing:0.05em;
                       border-bottom:1px solid var(--c-border)">Dein Profil</div>
-          <div class="p-4">${scoreBars}</div>
+          <div style="padding:var(--space-4)">${scoreBars}</div>
         </div>
 
         <!-- Teilen + Nochmal -->
diff --git a/backend/static/js/pages/places.js b/backend/static/js/pages/places.js
index 767f708..f8b662b 100644
--- a/backend/static/js/pages/places.js
+++ b/backend/static/js/pages/places.js
@@ -281,8 +281,8 @@ window.Page_places = (() => {
         </div>
       </div>
       ${place.adresse ? `<p style="color:var(--c-text-secondary);margin-bottom:var(--space-2)">${UI.icon('map-pin')} ${UI.escape(place.adresse)}</p>` : ''}
-      ${place.telefon ? `<p class="mb-2"><a href="tel:${UI.escape(place.telefon)}" class="text-primary">${UI.icon('phone')} ${UI.escape(place.telefon)}</a></p>` : ''}
-      ${place.website ? `<p class="mb-2"><a href="${UI.escape(place.website)}" target="_blank" class="text-primary">${UI.icon('arrow-square-out')} ${UI.escape(place.website)}</a></p>` : ''}
+      ${place.telefon ? `<p style="margin-bottom:var(--space-2)"><a href="tel:${UI.escape(place.telefon)}" style="color:var(--c-primary)">${UI.icon('phone')} ${UI.escape(place.telefon)}</a></p>` : ''}
+      ${place.website ? `<p style="margin-bottom:var(--space-2)"><a href="${UI.escape(place.website)}" target="_blank" style="color:var(--c-primary)">${UI.icon('arrow-square-out')} ${UI.escape(place.website)}</a></p>` : ''}
       ${flags.length ? `<div style="display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)">${flags.map(f => `<span class="places-flag places-flag--detail">${f}</span>`).join('')}</div>` : ''}
       <div id="place-rating-${place.id}"></div>
       <p style="color:var(--c-text-muted);font-size:0.8rem;margin-top:var(--space-4)">
@@ -291,7 +291,7 @@ window.Page_places = (() => {
     `;
 
     const footer = isOwn ? `
-      <button type="button" class="btn btn-secondary w-full" id="place-detail-edit">Bearbeiten</button>
+      <button type="button" class="btn btn-secondary" style="width:100%" id="place-detail-edit">Bearbeiten</button>
       <button type="button" class="btn btn-ghost" style="width:100%;margin-top:var(--space-2)" id="place-detail-close">Schließen</button>
     ` : `
       <button type="button" class="btn btn-primary flex-1" id="place-detail-close">Schließen</button>
@@ -348,24 +348,24 @@ window.Page_places = (() => {
         </div>
 
         <div class="form-group">
-          <label class="form-label">Adresse <span class="text-secondary">(optional)</span></label>
+          <label class="form-label">Adresse <span style="color:var(--c-text-secondary)">(optional)</span></label>
           <input class="form-control" type="text" name="adresse"
                  value="${UI.escape(place?.adresse || '')}" placeholder="Musterstraße 1, 12345 Musterstadt">
         </div>
 
         <div class="form-group">
-          <label class="form-label">Website <span class="text-secondary">(optional)</span></label>
+          <label class="form-label">Website <span style="color:var(--c-text-secondary)">(optional)</span></label>
           <input class="form-control" type="url" name="website"
                  value="${UI.escape(place?.website || '')}" placeholder="https://…">
         </div>
 
         <div class="form-group">
-          <label class="form-label">Telefon <span class="text-secondary">(optional)</span></label>
+          <label class="form-label">Telefon <span style="color:var(--c-text-secondary)">(optional)</span></label>
           <input class="form-control" type="tel" name="telefon"
                  value="${UI.escape(place?.telefon || '')}" placeholder="+49 89 123456">
         </div>
 
-        <div class="form-group flex-col-gap-2">
+        <div class="form-group" style="display:flex;flex-direction:column;gap:var(--space-2)">
           <label class="form-label">Hundefreundlichkeit</label>
           <label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer">
             <input type="checkbox" name="hund_rein" ${place?.hund_rein ? 'checked' : ''}>
@@ -386,10 +386,10 @@ window.Page_places = (() => {
 
     const footer = `
       <div style="display:flex;flex-direction:column;gap:var(--space-2);width:100%">
-        <button type="submit" form="place-form" class="btn btn-primary w-full">
+        <button type="submit" form="place-form" class="btn btn-primary" style="width:100%">
           ${isEdit ? 'Speichern' : 'Ort hinzufügen'}
         </button>
-        <div class="flex-gap-2">
+        <div style="display:flex;gap:var(--space-2)">
           ${isEdit ? `<button type="button" class="btn btn-danger" id="place-form-delete">Löschen</button>` : ''}
           <button type="button" class="btn btn-secondary flex-1" id="place-form-cancel">Abbrechen</button>
         </div>
diff --git a/backend/static/js/pages/playdate.js b/backend/static/js/pages/playdate.js
index 618a9fb..60eba05 100644
--- a/backend/static/js/pages/playdate.js
+++ b/backend/static/js/pages/playdate.js
@@ -15,16 +15,21 @@ window.Page_playdate = (() => {
   // ------------------------------------------------------------------
   // Helpers
   // ------------------------------------------------------------------
-function _fmtDate(iso) {
+  function _esc(s) {
+    return String(s || '').replace(/&/g, '&amp;').replace(/</g, '&lt;')
+                          .replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+  }
+
+  function _fmtDate(iso) {
     if (!iso) return '';
     const d = new Date(iso.replace(' ', 'T'));
     return d.toLocaleDateString('de-DE');
   }
 
   function _dogAvatar(foto_url, name, size = 48) {
-    const initials = UI.escape((name || '?').charAt(0).toUpperCase());
+    const initials = _esc((name || '?').charAt(0).toUpperCase());
     if (foto_url) {
-      return `<img src="${UI.escape(foto_url)}" alt="${initials}"
+      return `<img src="${_esc(foto_url)}" alt="${initials}"
                    style="width:${size}px;height:${size}px;border-radius:50%;object-fit:cover;display:block;"
                    onerror="this.outerHTML='<div style=\'width:${size}px;height:${size}px;border-radius:50%;background:var(--c-primary-subtle);display:flex;align-items:center;justify-content:center;font-size:${Math.round(size*0.45)}px;font-weight:700;color:var(--c-primary);\'>${initials}</div>'">`;
     }
@@ -81,7 +86,7 @@ function _fmtDate(iso) {
       <div class="playdate-layout">
 
         <!-- Tabs -->
-        <div class="by-tabs" id="playdate-tabs" class="mb-4">
+        <div class="by-tabs" id="playdate-tabs" style="margin-bottom:var(--space-4)">
           <button class="by-tab active" data-tab="nearby">In der Nähe</button>
           <button class="by-tab" data-tab="listings">Meine Inserate</button>
           <button class="by-tab" data-tab="requests">
@@ -128,7 +133,7 @@ function _fmtDate(iso) {
         <div style="display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);flex-wrap:wrap">
           <div style="display:flex;align-items:center;gap:var(--space-2)">
             ${UI.icon('map-pin')}
-            <span class="text-sm-secondary" id="nearby-location-label">
+            <span style="font-size:var(--text-sm);color:var(--c-text-secondary)" id="nearby-location-label">
               ${_userPos ? 'Standort bekannt' : 'Kein Standort'}
             </span>
           </div>
@@ -240,34 +245,34 @@ function _fmtDate(iso) {
 
   function _nearbyCard(d) {
     return `
-      <div class="card p-4">
+      <div class="card" style="padding:var(--space-4)">
         <div style="display:flex;gap:var(--space-3);align-items:flex-start;margin-bottom:var(--space-3)">
           ${_dogAvatar(d.foto_url, d.dog_name, 56)}
-          <div class="flex-1-min">
+          <div style="flex:1;min-width:0">
             <div style="font-weight:var(--weight-semibold);font-size:var(--text-base);
-                         color:var(--c-text)">${UI.escape(d.dog_name)}</div>
-            ${d.rasse ? `<div class="text-sm-secondary">${UI.escape(d.rasse)}</div>` : ''}
-            ${d.alter ? `<div class="text-xs-muted">${UI.escape(d.alter)}</div>` : ''}
+                         color:var(--c-text)">${_esc(d.dog_name)}</div>
+            ${d.rasse ? `<div style="font-size:var(--text-sm);color:var(--c-text-secondary)">${_esc(d.rasse)}</div>` : ''}
+            ${d.alter ? `<div style="font-size:var(--text-xs);color:var(--c-text-muted)">${_esc(d.alter)}</div>` : ''}
           </div>
         </div>
 
         <div style="display:flex;gap:var(--space-3);margin-bottom:var(--space-3);flex-wrap:wrap">
           <span style="display:flex;align-items:center;gap:4px;font-size:var(--text-xs);color:var(--c-text-secondary)">
             ${UI.icon('map-pin')}
-            ${d.ort_name ? UI.escape(d.ort_name) + ' · ' : ''}${d.entfernung_km} km entfernt
+            ${d.ort_name ? _esc(d.ort_name) + ' · ' : ''}${d.entfernung_km} km entfernt
           </span>
-          ${d.geschlecht ? `<span class="text-xs-muted">${UI.escape(d.geschlecht)}</span>` : ''}
+          ${d.geschlecht ? `<span style="font-size:var(--text-xs);color:var(--c-text-muted)">${_esc(d.geschlecht)}</span>` : ''}
         </div>
 
         ${d.beschreibung ? `
           <p style="font-size:var(--text-sm);color:var(--c-text-secondary);
                     margin:0 0 var(--space-3);line-height:1.5">
-            ${UI.escape(d.beschreibung)}
+            ${_esc(d.beschreibung)}
           </p>` : ''}
 
         <button class="btn btn-primary btn-sm playdate-anfrage-btn"
                 data-dog-id="${d.dog_id}"
-                data-dog-name="${UI.escape(d.dog_name)}">
+                data-dog-name="${_esc(d.dog_name)}">
           ${UI.icon('paw-print')} Spielkamerad anfragen
         </button>
       </div>
@@ -384,12 +389,12 @@ function _fmtDate(iso) {
   function _listingCard(dog, listing) {
     const isAktiv = listing && listing.aktiv;
     return `
-      <div class="card p-4">
+      <div class="card" style="padding:var(--space-4)">
         <div style="display:flex;gap:var(--space-3);align-items:center;margin-bottom:var(--space-3)">
           ${_dogAvatar(dog.foto_url, dog.name, 44)}
-          <div class="flex-1-min">
-            <div style="font-weight:var(--weight-semibold);color:var(--c-text)">${UI.escape(dog.name)}</div>
-            ${dog.rasse ? `<div class="text-xs-secondary">${UI.escape(dog.rasse)}</div>` : ''}
+          <div style="flex:1;min-width:0">
+            <div style="font-weight:var(--weight-semibold);color:var(--c-text)">${_esc(dog.name)}</div>
+            ${dog.rasse ? `<div style="font-size:var(--text-xs);color:var(--c-text-secondary)">${_esc(dog.rasse)}</div>` : ''}
           </div>
           <span style="font-size:var(--text-xs);font-weight:600;
                 padding:2px 10px;border-radius:999px;
@@ -402,12 +407,12 @@ function _fmtDate(iso) {
         ${isAktiv ? `
           <div style="font-size:var(--text-sm);color:var(--c-text-secondary);margin-bottom:var(--space-3)">
             ${UI.icon('map-pin')}
-            ${listing.ort_name ? UI.escape(listing.ort_name) + ' · ' : ''}
+            ${listing.ort_name ? _esc(listing.ort_name) + ' · ' : ''}
             Radius: ${listing.radius_km} km
           </div>
           ${listing.beschreibung ? `
             <p style="font-size:var(--text-sm);color:var(--c-text-secondary);
-                      margin:0 0 var(--space-3);line-height:1.5">${UI.escape(listing.beschreibung)}</p>` : ''}
+                      margin:0 0 var(--space-3);line-height:1.5">${_esc(listing.beschreibung)}</p>` : ''}
         ` : `
           <p style="font-size:var(--text-sm);color:var(--c-text-muted);margin:0 0 var(--space-3)">
             Noch kein Inserat — trage dich ein, damit andere dich finden können.
@@ -437,10 +442,10 @@ function _fmtDate(iso) {
         <form id="${formId}">
           <div class="form-group">
             <label class="form-label">Ort / Standort</label>
-            <div class="flex-gap-2">
+            <div style="display:flex;gap:var(--space-2)">
               <input type="text" id="listing-ort" class="form-control"
                      placeholder="z.B. München"
-                     value="${UI.escape(existing?.ort_name || '')}">
+                     value="${_esc(existing?.ort_name || '')}">
               <button type="button" class="btn btn-ghost btn-sm" id="listing-gps-btn"
                       title="GPS-Standort ermitteln">
                 ${UI.icon('crosshair')}
@@ -467,7 +472,7 @@ function _fmtDate(iso) {
           <div class="form-group">
             <label class="form-label">Beschreibung (optional)</label>
             <textarea id="listing-beschreibung" class="form-control" rows="3" maxlength="400"
-              placeholder="Erzähl etwas über deinen Hund und was ihr sucht…">${UI.escape(existing?.beschreibung || '')}</textarea>
+              placeholder="Erzähl etwas über deinen Hund und was ihr sucht…">${_esc(existing?.beschreibung || '')}</textarea>
           </div>
         </form>
       `,
@@ -573,7 +578,7 @@ function _fmtDate(iso) {
               <h3 style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
                           color:var(--c-text-muted);text-transform:uppercase;letter-spacing:0.05em;
                           margin:0 0 var(--space-3)">Eingehende Anfragen</h3>
-              <div class="flex-col-gap-3">
+              <div style="display:flex;flex-direction:column;gap:var(--space-3)">
                 ${incoming.map(r => _incomingCard(r)).join('')}
               </div>
             </div>` : ''}
@@ -583,7 +588,7 @@ function _fmtDate(iso) {
               <h3 style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
                           color:var(--c-text-muted);text-transform:uppercase;letter-spacing:0.05em;
                           margin:0 0 var(--space-3)">Ausgehende Anfragen</h3>
-              <div class="flex-col-gap-3">
+              <div style="display:flex;flex-direction:column;gap:var(--space-3)">
                 ${outgoing.map(r => _outgoingCard(r)).join('')}
               </div>
             </div>` : ''}
@@ -626,17 +631,17 @@ function _fmtDate(iso) {
   function _incomingCard(r) {
     const isPending = r.status === 'pending';
     return `
-      <div class="card p-4">
+      <div class="card" style="padding:var(--space-4)">
         <div style="display:flex;gap:var(--space-3);align-items:flex-start;margin-bottom:var(--space-3)">
           ${_dogAvatar(r.from_dog_foto, r.from_dog_name, 44)}
-          <div class="flex-1-min">
-            <div style="font-weight:var(--weight-semibold);color:var(--c-text)">${UI.escape(r.from_dog_name)}</div>
-            <div class="text-xs-secondary">
-              ${r.from_dog_rasse ? UI.escape(r.from_dog_rasse) + ' · ' : ''}
-              ${r.alter ? UI.escape(r.alter) + ' · ' : ''}
-              von ${UI.escape(r.from_user_name)}
+          <div style="flex:1;min-width:0">
+            <div style="font-weight:var(--weight-semibold);color:var(--c-text)">${_esc(r.from_dog_name)}</div>
+            <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">
+              ${r.from_dog_rasse ? _esc(r.from_dog_rasse) + ' · ' : ''}
+              ${r.alter ? _esc(r.alter) + ' · ' : ''}
+              von ${_esc(r.from_user_name)}
             </div>
-            <div class="text-xs-muted">${_fmtDate(r.created_at)}</div>
+            <div style="font-size:var(--text-xs);color:var(--c-text-muted)">${_fmtDate(r.created_at)}</div>
           </div>
           ${_statusBadge(r.status)}
         </div>
@@ -646,11 +651,11 @@ function _fmtDate(iso) {
                       background:var(--c-surface-2);border-radius:var(--radius-md);
                       padding:var(--space-2) var(--space-3);margin-bottom:var(--space-3);
                       line-height:1.5">
-            "${UI.escape(r.nachricht)}"
+            "${_esc(r.nachricht)}"
           </div>` : ''}
 
         ${isPending ? `
-          <div class="flex-gap-2">
+          <div style="display:flex;gap:var(--space-2)">
             <button class="btn btn-primary btn-sm req-accept-btn"
                     data-req-id="${r.id}" data-status="accepted">
               ${UI.icon('check')} Annehmen
@@ -671,23 +676,23 @@ function _fmtDate(iso) {
 
   function _outgoingCard(r) {
     return `
-      <div class="card p-4">
+      <div class="card" style="padding:var(--space-4)">
         <div style="display:flex;gap:var(--space-3);align-items:flex-start;margin-bottom:var(--space-3)">
           ${_dogAvatar(r.to_dog_foto, r.to_dog_name, 44)}
-          <div class="flex-1-min">
-            <div style="font-weight:var(--weight-semibold);color:var(--c-text)">${UI.escape(r.to_dog_name)}</div>
-            <div class="text-xs-secondary">
-              ${r.to_dog_rasse ? UI.escape(r.to_dog_rasse) + ' · ' : ''}
-              von ${UI.escape(r.to_user_name)}
+          <div style="flex:1;min-width:0">
+            <div style="font-weight:var(--weight-semibold);color:var(--c-text)">${_esc(r.to_dog_name)}</div>
+            <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">
+              ${r.to_dog_rasse ? _esc(r.to_dog_rasse) + ' · ' : ''}
+              von ${_esc(r.to_user_name)}
             </div>
-            <div class="text-xs-muted">${_fmtDate(r.created_at)}</div>
+            <div style="font-size:var(--text-xs);color:var(--c-text-muted)">${_fmtDate(r.created_at)}</div>
           </div>
           ${_statusBadge(r.status)}
         </div>
 
         ${r.nachricht ? `
           <p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin:0 0 var(--space-3)">
-            "${UI.escape(r.nachricht)}"
+            "${_esc(r.nachricht)}"
           </p>` : ''}
 
         ${r.status === 'accepted' ? `
diff --git a/backend/static/js/pages/poison.js b/backend/static/js/pages/poison.js
index f9d1151..ca5aca3 100644
--- a/backend/static/js/pages/poison.js
+++ b/backend/static/js/pages/poison.js
@@ -73,7 +73,7 @@ window.Page_poison = (() => {
         <a href="tel:110" class="btn btn-secondary" style="flex:1;text-align:center;text-decoration:none">
           ${UI.icon('phone')} <strong>110</strong> Polizei
         </a>
-        <button class="btn btn-secondary" id="poison-btn-erstehilfe" class="flex-1">
+        <button class="btn btn-secondary" id="poison-btn-erstehilfe" style="flex:1">
           ${UI.icon('first-aid')} Erste Hilfe & Tiergift
         </button>
       </div>
@@ -94,7 +94,8 @@ window.Page_poison = (() => {
     document.getElementById('poison-btn-erstehilfe')
       ?.addEventListener('click', () => App.navigate('erste-hilfe', true, { tab: 'lebensgefahr' }));
 
-    await _initMap();
+    await UI.loadLeaflet();
+    _initMap();
     // Leaflet muss nach CSS-Load die Container-Größe neu berechnen
     setTimeout(() => _map?.invalidateSize(), 100);
     await _locateAndLoad();
@@ -103,16 +104,17 @@ window.Page_poison = (() => {
   // ----------------------------------------------------------
   // KARTE INITIALISIEREN
   // ----------------------------------------------------------
-  async function _initMap() {
+  function _initMap() {
     const mapEl = document.getElementById('poison-map');
-    if (!mapEl || _map) return;
+    if (!mapEl || !window.L || _map) return;
+
+    _map = L.map('poison-map', { zoomControl: true, attributionControl: false })
+            .setView([51.1657, 10.4515], 6); // Deutschland-Mitte
+
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      maxZoom: 19,
+    }).addTo(_map);
 
-    _map = await UI.map.create('poison-map', {
-      center: [51.1657, 10.4515], // Deutschland-Mitte
-      zoom: 6,
-      zoomControl: true,
-      attributionControl: false,
-    });
   }
 
   // ----------------------------------------------------------
@@ -219,7 +221,7 @@ window.Page_poison = (() => {
           ${r.beschreibung ? UI.escape(r.beschreibung.slice(0, 80)) + '<br>' : ''}
           <small>📍 ${distStr} entfernt</small><br>
           <small>📅 ${_fmtDate(r.created_at)}</small>
-          ${r.bestaetigt ? '<br><small><svg class="ph-icon" aria-hidden="true" class="text-success"><use href="/icons/phosphor.svg#check-circle"></use></svg> Bestätigt</small>' : ''}
+          ${r.bestaetigt ? '<br><small><svg class="ph-icon" aria-hidden="true" style="color:var(--c-success)"><use href="/icons/phosphor.svg#check-circle"></use></svg> Bestätigt</small>' : ''}
         `);
 
       marker.on('click', () => _openDetail(r));
@@ -274,13 +276,13 @@ window.Page_poison = (() => {
                   border-left:4px solid ${typ.color}">
         <div style="display:flex;gap:var(--space-3);align-items:flex-start">
           <div style="width:40px;height:40px;flex-shrink:0;color:${typ.color};display:flex;align-items:center;justify-content:center">${UI.icon(typ.icon)}</div>
-          <div class="flex-1-min">
+          <div style="flex:1;min-width:0">
             <div style="display:flex;align-items:center;gap:var(--space-2);
                         margin-bottom:var(--space-1);flex-wrap:wrap">
               <span class="badge"
                     style="background:${typ.color};color:#fff">${typ.label}</span>
               ${r.bestaetigt
-                ? '<span class="badge badge-success"><svg class="ph-icon" aria-hidden="true" class="text-success"><use href="/icons/phosphor.svg#check-circle"></use></svg> Bestätigt</span>'
+                ? '<span class="badge badge-success"><svg class="ph-icon" aria-hidden="true" style="color:var(--c-success)"><use href="/icons/phosphor.svg#check-circle"></use></svg> Bestätigt</span>'
                 : ''}
               <span style="margin-left:auto;color:var(--c-text-secondary);
                            font-size:var(--text-sm);white-space:nowrap">
@@ -293,7 +295,7 @@ window.Page_poison = (() => {
                    ${UI.escape(r.beschreibung.slice(0, 120))}${r.beschreibung.length > 120 ? '…' : ''}
                  </p>`
               : ''}
-            <div class="text-xs-secondary">
+            <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">
               Gemeldet ${_fmtDate(r.created_at)} ·
               läuft ab ${_fmtDate(r.expires_at)}
             </div>
@@ -334,7 +336,7 @@ window.Page_poison = (() => {
         <span class="badge" style="background:${typ.color};color:#fff">
           ${UI.icon(typ.icon)} ${typ.label}
         </span>
-        ${r.bestaetigt ? '<span class="badge badge-success"><svg class="ph-icon" aria-hidden="true" class="text-success"><use href="/icons/phosphor.svg#check-circle"></use></svg> Bestätigt</span>' : ''}
+        ${r.bestaetigt ? '<span class="badge badge-success"><svg class="ph-icon" aria-hidden="true" style="color:var(--c-success)"><use href="/icons/phosphor.svg#check-circle"></use></svg> Bestätigt</span>' : ''}
       </div>
 
       ${r.beschreibung
@@ -351,7 +353,7 @@ window.Page_poison = (() => {
 
       <div style="display:flex;gap:var(--space-2);flex-wrap:wrap">
         ${!r.bestaetigt && _appState.user && !isOwnEntry
-          ? `<button class="btn btn-secondary flex-1" id="detail-confirm"><svg class="ph-icon" aria-hidden="true" class="text-success"><use href="/icons/phosphor.svg#check-circle"></use></svg> Bestätigen</button>`
+          ? `<button class="btn btn-secondary flex-1" id="detail-confirm"><svg class="ph-icon" aria-hidden="true" style="color:var(--c-success)"><use href="/icons/phosphor.svg#check-circle"></use></svg> Bestätigen</button>`
           : ''}
         <button class="btn btn-secondary flex-1" id="detail-show-map">🗺️ Auf Karte</button>
         ${isOwnEntry || isAdmin
@@ -470,7 +472,7 @@ window.Page_poison = (() => {
         <div class="form-group">
           <label class="form-label">
             Beschreibung
-            <span class="text-secondary">(optional)</span>
+            <span style="color:var(--c-text-secondary)">(optional)</span>
           </label>
           <textarea class="form-control" name="beschreibung" rows="3"
                     placeholder="z. B. Wurstköder mit Nadeln, liegt beim Eingang Hundeparkplatz, linke Seite…"></textarea>
@@ -479,7 +481,7 @@ window.Page_poison = (() => {
         <div class="form-group">
           <label class="form-label">
             Foto
-            <span class="text-secondary">(optional)</span>
+            <span style="color:var(--c-text-secondary)">(optional)</span>
           </label>
           <input class="form-control" type="file" name="photo"
                  accept="image/*" capture="environment">
@@ -591,7 +593,7 @@ window.Page_poison = (() => {
       title: 'Danke für deine Meldung!',
       body: `
         <div style="text-align:center;padding:var(--space-2) 0 var(--space-4)">
-          <div class="mb-4">
+          <div style="margin-bottom:var(--space-4)">
             <svg class="ph-icon" aria-hidden="true" style="width:48px;height:48px;color:var(--c-danger)"><use href="/icons/phosphor.svg#siren"></use></svg>
           </div>
           <p style="color:var(--c-text);font-size:var(--text-base);line-height:1.7;margin:0">
diff --git a/backend/static/js/pages/reise.js b/backend/static/js/pages/reise.js
index c64313e..0b8b3a4 100644
--- a/backend/static/js/pages/reise.js
+++ b/backend/static/js/pages/reise.js
@@ -106,6 +106,14 @@ window.Page_reise = (() => {
   // ------------------------------------------------------------------
   // Helpers
   // ------------------------------------------------------------------
+  function _esc(s) {
+    if (s == null) return '';
+    return String(s)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+  }
 
   function _loadChecked() {
     try { return JSON.parse(localStorage.getItem(LS_KEY) || '{}'); }
@@ -204,16 +212,16 @@ window.Page_reise = (() => {
         const done = !!checked[key];
         if (_editMode) {
           return `<div class="reise-check-row" style="justify-content:space-between">
-            <span style="flex:1;color:var(--c-text)">${UI.escape(item)}</span>
-            <button class="reise-del-btn" data-hide="${UI.escape(key)}"
+            <span style="flex:1;color:var(--c-text)">${_esc(item)}</span>
+            <button class="reise-del-btn" data-hide="${_esc(key)}"
                     style="background:none;border:none;color:#EF4444;cursor:pointer;padding:4px;flex-shrink:0">
               <svg class="ph-icon" style="width:1rem;height:1rem"><use href="/icons/phosphor.svg#trash"></use></svg>
             </button>
           </div>`;
         }
         return `<label class="reise-check-row${done ? ' done' : ''}">
-          <input type="checkbox" class="reise-cb" data-key="${UI.escape(key)}" ${done ? 'checked' : ''}>
-          <span>${UI.escape(item)}</span>
+          <input type="checkbox" class="reise-cb" data-key="${_esc(key)}" ${done ? 'checked' : ''}>
+          <span>${_esc(item)}</span>
         </label>`;
       }).join('');
 
@@ -222,40 +230,40 @@ window.Page_reise = (() => {
         const done = !!checked[key];
         if (_editMode) {
           return `<div class="reise-check-row" style="justify-content:space-between">
-            <span style="flex:1;color:var(--c-primary)">${UI.escape(item)}</span>
-            <button class="reise-del-custom-btn" data-cat="${UI.escape(cat.key)}" data-idx="${i}"
+            <span style="flex:1;color:var(--c-primary)">${_esc(item)}</span>
+            <button class="reise-del-custom-btn" data-cat="${_esc(cat.key)}" data-idx="${i}"
                     style="background:none;border:none;color:#EF4444;cursor:pointer;padding:4px;flex-shrink:0">
               <svg class="ph-icon" style="width:1rem;height:1rem"><use href="/icons/phosphor.svg#trash"></use></svg>
             </button>
           </div>`;
         }
         return `<label class="reise-check-row${done ? ' done' : ''}">
-          <input type="checkbox" class="reise-cb" data-key="${UI.escape(key)}" ${done ? 'checked' : ''}>
-          <span class="text-primary">${UI.escape(item)}</span>
+          <input type="checkbox" class="reise-cb" data-key="${_esc(key)}" ${done ? 'checked' : ''}>
+          <span style="color:var(--c-primary)">${_esc(item)}</span>
         </label>`;
       }).join('');
 
       const addRow = _editMode ? `
         <div style="padding:var(--space-2) 0;border-top:1px dashed var(--c-border);margin-top:4px">
           <div style="display:flex;gap:8px;align-items:center">
-            <input class="reise-add-input" data-cat="${UI.escape(cat.key)}"
+            <input class="reise-add-input" data-cat="${_esc(cat.key)}"
                    style="flex:1;padding:8px 10px;border-radius:8px;border:1px solid var(--c-border);
                           background:var(--c-bg-card);color:var(--c-text);font-size:var(--text-sm)"
                    placeholder="Eigenes Item hinzufügen…">
-            <button class="reise-add-btn btn btn-primary" data-cat="${UI.escape(cat.key)}"
+            <button class="reise-add-btn btn btn-primary" data-cat="${_esc(cat.key)}"
                     style="padding:8px 12px;flex-shrink:0;font-size:var(--text-sm)">
               <svg class="ph-icon" style="width:1rem;height:1rem"><use href="/icons/phosphor.svg#plus"></use></svg>
             </button>
           </div>
         </div>` : '';
 
-      return `<div class="card mb-4">
+      return `<div class="card" style="margin-bottom:var(--space-4)">
         <div style="padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--c-border);
                     display:flex;align-items:center;gap:var(--space-2)">
-          <svg class="ph-icon text-primary" aria-hidden="true">
-            <use href="/icons/phosphor.svg#${UI.escape(cat.icon)}"></use>
+          <svg class="ph-icon" style="color:var(--c-primary)" aria-hidden="true">
+            <use href="/icons/phosphor.svg#${_esc(cat.icon)}"></use>
           </svg>
-          <span style="font-weight:var(--weight-semibold)">${UI.escape(cat.label)}</span>
+          <span style="font-weight:var(--weight-semibold)">${_esc(cat.label)}</span>
         </div>
         <div style="padding:var(--space-2) var(--space-4)">
           ${stdRows}${customRows}${addRow}
@@ -281,7 +289,7 @@ window.Page_reise = (() => {
       <!-- Fortschritt + Buttons -->
       <div style="margin-bottom:var(--space-5)">
         <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-2)">
-          <span class="text-sm-secondary">${doneItems} von ${totalItems} erledigt</span>
+          <span style="font-size:var(--text-sm);color:var(--c-text-secondary)">${doneItems} von ${totalItems} erledigt</span>
           <div style="display:flex;gap:8px;align-items:center">
             <span style="font-size:var(--text-sm);font-weight:700;color:var(--c-primary)">${pct}%</span>
             <button id="reise-edit-toggle" style="background:${_editMode ? 'var(--c-primary)' : 'var(--c-bg-card)'};
@@ -379,12 +387,12 @@ window.Page_reise = (() => {
       <div class="card" style="margin-bottom:var(--space-3);padding:var(--space-4)">
         <div style="display:flex;align-items:flex-start;gap:var(--space-3)">
           <span style="font-size:2rem;line-height:1">${l.flag}</span>
-          <div class="flex-1-min">
+          <div style="flex:1;min-width:0">
             <div style="font-weight:var(--weight-semibold);margin-bottom:var(--space-1)">
-              ${UI.escape(l.name)}
+              ${_esc(l.name)}
             </div>
-            <div class="text-sm-secondary">
-              ${UI.escape(l.regel)}
+            <div style="font-size:var(--text-sm);color:var(--c-text-secondary)">
+              ${_esc(l.regel)}
             </div>
           </div>
           ${l.warn ? `<svg class="ph-icon" style="color:var(--c-warning,#f59e0b);flex-shrink:0;width:20px;height:20px" aria-hidden="true">
@@ -417,13 +425,13 @@ window.Page_reise = (() => {
       <div style="display:flex;align-items:flex-start;gap:var(--space-3);
                   padding:var(--space-3) 0;border-bottom:1px solid var(--c-surface-2)">
         <svg class="ph-icon" style="color:var(--c-danger,#ef4444);flex-shrink:0;margin-top:1px" aria-hidden="true">
-          <use href="/icons/phosphor.svg#${UI.escape(m.icon)}"></use>
+          <use href="/icons/phosphor.svg#${_esc(m.icon)}"></use>
         </svg>
-        <span style="font-size:var(--text-sm);color:var(--c-text)">${UI.escape(m.text)}</span>
+        <span style="font-size:var(--text-sm);color:var(--c-text)">${_esc(m.text)}</span>
       </div>`).join('');
 
     el.innerHTML = `
-      <div class="card mb-4">
+      <div class="card" style="margin-bottom:var(--space-4)">
         <div style="padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--c-border);
                     font-weight:var(--weight-semibold);display:flex;align-items:center;gap:var(--space-2)">
           <svg class="ph-icon" style="color:var(--c-danger,#ef4444)" aria-hidden="true">
@@ -431,7 +439,7 @@ window.Page_reise = (() => {
           </svg>
           Notrufnummern
         </div>
-        <div class="p-4">
+        <div style="padding:var(--space-4)">
           <a href="tel:112" class="btn btn-danger w-full"
              style="margin-bottom:var(--space-3);display:flex;align-items:center;
                     justify-content:center;gap:var(--space-2)">
@@ -450,10 +458,10 @@ window.Page_reise = (() => {
         </div>
       </div>
 
-      <div class="card mb-4">
+      <div class="card" style="margin-bottom:var(--space-4)">
         <div style="padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--c-border);
                     font-weight:var(--weight-semibold)">Tierarzt finden</div>
-        <div class="p-4">
+        <div style="padding:var(--space-4)">
           <button class="btn btn-primary w-full" id="reise-map-btn"
                   style="display:flex;align-items:center;justify-content:center;gap:var(--space-2)">
             <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#map-pin"></use></svg>
@@ -462,7 +470,7 @@ window.Page_reise = (() => {
         </div>
       </div>
 
-      <div class="card mb-4">
+      <div class="card" style="margin-bottom:var(--space-4)">
         <div style="padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--c-border);
                     font-weight:var(--weight-semibold);display:flex;align-items:center;gap:var(--space-2)">
           <svg class="ph-icon" style="color:var(--c-warning,#f59e0b)" aria-hidden="true">
diff --git a/backend/static/js/pages/routes.js b/backend/static/js/pages/routes.js
index acb48c6..b09e4fb 100644
--- a/backend/static/js/pages/routes.js
+++ b/backend/static/js/pages/routes.js
@@ -146,11 +146,11 @@ window.Page_routes = (() => {
       btnRow.innerHTML = `
         <button id="rk-filter-btn" style="${_btnStyle()}position:relative">
           ${UI.icon('gear')} Filter
-          <span class="rk-filter-badge" id="rk-filter-badge" class="hidden"></span>
+          <span class="rk-filter-badge" id="rk-filter-badge" style="display:none"></span>
         </button>
         <label id="rk-imp-wrap" title="GPX / KML / TCX importieren" style="${_btnStyle()}">
           ${UI.icon('download-simple')} Import
-          <input type="file" id="rk-import-input" accept=".gpx,.kml,.tcx" class="hidden">
+          <input type="file" id="rk-import-input" accept=".gpx,.kml,.tcx" style="display:none">
         </label>
         <button class="rk-rec-btn" id="rk-rec-btn" style="${_btnStyle(true)}">${UI.icon('path')} Aufzeichnen</button>
       `;
@@ -193,15 +193,20 @@ window.Page_routes = (() => {
                             background:var(--c-surface);color:var(--c-text);outline:none;
                             box-sizing:border-box;">
             </div>
-            <div class="map-list-toggle" style="flex-shrink:0;width:auto">
+            <div style="display:flex;border:1.5px solid var(--c-border);border-radius:10px;
+                        overflow:hidden;flex-shrink:0;height:46px;box-sizing:border-box">
               <button id="rk-view-list" title="Liste"
-                      class="${_viewMode==='list' ? 'active' : ''}"
-                      style="flex:0 0 auto;width:44px">
+                      style="width:44px;height:100%;border:none;cursor:pointer;
+                             display:flex;align-items:center;justify-content:center;
+                             background:${_viewMode==='list' ? 'var(--c-primary)' : 'var(--c-surface)'};
+                             color:${_viewMode==='list' ? '#fff' : 'var(--c-text-secondary)'}">
                 ${UI.icon('list')}
               </button>
               <button id="rk-view-map" title="Karte"
-                      class="${_viewMode==='map' ? 'active' : ''}"
-                      style="flex:0 0 auto;width:44px">
+                      style="width:44px;height:100%;border:none;border-left:1.5px solid var(--c-border);
+                             cursor:pointer;display:flex;align-items:center;justify-content:center;
+                             background:${_viewMode==='map' ? 'var(--c-primary)' : 'var(--c-surface)'};
+                             color:${_viewMode==='map' ? '#fff' : 'var(--c-text-secondary)'}">
                 ${UI.icon('map-trifold')}
               </button>
             </div>
@@ -210,15 +215,15 @@ window.Page_routes = (() => {
           <div style="display:flex;gap:8px">
             <button id="rk-filter-btn" style="${_btnStyle()}position:relative">
               ${UI.icon('gear')} Filter
-              <span class="rk-filter-badge" id="rk-filter-badge" class="hidden"></span>
+              <span class="rk-filter-badge" id="rk-filter-badge" style="display:none"></span>
             </button>
             <label id="rk-imp-wrap" title="GPX / KML / TCX importieren" style="${_btnStyle()}">
               ${UI.icon('download-simple')} Import
-              <input type="file" id="rk-import-input" accept=".gpx,.kml,.tcx" class="hidden">
+              <input type="file" id="rk-import-input" accept=".gpx,.kml,.tcx" style="display:none">
             </label>
             <button class="rk-rec-btn" id="rk-rec-btn" style="${_btnStyle(true)}">${UI.icon('path')} Aufzeichnen</button>
           </div>
-          <div class="rk-filter-panel" id="rk-filter-panel" class="hidden">
+          <div class="rk-filter-panel" id="rk-filter-panel" style="display:none">
             <div class="rk-filters" id="rk-filters">
               <div class="rk-filter-group">
                 <div class="rk-filter-label">Schwierigkeit</div>
@@ -248,13 +253,13 @@ window.Page_routes = (() => {
                   <button class="rk-chip" data-filter="sort" data-val="dog">Hundefreundlich</button>
                 </div>
               </div>
-              <div class="rk-filter-group" id="rk-mine-group" class="hidden">
+              <div class="rk-filter-group" id="rk-mine-group" style="display:none">
                 <div class="rk-filter-label">Eigene</div>
                 <div class="rk-chips-row">
                   <button class="rk-chip" data-filter="mine" data-val="mine">🔒 Nur meine</button>
                 </div>
               </div>
-              <div class="rk-filter-group" id="rk-nearby-group" class="hidden">
+              <div class="rk-filter-group" id="rk-nearby-group" style="display:none">
                 <div class="rk-filter-label">Umgebung</div>
                 <div class="rk-chips-row">
                   <button class="rk-chip" id="rk-nearby-btn" data-filter="nearby" data-val="">${UI.icon('map-pin')} In meiner Nähe</button>
@@ -355,7 +360,7 @@ window.Page_routes = (() => {
         gate.style.cssText = 'padding:var(--space-6);text-align:center;color:var(--c-text-muted)';
         gate.innerHTML = `<svg class="ph-icon" style="width:36px;height:36px;color:var(--c-primary);margin-bottom:var(--space-3)" aria-hidden="true"><use href="/icons/phosphor.svg#star"></use></svg>
           <div style="font-weight:600;color:var(--c-text);margin-bottom:var(--space-2)">Ban Yaro Pro</div>
-          <div class="text-sm">Routenvorschläge sind ein Pro-Feature.</div>`;
+          <div style="font-size:var(--text-sm)">Routenvorschläge sind ein Pro-Feature.</div>`;
         document.getElementById('rk-list')?.appendChild(gate);
       } else {
         _renderSuggestTab();
@@ -427,7 +432,7 @@ window.Page_routes = (() => {
                       text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-3)">
             Gewünschte Distanz
           </div>
-          <div class="flex-gap-3" id="rks-km-row">
+          <div style="display:flex;gap:var(--space-3)" id="rks-km-row">
             <button class="rks-km-chip${_suggestKm===2?' active':''}" data-km="2">2 km</button>
             <button class="rks-km-chip${_suggestKm===4?' active':''}" data-km="4">4 km</button>
             <button class="rks-km-chip${_suggestKm===6?' active':''}" data-km="6">6 km</button>
@@ -440,7 +445,7 @@ window.Page_routes = (() => {
                       text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-3)">
             Variante
           </div>
-          <div class="flex-gap-2" id="rks-var-row">
+          <div style="display:flex;gap:var(--space-2)" id="rks-var-row">
             <button class="rks-var-btn${_suggestSeed===0?' active':''}" data-seed="0">Variante 1</button>
             <button class="rks-var-btn${_suggestSeed===1?' active':''}" data-seed="1">Variante 2</button>
             <button class="rks-var-btn${_suggestSeed===2?' active':''}" data-seed="2">Variante 3</button>
@@ -586,7 +591,7 @@ window.Page_routes = (() => {
         <span style="font-size:0.85rem;color:var(--c-text-secondary);flex:1;min-width:0;
                      overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${UI.escape(result.name || '')}</span>
       </div>
-      <div class="flex-gap-3">
+      <div style="display:flex;gap:var(--space-3)">
         <button id="rks-nav-btn" style="${_btnStyle(false)}flex:1">
           <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#navigation-arrow"></use></svg>
           Navigation starten
@@ -597,18 +602,16 @@ window.Page_routes = (() => {
         </button>
       </div>`;
 
-    const _initMap = async () => {
+    const _initMap = () => {
       const mapEl = document.getElementById('rks-map');
-      if (!mapEl) return;
+      if (!mapEl || !window.L) return;
       if (_suggestMap) { _suggestMap.remove(); _suggestMap = null; }
       const track = result.gps_track || [];
       if (track.length < 2) return;
       const lls = track.map(p => [p.lat, p.lon]);
-      _suggestMap = await UI.map.create(mapEl, {
-        center: lls[0], zoom: 14,
-        zoomControl: false, attributionControl: false,
-      });
-      _suggestMap.scrollWheelZoom.disable();
+      _suggestMap = L.map(mapEl, { zoomControl: false, attributionControl: false,
+                                   dragging: true, touchZoom: true, scrollWheelZoom: false });
+      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(_suggestMap);
       const poly = L.polyline(lls, { color: '#C4843A', weight: 4, opacity: 0.9 }).addTo(_suggestMap);
       L.circleMarker(lls[0],     { radius:7, color:'#22C55E', fillColor:'#22C55E', fillOpacity:1, weight:2 }).addTo(_suggestMap);
       L.circleMarker(lls.at(-1), { radius:7, color:'#EF4444', fillColor:'#EF4444', fillOpacity:1, weight:2 }).addTo(_suggestMap);
@@ -616,7 +619,12 @@ window.Page_routes = (() => {
       _suggestMap.fitBounds(poly.getBounds(), { padding: [16, 16] });
       setTimeout(() => _suggestMap?.invalidateSize(), 120);
     };
-    _initMap();
+    if (window.L) { _initMap(); } else {
+      let tries = 0;
+      const poll = setInterval(() => {
+        if (window.L || ++tries > 40) { clearInterval(poll); if (window.L) _initMap(); }
+      }, 100);
+    }
 
     document.getElementById('rks-nav-btn')?.addEventListener('click', () => {
       _openNavOverlay({ id: 'suggest-' + Date.now(), name: result.name,
@@ -660,6 +668,8 @@ window.Page_routes = (() => {
     if (!_appState.user) { UI.toast.warning('Bitte anmelden.'); return; }
     if (_recOvl) return;
 
+    try { await (UI.loadLeaflet?.() ?? Promise.resolve()); }
+    catch { UI.toast.warning('Karte offline nicht verfügbar — GPS-Aufzeichnung läuft trotzdem.'); }
 
     const ovl = document.createElement('div');
     ovl.id = 'rk-rec-ovl';
@@ -723,10 +733,10 @@ window.Page_routes = (() => {
     // Map-Setup: Leaflet könnte offline fehlen → alles in try/catch
     const pos = _userPos || { lat: 48.1, lon: 11.5 };
     try {
-      _recMap = await UI.map.create(ovl.querySelector('#rk-rec-map-wrap'), {
-        center: [pos.lat, pos.lon], zoom: 15,
-        zoomControl: false, attributionControl: false,
-      });
+      if (!window.L) throw new Error('Leaflet not loaded');
+      _recMap = L.map(ovl.querySelector('#rk-rec-map-wrap'), { zoomControl: false, attributionControl: false })
+        .setView([pos.lat, pos.lon], 15);
+      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(_recMap);
       _recLocMarker = L.circleMarker([pos.lat, pos.lon], {
         radius: 8, color: '#fff', weight: 2.5, fillColor: '#3b82f6', fillOpacity: 1
       }).addTo(_recMap);
@@ -981,7 +991,7 @@ window.Page_routes = (() => {
           <label class="form-label">Name der Route *</label>
           <input class="form-control" type="text" name="name" placeholder="Wird automatisch ermittelt…" required>
         </div>
-        <div class="grid-2">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
           <div class="form-group">
             <label class="form-label">Schwierigkeit</label>
             <select class="form-control" name="schwierigkeit">
@@ -1025,7 +1035,7 @@ window.Page_routes = (() => {
           </label>
         </div>
         <div class="form-group">
-          <label class="form-label">Beschreibung <span class="text-secondary">(optional)</span></label>
+          <label class="form-label">Beschreibung <span style="color:var(--c-text-secondary)">(optional)</span></label>
           <textarea class="form-control" name="beschreibung" rows="2" placeholder="Besonderheiten, Highlights, Tipps…"></textarea>
         </div>
       </form>
@@ -1117,7 +1127,8 @@ window.Page_routes = (() => {
       document.body.appendChild(sec);
       document.getElementById('rk-map-back')?.addEventListener('click', () => _switchView('list'));
 
-      _initSearchMap();
+      // Wie _initMiniMaps: pollen bis window.L bereit ist
+      _pollAndInitSearchMap();
 
     } else {
       document.getElementById('rk-map-section')?.remove();
@@ -1129,16 +1140,26 @@ window.Page_routes = (() => {
   // ----------------------------------------------------------
   // Suchkarte
   // ----------------------------------------------------------
-  async function _initSearchMap() {
+  function _pollAndInitSearchMap() {
+    if (window.L) { _initSearchMap(); return; }
+    let tries = 0;
+    const poll = setInterval(() => {
+      if (window.L || ++tries > 40) {
+        clearInterval(poll);
+        if (window.L) _initSearchMap();
+      }
+    }, 100);
+  }
+
+  function _initSearchMap() {
     if (!document.getElementById('rk-search-map')) return;
 
     const center = _userPos ? [_userPos.lat, _userPos.lon] : [51.1, 10.4];
     const zoom   = _userPos ? 13 : 6;
 
-    _searchMap = await UI.map.create('rk-search-map', {
-      center, zoom,
-      zoomControl: true, attributionControl: false,
-    });
+    _searchMap = L.map('rk-search-map', { zoomControl: true, attributionControl: false })
+                  .setView(center, zoom);
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(_searchMap);
     setTimeout(() => _searchMap?.invalidateSize(), 100);
     setTimeout(() => _searchMap?.invalidateSize(), 600);
     _renderRoutesOnMap();
@@ -1565,6 +1586,8 @@ window.Page_routes = (() => {
       try { await DeviceOrientationEvent.requestPermission(); } catch {}
     }
 
+    await UI.loadLeaflet?.() ?? Promise.resolve();
+
     const ovl = document.createElement('div');
     ovl.id = 'rk-nav-ovl';
     ovl.style.cssText = 'position:fixed;inset:0;z-index:850;display:flex;flex-direction:column;background:var(--c-bg)';
@@ -1608,9 +1631,9 @@ window.Page_routes = (() => {
       <!-- Aktions-Buttons -->
       <div style="display:flex;gap:8px;padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px));
                   background:var(--c-surface);border-top:1px solid var(--c-border);flex-shrink:0">
-        <button id="rk-nav-pois" class="btn btn-secondary btn-sm flex-1">${UI.icon('map-pin')} POIs</button>
-        <button id="rk-nav-rate" class="btn btn-secondary btn-sm flex-1">${UI.icon('star')} Bewerten</button>
-        <button id="rk-nav-feedback" class="btn btn-secondary btn-sm flex-1">${UI.icon('chat-circle-dots')} Feedback</button>
+        <button id="rk-nav-pois" class="btn btn-secondary btn-sm" style="flex:1">${UI.icon('map-pin')} POIs</button>
+        <button id="rk-nav-rate" class="btn btn-secondary btn-sm" style="flex:1">${UI.icon('star')} Bewerten</button>
+        <button id="rk-nav-feedback" class="btn btn-secondary btn-sm" style="flex:1">${UI.icon('chat-circle-dots')} Feedback</button>
       </div>
 
       <!-- Dim-Overlay -->
@@ -1677,10 +1700,9 @@ window.Page_routes = (() => {
     // Karte initialisieren
     const mapEl = document.getElementById('rk-nav-map');
     const mid = track[Math.floor(track.length / 2)];
-    _navMap = await UI.map.create(mapEl, {
-      center: [mid.lat, mid.lon], zoom: 15,
-      zoomControl: false, attributionControl: false,
-    });
+    _navMap = L.map(mapEl, { zoomControl: false, attributionControl: false })
+      .setView([mid.lat, mid.lon], 15);
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(_navMap);
 
     // Route-Polylines: erledigt (grün) + ausstehend (orange)
     const doneLine   = L.polyline([], { color: '#22c55e', weight: 5, opacity: 0.85 }).addTo(_navMap);
@@ -1922,7 +1944,7 @@ window.Page_routes = (() => {
               <div>
                 <div style="font-weight:600;font-size:14px">${UI.escape(p.name||label)}</div>
                 ${p.opening_hours ? `<div style="font-size:12px;color:var(--c-text-secondary)">🕐 ${UI.escape(p.opening_hours)}</div>` : ''}
-                ${p.phone ? `<div style="font-size:12px;color:var(--c-text-secondary)">📞 <a href="tel:${UI.escape(p.phone)}" class="text-primary">${UI.escape(p.phone)}</a></div>` : ''}
+                ${p.phone ? `<div style="font-size:12px;color:var(--c-text-secondary)">📞 <a href="tel:${UI.escape(p.phone)}" style="color:var(--c-primary)">${UI.escape(p.phone)}</a></div>` : ''}
               </div>
               <a href="${/iPad|iPhone|iPod/.test(navigator.userAgent)
                 ? `maps://maps.apple.com/?q=${encodeURIComponent(p.name||label)}&ll=${p.lat},${p.lon}`
@@ -2049,10 +2071,10 @@ window.Page_routes = (() => {
       <div style="padding:16px;background:var(--c-surface);border-top:1px solid var(--c-border);flex-shrink:0">
         <!-- Modus-Toggle -->
         <div style="display:flex;gap:8px;margin-bottom:12px">
-          <button id="rk-trim-mode-start" class="btn btn-sm btn-primary flex-1">
+          <button id="rk-trim-mode-start" class="btn btn-sm btn-primary" style="flex:1">
             📍 Klick setzt: Start
           </button>
-          <button id="rk-trim-mode-end" class="btn btn-sm btn-secondary flex-1">
+          <button id="rk-trim-mode-end" class="btn btn-sm btn-secondary" style="flex:1">
             📍 Klick setzt: Ende
           </button>
         </div>
@@ -2084,12 +2106,12 @@ window.Page_routes = (() => {
     document.body.appendChild(ovl);
 
     // Map initialisieren
+    await UI.loadLeaflet?.() ?? Promise.resolve();
     const mapEl = document.getElementById('rk-trim-map');
     const center = fullTrack[Math.floor(fullTrack.length/2)];
-    const trimMap = await UI.map.create(mapEl, {
-      center: [center.lat, center.lon], zoom: 14,
-      zoomControl: false, attributionControl: false,
-    });
+    const trimMap = L.map(mapEl, { zoomControl: false, attributionControl: false })
+      .setView([center.lat, center.lon], 14);
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(trimMap);
 
     // Marker & Polylines
     let greyBefore = L.polyline([], { color: '#9ca3af', weight: 3, opacity: 0.5 }).addTo(trimMap);
@@ -2121,7 +2143,7 @@ window.Page_routes = (() => {
       document.getElementById('rk-trim-end-lbl').textContent   = `${fullTrack.length - 1 - endIdx} Punkte`;
       document.getElementById('rk-trim-stats').innerHTML =
         `Neue Länge: <strong>${newKm.toFixed(2)} km</strong> · ca. <strong>${newMin} min</strong>
-         &nbsp;·&nbsp; <span class="text-muted">Original: ${origKm.toFixed(2)} km · ${origMin} min (bleibt angerechnet)</span>`;
+         &nbsp;·&nbsp; <span style="color:var(--c-text-muted)">Original: ${origKm.toFixed(2)} km · ${origMin} min (bleibt angerechnet)</span>`;
     };
     update();
     trimMap.fitBounds(L.polyline(fullTrack.map(p => [p.lat, p.lon])).getBounds(), { padding: [20, 20] });
@@ -2209,12 +2231,12 @@ window.Page_routes = (() => {
         ${photos.map(u => `<img src="${UI.escape(u)}" class="rk-photo-thumb" onclick="window.open('${UI.escape(u)}','_blank')">`).join('')}
         ${isOwn ? `<label class="rk-photo-add" title="Foto hinzufügen">
           <span>+</span>
-          <input type="file" id="rk-photo-input" accept="image/*" multiple class="hidden">
+          <input type="file" id="rk-photo-input" accept="image/*" multiple style="display:none">
         </label>` : ''}
       </div>` :
       isOwn ? `<label class="rk-photo-add-empty">
         ${UI.icon('camera')} Foto hinzufügen
-        <input type="file" id="rk-photo-input" accept="image/*" multiple class="hidden">
+        <input type="file" id="rk-photo-input" accept="image/*" multiple style="display:none">
       </label>` : '';
 
     const body = `
@@ -2239,7 +2261,7 @@ window.Page_routes = (() => {
       </div>
       ${route.beschreibung ? `<p style="color:var(--c-text-secondary);margin-bottom:var(--space-3)">${UI.escape(route.beschreibung)}</p>` : ''}
       <div id="rk-nearby" class="rk-nearby-section">
-        <div class="text-sm-muted">Lädt Orte entlang der Route…</div>
+        <div style="color:var(--c-text-muted);font-size:var(--text-sm)">Lädt Orte entlang der Route…</div>
       </div>
       <div id="rk-rating-${route.id}"></div>
       <p style="color:var(--c-text-muted);font-size:0.75rem;margin-top:var(--space-2)">
@@ -2261,7 +2283,7 @@ window.Page_routes = (() => {
        </button>`;
 
     const ownerRow = isOwn ? `
-      <div class="flex-gap-2">
+      <div style="display:flex;gap:var(--space-2)">
         ${_actionBtn('rd-send-friend', 'paper-plane-tilt', 'Senden')}
         ${track.length >= 4 ? _actionBtn('rd-trim', 'pencil-simple', 'Kürzen') : ''}
         ${_actionBtn('rd-reverse', 'path', 'Umkehren')}
@@ -2271,7 +2293,7 @@ window.Page_routes = (() => {
 
     const footer = `
       <div style="display:flex;flex-direction:column;gap:var(--space-2);width:100%">
-        <div class="flex-gap-2">
+        <div style="display:flex;gap:var(--space-2)">
           ${_actionBtn('rd-gpx',   'download-simple',  'GPX')}
           ${_actionBtn('rd-share', 'arrow-square-out', 'Teilen')}
           ${_actionBtn('rd-navi',  'map-pin',          'Navi')}
@@ -2346,9 +2368,9 @@ window.Page_routes = (() => {
         route.gps_track = [...route.gps_track].reverse();
         // Karte neu aufbauen mit umgekehrtem Track
         const el = document.getElementById('rk-detail-map');
-        if (el) {
+        if (el && window.L) {
           if (_detailMap) { _detailMap.remove(); _detailMap = null; }
-          _detailMap = await _buildDetailMap(el, route.gps_track);
+          _detailMap = _buildDetailMap(el, route.gps_track);
         }
         UI.toast.success('Route dauerhaft umgekehrt');
       } catch (err) { UI.toast.error(err.message); }
@@ -2402,10 +2424,10 @@ window.Page_routes = (() => {
 
     // Mini-Map
     let _detailMap = null;
-    setTimeout(async () => {
+    setTimeout(() => {
       const el = document.getElementById('rk-detail-map');
       if (!el || !track.length) return;
-      _detailMap = await _buildDetailMap(el, track);
+      if (window.L) _detailMap = _buildDetailMap(el, track);
     }, 80);
 
     // Nearby POIs laden
@@ -2438,7 +2460,7 @@ window.Page_routes = (() => {
                             color:${checked ? 'var(--c-primary)' : ''};
                             font-size:var(--text-xs);font-weight:600;user-select:none">
         <input type="checkbox" name="dog_ids" value="${d.id}" ${checked ? 'checked' : ''}
-               class="rd-dog-cb hidden">
+               style="display:none" class="rd-dog-cb">
         ${av}<span>${UI.escape(d.name)}</span>
       </label>`;
     }).join('');
@@ -2524,12 +2546,10 @@ window.Page_routes = (() => {
     }
   }
 
-  async function _buildDetailMap(el, track) {
+  function _buildDetailMap(el, track) {
+    const m = L.map(el, { zoomControl: false, attributionControl: false });
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(m);
     const lls  = track.map(p => [p.lat, p.lon]);
-    const m = await UI.map.create(el, {
-      center: lls[0], zoom: 14,
-      zoomControl: false, attributionControl: false,
-    });
     const poly = L.polyline(lls, { color: '#C4843A', weight: 4, opacity: 0.85 }).addTo(m);
     _addRouteArrows(m, track, '#3b82f6');
     L.circleMarker(lls[0],     { radius:7, color:'#22C55E', fillColor:'#22C55E', fillOpacity:1 }).addTo(m);
@@ -2881,7 +2901,7 @@ window.Page_routes = (() => {
           <label class="form-label">Beschreibung</label>
           <textarea class="form-input" id="ri-desc" rows="2" placeholder="Kurze Beschreibung der Route…"></textarea>
         </div>
-        <div class="grid-2">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
           <div class="form-group">
             <label class="form-label">Schwierigkeit</label>
             <select class="form-input" id="ri-diff">
@@ -3064,7 +3084,7 @@ window.Page_routes = (() => {
       <div style="width:100%;max-width:600px;background:var(--c-surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;
                   padding:var(--space-4);box-sizing:border-box;max-height:80vh;display:flex;flex-direction:column">
         <div style="display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)">
-          <svg class="ph-icon" aria-hidden="true" class="text-primary"><use href="/icons/phosphor.svg#note-pencil"></use></svg>
+          <svg class="ph-icon" aria-hidden="true" style="color:var(--c-primary)"><use href="/icons/phosphor.svg#note-pencil"></use></svg>
           <span style="font-weight:600;flex:1"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#note-pencil"></use></svg> Notiz — ${UI.escape(parentLabel)}</span>
           <button id="rk-note-close" style="background:none;border:none;cursor:pointer;color:var(--c-text-muted);padding:4px">
             <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#x"></use></svg>
diff --git a/backend/static/js/pages/settings.js b/backend/static/js/pages/settings.js
index ced3e39..16adf63 100644
--- a/backend/static/js/pages/settings.js
+++ b/backend/static/js/pages/settings.js
@@ -158,11 +158,11 @@ window.Page_settings = (() => {
     }
 
     return `
-      <div class="card mb-4">
+      <div class="card" style="margin-bottom:var(--space-4)">
         <div class="by-card-section-header">Abo &amp; Tarif</div>
-        <div class="p-4">
+        <div style="padding:var(--space-4)">
           <div style="display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap">
-            <span class="text-sm-secondary">Aktueller Tarif:</span>
+            <span style="font-size:var(--text-sm);color:var(--c-text-secondary)">Aktueller Tarif:</span>
             ${statusHtml}
           </div>
           ${_expiryInfo()}
@@ -178,7 +178,7 @@ window.Page_settings = (() => {
     const price = isPro ? '29 €/Jahr' : '49 €/Jahr';
     const color = isPro ? '#16a34a' : '#C4843A';
     const _group = (title, items) => `
-      <div class="mb-3">
+      <div style="margin-bottom:var(--space-3)">
         <div style="font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
                     color:var(--c-text-muted);margin-bottom:var(--space-2)">${title}</div>
         ${items.map(f => `
@@ -243,17 +243,17 @@ window.Page_settings = (() => {
                     text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-3)">
           Dein Zwinger
         </div>
-        <form id="breeder-upgrade-form" class="flex-col-gap-3">
+        <form id="breeder-upgrade-form" style="display:flex;flex-direction:column;gap:var(--space-3)">
           <div>
             <label style="display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:4px">
-              Zwingername <span class="text-danger">*</span>
+              Zwingername <span style="color:var(--c-danger)">*</span>
             </label>
             <input name="zwingername" type="text" maxlength="100" required
                    placeholder="z. B. vom Sonnenfeld" style="${inputStyle}">
           </div>
           <div>
             <label style="display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:4px">
-              Rasse <span class="text-danger">*</span>
+              Rasse <span style="color:var(--c-danger)">*</span>
             </label>
             <input name="rasse_text" type="text" maxlength="100" required
                    placeholder="z. B. Labrador Retriever" style="${inputStyle}">
@@ -509,9 +509,9 @@ window.Page_settings = (() => {
 
     // Avatar: Bild oder Buchstabe
     const avatarInner = u.avatar_url
-      ? `<img src="${UI.escape(u.avatar_url)}" alt="Avatar"
+      ? `<img src="${_esc(u.avatar_url)}" alt="Avatar"
               style="width:56px;height:56px;border-radius:50%;object-fit:cover;display:block">`
-      : UI.escape(u.name.charAt(0).toUpperCase());
+      : _esc(u.name.charAt(0).toUpperCase());
 
     // Mitglied seit
     const memberSince = (() => {
@@ -545,11 +545,11 @@ window.Page_settings = (() => {
               </div>
             </div>
             <input type="file" id="settings-avatar-input" accept="image/*"
-                   class="hidden">
+                   style="display:none">
             <div>
-              <div style="font-weight:700;font-size:var(--text-lg)">${UI.escape(u.name)}</div>
+              <div style="font-weight:700;font-size:var(--text-lg)">${_esc(u.name)}</div>
               <div style="display:flex;align-items:center;gap:var(--space-2);color:var(--c-text-secondary);font-size:var(--text-sm)">
-                ${UI.escape(u.email)}
+                ${_esc(u.email)}
                 ${u.email_verified
                   ? `<svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px;color:#22c55e" title="Bestätigt"><use href="/icons/phosphor.svg#check-circle"></use></svg>`
                   : `<span id="settings-verify-chip"
@@ -562,7 +562,7 @@ window.Page_settings = (() => {
                   ? `<span class="badge badge-primary">
                        <svg class="ph-icon" aria-hidden="true" style="width:12px;height:12px"><use href="/icons/phosphor.svg#star"></use></svg> Ban Yaro Plus
                      </span>`
-                  : `<span class="badge text-secondary">Kostenlos</span>`}
+                  : `<span class="badge" style="color:var(--c-text-secondary)">Kostenlos</span>`}
                 ${u.is_founder
                   ? `<span class="badge" style="background:#7c3aed;color:#fff;cursor:pointer" data-page="gruender">
                        <svg class="ph-icon" aria-hidden="true" style="width:12px;height:12px"><use href="/icons/phosphor.svg#key"></use></svg>
@@ -584,7 +584,7 @@ window.Page_settings = (() => {
         </div>
 
         <!-- Mein Profil -->
-        <div class="card mb-4">
+        <div class="card" style="margin-bottom:var(--space-4)">
           <div style="padding:var(--space-3) var(--space-4);
                       font-size:var(--text-xs);font-weight:600;
                       color:var(--c-text-secondary);text-transform:uppercase;
@@ -599,41 +599,41 @@ window.Page_settings = (() => {
           </div>
           <div style="padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)">
             ${memberSince
-              ? `<div class="text-sm-secondary">
-                   Mitglied seit ${UI.escape(memberSince)}
+              ? `<div style="font-size:var(--text-sm);color:var(--c-text-secondary)">
+                   Mitglied seit ${_esc(memberSince)}
                  </div>`
               : ''}
             ${u.bio
-              ? `<div class="text-sm">${UI.escape(u.bio)}</div>`
+              ? `<div style="font-size:var(--text-sm)">${_esc(u.bio)}</div>`
               : ''}
             ${u.wohnort
-              ? `<div class="text-sm-secondary">
-                   📍 ${UI.escape(u.wohnort)}
+              ? `<div style="font-size:var(--text-sm);color:var(--c-text-secondary)">
+                   📍 ${_esc(u.wohnort)}
                  </div>`
               : ''}
             ${u.erfahrung && erfahrungLabel[u.erfahrung]
-              ? `<div class="text-sm-secondary">
-                   ${UI.escape(erfahrungLabel[u.erfahrung])}
+              ? `<div style="font-size:var(--text-sm);color:var(--c-text-secondary)">
+                   ${_esc(erfahrungLabel[u.erfahrung])}
                  </div>`
               : ''}
             ${u.social_link
-              ? `<div class="text-sm">
-                   <a href="${UI.escape(u.social_link)}" target="_blank" rel="noopener"
-                      class="text-primary">${UI.escape(u.social_link)}</a>
+              ? `<div style="font-size:var(--text-sm)">
+                   <a href="${_esc(u.social_link)}" target="_blank" rel="noopener"
+                      style="color:var(--c-primary)">${_esc(u.social_link)}</a>
                  </div>`
               : ''}
             ${!u.bio && !u.wohnort && !u.erfahrung && !u.social_link
-              ? `<div class="text-sm-secondary">
+              ? `<div style="font-size:var(--text-sm);color:var(--c-text-secondary)">
                    Noch kein Profil ausgefüllt.
                  </div>`
               : ''}
           </div>
         </div>
 
-        <div class="card" id="settings-stats-card" class="mb-4">
+        <div class="card" id="settings-stats-card" style="margin-bottom:var(--space-4)">
           <div class="by-card-section-header">Aktivität</div>
           <div id="settings-stats-body" style="padding:var(--space-4);display:flex;justify-content:space-around">
-            <div class="text-sm-muted">Lädt…</div>
+            <div style="color:var(--c-text-muted);font-size:var(--text-sm)">Lädt…</div>
           </div>
           <div id="settings-streak" style="display:flex;align-items:center;gap:8px;
                padding:0 var(--space-4) var(--space-3);flex-wrap:wrap"></div>
@@ -643,14 +643,14 @@ window.Page_settings = (() => {
         <!-- Züchter-Profil Slot -->
         <div id="breeder-card-slot"></div>
 
-        <div class="card mb-4">
+        <div class="card" style="margin-bottom:var(--space-4)">
           <div class="by-card-section-header">Trophäen</div>
-          <div id="settings-badges-body" class="p-4">
-            <div class="text-sm-muted">Lädt…</div>
+          <div id="settings-badges-body" style="padding:var(--space-4)">
+            <div style="color:var(--c-text-muted);font-size:var(--text-sm)">Lädt…</div>
           </div>
         </div>
 
-        <div class="card mb-4">
+        <div class="card" style="margin-bottom:var(--space-4)">
           <div class="card-body" style="padding:0">
             <div class="sidebar-item" data-page="dog-profile"
                  style="padding:var(--space-4);border-radius:0;border-bottom:1px solid var(--c-border)">
@@ -724,7 +724,7 @@ window.Page_settings = (() => {
 
         ${_tierCard(u)}
 
-        <div class="card mb-4">
+        <div class="card" style="margin-bottom:var(--space-4)">
           <div class="by-card-section-header">
             App-Einstellungen
           </div>
@@ -827,15 +827,15 @@ window.Page_settings = (() => {
         <div class="card" style="margin-bottom:var(--space-5)" id="referral-card">
           <div style="padding:var(--space-4);border-bottom:1px solid var(--c-border)">
             <div style="font-weight:600;margin-bottom:2px">${UI.icon('arrow-square-out')} Freunde werben — dauerhafter Rabatt</div>
-            <div class="text-xs-secondary">
+            <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">
               10 Freunde → 20% · 20 Freunde → 30% · 50 Freunde → 50% — lebenslang, sobald Bezahlfunktionen aktiv sind.
             </div>
           </div>
-          <div id="referral-body" class="p-4">Lade…</div>
+          <div id="referral-body" style="padding:var(--space-4)">Lade…</div>
         </div>
 
         <!-- App installieren -->
-        <div class="card mb-4">
+        <div class="card" style="margin-bottom:var(--space-4)">
           <div class="by-card-section-header">
             App installieren
           </div>
@@ -877,18 +877,18 @@ window.Page_settings = (() => {
       if (!el || !dogs.length) return;
       el.innerHTML = dogs.map(d => {
         const av = d.foto_url
-          ? `<img src="${UI.escape(d.foto_url)}" style="width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0">`
+          ? `<img src="${_esc(d.foto_url)}" style="width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0">`
           : `<div style="width:36px;height:36px;border-radius:50%;background:var(--c-surface-2);display:flex;align-items:center;justify-content:center;flex-shrink:0">
                <svg class="ph-icon" style="width:18px;height:18px;color:var(--c-text-muted)" aria-hidden="true"><use href="/icons/phosphor.svg#dog"></use></svg>
              </div>`;
         const jahr = d.verstorben_am ? d.verstorben_am.slice(0, 4) : '';
         return `
-          <div class="sidebar-item settings-erinnerung-btn" data-dog-id="${d.id}" data-dog-name="${UI.escape(d.name)}"
+          <div class="sidebar-item settings-erinnerung-btn" data-dog-id="${d.id}" data-dog-name="${_esc(d.name)}"
                style="padding:var(--space-3) var(--space-4);border-radius:0;border-bottom:1px solid var(--c-border);cursor:pointer">
             ${av}
             <div style="display:flex;flex-direction:column;gap:1px;flex:1;min-width:0">
-              <span style="font-weight:600;font-size:var(--text-sm)">${UI.escape(d.name)}</span>
-              <span class="text-xs-muted">
+              <span style="font-weight:600;font-size:var(--text-sm)">${_esc(d.name)}</span>
+              <span style="font-size:var(--text-xs);color:var(--c-text-muted)">
                 <svg class="ph-icon" style="width:11px;height:11px" aria-hidden="true"><use href="/icons/phosphor.svg#heart-break"></use></svg>
                 Erinnerungen${jahr ? ' · ' + jahr : ''}
               </span>
@@ -911,7 +911,7 @@ window.Page_settings = (() => {
 
       const s = a.stats || {}, streak = a.streak || {};
       const stat = (val, label) => `
-        <div class="text-center">
+        <div style="text-align:center">
           <div style="font-size:1.3rem;font-weight:700;color:var(--c-text)">${val}</div>
           <div style="font-size:10px;color:var(--c-text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-top:2px">${label}</div>
         </div>`;
@@ -928,7 +928,7 @@ window.Page_settings = (() => {
           ? `<span style="font-size:1.3rem">🔥</span>
              <span style="font-weight:700;font-size:1.05rem">${cur} Tage Streak</span>
              ${mx > cur ? `<span style="color:var(--c-text-muted);font-size:11px;margin-left:auto">Best: ${mx}</span>` : ''}`
-          : `<span class="text-sm-muted">🔥 Noch kein Streak — heute aktiv werden!</span>`;
+          : `<span style="color:var(--c-text-muted);font-size:var(--text-sm)">🔥 Noch kein Streak — heute aktiv werden!</span>`;
       }
 
       // Lifetime-km Balken mit Meilenstein-Markierungen
@@ -1034,7 +1034,7 @@ window.Page_settings = (() => {
 
           // Alle Stufen als kleine Punkte
           const dots = (cat.alle_stufen || []).map(s =>
-            `<div title="${UI.escape(s.name)}" style="width:8px;height:8px;border-radius:50%;
+            `<div title="${_esc(s.name)}" style="width:8px;height:8px;border-radius:50%;
              background:${s.earned ? s.color : 'var(--c-border)'}"></div>`
           ).join('');
 
@@ -1046,7 +1046,7 @@ window.Page_settings = (() => {
           // Fortschrittsbalken
           const progressBar = nxt ? `
             <div style="font-size:10px;color:var(--c-text-muted);margin-top:4px">
-              ${val}${cat.einheit} / ${nxt.schwelle}${cat.einheit} → ${UI.escape(nxt.name)}
+              ${val}${cat.einheit} / ${nxt.schwelle}${cat.einheit} → ${_esc(nxt.name)}
             </div>
             <div style="height:4px;background:var(--c-border);border-radius:2px;margin-top:4px;overflow:hidden">
               <div style="height:100%;width:${cat.progress}%;background:${nxt.color};border-radius:2px;transition:width .4s"></div>
@@ -1059,11 +1059,11 @@ window.Page_settings = (() => {
             <div style="display:flex;gap:14px;align-items:flex-start;padding:12px 0;
                         border-bottom:1px solid var(--c-border)">
               ${shieldSvg}
-              <div class="flex-1-min">
+              <div style="flex:1;min-width:0">
                 <div style="display:flex;align-items:center;gap:6px;margin-bottom:2px">
-                  <span style="font-weight:700;font-size:var(--text-sm)">${UI.escape(cat.name)}</span>
+                  <span style="font-weight:700;font-size:var(--text-sm)">${_esc(cat.name)}</span>
                   ${cur ? `<span style="font-size:10px;font-weight:600;padding:1px 6px;border-radius:999px;
-                            background:${cur.color};color:${cur.text}">${UI.escape(cur.name)}</span>` : ''}
+                            background:${cur.color};color:${cur.text}">${_esc(cur.name)}</span>` : ''}
                 </div>
                 <div style="display:flex;gap:4px;margin-bottom:6px">${dots}</div>
                 ${progressBar}
@@ -1080,7 +1080,7 @@ window.Page_settings = (() => {
       }
     }).catch(() => {
       const el = document.getElementById('settings-stats-body');
-      if (el) el.innerHTML = '<div class="text-sm-muted">–</div>';
+      if (el) el.innerHTML = '<div style="color:var(--c-text-muted);font-size:var(--text-sm)">–</div>';
     });
 
     // Avatar-Hover-Overlay
@@ -1131,7 +1131,7 @@ window.Page_settings = (() => {
         ['trainer', 'Trainer / Ausbilder'],
         ['zuechter', 'Züchter'],
       ].map(([val, label]) =>
-        `<option value="${UI.escape(val)}" ${u.erfahrung === val ? 'selected' : ''}>${UI.escape(label)}</option>`
+        `<option value="${_esc(val)}" ${u.erfahrung === val ? 'selected' : ''}>${_esc(label)}</option>`
       ).join('');
 
       const sichtbarkeitOpts = [
@@ -1139,7 +1139,7 @@ window.Page_settings = (() => {
         ['friends', 'Nur Freunde'],
         ['private', 'Privat'],
       ].map(([val, label]) =>
-        `<option value="${UI.escape(val)}" ${(u.profil_sichtbarkeit || 'public') === val ? 'selected' : ''}>${UI.escape(label)}</option>`
+        `<option value="${_esc(val)}" ${(u.profil_sichtbarkeit || 'public') === val ? 'selected' : ''}>${_esc(label)}</option>`
       ).join('');
 
       UI.modal.open({
@@ -1150,20 +1150,20 @@ window.Page_settings = (() => {
               <label style="display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-1)">Echter Name (privat)</label>
               <input name="real_name" type="text" maxlength="80"
                      placeholder="z. B. Maria Müller"
-                     value="${UI.escape(u.real_name || '')}"
+                     value="${_esc(u.real_name || '')}"
                      style="${inputStyle}">
             </div>
             <div>
               <label style="display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-1)">Bio</label>
               <textarea name="bio" maxlength="300" rows="4"
                         placeholder="Kurze Vorstellung (max. 300 Zeichen)"
-                        style="${inputStyle};resize:vertical">${UI.escape(u.bio || '')}</textarea>
+                        style="${inputStyle};resize:vertical">${_esc(u.bio || '')}</textarea>
             </div>
             <div>
               <label style="display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-1)">Wohnort</label>
               <input name="wohnort" type="text" maxlength="60"
                      placeholder="z.B. München"
-                     value="${UI.escape(u.wohnort || '')}"
+                     value="${_esc(u.wohnort || '')}"
                      style="${inputStyle}">
             </div>
             <div>
@@ -1174,7 +1174,7 @@ window.Page_settings = (() => {
               <label style="display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-1)">Social-Link</label>
               <input name="social_link" type="url" maxlength="120"
                      placeholder="https://instagram.com/dein-hundeaccount"
-                     value="${UI.escape(u.social_link || '')}"
+                     value="${_esc(u.social_link || '')}"
                      style="${inputStyle}">
             </div>
             <div style="border-top:1px solid var(--c-border);padding-top:var(--space-3);margin-top:var(--space-1)">
@@ -1182,12 +1182,12 @@ window.Page_settings = (() => {
               <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-bottom:var(--space-2)">Wird auf Rechnungen gedruckt. Straße in Zeile 1, PLZ + Ort in Zeile 2.</div>
               <textarea name="billing_address" rows="2" maxlength="200"
                         placeholder="Musterstraße 1&#10;12345 Berlin"
-                        style="${inputStyle};resize:vertical;font-family:inherit">${UI.escape(u.billing_address || '')}</textarea>
+                        style="${inputStyle};resize:vertical;font-family:inherit">${_esc(u.billing_address || '')}</textarea>
             </div>
             <div>
               <label style="display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-1)">Dein Geburtstag <span style="font-weight:400;color:var(--c-text-secondary)">(optional)</span></label>
               <input name="geburtstag" type="text" maxlength="5" placeholder="TT.MM"
-                     value="${UI.escape(u.geburtstag || '')}"
+                     value="${_esc(u.geburtstag || '')}"
                      pattern="\\d{2}\\.\\d{2}"
                      title="Format: TT.MM, z.B. 16.05"
                      style="${inputStyle}">
@@ -1201,7 +1201,7 @@ window.Page_settings = (() => {
         `,
         footer: `
           <div class="w3-btn-stack">
-            <button type="submit" form="profile-form" class="btn btn-primary w-full">Speichern</button>
+            <button type="submit" form="profile-form" class="btn btn-primary" style="width:100%">Speichern</button>
             <button type="button" class="btn btn-secondary" data-modal-close>Abbrechen</button>
           </div>
         `,
@@ -1310,7 +1310,7 @@ window.Page_settings = (() => {
         `,
         footer: `
           <div class="w3-btn-stack">
-            <button type="submit" form="feedback-form" id="feedback-submit-btn" class="btn btn-primary w-full">Absenden</button>
+            <button type="submit" form="feedback-form" id="feedback-submit-btn" class="btn btn-primary" style="width:100%">Absenden</button>
             <button type="button" class="btn btn-secondary" data-modal-close>Abbrechen</button>
           </div>
         `,
@@ -1422,9 +1422,10 @@ window.Page_settings = (() => {
                         word-break:break-all;margin-bottom:var(--space-4)">
               ${httpsUrl}
             </div>
-            <div class="flex-col-gap-2">
+            <div style="display:flex;flex-direction:column;gap:var(--space-2)">
               <a href="${url}"
-                 class="btn btn-primary text-center">
+                 class="btn btn-primary"
+                 style="text-align:center">
                 ${UI.icon('calendar-dots')} In Kalender-App öffnen
               </a>
               <button class="btn btn-secondary" id="cal-copy-btn">
@@ -1525,8 +1526,8 @@ window.Page_settings = (() => {
     return `
       <div style="display:flex;justify-content:space-between;align-items:center;
                   padding:var(--space-2) 0;font-size:var(--text-sm)">
-        <span>${UI.escape(label)}</span>
-        <button class="by-toggle ki-toggle-btn" data-key="${UI.escape(key)}"
+        <span>${_esc(label)}</span>
+        <button class="by-toggle ki-toggle-btn" data-key="${_esc(key)}"
                 data-active="${active ? '1' : '0'}"
                 style="position:relative;display:inline-block;width:44px;height:24px;
                        border:none;border-radius:12px;cursor:pointer;flex-shrink:0;
@@ -1572,19 +1573,19 @@ window.Page_settings = (() => {
       </span>`;
       actionBlock = `
         <div style="margin-top:var(--space-3);font-size:var(--text-sm);display:flex;flex-direction:column;gap:var(--space-1)">
-          ${profile?.zwingername ? `<div class="text-secondary">Zwinger: <strong>${UI.escape(profile.zwingername)}</strong></div>` : ''}
-          ${profile?.rasse_text  ? `<div class="text-secondary">Rasse: <strong>${UI.escape(profile.rasse_text)}</strong></div>`  : ''}
+          ${profile?.zwingername ? `<div style="color:var(--c-text-secondary)">Zwinger: <strong>${_esc(profile.zwingername)}</strong></div>` : ''}
+          ${profile?.rasse_text  ? `<div style="color:var(--c-text-secondary)">Rasse: <strong>${_esc(profile.rasse_text)}</strong></div>`  : ''}
         </div>
         ${rolle === 'breeder' && profile ? `
-        <button class="btn btn-secondary btn-sm" id="breeder-edit-profile-btn" class="mt-3">
+        <button class="btn btn-secondary btn-sm" id="breeder-edit-profile-btn" style="margin-top:var(--space-3)">
           ${UI.icon('pencil-simple')} Profil bearbeiten
         </button>` : ''}
         ${rolle === 'admin' && !profile ? `
-        <button class="btn btn-primary btn-sm" id="breeder-admin-create-btn" class="mt-3">
+        <button class="btn btn-primary btn-sm" id="breeder-admin-create-btn" style="margin-top:var(--space-3)">
           ${UI.icon('plus')} Admin-Züchterprofil anlegen
         </button>` : ''}
         ${rolle === 'admin' && profile ? `
-        <button class="btn btn-secondary btn-sm" id="breeder-edit-profile-btn" class="mt-3">
+        <button class="btn btn-secondary btn-sm" id="breeder-edit-profile-btn" style="margin-top:var(--space-3)">
           ${UI.icon('pencil-simple')} Profil bearbeiten
         </button>` : ''}
         ${profile ? `
@@ -1611,7 +1612,7 @@ window.Page_settings = (() => {
         ${UI.icon('x-circle')} Abgelehnt
       </span>`;
       actionBlock = `
-        <div class="mt-3">
+        <div style="margin-top:var(--space-3)">
           <p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin:0 0 var(--space-2)">
             Du kannst einen neuen Antrag stellen.
           </p>
@@ -1626,9 +1627,9 @@ window.Page_settings = (() => {
     }
 
     slot.innerHTML = `
-      <div class="card mb-4">
+      <div class="card" style="margin-bottom:var(--space-4)">
         <div class="by-card-section-header">Züchter-Profil</div>
-        <div class="p-4">
+        <div style="padding:var(--space-4)">
           ${statusBadge}
           ${actionBlock}
         </div>
@@ -1700,22 +1701,22 @@ window.Page_settings = (() => {
           <div>
             <label style="display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-1)">Zwingername</label>
             <input name="zwingername" type="text" maxlength="100" style="${inputStyle}"
-                   value="${UI.escape(profile?.zwingername || '')}">
+                   value="${_esc(profile?.zwingername || '')}">
           </div>
           <div>
             <label style="display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-1)">Rasse</label>
             <input name="rasse_text" type="text" maxlength="100" style="${inputStyle}"
-                   value="${UI.escape(profile?.rasse_text || '')}">
+                   value="${_esc(profile?.rasse_text || '')}">
           </div>
           <div>
             <label style="display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-1)">Zuchtverein</label>
             <input name="verein" type="text" maxlength="100" style="${inputStyle}"
-                   value="${UI.escape(profile?.verein || '')}">
+                   value="${_esc(profile?.verein || '')}">
           </div>
           <div>
             <label style="display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-1)">Stadt</label>
             <input name="stadt" type="text" maxlength="80" style="${inputStyle}"
-                   value="${UI.escape(profile?.stadt || '')}">
+                   value="${_esc(profile?.stadt || '')}">
           </div>
           <div style="display:flex;align-items:center;gap:var(--space-3)">
             <input name="vdh_mitglied" type="checkbox" id="edit-breeder-vdh"
@@ -1726,12 +1727,12 @@ window.Page_settings = (() => {
           <div>
             <label style="display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-1)">Website (optional)</label>
             <input name="website" type="url" maxlength="200" style="${inputStyle}"
-                   value="${UI.escape(profile?.website || '')}" placeholder="https://mein-zwinger.de">
+                   value="${_esc(profile?.website || '')}" placeholder="https://mein-zwinger.de">
           </div>
           <div>
             <label style="display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-1)">Beschreibung (optional)</label>
             <textarea name="beschreibung" maxlength="500" rows="3"
-                      style="${inputStyle};resize:vertical">${UI.escape(profile?.beschreibung || '')}</textarea>
+                      style="${inputStyle};resize:vertical">${_esc(profile?.beschreibung || '')}</textarea>
           </div>
         </form>`,
       footer: `
@@ -1778,7 +1779,7 @@ window.Page_settings = (() => {
         <form id="breeder-apply-form" style="display:flex;flex-direction:column;gap:var(--space-4)">
           <div>
             <label style="display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-1)">
-              Zwingername <span class="text-danger">*</span>
+              Zwingername <span style="color:var(--c-danger)">*</span>
             </label>
             <input name="zwingername" type="text" maxlength="100" required
                    placeholder="z. B. vom Sonnenfeld"
@@ -1786,7 +1787,7 @@ window.Page_settings = (() => {
           </div>
           <div>
             <label style="display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-1)">
-              Rasse <span class="text-danger">*</span>
+              Rasse <span style="color:var(--c-danger)">*</span>
             </label>
             <input name="rasse_text" type="text" maxlength="100" required
                    placeholder="z. B. Labrador Retriever"
@@ -1794,7 +1795,7 @@ window.Page_settings = (() => {
           </div>
           <div>
             <label style="display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-1)">
-              Zuchtverein <span class="text-danger">*</span>
+              Zuchtverein <span style="color:var(--c-danger)">*</span>
             </label>
             <input name="verein" type="text" maxlength="100" required
                    placeholder="z. B. DLRG, VDH, BCD"
@@ -1802,7 +1803,7 @@ window.Page_settings = (() => {
           </div>
           <div>
             <label style="display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-1)">
-              Stadt <span class="text-danger">*</span>
+              Stadt <span style="color:var(--c-danger)">*</span>
             </label>
             <input name="stadt" type="text" maxlength="80" required
                    placeholder="z. B. München"
@@ -1833,7 +1834,7 @@ window.Page_settings = (() => {
           </div>
           <div>
             <label style="display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-1)">
-              Dokument hochladen <span class="text-danger">*</span>
+              Dokument hochladen <span style="color:var(--c-danger)">*</span>
             </label>
             <input name="dokument" type="file" id="breeder-doc-input" required
                    accept=".pdf,.jpg,.jpeg,.png,.webp"
@@ -1847,7 +1848,7 @@ window.Page_settings = (() => {
       footer: `
         <div class="w3-btn-stack">
           <button type="submit" form="breeder-apply-form" class="btn btn-primary" id="breeder-apply-submit"
-                  class="w-full">Antrag einreichen</button>
+                  style="width:100%">Antrag einreichen</button>
           <button type="button" class="btn btn-secondary" data-modal-close>Abbrechen</button>
         </div>
       `,
@@ -1912,7 +1913,7 @@ window.Page_settings = (() => {
         </div>
 
         <!-- Zähler + Fortschritt -->
-        <div class="mb-4">
+        <div style="margin-bottom:var(--space-4)">
           <div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--space-1)">
             <span style="font-size:var(--text-sm);font-weight:600">
               ${UI.icon('users')} <strong>${r.count}</strong> ${r.count === 1 ? 'Freund geworben' : 'Freunde geworben'}
@@ -1969,7 +1970,7 @@ window.Page_settings = (() => {
   // GEDENKSEITE — für verstorbene Hunde
   // ----------------------------------------------------------
   async function _openGedenkseite(dogId, dogName) {
-    UI.modal.open({ title: `Erinnerungen an ${UI.escape(dogName)}`, body: `
+    UI.modal.open({ title: `Erinnerungen an ${_esc(dogName)}`, body: `
       <div style="text-align:center;padding:var(--space-4)">
         <svg class="ph-icon" style="width:32px;height:32px;color:var(--c-primary);animation:spin 1s linear infinite" aria-hidden="true">
           <use href="/icons/phosphor.svg#spinner"></use>
@@ -1982,27 +1983,27 @@ window.Page_settings = (() => {
 
     const d  = data;
     const av = d.dog.foto_url
-      ? `<img src="${UI.escape(d.dog.foto_url)}" style="width:100px;height:100px;border-radius:50%;object-fit:cover;border:3px solid var(--c-primary)">`
+      ? `<img src="${_esc(d.dog.foto_url)}" style="width:100px;height:100px;border-radius:50%;object-fit:cover;border:3px solid var(--c-primary)">`
       : `<div style="width:100px;height:100px;border-radius:50%;background:var(--c-primary-subtle);display:flex;align-items:center;justify-content:center;border:3px solid var(--c-primary)"><svg class="ph-icon" style="width:48px;height:48px;color:var(--c-primary)" aria-hidden="true"><use href="/icons/phosphor.svg#dog"></use></svg></div>`;
 
     const photoGrid = d.photos?.length ? `
       <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:var(--space-4) 0">
-        ${d.photos.map(url => `<img src="${UI.escape(url)}" style="width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px">`).join('')}
+        ${d.photos.map(url => `<img src="${_esc(url)}" style="width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px">`).join('')}
       </div>` : '';
 
     const statsHtml = `
       <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin:var(--space-4) 0">
         ${d.km_total ? `<div class="card" style="padding:var(--space-3);text-align:center">
           <div style="font-size:var(--text-xl);font-weight:800;color:var(--c-primary)">${d.km_total}</div>
-          <div class="text-xs-secondary">km zusammen</div>
+          <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">km zusammen</div>
         </div>` : ''}
         ${d.diary_count ? `<div class="card" style="padding:var(--space-3);text-align:center">
           <div style="font-size:var(--text-xl);font-weight:800;color:var(--c-primary)">${d.diary_count}</div>
-          <div class="text-xs-secondary">Tagebucheinträge</div>
+          <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">Tagebucheinträge</div>
         </div>` : ''}
         ${d.gemeinsam_tage ? `<div class="card" style="padding:var(--space-3);text-align:center">
           <div style="font-size:var(--text-xl);font-weight:800;color:var(--c-primary)">${d.gemeinsam_tage}</div>
-          <div class="text-xs-secondary">gemeinsame Tage</div>
+          <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">gemeinsame Tage</div>
         </div>` : ''}
       </div>`;
 
@@ -2012,11 +2013,11 @@ window.Page_settings = (() => {
       : '';
 
     UI.modal.open({
-      title: `Erinnerungen an ${UI.escape(d.dog.name)}`,
+      title: `Erinnerungen an ${_esc(d.dog.name)}`,
       body: `
         <div style="text-align:center;margin-bottom:var(--space-4)">
           ${av}
-          <div style="margin-top:var(--space-3);font-size:var(--text-lg);font-weight:700">${UI.escape(d.dog.name)}</div>
+          <div style="margin-top:var(--space-3);font-size:var(--text-lg);font-weight:700">${_esc(d.dog.name)}</div>
           ${passedStr ? `<div style="font-size:var(--text-sm);color:var(--c-text-muted);margin-top:4px">
             <svg class="ph-icon" style="width:14px;height:14px" aria-hidden="true"><use href="/icons/phosphor.svg#heart-break"></use></svg>
             ${passedStr}
@@ -2033,7 +2034,7 @@ window.Page_settings = (() => {
         ${d.ki_abschied ? `<div style="font-style:italic;font-size:var(--text-sm);color:var(--c-text-secondary);
                                line-height:1.7;padding:var(--space-3);background:var(--c-surface);
                                border-radius:var(--radius-md);border:1px solid var(--c-border)">
-          "${UI.escape(d.ki_abschied)}"
+          "${_esc(d.ki_abschied)}"
         </div>` : ''}
       `,
     });
@@ -2062,10 +2063,12 @@ window.Page_settings = (() => {
             Danach kannst du dich hier anmelden.
           </p>
         </div>
-        <button id="verify-resend-btn2" class="btn btn-ghost w-full mb-3">
+        <button id="verify-resend-btn2" class="btn btn-ghost w-full"
+                style="margin-bottom:var(--space-3)">
           Link erneut senden
         </button>
-        <button id="verify-back-btn" class="btn btn-ghost w-full text-sm-muted">
+        <button id="verify-back-btn" class="btn btn-ghost w-full"
+                style="color:var(--c-text-muted);font-size:var(--text-sm)">
           Anderes Konto / Anmelden
         </button>
       </div>
@@ -2163,7 +2166,7 @@ window.Page_settings = (() => {
             </button>
           </div>
         </div>
-        <button type="submit" class="btn btn-primary w-full mt-2">
+        <button type="submit" class="btn btn-primary w-full" style="margin-top:var(--space-2)">
           Anmelden
         </button>
         <p style="text-align:center;margin-top:var(--space-3);font-size:var(--text-xs)">
@@ -2237,8 +2240,8 @@ window.Page_settings = (() => {
             </div>
           </div>
         </div>
-        <div class="form-group mt-2">
-          <label class="form-label text-xs">
+        <div class="form-group" style="margin-top:var(--space-2)">
+          <label class="form-label" style="font-size:var(--text-xs)">
             Einladungscode <span style="color:var(--c-text-muted);font-weight:400">(optional)</span>
           </label>
           <input class="form-control" type="text" name="partner_code" id="reg-partner-code"
@@ -2247,7 +2250,7 @@ window.Page_settings = (() => {
           <div id="reg-partner-hint" style="display:none;margin-top:var(--space-1);font-size:var(--text-xs);
                padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm)"></div>
         </div>
-        <button type="submit" class="btn btn-primary w-full mt-2">
+        <button type="submit" class="btn btn-primary w-full" style="margin-top:var(--space-2)">
           Konto erstellen
         </button>
         <p style="text-align:center;font-size:var(--text-xs);
@@ -2280,7 +2283,7 @@ window.Page_settings = (() => {
       UI.modal.open({
         title: 'Passwort zurücksetzen',
         body: `
-          <form id="${id}" class="flex-col-gap-3">
+          <form id="${id}" style="display:flex;flex-direction:column;gap:var(--space-3)">
             <p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin:0">
               Gib deine E-Mail-Adresse ein. Du erhältst einen Link zum Zurücksetzen deines Passworts.
             </p>
@@ -2591,6 +2594,11 @@ window.Page_settings = (() => {
   // ----------------------------------------------------------
   // HELPER
   // ----------------------------------------------------------
+  function _esc(str) {
+    if (!str) return '';
+    return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+              .replace(/"/g, '&quot;');
+  }
 
   // ----------------------------------------------------------
   // PUBLIC
diff --git a/backend/static/js/pages/sitting.js b/backend/static/js/pages/sitting.js
index fd59ec9..4df9fda 100644
--- a/backend/static/js/pages/sitting.js
+++ b/backend/static/js/pages/sitting.js
@@ -176,7 +176,7 @@ window.Page_sitting = (() => {
           <div class="sitting-profil-fact"><strong>${s.max_hunde}</strong> Hund${s.max_hunde !== 1 ? 'e' : ''} max.</div>
           <div class="sitting-profil-fact"><strong>${s.radius_km} km</strong> Umkreis</div>
         </div>
-        <div class="sitting-services mt-3">${svcs || '(keine Services angegeben)'}</div>
+        <div class="sitting-services" style="margin-top:var(--space-3)">${svcs || '(keine Services angegeben)'}</div>
       </div>
     `;
   }
@@ -194,7 +194,7 @@ window.Page_sitting = (() => {
     }
 
     if (myReqs.length) {
-      html += `<div class="by-section-label mt-4">${UI.icon('upload')} Meine Anfragen</div>`;
+      html += `<div class="by-section-label" style="margin-top:var(--space-4)">${UI.icon('upload')} Meine Anfragen</div>`;
       html += myReqs.map(r => _requestCardHTML(r, 'sent')).join('');
     }
 
@@ -273,7 +273,7 @@ window.Page_sitting = (() => {
 
     const footer = _state.user && _mySitter?.user_id !== s.user_id ? `
       <button class="btn btn-primary" id="sit-anfrage-btn">${UI.icon('bell')} Anfrage senden</button>
-    ` : (!_state.user ? `<span class="text-secondary">Zum Anfragen bitte einloggen.</span>` : '');
+    ` : (!_state.user ? `<span style="color:var(--c-text-secondary)">Zum Anfragen bitte einloggen.</span>` : '');
 
     UI.modal.open({ title: 'Sitter-Profil', body, footer });
 
@@ -389,10 +389,10 @@ window.Page_sitting = (() => {
           `).join('')}
         </div>
         <div class="form-group">
-          <label class="form-label">Mein Standort <span class="text-secondary">(für Umkreis-Suche)</span></label>
+          <label class="form-label">Mein Standort <span style="color:var(--c-text-secondary)">(für Umkreis-Suche)</span></label>
           <div id="sit-loc-picker"></div>
         </div>
-        <div class="form-group mt-3">
+        <div class="form-group" style="margin-top:var(--space-3)">
           <label class="form-label">Umkreis (km)</label>
           <input class="form-control" type="number" min="1" max="100" name="radius_km" value="${s?.radius_km ?? 20}">
         </div>
@@ -407,7 +407,7 @@ window.Page_sitting = (() => {
     `;
     const footer = `
       <div style="display:flex;flex-direction:column;gap:var(--space-2);width:100%">
-        <button class="btn btn-primary" type="submit" form="${id}" id="sit-profil-submit" class="w-full">
+        <button class="btn btn-primary" type="submit" form="${id}" id="sit-profil-submit" style="width:100%">
           ${s ? `${UI.icon('floppy-disk')} Speichern` : `${UI.icon('plus')} Profil erstellen`}
         </button>
         <button class="btn btn-secondary" onclick="UI.modal.close()">Abbrechen</button>
@@ -773,7 +773,7 @@ window.Page_sitting = (() => {
       <div style="width:100%;max-width:600px;background:var(--c-surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;
                   padding:var(--space-4);box-sizing:border-box;max-height:80vh;display:flex;flex-direction:column">
         <div style="display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)">
-          <svg class="ph-icon" aria-hidden="true" class="text-primary"><use href="/icons/phosphor.svg#note-pencil"></use></svg>
+          <svg class="ph-icon" aria-hidden="true" style="color:var(--c-primary)"><use href="/icons/phosphor.svg#note-pencil"></use></svg>
           <span style="font-weight:600;flex:1"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#note-pencil"></use></svg> Notiz — ${UI.escape(parentLabel)}</span>
           <button id="sit-note-close" style="background:none;border:none;cursor:pointer;color:var(--c-text-muted);padding:4px">
             <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#x"></use></svg>
diff --git a/backend/static/js/pages/social.js b/backend/static/js/pages/social.js
index c9ab3a9..d1af781 100644
--- a/backend/static/js/pages/social.js
+++ b/backend/static/js/pages/social.js
@@ -49,7 +49,7 @@ window.Page_social = (() => {
                   margin-bottom:var(--space-4)">
         <div style="display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)">
           <span style="font-size:1.6em">📱</span>
-          <div class="flex-1-min">
+          <div style="flex:1;min-width:0">
             <div style="font-size:var(--text-base);font-weight:700">Social Media</div>
             <div style="font-size:11px;color:var(--c-text-muted)">Luna ist dein KI-Coach</div>
           </div>
@@ -92,7 +92,7 @@ window.Page_social = (() => {
       <div style="display:flex;justify-content:space-between;font-size:12px;
                   color:var(--c-text);margin-bottom:6px;font-weight:500">
         <span>${s.level}</span>
-        ${s.next_level ? `<span class="text-secondary">${s.xp_next - s.xp} XP bis ${s.next_level}</span>` : ''}
+        ${s.next_level ? `<span style="color:var(--c-text-secondary)">${s.xp_next - s.xp} XP bis ${s.next_level}</span>` : ''}
       </div>
       <div style="background:var(--c-surface-2);border-radius:var(--radius-full);height:8px;overflow:hidden">
         <div style="height:100%;background:linear-gradient(90deg,var(--c-primary),var(--c-primary-light));
@@ -171,9 +171,9 @@ window.Page_social = (() => {
       <div style="background:var(--c-surface);border-radius:var(--radius-lg);
                   box-shadow:var(--shadow-sm);padding:var(--space-4)">
         <!-- Plattform -->
-        <div class="mb-4">
+        <div style="margin-bottom:var(--space-4)">
           <div class="sm-label">Plattform</div>
-          <div class="flex-gap-2">
+          <div style="display:flex;gap:var(--space-2)">
             ${['both','instagram','tiktok'].map((p,i) => `
               <button class="btn btn-sm sm-plat ${i===0?'btn-primary':'btn-secondary'}"
                       data-p="${p}" style="flex:1;min-height:36px;font-size:12px;padding:4px 8px;
@@ -182,7 +182,7 @@ window.Page_social = (() => {
           </div>
         </div>
         <!-- Format -->
-        <div class="mb-4">
+        <div style="margin-bottom:var(--space-4)">
           <div class="sm-label">Format</div>
           <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)">
             ${['post','reel','story','carousel'].map((f,i) => `
@@ -193,7 +193,7 @@ window.Page_social = (() => {
           </div>
         </div>
         <!-- Thema -->
-        <div class="mb-4">
+        <div style="margin-bottom:var(--space-4)">
           <div class="sm-label">Thema</div>
           <textarea id="sm-topic" rows="3"
                     placeholder="z.B. Mein Hund beim ersten Schnee 🐾"
@@ -211,12 +211,12 @@ window.Page_social = (() => {
           <svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#check"></use></svg> Idee übernommen — prüf die Einstellungen und tippe auf <strong>Los geht's!</strong> 👇
         </div>
         <!-- Medien-Upload -->
-        <div class="mb-4">
+        <div style="margin-bottom:var(--space-4)">
           <div class="sm-label">Foto / Video (optional)</div>
           <div style="display:flex;gap:var(--space-2);flex-wrap:wrap">
             <label style="cursor:pointer;flex:1">
               <input type="file" id="sm-media-file" accept="image/*,video/*"
-                     capture="environment" class="hidden">
+                     capture="environment" style="display:none">
               <span class="btn btn-secondary btn-sm"
                     style="min-height:40px;display:flex;align-items:center;justify-content:center;
                            gap:6px;font-size:12px;width:100%;border-radius:var(--radius-full)">
@@ -224,7 +224,7 @@ window.Page_social = (() => {
             </label>
             <label style="cursor:pointer;flex:1">
               <input type="file" id="sm-media-file2" accept="image/*,video/*"
-                     class="hidden">
+                     style="display:none">
               <span class="btn btn-secondary btn-sm"
                     style="min-height:40px;display:flex;align-items:center;justify-content:center;
                            gap:6px;font-size:12px;width:100%;border-radius:var(--radius-full)">
@@ -235,20 +235,20 @@ window.Page_social = (() => {
                max-width:100px;max-height:100px;border-radius:var(--radius-md);overflow:hidden"></div>
         </div>
         <!-- Rasse — Luna-Vorschlag + Suche -->
-        <div class="mb-4">
+        <div style="margin-bottom:var(--space-4)">
           <div class="sm-label">Rasse (optional)</div>
           ${_unusedBreeds.length ? `
           <div style="font-size:11px;color:var(--c-text-muted);margin-bottom:8px">
             🌙 Noch nicht gezeigt:
             <div style="display:flex;flex-wrap:wrap;gap:6px;margin-top:6px">
             ${_unusedBreeds.map(b =>
-              `<button class="sm-breed-chip" data-id="${b.id}" data-name="${UI.escape(b.name)}"
+              `<button class="sm-breed-chip" data-id="${b.id}" data-name="${_esc(b.name)}"
                 style="padding:5px 12px;border-radius:var(--radius-full);
                        border:1.5px solid var(--c-border);
                        background:var(--c-surface-2);color:var(--c-text);
                        font-size:12px;cursor:pointer;font-family:inherit;
                        transition:all var(--transition-fast)">
-                ${UI.escape(b.name)}</button>`).join('')}
+                ${_esc(b.name)}</button>`).join('')}
             </div>
           </div>` : ''}
           <input id="sm-breed-search" list="sm-breed-list"
@@ -259,13 +259,13 @@ window.Page_social = (() => {
                         padding:9px 12px;font-size:var(--text-sm);
                         font-family:inherit;box-sizing:border-box">
           <datalist id="sm-breed-list">
-            ${_breeds.map(b => `<option value="${UI.escape(b.name)}" data-id="${b.id}">`).join('')}
+            ${_breeds.map(b => `<option value="${_esc(b.name)}" data-id="${b.id}">`).join('')}
           </datalist>
           <input type="hidden" id="sm-breed-id">
         </div>
 
         <!-- Generier-Buttons als Cards -->
-        <div class="sm-label mb-3">Schnell generieren</div>
+        <div class="sm-label" style="margin-bottom:var(--space-3)">Schnell generieren</div>
         <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-2);
                     margin-bottom:var(--space-3)">
           <button id="sm-breed-day"
@@ -319,7 +319,7 @@ window.Page_social = (() => {
                        border-radius:var(--radius-lg);box-shadow:var(--shadow-md)">
           <svg class="ph-icon" aria-hidden="true" style="width:16px;height:16px"><use href="/icons/phosphor.svg#sparkle"></use></svg> Los geht's!
         </button>
-        <div id="sm-gen-result" class="mt-4"></div>
+        <div id="sm-gen-result" style="margin-top:var(--space-4)"></div>
       </div>`;
 
     // Platform toggle
@@ -405,18 +405,18 @@ window.Page_social = (() => {
       try {
         const ideas = await API.get('/social/suggestions');
         clearInterval(sgInt);
-        if (!ideas?.length) { box.innerHTML = '<div class="text-sm-muted">Keine Ideen erhalten.</div>'; return; }
+        if (!ideas?.length) { box.innerHTML = '<div style="color:var(--c-text-muted);font-size:var(--text-sm)">Keine Ideen erhalten.</div>'; return; }
         box.innerHTML = ideas.map((idea, i) => `
           <div class="card sm-idea" style="padding:12px;margin-bottom:8px;cursor:pointer;
                border:2px solid transparent;transition:border-color .15s;
                -webkit-tap-highlight-color:transparent" data-i="${i}">
             <div style="display:flex;align-items:flex-start;gap:10px">
               <span style="font-size:1.4em;flex-shrink:0;line-height:1.2">${idea.emoji||'💡'}</span>
-              <div class="flex-1-min">
+              <div style="flex:1;min-width:0">
                 <div style="font-weight:600;font-size:var(--text-sm);margin-bottom:4px;
-                            line-height:1.3">${UI.escape(idea.thema)}</div>
+                            line-height:1.3">${_esc(idea.thema)}</div>
                 <div style="font-size:11px;color:var(--c-text-secondary);margin-bottom:6px;
-                            line-height:1.4">🎓 ${UI.escape(idea.warum)}</div>
+                            line-height:1.4">🎓 ${_esc(idea.warum)}</div>
                 <div style="display:flex;gap:6px">
                   <span style="font-size:10px;background:var(--c-surface-2);
                                padding:2px 6px;border-radius:4px">${_FL[idea.format]||idea.format}</span>
@@ -427,16 +427,16 @@ window.Page_social = (() => {
               <div style="display:flex;flex-direction:column;gap:5px;flex-shrink:0">
                 <button class="btn btn-primary btn-sm sm-use"
                         style="font-size:11px;padding:6px 10px;min-height:34px;white-space:nowrap"
-                        data-thema="${UI.escape(idea.thema)}"
+                        data-thema="${_esc(idea.thema)}"
                         data-format="${idea.format||'post'}"
                         data-platform="${idea.platform||'both'}">
                   Nutzen →</button>
                 <button class="btn btn-secondary btn-sm sm-save-idea"
                         style="font-size:10px;padding:4px 8px;min-height:26px;white-space:nowrap"
-                        data-thema="${UI.escape(idea.thema)}"
+                        data-thema="${_esc(idea.thema)}"
                         data-format="${idea.format||'post'}"
                         data-platform="${idea.platform||'both'}"
-                        data-category="${UI.escape(idea.category||'')}">
+                        data-category="${_esc(idea.category||'')}">
                   <svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#push-pin"></use></svg> Merken</button>
               </div>
             </div>
@@ -520,17 +520,17 @@ window.Page_social = (() => {
               ${exercises.filter(e=>e.kategorie===cat).map(e => `
                 <div style="background:var(--c-surface);border-radius:8px;padding:10px;
                      margin-bottom:6px;display:flex;align-items:center;gap:10px">
-                  <div class="flex-1-min">
+                  <div style="flex:1;min-width:0">
                     <div style="font-size:var(--text-sm);font-weight:600;color:var(--c-text)">
-                      ${UI.escape(e.name)}</div>
+                      ${_esc(e.name)}</div>
                     <div style="font-size:10px;color:var(--c-text-muted)">
-                      ${UI.escape(e.schwierigkeit||'')} · ${UI.escape(e.alter_ab||'')} · ${UI.escape(e.dauer||'')}</div>
+                      ${_esc(e.schwierigkeit||'')} · ${_esc(e.alter_ab||'')} · ${_esc(e.dauer||'')}</div>
                   </div>
                   <div style="display:flex;align-items:center;gap:6px;flex-shrink:0">
                     ${e.posts_count > 0 ? `<span style="font-size:10px;background:#10b981;
                       color:#fff;padding:1px 6px;border-radius:4px"><svg class="ph-icon" aria-hidden="true" style="width:12px;height:12px"><use href="/icons/phosphor.svg#check"></use></svg> ${e.posts_count}x</span>` : ''}
                     <button class="btn btn-sm btn-primary sm-ex-use"
-                            data-id="${e.exercise_id}" data-name="${UI.escape(e.name)}"
+                            data-id="${e.exercise_id}" data-name="${_esc(e.name)}"
                             style="font-size:11px;padding:4px 10px;min-height:28px">
                       Nutzen</button>
                   </div>
@@ -580,9 +580,9 @@ window.Page_social = (() => {
             <span style="font-size:2.2em;flex-shrink:0">🎾</span>
             <div>
               <div style="font-size:11px;color:#4ade80;font-weight:600;margin-bottom:2px">
-                Trainingstipp · ${UI.escape(data.exercise_kat||'')} · ${stilLabel}</div>
+                Trainingstipp · ${_esc(data.exercise_kat||'')} · ${stilLabel}</div>
               <div style="font-weight:700;font-size:var(--text-base);color:#15803d">
-                ${UI.escape(data.exercise_name||'')}</div>
+                ${_esc(data.exercise_name||'')}</div>
             </div>
           </div>
           ${_renderResult(data, null)}`;
@@ -592,7 +592,7 @@ window.Page_social = (() => {
       } catch(e) {
         clearInterval(interval.bar); clearInterval(interval.msg);
         res.innerHTML = `<div style="color:var(--c-danger);padding:var(--space-3)">
-          😬 ${UI.escape(e.message||String(e))}</div>`;
+          😬 ${_esc(e.message||String(e))}</div>`;
       } finally {
         btn.disabled = false;
       }
@@ -620,10 +620,10 @@ window.Page_social = (() => {
             <span style="font-size:2.2em;flex-shrink:0">🛁</span>
             <div>
               <div style="font-size:11px;color:#c084fc;font-weight:600;margin-bottom:2px">
-                Pflegetipp · ${UI.escape(data.pflege_kat||'')}
-                ${data.rasse_name ? ` · speziell für ${UI.escape(data.rasse_name)}` : ''}</div>
+                Pflegetipp · ${_esc(data.pflege_kat||'')}
+                ${data.rasse_name ? ` · speziell für ${_esc(data.rasse_name)}` : ''}</div>
               <div style="font-weight:700;font-size:var(--text-base);color:#7c3aed">
-                ${UI.escape(data.pflege_titel||'')}</div>
+                ${_esc(data.pflege_titel||'')}</div>
             </div>
           </div>
           ${_renderResult(data, null)}`;
@@ -633,7 +633,7 @@ window.Page_social = (() => {
       } catch(e) {
         clearInterval(interval.bar); clearInterval(interval.msg);
         res.innerHTML = `<div style="color:var(--c-danger);padding:var(--space-3)">
-          😬 ${UI.escape(e.message||String(e))}</div>`;
+          😬 ${_esc(e.message||String(e))}</div>`;
       } finally { btn.disabled = false; }
     });
 
@@ -663,7 +663,7 @@ window.Page_social = (() => {
               <div style="font-size:11px;color:var(--c-primary);font-weight:600;margin-bottom:2px">
                 Rasse des Tages</div>
               <div style="font-weight:700;font-size:var(--text-base);color:var(--c-primary-dark)">
-                ${UI.escape(data.topic?.replace('Rasse des Tages: ',''))}</div>
+                ${_esc(data.topic?.replace('Rasse des Tages: ',''))}</div>
             </div>
           </div>
           ${_renderResult(data, mediaUrl)}`;
@@ -675,7 +675,7 @@ window.Page_social = (() => {
       } catch(e) {
         clearInterval(interval.bar); clearInterval(interval.msg);
         res.innerHTML = `<div style="color:var(--c-danger);padding:var(--space-3)">
-          😬 ${UI.escape(e.message||String(e))}</div>`;
+          😬 ${_esc(e.message||String(e))}</div>`;
       } finally {
         btn.disabled = false;
       }
@@ -719,7 +719,7 @@ window.Page_social = (() => {
         clearInterval(interval);
         res.innerHTML = `<div style="color:var(--c-danger);padding:var(--space-3);
             border-radius:8px;background:var(--c-surface-2)">
-          😬 Ups: ${UI.escape(e.message||String(e))}</div>`;
+          😬 Ups: ${_esc(e.message||String(e))}</div>`;
       } finally {
         btn.disabled = false;
         btn.innerHTML = '<svg class="ph-icon" aria-hidden="true" style="width:16px;height:16px"><use href="/icons/phosphor.svg#sparkle"></use></svg> Los geht\'s!';
@@ -733,7 +733,7 @@ window.Page_social = (() => {
   function _lunaThinking(msg = 'Denkt nach…') {
     return `<div style="text-align:center;padding:var(--space-4);color:var(--c-text-muted)">
       <div style="font-size:1.8em;margin-bottom:8px;animation:luna-pulse 1.5s infinite">🌙</div>
-      <div class="text-sm">${msg}</div>
+      <div style="font-size:var(--text-sm)">${msg}</div>
     </div>`;
   }
 
@@ -811,12 +811,12 @@ window.Page_social = (() => {
       <div style="background:var(--c-primary-subtle);
            border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-3);
            border-left:4px solid var(--c-primary)">
-        <div class="flex-gap-3">
+        <div style="display:flex;gap:var(--space-3)">
           <span style="font-size:1.3em;flex-shrink:0">🌙</span>
           <div>
             <div style="font-size:11px;font-weight:700;color:var(--c-primary);margin-bottom:4px;
                         text-transform:uppercase;letter-spacing:.5px">Luna sagt:</div>
-            <div style="font-size:var(--text-sm);line-height:1.6;color:var(--c-text)">${UI.escape(data.coaching)}</div>
+            <div style="font-size:var(--text-sm);line-height:1.6;color:var(--c-text)">${_esc(data.coaching)}</div>
           </div>
         </div>
       </div>` : ''}
@@ -830,7 +830,7 @@ window.Page_social = (() => {
       </div>
 
       <!-- Aktions-Buttons: Primär volle Breite, Sekundär nebeneinander -->
-      <div class="mb-4">
+      <div style="margin-bottom:var(--space-4)">
         <button class="btn btn-primary sm-posted-btn"
                 data-id="${data.id}"
                 style="width:100%;min-height:48px;font-size:var(--text-sm);
@@ -838,7 +838,7 @@ window.Page_social = (() => {
                        background:#10b981;border-color:#10b981;box-shadow:var(--shadow-sm)">
           📤 Habe ich gepostet!
         </button>
-        <div class="flex-gap-2">
+        <div style="display:flex;gap:var(--space-2)">
           <button class="btn btn-sm btn-secondary sm-preview-btn"
                   data-id="${data.id}"
                   style="flex:1;font-size:12px;padding:6px 10px;min-height:36px;
@@ -903,9 +903,9 @@ window.Page_social = (() => {
         ${data.hook ? `<div class="sm-label">🎣 Hook</div>
           <div style="font-size:var(--text-sm);font-style:italic;margin-bottom:var(--space-3);
                       line-height:1.6">
-            "${UI.escape(data.hook)}"</div>` : ''}
+            "${_esc(data.hook)}"</div>` : ''}
         ${data.cta ? `<div class="sm-label">📣 Call-to-Action</div>
-          <div style="font-size:var(--text-sm);line-height:1.6">${UI.escape(data.cta)}</div>` : ''}
+          <div style="font-size:var(--text-sm);line-height:1.6">${_esc(data.cta)}</div>` : ''}
       </div>` : ''}
       ${_resultBlock('📸 Was du filmen/fotografieren solltest', data.visual_brief, false)}
       ${data.script ? `
@@ -914,7 +914,7 @@ window.Page_social = (() => {
                   margin-bottom:var(--space-3);box-shadow:var(--shadow-xs)">
         <div class="sm-label">🎬 Video-Aufbau</div>
         <div style="font-size:var(--text-sm);white-space:pre-wrap;
-                    line-height:1.7">${UI.escape(data.script)}</div>
+                    line-height:1.7">${_esc(data.script)}</div>
       </div>` : ''}
       ${(data.image_prompt||data.canva_notes||unsplash) ? `
       <div style="background:var(--c-surface);border:1px solid var(--c-border);
@@ -926,12 +926,12 @@ window.Page_social = (() => {
             DALL-E / Midjourney:</div>
           <div style="font-size:11px;background:var(--c-surface-2);padding:10px;
                border-radius:var(--radius-md);font-family:monospace;word-break:break-word;
-               margin-bottom:var(--space-3);line-height:1.5">${UI.escape(data.image_prompt)}</div>
+               margin-bottom:var(--space-3);line-height:1.5">${_esc(data.image_prompt)}</div>
           ${_copyBtn(data.image_prompt)}` : ''}
         ${data.canva_notes ? `
           <div style="font-size:11px;color:var(--c-text-muted);margin:var(--space-3) 0 6px">Canva:</div>
           <div style="font-size:var(--text-sm);margin-bottom:var(--space-3);
-                      line-height:1.6">${UI.escape(data.canva_notes)}</div>` : ''}
+                      line-height:1.6">${_esc(data.canva_notes)}</div>` : ''}
         ${unsplash ? `<a href="${unsplash}" target="_blank" rel="noopener"
             style="font-size:var(--text-sm);color:var(--c-primary);display:inline-block">
             🔍 Kostenlose Fotos auf Unsplash →</a>` : ''}
@@ -945,14 +945,14 @@ window.Page_social = (() => {
                 margin-bottom:var(--space-3);box-shadow:var(--shadow-xs)">
       <div class="sm-label">${label}</div>
       <div style="font-size:var(--text-sm);white-space:pre-wrap;line-height:1.7;
-                  margin-bottom:${copyable?'var(--space-3)':'0'}">${UI.escape(text)}</div>
+                  margin-bottom:${copyable?'var(--space-3)':'0'}">${_esc(text)}</div>
       ${copyable ? _copyBtn(text) : ''}
     </div>`;
   }
 
   function _copyBtn(text) {
     return `<button class="btn btn-sm btn-secondary sm-copy"
-                    data-copy="${UI.escape(text)}"
+                    data-copy="${_esc(text)}"
                     style="font-size:11px;padding:5px 14px;min-height:32px;
                            border-radius:var(--radius-full)">
               📋 Kopieren</button>`;
@@ -1012,7 +1012,7 @@ window.Page_social = (() => {
           <div style="text-align:center;padding:8px;color:var(--c-success);
                       font-weight:600;font-size:var(--text-sm)">
             🎉 Super! Post als veröffentlicht markiert.
-            ${url ? `<br><a href="${UI.escape(url)}" target="_blank" rel="noopener"
+            ${url ? `<br><a href="${_esc(url)}" target="_blank" rel="noopener"
               style="font-size:11px;color:var(--c-primary)">Post ansehen →</a>` : ''}
           </div>`;
         // Stats aktualisieren
@@ -1073,7 +1073,7 @@ window.Page_social = (() => {
             <div style="font-size:11px;color:#000;line-height:1.4;
                         display:-webkit-box;-webkit-line-clamp:3;
                         -webkit-box-orient:vertical;overflow:hidden">
-              ${UI.escape((item.caption||'').substring(0,150))}${(item.caption||'').length>150?'…':''}</div>
+              ${_esc((item.caption||'').substring(0,150))}${(item.caption||'').length>150?'…':''}</div>
             ${item.hashtags ? `<div style="font-size:10px;color:#00376b;margin-top:4px;
                 word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;
                 -webkit-box-orient:vertical;overflow:hidden">
@@ -1146,7 +1146,7 @@ window.Page_social = (() => {
           : items.map(c => `
           <div class="card" style="padding:12px;margin-bottom:10px">
             <div style="display:flex;align-items:flex-start;gap:10px">
-              <div class="flex-1-min">
+              <div style="flex:1;min-width:0">
                 <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px;
                             align-items:center">
                   <span style="font-size:11px;padding:2px 6px;border-radius:4px;
@@ -1156,11 +1156,11 @@ window.Page_social = (() => {
                   ${c.ai_score ? `<span style="font-size:10px">${'⭐'.repeat(c.ai_score)}</span>` : ''}
                 </div>
                 <div style="font-weight:600;font-size:var(--text-sm);margin-bottom:3px;
-                            line-height:1.3">${UI.escape(c.topic)}</div>
+                            line-height:1.3">${_esc(c.topic)}</div>
                 ${c.hook ? `<div style="font-size:11px;color:var(--c-text-secondary);
-                              font-style:italic;margin-bottom:2px">🎣 ${UI.escape(c.hook)}</div>` : ''}
+                              font-style:italic;margin-bottom:2px">🎣 ${_esc(c.hook)}</div>` : ''}
                 ${c.post_url
-                  ? `<a href="${UI.escape(c.post_url)}" target="_blank" rel="noopener"
+                  ? `<a href="${_esc(c.post_url)}" target="_blank" rel="noopener"
                        style="font-size:10px;color:var(--c-primary);display:inline-flex;
                               align-items:center;gap:3px;margin-top:2px">
                        <svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#link-simple"></use></svg> Post ansehen</a>`
@@ -1195,10 +1195,10 @@ window.Page_social = (() => {
                  border-top:1px solid var(--c-border);padding-top:10px">
               ${c.coaching ? `<div style="background:var(--c-surface-2);border-radius:8px;
                   padding:10px;margin-bottom:10px;font-size:11px;line-height:1.5">
-                🌙 ${UI.escape(c.coaching)}</div>` : ''}
+                🌙 ${_esc(c.coaching)}</div>` : ''}
               ${c.caption ? `<div style="font-size:11px;color:var(--c-text-muted);margin-bottom:2px">Caption:</div>
                 <div style="font-size:var(--text-sm);white-space:pre-wrap;line-height:1.5;
-                            margin-bottom:8px">${UI.escape(c.caption)}</div>
+                            margin-bottom:8px">${_esc(c.caption)}</div>
                 ${_copyBtn(c.caption)}` : ''}
               ${c.hashtags ? `<div style="font-size:11px;color:var(--c-primary);margin-top:8px;
                   word-break:break-word">
@@ -1230,7 +1230,7 @@ window.Page_social = (() => {
                      value="${new Date().toISOString().slice(0,10)}">
             </div>
             <div class="form-group">
-              <label class="form-label">Post-Link <span class="text-muted">(optional)</span></label>
+              <label class="form-label">Post-Link <span style="color:var(--c-text-muted)">(optional)</span></label>
               <input class="form-control" type="url" id="qp-url-${id}"
                      placeholder="https://www.instagram.com/p/…">
             </div>`,
@@ -1341,7 +1341,7 @@ window.Page_social = (() => {
                        box-shadow:var(--shadow-md)">
           🔍 Luna, schau mal drüber!
         </button>
-        <div id="sm-eval-res" class="mt-4"></div>
+        <div id="sm-eval-res" style="margin-top:var(--space-4)"></div>
       </div>`;
 
     el.querySelectorAll('.sm-ep').forEach(b => b.addEventListener('click', () => {
@@ -1369,13 +1369,13 @@ window.Page_social = (() => {
           ${data.notes ? `<div style="background:var(--c-primary-subtle);
               border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-3);
               border-left:4px solid var(--c-primary);box-shadow:var(--shadow-xs)">
-            <div class="flex-gap-3">
+            <div style="display:flex;gap:var(--space-3)">
               <span style="font-size:1.3em;flex-shrink:0">🌙</span>
               <div>
                 <div style="font-size:11px;font-weight:700;color:var(--c-primary);margin-bottom:4px;
                             text-transform:uppercase;letter-spacing:.5px">
                   Lunas Feedback:</div>
-                <div style="font-size:var(--text-sm);line-height:1.6">${UI.escape(data.notes)}</div>
+                <div style="font-size:var(--text-sm);line-height:1.6">${_esc(data.notes)}</div>
               </div>
             </div>
           </div>` : ''}
@@ -1384,7 +1384,7 @@ window.Page_social = (() => {
         API.get('/social/stats').then(s => { _stats = s; });
       } catch(e) {
         clearInterval(interval);
-        res.innerHTML = `<div class="text-danger">😬 Fehler: ${UI.escape(e.message||String(e))}</div>`;
+        res.innerHTML = `<div style="color:var(--c-danger)">😬 Fehler: ${_esc(e.message||String(e))}</div>`;
       } finally {
         btn.disabled = false;
         btn.innerHTML = '🔍 Luna, schau mal drüber!';
@@ -1404,6 +1404,12 @@ window.Page_social = (() => {
     return picked;
   }
 
+  function _esc(s) {
+    if (!s) return '';
+    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;')
+      .replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+  }
+
   // CSS
   const style = document.createElement('style');
   style.textContent = `
diff --git a/backend/static/js/pages/trainingsplaene.js b/backend/static/js/pages/trainingsplaene.js
index 7752ea7..346a4ab 100644
--- a/backend/static/js/pages/trainingsplaene.js
+++ b/backend/static/js/pages/trainingsplaene.js
@@ -26,7 +26,16 @@ window.Page_trainingsplaene = (() => {
   // ----------------------------------------------------------
   // HELPER
   // ----------------------------------------------------------
-function _icon(name) {
+  function _esc(str) {
+    if (!str) return '';
+    return String(str)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+  }
+
+  function _icon(name) {
     return `<svg class="ph-icon" aria-hidden="true" style="width:1em;height:1em;vertical-align:-0.15em"><use href="/icons/phosphor.svg#${name}"></use></svg>`;
   }
 
@@ -48,9 +57,9 @@ function _icon(name) {
   // ----------------------------------------------------------
 
   function _renderTable(headers, rows) {
-    const ths = headers.map(h => `<th style="padding:6px 10px;background:var(--c-surface-2);font-weight:var(--weight-semibold);font-size:var(--text-sm);white-space:nowrap">${UI.escape(h)}</th>`).join('');
+    const ths = headers.map(h => `<th style="padding:6px 10px;background:var(--c-surface-2);font-weight:var(--weight-semibold);font-size:var(--text-sm);white-space:nowrap">${_esc(h)}</th>`).join('');
     const trs = rows.map(row => {
-      const tds = row.map((cell, i) => `<td style="padding:6px 10px;font-size:var(--text-sm);color:var(--c-text);border-top:1px solid var(--c-border);${i === 0 ? 'white-space:nowrap;font-weight:var(--weight-semibold)' : ''}">${UI.escape(cell)}</td>`).join('');
+      const tds = row.map((cell, i) => `<td style="padding:6px 10px;font-size:var(--text-sm);color:var(--c-text);border-top:1px solid var(--c-border);${i === 0 ? 'white-space:nowrap;font-weight:var(--weight-semibold)' : ''}">${_esc(cell)}</td>`).join('');
       return `<tr>${tds}</tr>`;
     }).join('');
     return `
@@ -71,20 +80,20 @@ function _icon(name) {
       if (checked) doneCount++;
       return `
         <label style="display:flex;align-items:flex-start;gap:var(--space-2);cursor:pointer;padding:var(--space-1) 0" class="tp-goal-label">
-          <input type="checkbox" data-lskey="${UI.escape(key)}" ${checked ? 'checked' : ''}
+          <input type="checkbox" data-lskey="${_esc(key)}" ${checked ? 'checked' : ''}
                  style="margin-top:2px;flex-shrink:0;accent-color:var(--c-primary);width:16px;height:16px">
-          <span style="font-size:var(--text-sm);color:var(--c-text);line-height:1.5">${UI.escape(goal)}</span>
+          <span style="font-size:var(--text-sm);color:var(--c-text);line-height:1.5">${_esc(goal)}</span>
         </label>`;
     }).join('');
 
     const progress = total > 0 ? Math.round((doneCount / total) * 100) : 0;
     return `
-      <div class="tp-goals" data-plan="${UI.escape(planId)}" data-total="${total}">
+      <div class="tp-goals" data-plan="${_esc(planId)}" data-total="${total}">
         <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-2)">
           <span style="font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--c-text-secondary)">
             ${_icon('check-circle')} Lernziele
           </span>
-          <span class="tp-progress-label text-xs-secondary">
+          <span class="tp-progress-label" style="font-size:var(--text-xs);color:var(--c-text-secondary)">
             ${doneCount} von ${total} erreicht
           </span>
         </div>
@@ -97,13 +106,13 @@ function _icon(name) {
 
   function _renderAccordionPhase(id, title, content) {
     return `
-      <div class="tp-acc" id="tp-acc-${UI.escape(id)}">
-        <button class="tp-acc-head" data-acc="${UI.escape(id)}"
+      <div class="tp-acc" id="tp-acc-${_esc(id)}">
+        <button class="tp-acc-head" data-acc="${_esc(id)}"
                 style="width:100%;display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) var(--space-4);background:none;border:none;border-top:1px solid var(--c-border);cursor:pointer;text-align:left">
           <span style="font-weight:var(--weight-semibold);color:var(--c-text)">${title}</span>
           <span class="tp-acc-arrow">${_icon('caret-down')}</span>
         </button>
-        <div class="tp-acc-body" id="tp-acc-body-${UI.escape(id)}" hidden
+        <div class="tp-acc-body" id="tp-acc-body-${_esc(id)}" hidden
              style="padding:var(--space-3) var(--space-4) var(--space-4)">
           ${content}
         </div>
@@ -113,7 +122,7 @@ function _icon(name) {
   function _renderHintBox(text) {
     return `
       <div style="background:var(--c-surface-2);border-left:3px solid var(--c-primary);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);margin:var(--space-3) 0;font-size:var(--text-sm);color:var(--c-text);line-height:1.6">
-        ${_icon('info')} ${UI.escape(text)}
+        ${_icon('info')} ${_esc(text)}
       </div>`;
   }
 
@@ -132,7 +141,7 @@ function _icon(name) {
                      justify-content:center;gap:2px;white-space:normal;text-align:center;line-height:1.2">
         <svg class="ph-icon" aria-hidden="true" style="width:22px;height:22px"><use href="/icons/phosphor.svg#${p.icon}"></use></svg>
         <span style="font-size:var(--text-sm);font-weight:600">${p.label}</span>
-        <span style="font-size:var(--text-xs);opacity:0.8">${UI.escape(p.sub)}</span>
+        <span style="font-size:var(--text-xs);opacity:0.8">${_esc(p.sub)}</span>
       </button>`).join('');
     return `<div style="display:flex;gap:var(--space-2);margin-bottom:var(--space-4);flex-wrap:wrap">${btns}</div>`;
   }
@@ -346,7 +355,7 @@ function _icon(name) {
   // ----------------------------------------------------------
   function _renderErwachsenTabs() {
     return `
-      <div class="by-tabs mb-4">
+      <div class="by-tabs" style="margin-bottom:var(--space-4)">
         <button class="by-tab${_activeAdultTab === 'grundkurs'  ? ' active' : ''}" data-tab="grundkurs">Grundkurs</button>
         <button class="by-tab${_activeAdultTab === 'aufbaukurs' ? ' active' : ''}" data-tab="aufbaukurs">Aufbaukurs</button>
         <button class="by-tab${_activeAdultTab === 'uebersicht' ? ' active' : ''}" data-tab="uebersicht">Übersicht</button>
@@ -755,7 +764,7 @@ function _icon(name) {
       <div style="flex:1;min-width:220px">
         <div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
                     color:var(--c-text);margin-bottom:var(--space-2)">
-          ${UI.escape(MONTHS[month - 1])} ${year}
+          ${_esc(MONTHS[month - 1])} ${year}
         </div>
         <div style="display:grid;grid-template-columns:repeat(7,1fr);gap:3px">
           ${wdayHeader}
@@ -784,7 +793,7 @@ function _icon(name) {
                     display:flex;align-items:center;justify-content:space-between;flex-shrink:0">
           <div>
             <div style="font-weight:var(--weight-semibold);font-size:var(--text-base)"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#note-pencil"></use></svg> Notiz</div>
-            <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:2px">${UI.escape(parentLabel)}</div>
+            <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:2px">${_esc(parentLabel)}</div>
           </div>
           <button id="by-note-close" style="background:none;border:none;cursor:pointer;font-size:1.4rem;color:var(--c-text-muted);padding:4px 8px" aria-label="Schließen">×</button>
         </div>
diff --git a/backend/static/js/pages/uebungen.js b/backend/static/js/pages/uebungen.js
index 56dcd02..9410e0a 100644
--- a/backend/static/js/pages/uebungen.js
+++ b/backend/static/js/pages/uebungen.js
@@ -633,11 +633,11 @@ window.Page_uebungen = (() => {
                        border-radius:var(--radius-full,999px);
                        background:var(--c-primary-subtle);color:var(--c-primary);
                        font-size:var(--text-xs);font-weight:var(--weight-semibold)">
-            ${b.icon || '🏅'} ${UI.escape(b.name || b.badge_id)}
+            ${b.icon || '🏅'} ${_esc(b.name || b.badge_id)}
           </span>
         `).join('');
         const more = rest > 0
-          ? `<span class="text-xs-secondary">+${rest} weitere</span>`
+          ? `<span style="font-size:var(--text-xs);color:var(--c-text-secondary)">+${rest} weitere</span>`
           : '';
         badgesHtml = `<div style="display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2)">${pills}${more}</div>`;
       }
@@ -667,7 +667,7 @@ window.Page_uebungen = (() => {
     el.innerHTML = `
       <div style="background:var(--c-surface-2);border:1px solid var(--c-border);
                   border-radius:var(--radius-md);padding:var(--space-3) var(--space-4)">
-        <div class="text-xs-secondary">Lade Trainingsplan…</div>
+        <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">Lade Trainingsplan…</div>
       </div>`;
 
     const data = await API.training.getRecommendations(dogId).catch(() => null);
@@ -715,16 +715,16 @@ window.Page_uebungen = (() => {
                          text-transform:uppercase;letter-spacing:.04em">${cfg.label}</span>
           </div>
           <div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
-                      color:var(--c-text);line-height:1.3">${UI.escape(r.exercise_name)}</div>
-          <div style="font-size:var(--text-xs);color:var(--c-text-secondary);line-height:1.4">${UI.escape(r.reason)}</div>
+                      color:var(--c-text);line-height:1.3">${_esc(r.exercise_name)}</div>
+          <div style="font-size:var(--text-xs);color:var(--c-text-secondary);line-height:1.4">${_esc(r.reason)}</div>
           <div style="display:flex;flex-direction:column;gap:var(--space-2);margin-top:auto;padding-top:var(--space-1)">
             <div>
-              <span class="text-xs-secondary">${r.suggested_reps}× empfohlen</span>
+              <span style="font-size:var(--text-xs);color:var(--c-text-secondary)">${r.suggested_reps}× empfohlen</span>
               <span style="font-size:var(--text-xs);font-weight:700;color:${trendColor};margin-left:4px">${trend}</span>
               ${prognose}
             </div>
             <button class="ueb-trainer-btn btn btn-primary"
-                    data-tab="${UI.escape(r.tab)}" data-name="${UI.escape(r.exercise_name)}" data-reps="${r.suggested_reps}"
+                    data-tab="${_esc(r.tab)}" data-name="${_esc(r.exercise_name)}" data-reps="${r.suggested_reps}"
                     style="font-size:var(--text-xs);padding:4px 10px;width:100%">
               Üben
             </button>
@@ -742,7 +742,7 @@ window.Page_uebungen = (() => {
         </span>
         <span id="ueb-help-anchor" style="margin-left:auto"></span>
       </div>
-      <div class="flex-col-gap-2">
+      <div style="display:flex;flex-direction:column;gap:var(--space-2)">
         ${cards.join('')}
       </div>`;
     if (_helpHandle) {
@@ -817,25 +817,25 @@ window.Page_uebungen = (() => {
           ${ALL.map(g => `
             <div style="font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--c-text-secondary);
                         text-transform:uppercase;letter-spacing:.05em;padding:var(--space-3) 0 var(--space-1)">
-              ${UI.escape(g.group)}
+              ${_esc(g.group)}
             </div>
             ${g.items.map(u => {
               const key = _progressKey(g.tab, u.name);
               const cur = _getStatus(g.tab, u.name);
               return `
                 <div style="display:flex;align-items:center;gap:var(--space-2);
-                            padding:var(--space-2) 0;border-bottom:1px solid var(--c-border)" data-key="${UI.escape(key)}">
+                            padding:var(--space-2) 0;border-bottom:1px solid var(--c-border)" data-key="${_esc(key)}">
                   <span style="flex:1;font-size:var(--text-sm);color:var(--c-text);min-width:0;
-                               overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${UI.escape(u.name)}</span>
+                               overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${_esc(u.name)}</span>
                   <div style="display:flex;gap:3px;flex-shrink:0">
                     ${STATUS_QUICK.map(s => `
-                      <button class="qs-btn" data-key="${UI.escape(key)}" data-val="${s.id === null ? '' : UI.escape(s.id)}"
+                      <button class="qs-btn" data-key="${_esc(key)}" data-val="${s.id === null ? '' : _esc(s.id)}"
                               style="font-size:9px;font-weight:700;padding:3px 6px;border-radius:999px;cursor:pointer;
                                      white-space:nowrap;transition:all .15s;
                                      background:${cur === s.id ? s.bg : 'var(--c-surface-2)'};
                                      color:${cur === s.id ? s.color : 'var(--c-text-secondary)'};
                                      border:1px solid ${cur === s.id ? s.color + '66' : 'var(--c-border)'}">
-                        ${UI.escape(s.label)}
+                        ${_esc(s.label)}
                       </button>`).join('')}
                   </div>
                 </div>`;
@@ -899,7 +899,7 @@ window.Page_uebungen = (() => {
         ${TABS.map(t => `
           <button class="by-tab${t.id === _activeTab ? ' active' : ''}"
                   data-tab="${t.id}">
-            ${UI.escape(t.label)}
+            ${_esc(t.label)}
           </button>
         `).join('')}
       </div>
@@ -922,18 +922,18 @@ window.Page_uebungen = (() => {
       return `
         <div style="background:${c.bg};border:1px solid ${c.border};border-radius:var(--radius-md);
                     padding:var(--space-3) var(--space-4);display:flex;gap:var(--space-3);align-items:flex-start;cursor:pointer"
-             data-action-tab="${UI.escape(s.action_tab || '')}"
-             data-action-name="${UI.escape(s.action_name || '')}"
+             data-action-tab="${_esc(s.action_tab || '')}"
+             data-action-name="${_esc(s.action_name || '')}"
              class="ueb-suggestion-card">
           <svg class="ph-icon" style="width:20px;height:20px;flex-shrink:0;color:${c.text};margin-top:2px" aria-hidden="true">
-            <use href="/icons/phosphor.svg#${UI.escape(s.icon)}"></use>
+            <use href="/icons/phosphor.svg#${_esc(s.icon)}"></use>
           </svg>
           <div style="min-width:0">
             <div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);color:${c.text};margin-bottom:2px">
-              ${UI.escape(s.title)}
+              ${_esc(s.title)}
             </div>
             <div style="font-size:var(--text-xs);color:var(--c-text-secondary);line-height:1.5">
-              ${UI.escape(s.text)}
+              ${_esc(s.text)}
             </div>
           </div>
         </div>
@@ -1020,7 +1020,7 @@ window.Page_uebungen = (() => {
           el.innerHTML = `<div style="padding:var(--space-6);text-align:center;color:var(--c-text-muted)">
             <svg class="ph-icon" style="width:36px;height:36px;color:var(--c-primary);margin-bottom:var(--space-3)" aria-hidden="true"><use href="/icons/phosphor.svg#star"></use></svg>
             <div style="font-weight:600;color:var(--c-text);margin-bottom:var(--space-2)">Ban Yaro Pro</div>
-            <div class="text-sm">Der KI-Trainer ist ein Pro-Feature.</div>
+            <div style="font-size:var(--text-sm)">Der KI-Trainer ist ein Pro-Feature.</div>
           </div>`;
         } else {
           el.innerHTML = _renderKiTrainer();
@@ -1074,7 +1074,7 @@ window.Page_uebungen = (() => {
       );
     if (!allExercises.length) {
       return `<div style="padding:var(--space-8);text-align:center;color:var(--c-text-muted)">
-        ${UI.icon('magnifying-glass')} Keine Übungen gefunden für „${UI.escape(q)}"
+        ${UI.icon('magnifying-glass')} Keine Übungen gefunden für „${_esc(q)}"
       </div>`;
     }
     return `<div style="padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-4)">
@@ -1082,7 +1082,7 @@ window.Page_uebungen = (() => {
         <div>
           <div style="font-size:var(--text-xs);font-weight:var(--weight-semibold);
                       color:var(--c-text-muted);text-transform:uppercase;letter-spacing:.05em;
-                      margin-bottom:var(--space-1);padding:0 var(--space-2)">${UI.escape(u.kategorie)}</div>
+                      margin-bottom:var(--space-1);padding:0 var(--space-2)">${_esc(u.kategorie)}</div>
           ${_renderCard(u, i)}
         </div>`).join('')}
     </div>`;
@@ -1114,25 +1114,25 @@ window.Page_uebungen = (() => {
     const hasBody = (u.schritte?.length > 0) || (u.fehler?.length > 0) || !!u.steigerung || !!u.tipp;
 
     return `
-      <div class="card" style="padding:0;overflow:hidden" data-exercise-name="${UI.escape(u.name)}" data-exercise-id="${UI.escape(_progressKey(_activeTab, u.name))}">
+      <div class="card" style="padding:0;overflow:hidden" data-exercise-name="${_esc(u.name)}" data-exercise-id="${_esc(_progressKey(_activeTab, u.name))}">
         <!-- Header -->
         <div style="padding:var(--space-4) var(--space-4) var(--space-3)">
           <!-- Zeile 1: Name + Schwierigkeits-Badge -->
           <div style="display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-2)">
             <span style="font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--c-text);line-height:1.3">
-              ${UI.escape(u.name)}
+              ${_esc(u.name)}
             </span>
             <span style="font-size:var(--text-xs);font-weight:var(--weight-semibold);white-space:nowrap;
                          padding:2px var(--space-2);border-radius:var(--radius-sm);flex-shrink:0;
                          background:${diff.color}22;color:${diff.color}">
-              ${UI.escape(diff.label)}
+              ${_esc(diff.label)}
             </span>
           </div>
           <!-- Zeile 2: Aktions-Buttons -->
           <div style="display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2);flex-wrap:wrap">
             <button class="ueb-log-btn"
-                    data-tab="${UI.escape(_activeTab)}"
-                    data-name="${UI.escape(u.name)}"
+                    data-tab="${_esc(_activeTab)}"
+                    data-name="${_esc(u.name)}"
                     title="Trainingseinheit loggen"
                     style="background:var(--c-primary-subtle);border:1px solid var(--c-primary-light);
                            color:var(--c-primary);cursor:pointer;padding:3px 9px;
@@ -1146,8 +1146,8 @@ window.Page_uebungen = (() => {
             </button>
             ${_sessionStatsChip(_activeTab, u.name)}
             <button class="ueb-notiz-btn"
-                    data-tab="${UI.escape(_activeTab)}"
-                    data-name="${UI.escape(u.name)}"
+                    data-tab="${_esc(_activeTab)}"
+                    data-name="${_esc(u.name)}"
                     title="Notiz hinzufügen"
                     style="background:none;border:1px solid var(--c-border);cursor:pointer;
                            padding:3px 7px;border-radius:var(--radius-sm);
@@ -1159,9 +1159,9 @@ window.Page_uebungen = (() => {
               Notiz
             </button>
             <button class="ueb-status-btn"
-                    data-tab="${UI.escape(_activeTab)}"
-                    data-name="${UI.escape(u.name)}"
-                    title="${UI.escape(sm.label)}"
+                    data-tab="${_esc(_activeTab)}"
+                    data-name="${_esc(u.name)}"
+                    title="${_esc(sm.label)}"
                     style="background:none;border:none;cursor:pointer;padding:2px;
                            display:flex;align-items:center;gap:4px;
                            font-size:var(--text-xs);color:${sm.color};
@@ -1170,28 +1170,28 @@ window.Page_uebungen = (() => {
                 <use href="/icons/phosphor.svg#${sm.icon}"></use>
               </svg>
               <span style="font-size:10px;font-weight:var(--weight-semibold);white-space:nowrap">
-                ${UI.escape(sm.label)}
+                ${_esc(sm.label)}
               </span>
             </button>
           </div>
           <!-- Meta -->
           <div style="display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:${u.beschreibung ? 'var(--space-3)' : '0'}">
-            <span class="text-xs-secondary">
+            <span style="font-size:var(--text-xs);color:var(--c-text-secondary)">
               <svg class="ph-icon" style="width:12px;height:12px" aria-hidden="true"><use href="/icons/phosphor.svg#clock"></use></svg>
-              ${UI.escape(u.dauer)}
+              ${_esc(u.dauer)}
             </span>
-            <span class="text-xs-secondary">
+            <span style="font-size:var(--text-xs);color:var(--c-text-secondary)">
               <svg class="ph-icon" style="width:12px;height:12px" aria-hidden="true"><use href="/icons/phosphor.svg#dog"></use></svg>
-              ${UI.escape(u.alter)}
+              ${_esc(u.alter)}
             </span>
-            <span class="text-xs-secondary">
+            <span style="font-size:var(--text-xs);color:var(--c-text-secondary)">
               <svg class="ph-icon" style="width:12px;height:12px" aria-hidden="true"><use href="/icons/phosphor.svg#package"></use></svg>
-              ${UI.escape(u.material)}
+              ${_esc(u.material)}
             </span>
           </div>
           ${u.beschreibung ? `
             <p style="font-size:var(--text-sm);color:var(--c-text-secondary);line-height:1.5;margin:0">
-              ${UI.escape(u.beschreibung)}
+              ${_esc(u.beschreibung)}
             </p>
           ` : ''}
           ${u.hinweis ? `
@@ -1200,7 +1200,7 @@ window.Page_uebungen = (() => {
                         font-size:var(--text-xs);color:var(--c-text);line-height:1.4;
                         display:flex;align-items:flex-start;gap:var(--space-2)">
               <svg class="ph-icon" style="width:13px;height:13px;flex-shrink:0;margin-top:1px;color:var(--c-warning)" aria-hidden="true"><use href="/icons/phosphor.svg#warning"></use></svg>
-              <span>${UI.escape(u.hinweis)}</span>
+              <span>${_esc(u.hinweis)}</span>
             </div>
           ` : ''}
         </div>
@@ -1225,7 +1225,7 @@ window.Page_uebungen = (() => {
             </p>
             <ol style="margin:0 0 var(--space-4);padding-left:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2)">
               ${u.schritte.map(s => `
-                <li style="font-size:var(--text-sm);color:var(--c-text);line-height:1.5">${UI.escape(s)}</li>
+                <li style="font-size:var(--text-sm);color:var(--c-text);line-height:1.5">${_esc(s)}</li>
               `).join('')}
             </ol>
           ` : ''}
@@ -1237,7 +1237,7 @@ window.Page_uebungen = (() => {
             </p>
             <ul style="margin:0 0 var(--space-4);padding-left:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2)">
               ${u.fehler.map(f => `
-                <li style="font-size:var(--text-sm);color:var(--c-text-secondary);line-height:1.5">${UI.escape(f)}</li>
+                <li style="font-size:var(--text-sm);color:var(--c-text-secondary);line-height:1.5">${_esc(f)}</li>
               `).join('')}
             </ul>
           ` : ''}
@@ -1247,14 +1247,14 @@ window.Page_uebungen = (() => {
               <svg class="ph-icon" style="width:14px;height:14px;color:var(--c-primary)" aria-hidden="true">
                 <use href="/icons/phosphor.svg#arrow-right"></use>
               </svg>
-              <strong>Steigerung:</strong> ${UI.escape(u.steigerung)}
+              <strong>Steigerung:</strong> ${_esc(u.steigerung)}
             </div>
           ` : ''}
           ${u.tipp ? `
             <div style="margin-top:var(--space-3);padding:var(--space-2) var(--space-3);
                         background:var(--c-primary-subtle);border-radius:var(--radius-sm);
                         font-size:var(--text-xs);color:var(--c-text-secondary)">
-              💡 ${UI.escape(u.tipp)}
+              💡 ${_esc(u.tipp)}
             </div>` : ''}
         </div>
         ` : ''}
@@ -1281,7 +1281,7 @@ window.Page_uebungen = (() => {
           <svg class="ph-icon" style="width:18px;height:18px;flex-shrink:0" aria-hidden="true">
             <use href="/icons/phosphor.svg#${sm.icon}"></use>
           </svg>
-          ${next ? `<span style="font-size:10px;font-weight:var(--weight-semibold);white-space:nowrap">${UI.escape(sm.label)}</span>` : ''}
+          ${next ? `<span style="font-size:10px;font-weight:var(--weight-semibold);white-space:nowrap">${_esc(sm.label)}</span>` : ''}
         `;
       });
     });
@@ -1344,7 +1344,7 @@ window.Page_uebungen = (() => {
 
         <h3 style="font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--c-text);
                    margin:0 0 var(--space-4);text-align:center">
-          Notiz: ${UI.escape(exerciseName)}
+          Notiz: ${_esc(exerciseName)}
         </h3>
 
         <div style="display:flex;flex-direction:column;gap:var(--space-4)">
@@ -1359,14 +1359,14 @@ window.Page_uebungen = (() => {
                              border-radius:var(--radius-md);font-size:var(--text-sm);
                              font-family:var(--font-sans);background:var(--c-surface);
                              color:var(--c-text);resize:vertical;outline:none;
-                             line-height:1.5">${UI.escape(noteText)}</textarea>
+                             line-height:1.5">${_esc(noteText)}</textarea>
           </div>
 
           <!-- Erfolgsquote -->
           <div>
             <label style="display:block;font-size:var(--text-sm);font-weight:var(--weight-semibold);
                           color:var(--c-text);margin-bottom:var(--space-2)">Bewertung (optional)</label>
-            <div class="flex-gap-2">
+            <div style="display:flex;gap:var(--space-2)">
               ${[1,2,3,4,5].map(n => `
                 <button type="button" class="ueb-notiz-pfote" data-val="${n}"
                         style="font-size:1.4rem;border:1.5px solid var(--c-border);
@@ -1382,7 +1382,7 @@ window.Page_uebungen = (() => {
           <div>
             <label style="display:block;font-size:var(--text-sm);font-weight:var(--weight-semibold);
                           color:var(--c-text);margin-bottom:var(--space-2)">Umgebung (optional)</label>
-            <div class="flex-gap-2">
+            <div style="display:flex;gap:var(--space-2)">
               ${[['🏠','zuhause'],['🌿','natur'],['🌆','stadt']].map(([emoji, val]) => `
                 <button type="button" class="ueb-notiz-umgebung" data-val="${val}"
                         style="font-size:1.2rem;border:1.5px solid var(--c-border);
@@ -1398,7 +1398,7 @@ window.Page_uebungen = (() => {
           <div>
             <label style="display:block;font-size:var(--text-sm);font-weight:var(--weight-semibold);
                           color:var(--c-text);margin-bottom:var(--space-2)">Stimmung des Hundes (optional)</label>
-            <div class="flex-gap-2">
+            <div style="display:flex;gap:var(--space-2)">
               ${[['😊','super'],['😐','ok'],['😔','mude']].map(([emoji, val]) => `
                 <button type="button" class="ueb-notiz-stimmung" data-val="${val}"
                         style="font-size:1.2rem;border:1.5px solid var(--c-border);
@@ -1569,7 +1569,7 @@ window.Page_uebungen = (() => {
 
         <h3 style="font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--c-text);
                    margin:0 0 var(--space-4);text-align:center">
-          Einheit loggen: ${UI.escape(exerciseName)}
+          Einheit loggen: ${_esc(exerciseName)}
         </h3>
 
         <form id="${formId}" style="display:flex;flex-direction:column;gap:var(--space-4)">
@@ -1620,7 +1620,7 @@ window.Page_uebungen = (() => {
                                border-radius:var(--radius-md);border:1.5px solid var(--c-border);
                                background:var(--c-surface-2);cursor:pointer;transition:all 0.15s">
                   ${emoji}
-                  <span style="font-size:9px;color:var(--c-text-secondary)">${UI.escape(val)}</span>
+                  <span style="font-size:9px;color:var(--c-text-secondary)">${_esc(val)}</span>
                 </button>
               `).join('')}
             </div>
@@ -1829,7 +1829,7 @@ window.Page_uebungen = (() => {
             <div style="font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--c-text)">
               KI-Trainer
             </div>
-            <div class="text-xs-secondary">
+            <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">
               Personalisiertes Feedback basierend auf deinen Trainingseinheiten
             </div>
           </div>
@@ -1861,7 +1861,7 @@ window.Page_uebungen = (() => {
                  style="font-size:var(--text-sm);color:var(--c-text);line-height:1.7;white-space:pre-wrap"></div>
           </div>
           <div style="display:flex;align-items:center;justify-content:space-between;margin-top:var(--space-3)">
-            <span id="ki-feedback-meta" class="text-xs-muted"></span>
+            <span id="ki-feedback-meta" style="font-size:var(--text-xs);color:var(--c-text-muted)"></span>
             <button id="ki-regenerate"
                     style="font-size:var(--text-xs);padding:var(--space-1) var(--space-3);
                            border-radius:var(--radius-md);border:1px solid var(--c-border);
@@ -1986,12 +1986,12 @@ window.Page_uebungen = (() => {
     const dogId = _dogId();
     if (!dogId) {
       return `<div style="padding:var(--space-8);text-align:center;color:var(--c-text-muted)">
-        <p class="text-sm">Wähle einen Hund aus um das Protokoll zu sehen.</p>
+        <p style="font-size:var(--text-sm)">Wähle einen Hund aus um das Protokoll zu sehen.</p>
       </div>`;
     }
     return `<div id="verlauf-wrap" style="padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)">
       ${_verlaufToggleHtml()}
-      <div id="verlauf-list" class="flex-col-gap-2">
+      <div id="verlauf-list" style="display:flex;flex-direction:column;gap:var(--space-2)">
         <div style="text-align:center;padding:var(--space-6);color:var(--c-text-muted)">
           <svg class="ph-icon" style="width:24px;height:24px;animation:spin 1s linear infinite" aria-hidden="true">
             <use href="/icons/phosphor.svg#spinner-gap"></use>
@@ -2008,7 +2008,7 @@ window.Page_uebungen = (() => {
     const active  = `background:var(--c-primary);color:#fff;border-color:var(--c-primary)`;
     const inactive = `background:var(--c-surface-2);color:var(--c-text-secondary)`;
     return `
-      <div class="flex-gap-2">
+      <div style="display:flex;gap:var(--space-2)">
         <button id="verlauf-btn-datum" style="${btnBase};${_verlaufView==='datum'?active:inactive}">
           Nach Datum
         </button>
@@ -2103,17 +2103,17 @@ window.Page_uebungen = (() => {
       : '';
     const noteHtml = s.notiz
       ? `<div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:3px;
-                     line-height:1.4;font-style:italic">${UI.escape(s.notiz)}</div>`
+                     line-height:1.4;font-style:italic">${_esc(s.notiz)}</div>`
       : '';
     return `
       <div style="display:flex;align-items:flex-start;gap:var(--space-3);
                   padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
                   background:var(--c-surface-2)">
         <span style="font-size:1.2rem;flex-shrink:0;margin-top:1px">${erfolg}</span>
-        <div class="flex-1-min">
+        <div style="flex:1;min-width:0">
           <div style="display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap">
             <span style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
-                         color:var(--c-text)">${UI.escape(s.exercise_name)}</span>
+                         color:var(--c-text)">${_esc(s.exercise_name)}</span>
             ${topBadge}
           </div>
           <div style="font-size:var(--text-xs);color:var(--c-text-secondary);margin-top:1px">
@@ -2146,7 +2146,7 @@ window.Page_uebungen = (() => {
           <div style="font-size:var(--text-xs);font-weight:var(--weight-semibold);
                       color:var(--c-text-secondary);text-transform:uppercase;
                       letter-spacing:.05em;padding:var(--space-2) 0 var(--space-1)">
-            ${UI.escape(label)}
+            ${_esc(label)}
           </div>
           <div style="display:flex;flex-direction:column;gap:var(--space-1)">
             ${sessions.map(_sessionRow).join('')}
@@ -2216,10 +2216,10 @@ window.Page_uebungen = (() => {
           <div style="display:flex;align-items:center;gap:var(--space-2);
                       padding:4px var(--space-2);border-radius:var(--radius-sm);
                       font-size:var(--text-xs);color:var(--c-text-secondary)">
-            <span style="flex-shrink:0;min-width:52px">${UI.escape(dateLabel)}</span>
+            <span style="flex-shrink:0;min-width:52px">${_esc(dateLabel)}</span>
             <span style="flex-shrink:0">${erfolg}</span>
             <span style="flex-shrink:0">${s.erfolgsquote}%${top}</span>
-            <span class="flex-1-min">${s.wiederholungen}× Wdh.${stimmung ? ' ' + stimmung : ''}</span>
+            <span style="flex:1;min-width:0">${s.wiederholungen}× Wdh.${stimmung ? ' ' + stimmung : ''}</span>
           </div>`;
       }).join('');
 
@@ -2240,16 +2240,16 @@ window.Page_uebungen = (() => {
               </span>
             </div>
             <!-- Info -->
-            <div class="flex-1-min">
+            <div style="flex:1;min-width:0">
               <div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
                           color:var(--c-text);line-height:1.3;
                           white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
-                ${UI.escape(ex.name)}
+                ${_esc(ex.name)}
               </div>
               <div style="font-size:var(--text-xs);color:var(--c-text-secondary);margin-top:2px">
                 ${ex.sessions.length} Einheit${ex.sessions.length !== 1 ? 'en' : ''}
                 ${ex.topCount ? ' · ' + ex.topCount + '× TOP' : ''}
-                · ${UI.escape(lastLabel)}
+                · ${_esc(lastLabel)}
               </div>
             </div>
             <!-- Chevron -->
@@ -2296,7 +2296,7 @@ window.Page_uebungen = (() => {
       <div style="padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-4)">
 
         <!-- Markerwort -->
-        <div class="card p-4">
+        <div class="card" style="padding:var(--space-4)">
           <h3 style="font-size:var(--text-base);font-weight:var(--weight-semibold);
                      color:var(--c-text);margin:0 0 var(--space-3);display:flex;align-items:center;gap:var(--space-2)">
             <svg class="ph-icon" style="width:16px;height:16px;color:var(--c-primary);flex-shrink:0" aria-hidden="true">
@@ -2350,8 +2350,8 @@ window.Page_uebungen = (() => {
                   ['Ablenkungstraining', 'Wieder häufiger (höhere Anforderung)'],
                 ].map(([p, b], i) => `
                   <tr style="${i % 2 === 1 ? 'background:var(--c-surface-2)' : ''}">
-                    <td style="padding:var(--space-2) var(--space-3);color:var(--c-text);border-bottom:1px solid var(--c-border)">${UI.escape(p)}</td>
-                    <td style="padding:var(--space-2) var(--space-3);color:var(--c-text-secondary);border-bottom:1px solid var(--c-border)">${UI.escape(b)}</td>
+                    <td style="padding:var(--space-2) var(--space-3);color:var(--c-text);border-bottom:1px solid var(--c-border)">${_esc(p)}</td>
+                    <td style="padding:var(--space-2) var(--space-3);color:var(--c-text-secondary);border-bottom:1px solid var(--c-border)">${_esc(b)}</td>
                   </tr>
                 `).join('')}
               </tbody>
@@ -2391,9 +2391,9 @@ window.Page_uebungen = (() => {
                 ].map(([s, b, c], i) => `
                   <tr style="${i % 2 === 1 ? 'background:var(--c-surface-2)' : ''}">
                     <td style="padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--c-border)">
-                      <span style="font-weight:var(--weight-semibold);color:${c}">${UI.escape(s)}</span>
+                      <span style="font-weight:var(--weight-semibold);color:${c}">${_esc(s)}</span>
                     </td>
-                    <td style="padding:var(--space-2) var(--space-3);color:var(--c-text-secondary);border-bottom:1px solid var(--c-border)">${UI.escape(b)}</td>
+                    <td style="padding:var(--space-2) var(--space-3);color:var(--c-text-secondary);border-bottom:1px solid var(--c-border)">${_esc(b)}</td>
                   </tr>
                 `).join('')}
               </tbody>
@@ -2425,7 +2425,7 @@ window.Page_uebungen = (() => {
                      color:${ok ? 'var(--c-success)' : 'var(--c-danger)'}" aria-hidden="true">
                   <use href="/icons/phosphor.svg#${ok ? 'check-circle' : 'x-circle'}"></use>
                 </svg>
-                <span style="font-size:var(--text-sm);color:var(--c-text);line-height:1.5">${UI.escape(text)}</span>
+                <span style="font-size:var(--text-sm);color:var(--c-text);line-height:1.5">${_esc(text)}</span>
               </li>
             `).join('')}
           </ul>
@@ -2438,7 +2438,16 @@ window.Page_uebungen = (() => {
   // ----------------------------------------------------------
   // 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, onDogChange };
diff --git a/backend/static/js/pages/walks.js b/backend/static/js/pages/walks.js
index e56f569..fbf38f2 100644
--- a/backend/static/js/pages/walks.js
+++ b/backend/static/js/pages/walks.js
@@ -150,14 +150,14 @@ window.Page_walks = (() => {
         </div>
 
         <!-- Tab: Challenge -->
-        <div id="walks-tab-challenge" class="walks-tab-panel hidden">
+        <div id="walks-tab-challenge" class="walks-tab-panel" style="display:none">
           <div id="challenge-content">
             <p style="color:var(--c-text-secondary);text-align:center;padding:var(--space-8)">Lädt…</p>
           </div>
         </div>
 
         <!-- Tab: Stamm-Gassis -->
-        <div id="walks-tab-stamm" class="walks-tab-panel hidden">
+        <div id="walks-tab-stamm" class="walks-tab-panel" style="display:none">
           <div class="by-toolbar">
             <span style="font-weight:600;color:var(--c-text)">${UI.icon('clock')} Stamm-Gassi-Zeiten</span>
             <button class="btn btn-primary btn-sm" id="gassi-zeit-add-btn">${UI.icon('plus')} Meine Zeit eintragen</button>
@@ -222,7 +222,8 @@ window.Page_walks = (() => {
     document.getElementById('walks-map-view').style.display  = view === 'karte' ? '' : 'none';
 
     if (view === 'karte') {
-      _initMap().then(() => {
+      UI.loadLeaflet().then(() => {
+        _initMap();
         setTimeout(() => _map?.invalidateSize(), 150);
         setTimeout(() => _map?.invalidateSize(), 400);
       });
@@ -244,7 +245,8 @@ window.Page_walks = (() => {
       _renderList();
       _renderMarkers();
       if (window.innerWidth >= 1024) {
-        _initMap().then(() => {
+        UI.loadLeaflet().then(() => {
+          _initMap();
           setTimeout(() => _map?.invalidateSize(), 150);
           setTimeout(() => _map?.invalidateSize(), 400);
         });
@@ -277,8 +279,8 @@ window.Page_walks = (() => {
       el.innerHTML = `
         <div style="text-align:center;padding:var(--space-10) var(--space-4)">
           <div style="font-size:3rem;margin-bottom:var(--space-3)">${UI.icon('dog')}</div>
-          <p class="text-secondary">Noch keine Treffen in deiner Nähe.</p>
-          <button class="btn btn-primary mt-4" id="walks-first-btn">
+          <p style="color:var(--c-text-secondary)">Noch keine Treffen in deiner Nähe.</p>
+          <button class="btn btn-primary" style="margin-top:var(--space-4)" id="walks-first-btn">
             Erstes Treffen planen
           </button>
         </div>`;
@@ -361,11 +363,13 @@ window.Page_walks = (() => {
   // ----------------------------------------------------------
   // Leaflet + Karte
   // ----------------------------------------------------------
-  async function _initMap() {
+  function _initMap() {
     const el = document.getElementById('walks-map');
-    if (!el || _map) return;
+    if (!el || !window.L || _map) return;
     const center = _userPos ? [_userPos.lat, _userPos.lon] : [51.1657, 10.4515];
-    _map = await UI.map.create('walks-map', { center, zoom: _userPos ? 12 : 6 });
+    _map = L.map('walks-map', { zoomControl: true, attributionControl: false })
+             .setView(center, _userPos ? 12 : 6);
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(_map);
     _renderMarkers();
   }
 
@@ -459,13 +463,13 @@ window.Page_walks = (() => {
                  </div>`;
             return `<div style="display:flex;align-items:center;gap:4px">
               ${av}
-              <span class="text-xs-secondary">${UI.escape(d.name)}${d.rasse ? ` · ${UI.escape(d.rasse)}` : ''}</span>
+              <span style="font-size:var(--text-xs);color:var(--c-text-secondary)">${UI.escape(d.name)}${d.rasse ? ` · ${UI.escape(d.rasse)}` : ''}</span>
             </div>`;
           }).join('');
           return `
             <div class="walks-participant">
               <div class="walks-inv-avatar walks-inv-avatar--sm">${_avatarInitials(t.user_name)}</div>
-              <div class="flex-1-min">
+              <div style="flex:1;min-width:0">
                 <div class="walks-participant-name">${UI.escape(t.user_name)}</div>
                 ${dogsHTML ? `<div style="display:flex;flex-wrap:wrap;gap:var(--space-1);margin-top:4px">${dogsHTML}</div>` : ''}
               </div>
@@ -476,7 +480,7 @@ window.Page_walks = (() => {
     // Einladungsliste
     const invListHTML = invitations.length
       ? invitations.map(inv => _invitationRowHTML(inv)).join('')
-      : `<p class="text-sm-muted">Noch keine Einladungen.</p>`;
+      : `<p style="color:var(--c-text-muted);font-size:var(--text-sm)">Noch keine Einladungen.</p>`;
 
     // RSVP-Section für eingeladene Nutzer
     const rsvpSectionHTML = (isInvited && !isOwn) ? `
@@ -544,7 +548,7 @@ window.Page_walks = (() => {
           <div class="walks-detail-section-label" style="margin-bottom:0">${UI.icon('images')} Fotos</div>
           ${(isPast || _isToday(walk.datum)) && (isJoined || isOwn) ? `
             <label style="cursor:pointer">
-              <input type="file" id="wd-photo-input" accept="image/*" class="hidden">
+              <input type="file" id="wd-photo-input" accept="image/*" style="display:none">
               <span class="btn btn-secondary btn-sm">${UI.icon('camera')} Foto hinzufügen</span>
             </label>` : ''}
         </div>
@@ -568,7 +572,7 @@ window.Page_walks = (() => {
       </p>
 
       ${isOwn && !isPast ? `
-        <div id="wd-cancel-wrap" class="mt-3">
+        <div id="wd-cancel-wrap" style="margin-top:var(--space-3)">
           <button type="button" class="btn btn-ghost btn-sm" id="wd-cancel-walk"
                   style="color:var(--c-danger);width:100%">
             ${UI.icon('x-circle')} Treffen stornieren
@@ -576,7 +580,7 @@ window.Page_walks = (() => {
         </div>` : ''}
 
       ${isJoined && !isOwn ? `
-        <div id="wd-leave-wrap" class="mt-3">
+        <div id="wd-leave-wrap" style="margin-top:var(--space-3)">
           <button type="button" class="btn btn-ghost btn-sm" id="wd-leave"
                   style="color:var(--c-danger);width:100%">
             ${UI.icon('sign-out')} Nicht mehr teilnehmen
@@ -778,12 +782,12 @@ window.Page_walks = (() => {
       ? candidates.map(f => `
           <div class="walks-invite-row" data-friend-id="${f.friend_id}" data-friend-name="${UI.escape(f.friend_name)}">
             <div class="walks-inv-avatar">${_avatarInitials(f.friend_name)}</div>
-            <div class="walks-inv-name flex-1">${UI.escape(f.friend_name)}</div>
+            <div class="walks-inv-name" style="flex:1">${UI.escape(f.friend_name)}</div>
             <button type="button" class="btn btn-primary btn-sm walks-invite-send">
               ${UI.icon('paper-plane-tilt')} Einladen
             </button>
           </div>`).join('')
-      : `<p class="text-muted">Alle Freunde wurden bereits eingeladen.</p>`;
+      : `<p style="color:var(--c-text-muted)">Alle Freunde wurden bereits eingeladen.</p>`;
 
     const body = `
       <p style="color:var(--c-text-secondary);margin-bottom:var(--space-3)">
@@ -813,7 +817,7 @@ window.Page_walks = (() => {
           await API.walks.invite(walk.id, friendId);
           row.innerHTML = `
             <div class="walks-inv-avatar">${_avatarInitials(name)}</div>
-            <div class="walks-inv-name flex-1">${UI.escape(name)}</div>
+            <div class="walks-inv-name" style="flex:1">${UI.escape(name)}</div>
             <span class="walks-rsvp-badge walks-rsvp--invited">Eingeladen</span>
           `;
           UI.toast.success(`${name} eingeladen.`);
@@ -834,7 +838,7 @@ window.Page_walks = (() => {
             <input type="checkbox" name="dog" value="${d.id}" checked>
             ${UI.icon('dog')} ${UI.escape(d.name)}
           </label>`).join('')
-      : `<p class="text-muted">Keine Hunde im Profil — du kannst trotzdem mitmachen.</p>`;
+      : `<p style="color:var(--c-text-muted)">Keine Hunde im Profil — du kannst trotzdem mitmachen.</p>`;
 
     const body = `
       <p style="color:var(--c-text-secondary);margin-bottom:var(--space-4)">
@@ -909,7 +913,7 @@ window.Page_walks = (() => {
                  placeholder="z. B. Sonntagsspaziergang im Stadtpark" required>
         </div>
 
-        <div class="grid-2">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
           <div class="form-group">
             <label class="form-label">Datum *</label>
             <input class="form-control" type="date" name="datum"
@@ -939,7 +943,7 @@ window.Page_walks = (() => {
           </div>
 
           <!-- Ort-Chip -->
-          <div class="mt-2">
+          <div style="margin-top:var(--space-2)">
             <div id="wf-location-chip-wrap" style="${_locName ? '' : 'display:none'}">
               <div class="diary-location-chip">
                 ${UI.icon('map-pin')}
@@ -975,7 +979,7 @@ window.Page_walks = (() => {
         </div>
 
         <div class="form-group">
-          <label class="form-label">Beschreibung <span class="text-secondary">(optional)</span></label>
+          <label class="form-label">Beschreibung <span style="color:var(--c-text-secondary)">(optional)</span></label>
           <textarea class="form-control" name="beschreibung" rows="3"
                     placeholder="Treffpunkt-Details, Streckenlänge, Hundefreundlichkeit…">${UI.escape(v.beschreibung || '')}</textarea>
         </div>
@@ -985,7 +989,7 @@ window.Page_walks = (() => {
 
     const footer = `
       <div style="display:flex;flex-direction:column;gap:var(--space-2);width:100%">
-        <button type="submit" form="walk-form" class="btn btn-primary w-full">
+        <button type="submit" form="walk-form" class="btn btn-primary" style="width:100%">
           ${isEdit ? `${UI.icon('floppy-disk')} Speichern` : `${UI.icon('calendar-dots')} Treffen planen`}
         </button>
         <button type="button" class="btn btn-secondary" id="wf-cancel">Abbrechen</button>
@@ -1221,7 +1225,7 @@ window.Page_walks = (() => {
       <div style="width:100%;max-width:600px;background:var(--c-surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;
                   padding:var(--space-4);box-sizing:border-box;max-height:80vh;display:flex;flex-direction:column">
         <div style="display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)">
-          <svg class="ph-icon" aria-hidden="true" class="text-primary"><use href="/icons/phosphor.svg#note-pencil"></use></svg>
+          <svg class="ph-icon" aria-hidden="true" style="color:var(--c-primary)"><use href="/icons/phosphor.svg#note-pencil"></use></svg>
           <span style="font-weight:600;flex:1"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#note-pencil"></use></svg> Notiz — ${UI.escape(parentLabel)}</span>
           <button id="wk-note-close" style="background:none;border:none;cursor:pointer;color:var(--c-text-muted);padding:4px">
             <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#x"></use></svg>
@@ -1292,8 +1296,8 @@ window.Page_walks = (() => {
             ${UI.icon('calendar')} ${_fmtDate(challenge.start_date)} – ${_fmtDate(challenge.end_date)}
             &nbsp;·&nbsp; ${UI.icon('timer')} Noch ${dayLabel}
           </div>
-          ${canSubmit ? `<button class="btn btn-primary btn-sm" id="challenge-submit-btn" class="mt-3">${UI.icon('camera')} Foto einreichen</button>` : ''}
-          ${my_submission_id ? `<span class="badge badge-success mt-2">${UI.icon('check')} Du hast bereits teilgenommen</span>` : ''}
+          ${canSubmit ? `<button class="btn btn-primary btn-sm" id="challenge-submit-btn" style="margin-top:var(--space-3)">${UI.icon('camera')} Foto einreichen</button>` : ''}
+          ${my_submission_id ? `<span class="badge badge-success" style="margin-top:var(--space-2)">${UI.icon('check')} Du hast bereits teilgenommen</span>` : ''}
         </div>
       </div>
 
@@ -1367,7 +1371,7 @@ window.Page_walks = (() => {
             <img src="${UI.escape(w.winner.foto_url)}" alt="Gewinner" onerror="this.src='/icons/icon-192.png'">
             <div>
               <div style="font-weight:600;font-size:var(--text-xs)">${UI.escape(w.challenge.thema)}</div>
-              <div class="text-xs-secondary">${UI.escape(w.winner.user_name)} · ${w.winner.votes} ❤️</div>
+              <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">${UI.escape(w.winner.user_name)} · ${w.winner.votes} ❤️</div>
             </div>
           </div>`;
         }).join('') +
@@ -1383,21 +1387,21 @@ window.Page_walks = (() => {
     UI.modal.open({
       title: `📸 ${UI.escape(_challengeData.challenge.thema)}`,
       body: `
-        <form id="challenge-submit-form" class="flex-col-gap-3">
+        <form id="challenge-submit-form" style="display:flex;flex-direction:column;gap:var(--space-3)">
           <div class="form-group">
             <label>Foto *</label>
-            <input type="file" id="challenge-foto-input" accept="image/*" required class="w-full">
+            <input type="file" id="challenge-foto-input" accept="image/*" required style="width:100%">
           </div>
           ${dogs.length ? `<div class="form-group">
             <label>Hund</label>
-            <select id="challenge-dog-select" class="w-full">
+            <select id="challenge-dog-select" style="width:100%">
               <option value="">Kein Hund</option>
               ${dogOptions}
             </select>
           </div>` : ''}
           <div class="form-group">
             <label>Bildunterschrift</label>
-            <input type="text" id="challenge-caption" placeholder="z.B. Mein Bello beim besten Schnüffeln…" maxlength="200" class="w-full">
+            <input type="text" id="challenge-caption" placeholder="z.B. Mein Bello beim besten Schnüffeln…" maxlength="200" style="width:100%">
           </div>
         </form>
       `,
@@ -1461,7 +1465,7 @@ window.Page_walks = (() => {
         <div style="text-align:center;padding:var(--space-8);color:var(--c-text-secondary)">
           ${UI.icon('clock')}
           <p>Noch keine Stamm-Gassi-Zeiten in deiner Nähe.</p>
-          <p class="text-sm">Trag deine regelmäßigen Zeiten ein — andere finden dich dann!</p>
+          <p style="font-size:var(--text-sm)">Trag deine regelmäßigen Zeiten ein — andere finden dich dann!</p>
         </div>`;
       return;
     }
@@ -1533,7 +1537,7 @@ window.Page_walks = (() => {
         </div>
         <div class="gz-body">
           <div class="gz-name">${UI.escape(z.dog_name || z.user_name || '?')}
-            ${z.dog_rasse ? `<span class="badge text-xs">${UI.escape(z.dog_rasse)}</span>` : ''}
+            ${z.dog_rasse ? `<span class="badge" style="font-size:var(--text-xs)">${UI.escape(z.dog_rasse)}</span>` : ''}
             ${!z.aktiv ? `<span class="badge badge-warning">Pausiert</span>` : ''}
           </div>
           <div class="gz-meta">
@@ -1572,17 +1576,17 @@ window.Page_walks = (() => {
     UI.modal.open({
       title: `${UI.icon('clock')} Stamm-Gassi-Zeit eintragen`,
       body: `
-        <form id="gassi-zeit-form" class="flex-col-gap-3">
+        <form id="gassi-zeit-form" style="display:flex;flex-direction:column;gap:var(--space-3)">
           ${dogs.length ? `<div class="form-group">
             <label>Hund</label>
-            <select id="gz-dog-select" class="w-full">
+            <select id="gz-dog-select" style="width:100%">
               <option value="">Kein Hund</option>
               ${dogOptions}
             </select>
           </div>` : ''}
           <div class="form-group">
             <label>Uhrzeit *</label>
-            <input type="time" id="gz-uhrzeit" required class="w-full">
+            <input type="time" id="gz-uhrzeit" required style="width:100%">
           </div>
           <div class="form-group">
             <label>Wochentage *</label>
@@ -1590,11 +1594,11 @@ window.Page_walks = (() => {
           </div>
           <div class="form-group">
             <label>Ort (optional)</label>
-            <input type="text" id="gz-ort-name" placeholder="z.B. Stadtpark Ebersberg" class="w-full">
+            <input type="text" id="gz-ort-name" placeholder="z.B. Stadtpark Ebersberg" style="width:100%">
           </div>
           <div class="form-group">
             <label>Notiz (optional)</label>
-            <input type="text" id="gz-notiz" placeholder="z.B. Wir sind eine ruhige Gruppe…" maxlength="200" class="w-full">
+            <input type="text" id="gz-notiz" placeholder="z.B. Wir sind eine ruhige Gruppe…" maxlength="200" style="width:100%">
           </div>
         </form>
       `,
diff --git a/backend/static/js/pages/welcome.js b/backend/static/js/pages/welcome.js
index fdcfa17..256f499 100644
--- a/backend/static/js/pages/welcome.js
+++ b/backend/static/js/pages/welcome.js
@@ -164,11 +164,11 @@ window.Page_welcome = (() => {
         ` : ''}
 
         <p class="wc-footer">
-          <a href="/#impressum" class="text-muted">Impressum</a>
+          <a href="/#impressum" style="color:var(--c-text-muted)">Impressum</a>
           &nbsp;·&nbsp;
-          <a href="/#datenschutz" class="text-muted">Datenschutz</a>
+          <a href="/#datenschutz" style="color:var(--c-text-muted)">Datenschutz</a>
           &nbsp;·&nbsp;
-          <a href="/#agb" class="text-muted">AGB</a>
+          <a href="/#agb" style="color:var(--c-text-muted)">AGB</a>
         </p>
       </div>
     `;
@@ -403,7 +403,7 @@ window.Page_welcome = (() => {
                 <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#download-simple"></use></svg>
                 Immer griffbereit — kein App Store
               </div>
-              <div class="p-4">${_installHTML()}</div>
+              <div style="padding:var(--space-4)">${_installHTML()}</div>
             </div>
           ` : ''}
 
@@ -485,16 +485,16 @@ window.Page_welcome = (() => {
     }
     const medals = ['🥇', '🥈', '🥉'];
     return `
-      <div class="flex-col-gap-2">
+      <div style="display:flex;flex-direction:column;gap:var(--space-2)">
         ${rows.map((r, i) => `
           <div style="display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) 0;border-bottom:1px solid var(--c-border-subtle)">
             <span style="font-size:1.4rem;width:28px;text-align:center;flex-shrink:0">${medals[i] || (i + 1) + '.'}</span>
             ${r.foto_url
               ? `<img src="${UI.escape(r.foto_url)}" style="width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0" alt="">`
               : `<div style="width:36px;height:36px;border-radius:50%;background:var(--c-primary-subtle);flex-shrink:0"></div>`}
-            <div class="flex-1-min">
+            <div style="flex:1;min-width:0">
               <div style="font-weight:var(--weight-semibold);font-size:var(--text-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${UI.escape(r.dog_name)}</div>
-              <div class="text-xs-secondary">${UI.escape(r.rasse || '')}${r.user_name ? ' · ' + UI.escape(r.user_name) : ''}</div>
+              <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">${UI.escape(r.rasse || '')}${r.user_name ? ' · ' + UI.escape(r.user_name) : ''}</div>
             </div>
             <div style="display:flex;align-items:center;gap:4px;flex-shrink:0">
               <span style="font-size:1.1rem">🔥</span>
@@ -1098,7 +1098,7 @@ window.Page_welcome = (() => {
                 style="flex:1;background:var(--c-primary);color:#fff;border:none">
           Android
         </button>
-        <button class="btn btn-sm btn-ghost" id="inst-tab-ios" class="flex-1">
+        <button class="btn btn-sm btn-ghost" id="inst-tab-ios" style="flex:1">
           iPhone / iPad
         </button>
       </div>
@@ -1118,7 +1118,7 @@ window.Page_welcome = (() => {
           </p>
         </div>
       </div>
-      <div id="inst-panel-ios" class="hidden">
+      <div id="inst-panel-ios" style="display:none">
         ${_steps([
           ['arrow-square-in', 'Öffne <strong>banyaro.app</strong> in Safari auf dem iPhone'],
           ['share',           'Tippe auf das <strong>Teilen-Symbol</strong> <svg class="ph-icon" style="width:14px;height:14px;vertical-align:-2px"><use href="/icons/phosphor.svg#share"></use></svg>'],
diff --git a/backend/static/js/pages/wetter.js b/backend/static/js/pages/wetter.js
index e3803fe..77f974e 100644
--- a/backend/static/js/pages/wetter.js
+++ b/backend/static/js/pages/wetter.js
@@ -84,8 +84,8 @@ window.Page_wetter = (() => {
     _container.innerHTML = `
       <div id="wttr-body">
         <div style="text-align:center;padding:var(--space-10) var(--space-4)">
-          <div class="mb-3">${_wmoIcon(2, '2.5rem')}</div>
-          <p class="text-secondary">Standort wird ermittelt…</p>
+          <div style="margin-bottom:var(--space-3)">${_wmoIcon(2, '2.5rem')}</div>
+          <p style="color:var(--c-text-secondary)">Standort wird ermittelt…</p>
         </div>
       </div>
     `;
@@ -198,7 +198,7 @@ window.Page_wetter = (() => {
         </div>
 
         <!-- CTAs -->
-        <div class="flex-col-gap-3">
+        <div style="display:flex;flex-direction:column;gap:var(--space-3)">
           <button class="btn btn-primary" id="wttr-btn-retry"
                   style="display:flex;align-items:center;justify-content:center;gap:var(--space-2)">
             <svg class="ph-icon" style="width:1rem;height:1rem">
@@ -247,7 +247,7 @@ window.Page_wetter = (() => {
       if (body) body.innerHTML = `
         <div style="text-align:center;padding:var(--space-10) var(--space-4)">
           <div style="font-size:2.5rem;margin-bottom:var(--space-3)">⚠️</div>
-          <h3 class="mb-2">Wetter nicht verfügbar</h3>
+          <h3 style="margin-bottom:var(--space-2)">Wetter nicht verfügbar</h3>
           <p style="color:var(--c-text-secondary);margin-bottom:var(--space-5)">
             Die Wetterdaten konnten nicht geladen werden.
           </p>
@@ -287,11 +287,13 @@ window.Page_wetter = (() => {
       </div>
 
       <!-- Detail-Card -->
-      <div id="wttr-detail" class="section-card mb-4">
+      <div id="wttr-detail" class="section-card"
+           style="margin-bottom:var(--space-4)">
       </div>
 
       <!-- Niederschlagswahrscheinlichkeit Zeitskala -->
-      <div id="wttr-rain" class="section-card mb-4">
+      <div id="wttr-rain" class="section-card"
+           style="margin-bottom:var(--space-4)">
       </div>
 
       <!-- Hunde-Wetter -->
@@ -368,7 +370,7 @@ window.Page_wetter = (() => {
                   box-shadow:${shadow};transform:${transform};
                   transition:all .15s;user-select:none">
         <span style="font-size:var(--text-xs);font-weight:600;
-                     margin-bottom:var(--space-1)">${UI.escape(dayName)}</span>
+                     margin-bottom:var(--space-1)">${_esc(dayName)}</span>
         <div style="margin-bottom:var(--space-1)">${_wmoIcon(d.weathercode, '1.5rem', active ? 'filter:brightness(0) invert(1)' : '')}</div>
         <span class="wttr-temp"
               style="font-size:var(--text-xs);color:${textSec};white-space:nowrap">
@@ -414,13 +416,13 @@ window.Page_wetter = (() => {
         : 0;
     }
 
-    const locName = _data.location_name ? `<div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-bottom:2px">${UI.escape(_data.location_name)}</div>` : '';
+    const locName = _data.location_name ? `<div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-bottom:2px">${_esc(_data.location_name)}</div>` : '';
     el.innerHTML = `
       ${locName}
       <div style="display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)">
         ${_wmoIcon(d.weathercode, '3.5rem')}
         <div>
-          <div style="font-weight:700;font-size:var(--text-lg)">${UI.escape(desc)}</div>
+          <div style="font-weight:700;font-size:var(--text-lg)">${_esc(desc)}</div>
           <div style="font-size:var(--text-2xl);font-weight:800;color:var(--c-primary);line-height:1.1">
             ${Math.round(d.temp_max)}°
             <span style="font-size:var(--text-base);font-weight:400;color:var(--c-text-secondary)">
@@ -439,16 +441,16 @@ window.Page_wetter = (() => {
 
       <!-- Sonnenaufgang / -untergang -->
       ${sunriseStr && sunsetStr ? `
-      <div class="mb-4">
+      <div style="margin-bottom:var(--space-4)">
         <div style="display:flex;justify-content:space-between;
                     font-size:var(--text-xs);color:var(--c-text-secondary);
                     margin-bottom:var(--space-1)">
           <span style="display:flex;align-items:center;gap:4px">
             <svg class="ph-icon" style="width:14px;height:14px;color:#F97316"><use href="/icons/phosphor.svg#sun-horizon"></use></svg>
-            ${UI.escape(sunriseStr)}
+            ${_esc(sunriseStr)}
           </span>
           <span style="display:flex;align-items:center;gap:4px">
-            ${UI.escape(sunsetStr)}
+            ${_esc(sunsetStr)}
             <svg class="ph-icon" style="width:14px;height:14px;color:#7C3AED"><use href="/icons/phosphor.svg#moon-stars"></use></svg>
           </span>
         </div>
@@ -467,18 +469,18 @@ window.Page_wetter = (() => {
         <span style="font-size:1.4rem;transform:rotate(${windDir}deg);display:inline-block;line-height:1">
           ${UI.icon('arrow-up')}
         </span>
-        <div class="flex-1">
+        <div style="flex:1">
           <div style="font-size:var(--text-sm);font-weight:600">
-            ${UI.escape(compass)} · ${Math.round(d.wind_kmh ?? 0)} km/h
+            ${_esc(compass)} · ${Math.round(d.wind_kmh ?? 0)} km/h
           </div>
-          <div class="text-xs-secondary">${UI.escape(bft)}</div>
+          <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">${_esc(bft)}</div>
         </div>
         ${d.precip_sum != null ? `
-        <div class="text-right">
+        <div style="text-align:right">
           <div style="font-size:var(--text-sm);font-weight:600">
             ${d.precip_sum} mm
           </div>
-          <div class="text-xs-secondary">Niederschlag</div>
+          <div style="font-size:var(--text-xs);color:var(--c-text-secondary)">Niederschlag</div>
         </div>` : ''}
       </div>
 
@@ -486,9 +488,9 @@ window.Page_wetter = (() => {
       <div>
         <div style="display:flex;justify-content:space-between;
                     font-size:var(--text-xs);margin-bottom:4px">
-          <span class="text-secondary">UV-Index</span>
+          <span style="color:var(--c-text-secondary)">UV-Index</span>
           <span style="font-weight:600;color:${uvColor}">
-            ${d.uv_index ?? 0} — ${UI.escape(uvLabel)}
+            ${d.uv_index ?? 0} — ${_esc(uvLabel)}
           </span>
         </div>
         <div style="height:6px;border-radius:999px;background:var(--c-border);overflow:hidden">
@@ -596,7 +598,7 @@ window.Page_wetter = (() => {
           Niederschlagswahrscheinlichkeit
         </span>
         <span style="font-size:var(--text-xs);color:var(--c-text-secondary);margin-left:auto">
-          ${_selDay === 0 ? 'heute' : UI.escape(d.date ? new Date(d.date + 'T12:00').toLocaleDateString('de', {weekday:'short', day:'numeric', month:'short'}) : '')}
+          ${_selDay === 0 ? 'heute' : _esc(d.date ? new Date(d.date + 'T12:00').toLocaleDateString('de', {weekday:'short', day:'numeric', month:'short'}) : '')}
         </span>
       </div>
       <!-- Baseline -->
@@ -648,10 +650,10 @@ window.Page_wetter = (() => {
                   margin-bottom:var(--space-4);text-align:center">
         <div style="font-size:2rem;line-height:1;margin-bottom:4px">${_wl.emoji}</div>
         <div style="font-weight:800;font-size:var(--text-lg);color:${_wl.color};line-height:1.2">
-          ${UI.escape(_wl.label)}
+          ${_esc(_wl.label)}
         </div>
         <div style="font-size:var(--text-xs);color:var(--c-text-secondary);margin-top:4px">
-          ${UI.escape(_wl.sub)}
+          ${_esc(_wl.sub)}
         </div>
       </div>
       <h3 style="font-size:var(--text-base);font-weight:700;margin-bottom:var(--space-4)">
@@ -668,12 +670,12 @@ window.Page_wetter = (() => {
                     background:${aspColor}1a;border:1px solid ${aspColor}55;
                     margin-bottom:var(--space-3)">
           <svg class="ph-icon" style="width:1.3rem;height:1.3rem;flex-shrink:0;color:var(--c-primary)"><use href="/icons/phosphor.svg#paw-print"></use></svg>
-          <div class="flex-1">
+          <div style="flex:1">
             <div style="font-weight:600;font-size:var(--text-sm);color:${aspColor}">
-              Asphalt ~${Math.round(d.asphalt_temp)}°C — ${UI.escape(aspText)}
+              Asphalt ~${Math.round(d.asphalt_temp)}°C — ${_esc(aspText)}
             </div>
             ${aspAdvice ? `<div style="font-size:var(--text-xs);color:var(--c-text-secondary);margin-top:2px">
-              ${UI.escape(aspAdvice)}
+              ${_esc(aspAdvice)}
             </div>` : ''}
           </div>
         </div>
@@ -688,7 +690,7 @@ window.Page_wetter = (() => {
                     background:#3b82f61a;border:1px solid #3b82f655;
                     margin-bottom:var(--space-3)">
           <svg class="ph-icon" style="width:1.3rem;height:1.3rem;color:#38BDF8"><use href="/icons/phosphor.svg#snowflake"></use></svg>
-          <div class="text-sm">
+          <div style="font-size:var(--text-sm)">
             <strong>Kälteschutz für Pfoten:</strong>
             Eis und Streusalz können die Pfoten reizen. Pfotenpflege empfohlen.
           </div>
@@ -704,7 +706,7 @@ window.Page_wetter = (() => {
                     background:#f59e0b1a;border:1px solid #f59e0b55;
                     margin-bottom:var(--space-3)">
           <svg class="ph-icon" style="width:1.3rem;height:1.3rem;color:#7C3AED"><use href="/icons/phosphor.svg#cloud-lightning"></use></svg>
-          <div class="text-sm">
+          <div style="font-size:var(--text-sm)">
             <strong>Gewitter erwartet:</strong>
             Hunde können auf Gewitter sensibel reagieren. Sichere Umgebung schaffen.
           </div>
@@ -719,7 +721,7 @@ window.Page_wetter = (() => {
         .filter(([, v]) => v != null && v.level > 0);
       if (pollenEntries.length) {
         html += `
-          <div class="mb-3">
+          <div style="margin-bottom:var(--space-3)">
             <div style="font-size:var(--text-xs);font-weight:600;
                         color:var(--c-text-secondary);margin-bottom:var(--space-2)">
               <svg class="ph-icon" style="width:1em;height:1em;vertical-align:-1px;color:#16A34A"><use href="/icons/phosphor.svg#leaf"></use></svg>
@@ -735,7 +737,7 @@ window.Page_wetter = (() => {
                                      padding:3px 10px;background:${col}22;
                                      border:1px solid ${col}55;color:${col};font-weight:600">
                           <span style="width:6px;height:6px;border-radius:50%;background:${col};display:inline-block"></span>
-                          ${UI.escape(name)}: ${UI.escape(lbl)}
+                          ${_esc(name)}: ${_esc(lbl)}
                         </span>`;
               }).join('')}
             </div>
@@ -753,10 +755,10 @@ window.Page_wetter = (() => {
                     background:${tickColor}1a;border:1px solid ${tickColor}55;
                     margin-bottom:var(--space-3)">
           <svg class="ph-icon" style="width:1.3rem;height:1.3rem;color:#92400E"><use href="/icons/phosphor.svg#bug"></use></svg>
-          <div class="flex-1">
+          <div style="flex:1">
             <span style="font-size:var(--text-sm);font-weight:600">Zecken-Risiko: </span>
             <span style="font-size:var(--text-sm);color:${tickColor};font-weight:700">
-              ${UI.escape(tickLabel)}
+              ${_esc(tickLabel)}
             </span>
           </div>
         </div>
@@ -786,7 +788,7 @@ window.Page_wetter = (() => {
             <svg class="ph-icon" style="width:1.3rem;height:1.3rem;flex-shrink:0;color:${fellHint.color}">
               <use href="/icons/phosphor.svg#${fellHint.icon}"></use>
             </svg>
-            <div class="text-sm">${UI.escape(fellHint.text)}</div>
+            <div style="font-size:var(--text-sm)">${_esc(fellHint.text)}</div>
           </div>
         `;
       }
@@ -806,7 +808,7 @@ window.Page_wetter = (() => {
     if (!d.asphalt_temp && !d.paw_cold && !d.thunderstorm
         && !d.zecken && !(pollen && Object.keys(pollen).length)) {
       html += `
-        <p class="text-sm-secondary">
+        <p style="font-size:var(--text-sm);color:var(--c-text-secondary)">
           Keine besonderen Hinweise für heute.
         </p>
       `;
@@ -874,9 +876,9 @@ window.Page_wetter = (() => {
         <span style="font-size:var(--text-2xl);font-weight:900;color:${color};line-height:1">
           ${score}
         </span>
-        <span class="text-xs-secondary">/&nbsp;10</span>
+        <span style="font-size:var(--text-xs);color:var(--c-text-secondary)">/&nbsp;10</span>
         <span style="font-size:var(--text-xs);font-weight:600;color:${color};
-                     white-space:nowrap">— ${UI.escape(text)}</span>
+                     white-space:nowrap">— ${_esc(text)}</span>
       </div>
     `;
   }
@@ -912,7 +914,7 @@ window.Page_wetter = (() => {
                    padding:3px 10px;background:${s.color}22;
                    border:1px solid ${s.color}55;color:${s.color};font-weight:600">
         <svg class="ph-icon" style="width:12px;height:12px"><use href="/icons/phosphor.svg#nose"></use></svg>
-        Schnüffel: ${UI.escape(s.label)}
+        Schnüffel: ${_esc(s.label)}
       </span>
     `;
   }
@@ -945,7 +947,7 @@ window.Page_wetter = (() => {
                     background:#f59e0b1a;border:1px solid #f59e0b55;
                     margin-bottom:var(--space-3)">
           <svg class="ph-icon" style="width:1.3rem;height:1.3rem;flex-shrink:0;color:#F59E0B"><use href="/icons/phosphor.svg#baby"></use></svg>
-          <div class="text-sm">
+          <div style="font-size:var(--text-sm)">
             <strong>Welpe</strong> — kurze Spaziergänge, max. 15 Min bei Hitze.
             Gelenke und Pfoten besonders schonen.
           </div>
@@ -959,7 +961,7 @@ window.Page_wetter = (() => {
                     background:#6b7280 1a;border:1px solid #6b728055;
                     margin-bottom:var(--space-3)">
           <svg class="ph-icon" style="width:1.3rem;height:1.3rem;flex-shrink:0;color:#9CA3AF"><use href="/icons/phosphor.svg#person-simple-walk"></use></svg>
-          <div class="text-sm">
+          <div style="font-size:var(--text-sm)">
             <strong>Seniorhund</strong> — Hitze und Kälte vermeiden, kurze Runden bevorzugen.
             Auf Gelenkbeschwerden achten.
           </div>
@@ -1072,6 +1074,15 @@ window.Page_wetter = (() => {
     return                     ['hoch',     '#F44336'];
   }
 
+  function _esc(s) {
+    if (s == null) return '';
+    return String(s)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+  }
+
   // ----------------------------------------------------------
   // MEINE WETTERREKORDE
   // ----------------------------------------------------------
@@ -1107,15 +1118,15 @@ window.Page_wetter = (() => {
                     display:flex;align-items:center;gap:3px;font-weight:700;
                     text-transform:uppercase;letter-spacing:.04em">
           <span>${emoji}</span>
-          <span>${UI.escape(title)}</span>
+          <span>${_esc(title)}</span>
         </div>
         <div style="font-size:var(--text-lg);font-weight:800;color:${color};line-height:1.1">
-          ${UI.escape(value)}
+          ${_esc(value)}
         </div>
         <div style="font-size:10px;color:var(--c-text-secondary);
                     overflow:hidden;display:-webkit-box;
                     -webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3">
-          ${UI.escape(subtitle)}
+          ${_esc(subtitle)}
         </div>
       </div>
     `;
diff --git a/backend/static/js/pages/widget.js b/backend/static/js/pages/widget.js
index 51a5579..a311ff9 100644
--- a/backend/static/js/pages/widget.js
+++ b/backend/static/js/pages/widget.js
@@ -18,7 +18,7 @@ window.Page_widget = (() => {
 
   async function _render() {
     _container.innerHTML = `
-      <div class="p-4">
+      <div style="padding:var(--space-4)">
         <div style="text-align:center;color:var(--c-text-muted);padding:var(--space-8)">
           <div style="font-size:2rem">⏳</div>
           <div>Lade…</div>
@@ -49,48 +49,48 @@ window.Page_widget = (() => {
 
     const photoHtml = photo
       ? `<div class="widget-photo-wrap">
-           <img src="${UI.escape(photo.media_url)}" alt="${UI.escape(photo.titel || '')}" class="widget-photo">
+           <img src="${_esc(photo.media_url)}" alt="${_esc(photo.titel || '')}" class="widget-photo">
            <div class="widget-photo-caption">
-             ${UI.escape(photo.titel || '')}
+             ${_esc(photo.titel || '')}
              <span class="widget-photo-date">${_fmtDate(photo.datum)}</span>
            </div>
          </div>`
       : `<div class="widget-photo-wrap widget-photo-placeholder">
            <svg class="ph-icon" style="font-size:3rem" aria-hidden="true"><use href="/icons/phosphor.svg#image"></use></svg>
-           <div class="text-sm-muted">Noch keine Fotos im Tagebuch</div>
+           <div style="color:var(--c-text-muted);font-size:var(--text-sm)">Noch keine Fotos im Tagebuch</div>
          </div>`;
 
     const reminderHtml = rem
       ? `<div class="widget-reminder">
            <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#calendar-check"></use></svg>
            <div>
-             <div style="font-weight:var(--weight-semibold);font-size:var(--text-sm)">${UI.escape(rem.bezeichnung)}</div>
-             <div class="text-xs-muted">${_fmtDate(rem.naechstes)}</div>
+             <div style="font-weight:var(--weight-semibold);font-size:var(--text-sm)">${_esc(rem.bezeichnung)}</div>
+             <div style="font-size:var(--text-xs);color:var(--c-text-muted)">${_fmtDate(rem.naechstes)}</div>
            </div>
          </div>`
       : data.overdue > 0
         ? `<div class="widget-reminder widget-reminder--overdue">
              <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#warning"></use></svg>
-             <div class="text-sm">${data.overdue} überfällige Erinnerung${data.overdue > 1 ? 'en' : ''}</div>
+             <div style="font-size:var(--text-sm)">${data.overdue} überfällige Erinnerung${data.overdue > 1 ? 'en' : ''}</div>
            </div>`
         : `<div class="widget-reminder widget-reminder--ok">
              <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#check-circle"></use></svg>
-             <div class="text-sm">Keine offenen Erinnerungen</div>
+             <div style="font-size:var(--text-sm)">Keine offenen Erinnerungen</div>
            </div>`;
 
     const dogAvatar = dog.foto_url
-      ? `<img src="${UI.escape(dog.foto_url)}" class="widget-dog-av" alt="${UI.escape(dog.name)}">`
+      ? `<img src="${_esc(dog.foto_url)}" class="widget-dog-av" alt="${_esc(dog.name)}">`
       : `<div class="widget-dog-av widget-dog-av--placeholder">🐕</div>`;
 
     _container.innerHTML = `
-      <div class="p-4">
+      <div style="padding:var(--space-4)">
 
         <div class="widget-card">
           <div class="widget-dog-row">
             ${dogAvatar}
             <div>
-              <div style="font-weight:var(--weight-bold);font-size:var(--text-lg)">${UI.escape(dog.name)}</div>
-              ${dog.rasse ? `<div class="text-sm-muted">${UI.escape(dog.rasse)}</div>` : ''}
+              <div style="font-weight:var(--weight-bold);font-size:var(--text-lg)">${_esc(dog.name)}</div>
+              ${dog.rasse ? `<div style="font-size:var(--text-sm);color:var(--c-text-muted)">${_esc(dog.rasse)}</div>` : ''}
             </div>
             <button class="btn btn-secondary btn-sm" id="widget-refresh-btn" style="margin-left:auto"
                     title="Neues Zufallsbild">
@@ -113,11 +113,11 @@ window.Page_widget = (() => {
           <p style="font-size:var(--text-xs);color:var(--c-text-secondary);margin-bottom:var(--space-3)">
             Füge diese Seite zum Home-Screen hinzu und öffne sie mit einem Tipp.
           </p>
-          <div class="flex-col-gap-2">
-            <div class="text-xs-muted">
+          <div style="display:flex;flex-direction:column;gap:var(--space-2)">
+            <div style="font-size:var(--text-xs);color:var(--c-text-muted)">
               <strong>iOS Safari:</strong> Teilen-Symbol → „Zum Home-Bildschirm"
             </div>
-            <div class="text-xs-muted">
+            <div style="font-size:var(--text-xs);color:var(--c-text-muted)">
               <strong>Android Chrome:</strong> Menü (⋮) → „Zum Startbildschirm hinzufügen"
             </div>
           </div>
@@ -126,7 +126,13 @@ window.Page_widget = (() => {
 
     _container.querySelector('#widget-refresh-btn')?.addEventListener('click', () => _render());
   }
-function _fmtDate(d) {
+
+  function _esc(str) {
+    if (!str) return '';
+    return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+  }
+
+  function _fmtDate(d) {
     if (!d) return '';
     try {
       const [y, m, day] = d.split('-');
diff --git a/backend/static/js/pages/wiki.js b/backend/static/js/pages/wiki.js
index b38e5cb..86bb8d9 100644
--- a/backend/static/js/pages/wiki.js
+++ b/backend/static/js/pages/wiki.js
@@ -102,7 +102,7 @@ window.Page_wiki = (() => {
         <button class="by-tab${_tab === 'gesundheit'? ' active' : ''}" data-tab="gesundheit">${UI.icon('syringe')} Gesundheit</button>
         <button class="by-tab${_tab === 'recht'     ? ' active' : ''}" data-tab="recht">${UI.icon('handshake')} Recht</button>
         <button class="by-tab${_tab === 'quiz'      ? ' active' : ''}" data-tab="quiz">${UI.icon('star')} Quiz</button>
-        ${isMod ? `<button class="by-tab${_tab === 'fotos' ? ' active' : ''}" data-tab="fotos" id="wiki-fotos-tab">${UI.icon('camera')} Fotos <span id="wiki-fotos-badge" class="badge badge-sm hidden">0</span></button>` : ''}
+        ${isMod ? `<button class="by-tab${_tab === 'fotos' ? ' active' : ''}" data-tab="fotos" id="wiki-fotos-tab">${UI.icon('camera')} Fotos <span id="wiki-fotos-badge" style="display:none" class="badge badge-sm">0</span></button>` : ''}
       </div>
       <div id="wiki-content"></div>
     `;
@@ -132,12 +132,12 @@ window.Page_wiki = (() => {
   // TAB: Foto-Einreichungen (Mod/Admin)
   // ----------------------------------------------------------
   async function _renderFotoSubmissions(el) {
-    el.innerHTML = `<div class="p-4">${UI.skeleton(3)}</div>`;
+    el.innerHTML = `<div style="padding:var(--space-4)">${UI.skeleton(3)}</div>`;
     let subs;
     try {
       subs = await _apiFetch('/api/wiki/foto-submissions');
     } catch (e) {
-      el.innerHTML = `<div class="empty-state"><p>${UI.escape(e.message)}</p></div>`;
+      el.innerHTML = `<div class="empty-state"><p>${_esc(e.message)}</p></div>`;
       return;
     }
 
@@ -155,7 +155,7 @@ window.Page_wiki = (() => {
     }
 
     el.innerHTML = `
-      <div class="p-4">
+      <div style="padding:var(--space-4)">
         <h3 style="font-size:var(--text-base);font-weight:var(--weight-semibold);margin-bottom:var(--space-4)">
           Ausstehende Fotos (${subs.length})
         </h3>
@@ -163,16 +163,16 @@ window.Page_wiki = (() => {
           ${subs.map(s => `
             <div class="card" style="margin-bottom:var(--space-3);padding:var(--space-3)" id="wiki-sub-${s.id}">
               <div style="display:flex;gap:var(--space-3);align-items:flex-start">
-                <img src="${UI.escape(s.foto_url)}" alt=""
+                <img src="${_esc(s.foto_url)}" alt=""
                      style="width:100px;height:80px;object-fit:cover;border-radius:var(--radius-md);flex-shrink:0;background:var(--c-surface-2)">
-                <div class="flex-1-min">
-                  <div style="font-weight:var(--weight-semibold)">${UI.escape(s.rasse_name)}</div>
-                  <div class="text-xs-muted">
-                    von ${UI.escape(s.user_name)} · ${_formatDate(s.created_at)}
+                <div style="flex:1;min-width:0">
+                  <div style="font-weight:var(--weight-semibold)">${_esc(s.rasse_name)}</div>
+                  <div style="font-size:var(--text-xs);color:var(--c-text-muted)">
+                    von ${_esc(s.user_name)} · ${_formatDate(s.created_at)}
                   </div>
                   ${s.aktuell_foto
                     ? `<div style="font-size:var(--text-xs);color:var(--c-text-secondary);margin-top:4px">
-                         Aktuelles Foto: <img src="${UI.escape(s.aktuell_foto)}" style="height:20px;vertical-align:middle;border-radius:2px">
+                         Aktuelles Foto: <img src="${_esc(s.aktuell_foto)}" style="height:20px;vertical-align:middle;border-radius:2px">
                        </div>`
                     : `<div style="font-size:var(--text-xs);color:var(--c-warning);margin-top:4px">Kein Foto vorhanden</div>`
                   }
@@ -257,12 +257,12 @@ window.Page_wiki = (() => {
       </div>
       <div style="padding:0 0 var(--space-3)">
         <button class="btn btn-secondary w-full" id="wiki-rasse-erkennen-btn"
-                class="text-sm">
+                style="font-size:var(--text-sm)">
           <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#magnifying-glass"></use></svg>
           Welche Rasse ist das? — Foto analysieren
         </button>
         <input type="file" accept="image/jpeg,image/png,image/webp"
-               id="wiki-rasse-foto-input" class="hidden">
+               id="wiki-rasse-foto-input" style="display:none">
       </div>
       <div class="wiki-breed-grid" id="wiki-breed-grid"></div>
       <div id="wiki-mehr-wrap" style="text-align:center;padding:var(--space-4) 0;display:none">
@@ -335,7 +335,7 @@ window.Page_wiki = (() => {
         // Preserve current selection
         const cur = _currentGruppe;
         sel.innerHTML = `<option value="">Alle Gruppen</option>` +
-          _gruppen.map(g => `<option value="${UI.escape(g)}"${g === cur ? ' selected' : ''}>${UI.escape(g)}</option>`).join('');
+          _gruppen.map(g => `<option value="${_esc(g)}"${g === cur ? ' selected' : ''}>${_esc(g)}</option>`).join('');
       }
     }
 
@@ -389,24 +389,24 @@ window.Page_wiki = (() => {
       ? fotoUrl.replace(/\.(jpe?g|png|gif|webp)$/i, '_preview.webp')
       : fotoUrl;
     const photoHtml = fotoUrl
-      ? `<img class="wiki-breed-photo" src="${UI.escape(srcUrl)}" loading="lazy" alt="${UI.escape(r.name)}"
-             onerror="if(this.src.includes('_preview')){this.src='${UI.escape(fotoUrl)}'}else{this.style.display='none';this.nextElementSibling.style.display='flex'}">`
+      ? `<img class="wiki-breed-photo" src="${_esc(srcUrl)}" loading="lazy" alt="${_esc(r.name)}"
+             onerror="if(this.src.includes('_preview')){this.src='${_esc(fotoUrl)}'}else{this.style.display='none';this.nextElementSibling.style.display='flex'}">`
       : '';
     const fallbackHtml = `<div class="wiki-breed-photo-fallback" style="${fotoUrl ? 'display:none' : ''}">${_DOG_SILHOUETTE}</div>`;
 
     return `
-      <div class="wiki-breed-card" data-slug="${UI.escape(r.slug)}">
+      <div class="wiki-breed-card" data-slug="${_esc(r.slug)}">
         <div class="wiki-breed-photo-wrap">
           ${photoHtml}
           ${fallbackHtml}
         </div>
         <div class="wiki-breed-card-body">
-          <div class="wiki-breed-card-name">${UI.escape(r.name)}</div>
-          <div class="wiki-breed-card-gruppe">${UI.escape(r.gruppe || '—')}</div>
+          <div class="wiki-breed-card-name">${_esc(r.name)}</div>
+          <div class="wiki-breed-card-gruppe">${_esc(r.gruppe || '—')}</div>
           <div class="wiki-breed-badges">
-            <span class="wiki-badge-groesse wiki-badge-groesse--${UI.escape(r.groesse)}">${_groesseLabel(r.groesse)}</span>
-            <span class="wiki-badge-aktivitaet wiki-badge-aktivitaet--${UI.escape(r.aktivitaet)}">${_aktivLabel(r.aktivitaet)}</span>
-            <span class="wiki-badge-erfahrung wiki-badge-erfahrung--${UI.escape(r.erfahrung)}">${_erfahrungLabel(r.erfahrung)}</span>
+            <span class="wiki-badge-groesse wiki-badge-groesse--${_esc(r.groesse)}">${_groesseLabel(r.groesse)}</span>
+            <span class="wiki-badge-aktivitaet wiki-badge-aktivitaet--${_esc(r.aktivitaet)}">${_aktivLabel(r.aktivitaet)}</span>
+            <span class="wiki-badge-erfahrung wiki-badge-erfahrung--${_esc(r.erfahrung)}">${_erfahrungLabel(r.erfahrung)}</span>
           </div>
         </div>
       </div>
@@ -460,24 +460,24 @@ window.Page_wiki = (() => {
       : (rasse.gewicht_max_kg ? `bis ${rasse.gewicht_max_kg} kg` : '&mdash;');
 
     const kinderLabel = rasse.kinder_geeignet === true
-      ? `<span class="text-success">&#10003; Ja</span>`
+      ? `<span style="color:var(--c-success)">&#10003; Ja</span>`
       : rasse.kinder_geeignet === false
         ? `<span style="color:var(--c-warning)">&#9889; Bedingt</span>`
         : '&mdash;';
 
     const wohnungLabel = rasse.wohnung_geeignet
-      ? `<span class="text-success">&#10003; Ja</span>`
-      : `<span class="text-secondary">&#10007; Besser Garten</span>`;
+      ? `<span style="color:var(--c-success)">&#10003; Ja</span>`
+      : `<span style="color:var(--c-text-secondary)">&#10007; Besser Garten</span>`;
 
     const rows = [
       ['Größe',        _groesseLabel(rasse.groesse) || '&mdash;'],
       ['Gewicht',      gewicht],
-      ['Lebensdauer',  UI.escape(rasse.lebensdauer) || '&mdash;'],
+      ['Lebensdauer',  _esc(rasse.lebensdauer) || '&mdash;'],
       ['Aktivität',    _aktivLabel(rasse.aktivitaet) || '&mdash;'],
       ['Eignung',      _erfahrungLabel(rasse.erfahrung) || '&mdash;'],
       ['Kinder',       kinderLabel],
       ['Wohnung',      wohnungLabel],
-      ['FCI-Gruppe',   UI.escape(rasse.gruppe) || '&mdash;'],
+      ['FCI-Gruppe',   _esc(rasse.gruppe) || '&mdash;'],
     ];
 
     return `
@@ -514,15 +514,15 @@ window.Page_wiki = (() => {
           <span id="wiki-hat-count">&#128021; <strong>${hatCount}</strong> haben diesen Hund</span>
           <span id="wiki-will-count">&#10084;&#65039; <strong>${willCount}</strong> m&ouml;chten ihn</span>
         </div>
-        <div class="flex-gap-2">
+        <div style="display:flex;gap:var(--space-2)">
           <button class="btn btn-sm wiki-interesse-btn" id="wiki-btn-hat"
                   style="flex:1;${hatStyle}"
-                  data-slug="${UI.escape(slug)}" data-typ="hat">
+                  data-slug="${_esc(slug)}" data-typ="hat">
             ${isLoggedIn ? '' : '&#128274; '}Ich hab einen
           </button>
           <button class="btn btn-sm wiki-interesse-btn" id="wiki-btn-will"
                   style="flex:1;${willStyle}"
-                  data-slug="${UI.escape(slug)}" data-typ="will">
+                  data-slug="${_esc(slug)}" data-typ="will">
             ${isLoggedIn ? '' : '&#128274; '}Ich will einen
           </button>
         </div>
@@ -593,13 +593,13 @@ window.Page_wiki = (() => {
       ? `<p style="color:var(--c-text-secondary);font-size:var(--text-sm)">Noch keine Züchter eingetragen.</p>`
       : zuchter.map(z => `
           <div class="wiki-zuchter-card" style="padding:var(--space-3);border-radius:var(--radius-md);background:var(--c-surface-2);margin-bottom:var(--space-2)">
-            <div style="font-weight:var(--weight-semibold)">${UI.escape(z.name)}
-              ${z.zwingername ? `<em style="font-weight:normal;color:var(--c-text-secondary)"> &bdquo;${UI.escape(z.zwingername)}&ldquo;</em>` : ''}
+            <div style="font-weight:var(--weight-semibold)">${_esc(z.name)}
+              ${z.zwingername ? `<em style="font-weight:normal;color:var(--c-text-secondary)"> &bdquo;${_esc(z.zwingername)}&ldquo;</em>` : ''}
               ${z.vdh_mitglied ? `<span class="badge badge-sm" style="margin-left:var(--space-1);background:var(--c-primary);color:#fff">VDH</span>` : ''}
             </div>
-            ${(z.ort || z.bundesland) ? `<div class="text-sm-secondary">${[z.ort, z.bundesland].filter(Boolean).map(_esc).join(', ')}</div>` : ''}
-            ${z.beschreibung ? `<p style="font-size:var(--text-sm);margin-top:var(--space-1)">${UI.escape(z.beschreibung)}</p>` : ''}
-            ${z.website ? `<a href="${UI.escape(z.website)}" target="_blank" rel="noopener" style="font-size:var(--text-sm);color:var(--c-primary)">${UI.escape(z.website)}</a>` : ''}
+            ${(z.ort || z.bundesland) ? `<div style="font-size:var(--text-sm);color:var(--c-text-secondary)">${[z.ort, z.bundesland].filter(Boolean).map(_esc).join(', ')}</div>` : ''}
+            ${z.beschreibung ? `<p style="font-size:var(--text-sm);margin-top:var(--space-1)">${_esc(z.beschreibung)}</p>` : ''}
+            ${z.website ? `<a href="${_esc(z.website)}" target="_blank" rel="noopener" style="font-size:var(--text-sm);color:var(--c-primary)">${_esc(z.website)}</a>` : ''}
           </div>
         `).join('');
 
@@ -627,7 +627,7 @@ window.Page_wiki = (() => {
               <label class="form-label">Bundesland</label>
               <select class="form-control" name="bundesland">
                 <option value="">— bitte wählen —</option>
-                ${DE_BUNDESLAENDER.map(bl => `<option value="${UI.escape(bl)}">${UI.escape(bl)}</option>`).join('')}
+                ${DE_BUNDESLAENDER.map(bl => `<option value="${_esc(bl)}">${_esc(bl)}</option>`).join('')}
               </select>
             </div>
             <div class="form-group" style="grid-column:1/-1">
@@ -656,7 +656,7 @@ window.Page_wiki = (() => {
           </div>
         </form>
       </div>
-      <button class="btn btn-secondary btn-sm" id="wiki-zuchter-add-btn" class="mt-3">
+      <button class="btn btn-secondary btn-sm" id="wiki-zuchter-add-btn" style="margin-top:var(--space-3)">
         + Züchter eintragen
       </button>
     ` : '';
@@ -731,7 +731,7 @@ window.Page_wiki = (() => {
 
     // Temperament chips
     const chips = rasse.temperament
-      ? rasse.temperament.split(',').map(t => `<span class="wiki-trait-chip">${UI.escape(t.trim())}</span>`).join('')
+      ? rasse.temperament.split(',').map(t => `<span class="wiki-trait-chip">${_esc(t.trim())}</span>`).join('')
       : '';
 
     const _dogSvgLg = _DOG_SILHOUETTE.replace('width="48" height="48"', 'width="56" height="56"');
@@ -743,18 +743,18 @@ window.Page_wiki = (() => {
     const photoHtml = allFotos.length
       ? `<div class="wiki-gallery-wrap">
            <img class="wiki-detail-photo wiki-gallery-main" id="wiki-main-photo"
-                src="${UI.escape(allFotos[0].foto_url)}" alt="${UI.escape(rasse.name)}"
+                src="${_esc(allFotos[0].foto_url)}" alt="${_esc(rasse.name)}"
                 onerror="this.style.display='none';document.getElementById('wiki-photo-fallback').style.display='flex'">
-           <div id="wiki-photo-fallback" class="wiki-detail-photo-placeholder hidden">${_dogSvgLg}<span>Kein Foto verfügbar</span></div>
+           <div id="wiki-photo-fallback" class="wiki-detail-photo-placeholder" style="display:none">${_dogSvgLg}<span>Kein Foto verfügbar</span></div>
            ${allFotos.length > 1 ? `
            <div class="wiki-gallery-strip" id="wiki-gallery-strip">
              ${allFotos.map((f, i) => `
                <button class="wiki-gallery-thumb${i === 0 ? ' active' : ''}" data-idx="${i}"
                        aria-label="Foto ${i + 1}">
-                 <img src="${UI.escape(f.foto_url.startsWith('/media/') ? f.foto_url.replace(/\.(jpe?g|png|gif|webp)$/i,'_preview.webp') : f.foto_url)}"
+                 <img src="${_esc(f.foto_url.startsWith('/media/') ? f.foto_url.replace(/\.(jpe?g|png|gif|webp)$/i,'_preview.webp') : f.foto_url)}"
                       alt="" loading="lazy"
-                      onerror="if(this.src.includes('_preview')){this.src='${UI.escape(f.foto_url)}'}else{this.style.display='none'}">
-                 ${f.user_name ? `<span class="wiki-gallery-thumb-label">von ${UI.escape(f.user_name)}</span>` : ''}
+                      onerror="if(this.src.includes('_preview')){this.src='${_esc(f.foto_url)}'}else{this.style.display='none'}">
+                 ${f.user_name ? `<span class="wiki-gallery-thumb-label">von ${_esc(f.user_name)}</span>` : ''}
                </button>`).join('')}
            </div>` : ''}
            <button class="wiki-gallery-expand" id="wiki-gallery-expand" aria-label="Vollbild">
@@ -771,9 +771,9 @@ window.Page_wiki = (() => {
       <div class="wiki-detail-hero" style="text-align:center;margin-bottom:var(--space-4)">
         ${photoHtml}
         ${userFotosHtml}
-        <h1 style="font-size:var(--text-xl);font-weight:var(--weight-bold);margin:var(--space-2) 0 var(--space-1)">${UI.escape(rasse.name)}</h1>
-        ${rasse.herkunft ? `<div class="text-sm-secondary">${UI.icon('map-pin')} ${UI.escape(rasse.herkunft)}</div>` : ''}
-        ${rasse.gruppe   ? `<div style="font-size:var(--text-sm);color:var(--c-text-muted);margin-top:2px">${UI.escape(rasse.gruppe)}</div>` : ''}
+        <h1 style="font-size:var(--text-xl);font-weight:var(--weight-bold);margin:var(--space-2) 0 var(--space-1)">${_esc(rasse.name)}</h1>
+        ${rasse.herkunft ? `<div style="font-size:var(--text-sm);color:var(--c-text-secondary)">${UI.icon('map-pin')} ${_esc(rasse.herkunft)}</div>` : ''}
+        ${rasse.gruppe   ? `<div style="font-size:var(--text-sm);color:var(--c-text-muted);margin-top:2px">${_esc(rasse.gruppe)}</div>` : ''}
       </div>
 
       ${/* 2. Charakter-Badges */ chips ? `
@@ -785,11 +785,11 @@ window.Page_wiki = (() => {
       ${/* 3. Beschreibung */ rasse.beschreibung ? `
       <div class="wiki-detail-section">
         <div class="wiki-detail-label">Beschreibung</div>
-        <p style="line-height:1.6;color:var(--c-text)">${UI.escape(rasse.beschreibung)}</p>
+        <p style="line-height:1.6;color:var(--c-text)">${_esc(rasse.beschreibung)}</p>
       </div>` : (rasse.bred_for ? `
       <div class="wiki-detail-section">
         <div class="wiki-detail-label">Ursprüngliche Aufgabe</div>
-        <p style="line-height:1.6;color:var(--c-text)">${UI.escape(rasse.bred_for)}</p>
+        <p style="line-height:1.6;color:var(--c-text)">${_esc(rasse.bred_for)}</p>
       </div>` : '')}
 
       ${/* 4. Steckbrief */ _renderSteckbriefGrid(rasse)}
@@ -797,7 +797,7 @@ window.Page_wiki = (() => {
       ${/* 5. Vorkommen */ rasse.vorkommen_de ? `
       <div class="wiki-detail-section">
         <div class="wiki-detail-label">Vorkommen in Deutschland</div>
-        <p style="line-height:1.6;color:var(--c-text)">${UI.escape(rasse.vorkommen_de)}</p>
+        <p style="line-height:1.6;color:var(--c-text)">${_esc(rasse.vorkommen_de)}</p>
       </div>` : ''}
 
       ${/* 6. Interesse — wird async befüllt */ `
@@ -822,20 +822,20 @@ window.Page_wiki = (() => {
         ${berichteHtml}
       </div>
       ${_appState.user
-        ? `<button class="btn btn-secondary w-full" id="wiki-bericht-add-btn" class="mt-3">+ Eigenen Bericht hinzufügen</button>`
+        ? `<button class="btn btn-secondary w-full" id="wiki-bericht-add-btn" style="margin-top:var(--space-3)">+ Eigenen Bericht hinzufügen</button>`
         : `<p style="color:var(--c-text-secondary);font-size:var(--text-sm);margin-top:var(--space-3)">
-             <a href="#settings" class="text-primary">Anmelden</a>, um einen Bericht zu schreiben.
+             <a href="#settings" style="color:var(--c-primary)">Anmelden</a>, um einen Bericht zu schreiben.
            </p>`
       }
       ${_appState.user ? `
         <div style="margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--c-border-light)">
-          <button class="btn btn-ghost w-full" id="wiki-foto-submit-btn" class="text-sm">
+          <button class="btn btn-ghost w-full" id="wiki-foto-submit-btn" style="font-size:var(--text-sm)">
             ${UI.icon('camera')} ${rasse.foto_url ? 'Besseres Foto vorschlagen' : 'Foto hinzufügen'}
           </button>
         </div>` : ''}`}
     `;
 
-    UI.modal.open({ title: UI.escape(rasse.name), body });
+    UI.modal.open({ title: _esc(rasse.name), body });
 
     // Async: load stats + züchter in parallel
     Promise.all([_fetchStats(slug), _fetchZuchter(slug)]).then(([stats, zuchter]) => {
@@ -936,7 +936,7 @@ window.Page_wiki = (() => {
       </p>
       <form id="wiki-foto-form" autocomplete="off">
         <div class="form-group">
-          <label class="form-label">Foto von <strong>${UI.escape(rasseName)}</strong></label>
+          <label class="form-label">Foto von <strong>${_esc(rasseName)}</strong></label>
           <input class="form-control" type="file" id="wiki-foto-input"
                  accept="image/jpeg,image/png,image/webp" required>
           <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:4px">
@@ -1030,14 +1030,14 @@ window.Page_wiki = (() => {
     return berichte.map(b => `
       <div class="wiki-bericht-item" data-id="${b.id}">
         <div class="wiki-bericht-header">
-          <span class="wiki-bericht-autor">${UI.escape(b.autor)}</span>
+          <span class="wiki-bericht-autor">${_esc(b.autor)}</span>
           <span class="wiki-bericht-date">${_formatDate(b.created_at)}</span>
           ${_appState.user && _appState.user.name === b.autor
-            ? `<button class="btn btn-danger btn-xs wiki-bericht-del" data-id="${b.id}" data-slug="${UI.escape(slug)}" style="margin-left:auto;padding:2px 8px;font-size:0.7rem">Löschen</button>`
+            ? `<button class="btn btn-danger btn-xs wiki-bericht-del" data-id="${b.id}" data-slug="${_esc(slug)}" style="margin-left:auto;padding:2px 8px;font-size:0.7rem">Löschen</button>`
             : ''}
         </div>
-        <div class="wiki-bericht-titel">${UI.escape(b.titel)}</div>
-        <p class="wiki-bericht-text">${UI.escape(b.text)}</p>
+        <div class="wiki-bericht-titel">${_esc(b.titel)}</div>
+        <p class="wiki-bericht-text">${_esc(b.text)}</p>
       </div>
     `).join('');
   }
@@ -1047,7 +1047,7 @@ window.Page_wiki = (() => {
       <form id="wiki-bericht-form" autocomplete="off">
         <div class="form-group">
           <label class="form-label">Rasse</label>
-          <input class="form-control" type="text" value="${UI.escape(rasseName)}" disabled>
+          <input class="form-control" type="text" value="${_esc(rasseName)}" disabled>
         </div>
         <div class="form-group">
           <label class="form-label">Titel</label>
@@ -1095,11 +1095,11 @@ window.Page_wiki = (() => {
       <div class="wiki-section" data-idx="${i}">
         <div class="wiki-section-header">
           <span class="wiki-section-icon">${UI.icon(s.icon)}</span>
-          <span class="wiki-section-titel">${UI.escape(s.titel)}</span>
+          <span class="wiki-section-titel">${_esc(s.titel)}</span>
           <span class="wiki-section-arrow">${UI.icon('caret-down')}</span>
         </div>
-        <div class="wiki-section-body hidden">
-          <p style="white-space:pre-wrap;line-height:1.6;color:var(--c-text)">${UI.escape(s.text)}</p>
+        <div class="wiki-section-body" style="display:none">
+          <p style="white-space:pre-wrap;line-height:1.6;color:var(--c-text)">${_esc(s.text)}</p>
         </div>
       </div>
     `).join('');
@@ -1126,13 +1126,13 @@ window.Page_wiki = (() => {
       <div class="wiki-section" data-idx="${i}">
         <div class="wiki-section-header">
           <span class="wiki-section-icon">${UI.icon('map-pin')}</span>
-          <span class="wiki-section-titel">${UI.escape(r.land)}</span>
+          <span class="wiki-section-titel">${_esc(r.land)}</span>
           <span class="wiki-section-arrow">${UI.icon('caret-down')}</span>
         </div>
-        <div class="wiki-section-body hidden">
-          <div class="wiki-recht-row"><span class="wiki-recht-label">Leinenpflicht</span><span>${UI.escape(r.leine)}</span></div>
-          <div class="wiki-recht-row"><span class="wiki-recht-label">Rasseliste</span><span>${UI.escape(r.rasse)}</span></div>
-          <div class="wiki-recht-row"><span class="wiki-recht-label">Hundesteuer</span><span>${UI.escape(r.steuer)}</span></div>
+        <div class="wiki-section-body" style="display:none">
+          <div class="wiki-recht-row"><span class="wiki-recht-label">Leinenpflicht</span><span>${_esc(r.leine)}</span></div>
+          <div class="wiki-recht-row"><span class="wiki-recht-label">Rasseliste</span><span>${_esc(r.rasse)}</span></div>
+          <div class="wiki-recht-row"><span class="wiki-recht-label">Hundesteuer</span><span>${_esc(r.steuer)}</span></div>
         </div>
       </div>
     `).join('');
@@ -1174,8 +1174,8 @@ window.Page_wiki = (() => {
 
     const optionsHtml = frage.optionen.map(o => `
       <button class="wiki-quiz-option${_quizAnswers[frage.key] === o.val ? ' selected' : ''}"
-              data-key="${UI.escape(frage.key)}" data-val="${UI.escape(o.val)}">
-        ${UI.escape(o.label)}
+              data-key="${_esc(frage.key)}" data-val="${_esc(o.val)}">
+        ${_esc(o.label)}
       </button>
     `).join('');
 
@@ -1185,7 +1185,7 @@ window.Page_wiki = (() => {
           <div class="wiki-quiz-progress" style="width:${progress}%"></div>
         </div>
         <p class="wiki-quiz-step-info">Frage ${_quizStep + 1} von ${QUIZ_FRAGEN.length}</p>
-        <p class="wiki-quiz-frage">${UI.escape(frage.frage)}</p>
+        <p class="wiki-quiz-frage">${_esc(frage.frage)}</p>
         <div class="wiki-quiz-options">${optionsHtml}</div>
         <div class="wiki-quiz-nav">
           ${_quizStep > 0
@@ -1225,24 +1225,24 @@ window.Page_wiki = (() => {
 
     const cardsHtml = data.results.map(r => {
       const photoHtml = r.foto_url
-        ? `<img class="wiki-quiz-result-photo" src="${UI.escape(r.foto_url)}" loading="lazy" alt="${UI.escape(r.name)}" onerror="this.style.display='none'">`
+        ? `<img class="wiki-quiz-result-photo" src="${_esc(r.foto_url)}" loading="lazy" alt="${_esc(r.name)}" onerror="this.style.display='none'">`
         : `<div class="wiki-quiz-result-photo-fallback">${UI.icon('dog')}</div>`;
       return `
         <div class="wiki-quiz-result-card">
           <div class="wiki-quiz-result-photo-wrap">${photoHtml}</div>
           <div class="wiki-quiz-result-card-body">
-            <div class="wiki-quiz-result-name">${UI.escape(r.name)}</div>
-            <div class="wiki-quiz-result-gruppe">${UI.escape(r.gruppe || '')}</div>
+            <div class="wiki-quiz-result-name">${_esc(r.name)}</div>
+            <div class="wiki-quiz-result-gruppe">${_esc(r.gruppe || '')}</div>
             <div class="wiki-breed-badges" style="margin:var(--space-2) 0">
-              <span class="wiki-badge-groesse wiki-badge-groesse--${UI.escape(r.groesse)}">${_groesseLabel(r.groesse)}</span>
-              <span class="wiki-badge-aktivitaet wiki-badge-aktivitaet--${UI.escape(r.aktivitaet)}">${_aktivLabel(r.aktivitaet)}</span>
+              <span class="wiki-badge-groesse wiki-badge-groesse--${_esc(r.groesse)}">${_groesseLabel(r.groesse)}</span>
+              <span class="wiki-badge-aktivitaet wiki-badge-aktivitaet--${_esc(r.aktivitaet)}">${_aktivLabel(r.aktivitaet)}</span>
             </div>
-            ${r.temperament ? `<p class="wiki-quiz-result-char">${UI.escape(r.temperament.split(',').slice(0,4).join(', '))}</p>` : ''}
+            ${r.temperament ? `<p class="wiki-quiz-result-char">${_esc(r.temperament.split(',').slice(0,4).join(', '))}</p>` : ''}
             <div class="wiki-fit-row" style="font-size:var(--text-xs);margin-top:var(--space-1)">
               <span>${UI.icon('house-line')} ${r.wohnung_geeignet ? 'Wohnung' : 'Haus'}</span>
               <span>${UI.icon('users')} ${r.kinder_geeignet ? 'Kinderfreundlich' : 'Erfahrung nötig'}</span>
             </div>
-            <button class="btn btn-secondary btn-sm wiki-quiz-mehr" data-slug="${UI.escape(r.slug)}" class="mt-2">Mehr erfahren</button>
+            <button class="btn btn-secondary btn-sm wiki-quiz-mehr" data-slug="${_esc(r.slug)}" style="margin-top:var(--space-2)">Mehr erfahren</button>
           </div>
         </div>
       `;
@@ -1251,11 +1251,11 @@ window.Page_wiki = (() => {
     el.innerHTML = `
       <div class="wiki-quiz-wrap">
         <div class="wiki-quiz-progress-bar">
-          <div class="wiki-quiz-progress w-full"></div>
+          <div class="wiki-quiz-progress" style="width:100%"></div>
         </div>
         <h3 style="margin:var(--space-4) 0 var(--space-2);text-align:center">Deine Top 3 Rassen</h3>
         <div class="wiki-quiz-results">${cardsHtml}</div>
-        <button class="btn btn-secondary w-full" id="quiz-restart" class="mt-4">Quiz neu starten</button>
+        <button class="btn btn-secondary w-full" id="quiz-restart" style="margin-top:var(--space-4)">Quiz neu starten</button>
       </div>
     `;
 
@@ -1334,7 +1334,14 @@ window.Page_wiki = (() => {
       return new Date(iso).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' });
     } catch { return iso; }
   }
-// ----------------------------------------------------------
+
+  function _esc(str) {
+    if (!str) return '';
+    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;')
+                      .replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+  }
+
+  // ----------------------------------------------------------
   // RASSEN-ERKENNUNG PER KI (Wiki-Tab)
   // ----------------------------------------------------------
   function _bindWikiRasseErkennung(el) {
@@ -1394,11 +1401,11 @@ window.Page_wiki = (() => {
         title: 'Kein Hund erkannt',
         body: `<div style="text-align:center;padding:var(--space-6) var(--space-2)">
           <div style="font-size:3rem;margin-bottom:var(--space-3)">🐾</div>
-          <p class="text-secondary">
+          <p style="color:var(--c-text-secondary)">
             Auf diesem Foto konnte kein Hund erkannt werden.<br>
             Bitte lade ein deutlicheres Foto hoch.
           </p>
-          ${data.hinweis ? `<p style="font-size:var(--text-sm);color:var(--c-text-muted);margin-top:var(--space-3)">${UI.escape(data.hinweis)}</p>` : ''}
+          ${data.hinweis ? `<p style="font-size:var(--text-sm);color:var(--c-text-muted);margin-top:var(--space-3)">${_esc(data.hinweis)}</p>` : ''}
         </div>`,
         footer: `<button class="btn btn-secondary" onclick="UI.modal.close()">Schließen</button>`,
       });
@@ -1411,18 +1418,18 @@ window.Page_wiki = (() => {
       return `
         <div class="rasse-result-card${isTop ? ' rasse-result-card--top' : ''}">
           <div style="display:flex;align-items:center;justify-content:space-between">
-            <div class="rasse-result-name">${isTop ? '🐕 ' : ''}${UI.escape(r.name)}</div>
+            <div class="rasse-result-name">${isTop ? '🐕 ' : ''}${_esc(r.name)}</div>
             <span class="rasse-result-pct${isTop ? '' : ' rasse-result-pct--dim'}">${r.sicherheit}%</span>
           </div>
           <div class="rasse-result-bar-wrap">
             <div class="rasse-result-bar${isTop ? '' : ' rasse-result-bar--dim'}"
                  style="width:${r.sicherheit}%"></div>
           </div>
-          ${r.beschreibung ? `<div class="rasse-result-desc">${UI.escape(r.beschreibung)}</div>` : ''}
+          ${r.beschreibung ? `<div class="rasse-result-desc">${_esc(r.beschreibung)}</div>` : ''}
           ${r.wiki_slug ? `
-          <div class="mt-3">
+          <div style="margin-top:var(--space-3)">
             <button class="btn btn-${isTop ? 'primary' : 'secondary'} btn-sm w-full"
-                    data-action="wiki" data-slug="${UI.escape(r.wiki_slug)}">
+                    data-action="wiki" data-slug="${_esc(r.wiki_slug)}">
               Im Wiki nachschlagen
             </button>
           </div>` : ''}
@@ -1436,7 +1443,7 @@ window.Page_wiki = (() => {
         <div style="padding-bottom:var(--space-2)">
           ${data.hinweis ? `<div style="background:var(--c-surface-2);border-radius:var(--radius-md);
               padding:var(--space-3);margin-bottom:var(--space-3);font-size:var(--text-sm);
-              color:var(--c-text-secondary)">ℹ️ ${UI.escape(data.hinweis)}</div>` : ''}
+              color:var(--c-text-secondary)">ℹ️ ${_esc(data.hinweis)}</div>` : ''}
           ${cardsHtml}
           <p style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:var(--space-2);
                     text-align:center">
diff --git a/backend/static/js/pages/wurfboerse.js b/backend/static/js/pages/wurfboerse.js
index 501632c..c84995f 100644
--- a/backend/static/js/pages/wurfboerse.js
+++ b/backend/static/js/pages/wurfboerse.js
@@ -12,6 +12,10 @@ window.Page_wurfboerse = (() => {
   // ----------------------------------------------------------
   // Hilfsfunktionen
   // ----------------------------------------------------------
+  function _esc(s) {
+    return UI.escape ? UI.escape(s || '') : (s || '').replace(/[&<>"']/g, c =>
+      ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+  }
 
   function _fmtDate(iso) {
     if (!iso) return '—';
@@ -153,8 +157,8 @@ window.Page_wurfboerse = (() => {
     el.innerHTML = `
       <div style="text-align:center;padding:var(--space-10) var(--space-4)">
         <div style="font-size:3rem;margin-bottom:var(--space-3)">${UI.icon('dog')}</div>
-        <h3 style="margin:0 0 var(--space-2)">${UI.escape(title)}</h3>
-        <p style="color:var(--c-text-secondary);margin:0">${UI.escape(text)}</p>
+        <h3 style="margin:0 0 var(--space-2)">${_esc(title)}</h3>
+        <p style="color:var(--c-text-secondary);margin:0">${_esc(text)}</p>
       </div>`;
   }
 
@@ -164,13 +168,13 @@ window.Page_wurfboerse = (() => {
   function _cardHTML(b) {
     // Züchter-Kopfzeile
     const zuechterName  = b.zuechter_name || b.zwingername || '—';
-    const zwingername   = b.zwingername   ? ` (${UI.escape(b.zwingername)})` : '';
-    const stadtLine     = b.stadt         ? ` · ${UI.escape(b.stadt)}` : '';
+    const zwingername   = b.zwingername   ? ` (${_esc(b.zwingername)})` : '';
+    const stadtLine     = b.stadt         ? ` · ${_esc(b.stadt)}` : '';
 
     // Elterntiere
     const elternParts = [];
-    if (b.vater_name)  elternParts.push(UI.escape(b.vater_name));
-    if (b.mutter_name) elternParts.push(UI.escape(b.mutter_name));
+    if (b.vater_name)  elternParts.push(_esc(b.vater_name));
+    if (b.mutter_name) elternParts.push(_esc(b.mutter_name));
     const elternLine = elternParts.length === 2
       ? `<div class="wb-card-eltern">${UI.icon('gender-male')} ${elternParts[0]} × ${UI.icon('gender-female')} ${elternParts[1]}</div>`
       : elternParts.length === 1
@@ -190,34 +194,34 @@ window.Page_wurfboerse = (() => {
     if (b.welpen_gesamt != null || b.welpen_verfuegbar != null) {
       const gesamt    = b.welpen_gesamt     != null ? b.welpen_gesamt     : '?';
       const verfuegb  = b.welpen_verfuegbar != null ? b.welpen_verfuegbar : '?';
-      welpenLine = `<div class="wb-card-welpen">${UI.icon('paw-print')} Welpen verfügbar: ${UI.escape(String(verfuegb))} von ${UI.escape(String(gesamt))}</div>`;
+      welpenLine = `<div class="wb-card-welpen">${UI.icon('paw-print')} Welpen verfügbar: ${_esc(String(verfuegb))} von ${_esc(String(gesamt))}</div>`;
     }
 
     // Preis
     const preisLine = b.preis_spanne
-      ? `<div class="wb-card-preis">${UI.icon('currency-eur')} Preis: ${UI.escape(b.preis_spanne)} €</div>`
+      ? `<div class="wb-card-preis">${UI.icon('currency-eur')} Preis: ${_esc(b.preis_spanne)} €</div>`
       : '';
 
     // Gesundheitstests
     const gesundheitLine = b.gesundheitstests
-      ? `<div class="wb-card-gesundheit">${UI.icon('heart')} ${UI.escape(b.gesundheitstests)}</div>`
+      ? `<div class="wb-card-gesundheit">${UI.icon('heart')} ${_esc(b.gesundheitstests)}</div>`
       : '';
 
     // Beschreibung (max. 150 Zeichen)
     const beschreibungLine = b.beschreibung
-      ? `<div class="wb-card-beschreibung">${UI.escape(_truncate(b.beschreibung, 150))}</div>`
+      ? `<div class="wb-card-beschreibung">${_esc(_truncate(b.beschreibung, 150))}</div>`
       : '';
 
     return `
       <div class="wb-card">
         <div class="wb-card-header">
           <div class="wb-card-zuechter">
-            ${UI.escape(zuechterName)}${zwingername}${stadtLine}
+            ${_esc(zuechterName)}${zwingername}${stadtLine}
           </div>
           ${_statusBadge(b.status)}
         </div>
 
-        ${b.rasse_text ? `<div class="wb-card-rasse">${UI.icon('dog')} ${UI.escape(b.rasse_text)}</div>` : ''}
+        ${b.rasse_text ? `<div class="wb-card-rasse">${UI.icon('dog')} ${_esc(b.rasse_text)}</div>` : ''}
 
         <div class="wb-card-details">
           ${elternLine}
@@ -231,7 +235,7 @@ window.Page_wurfboerse = (() => {
         <div class="wb-card-footer">
           <button
             class="btn btn-secondary btn-sm wb-profile-btn"
-            data-zwingername="${UI.escape(b.zwingername || '')}"
+            data-zwingername="${_esc(b.zwingername || '')}"
           >
             ${UI.icon('user')} Profil ansehen
           </button>
diff --git a/backend/static/js/pages/zucht-profil.js b/backend/static/js/pages/zucht-profil.js
index b46e1a2..a256049 100644
--- a/backend/static/js/pages/zucht-profil.js
+++ b/backend/static/js/pages/zucht-profil.js
@@ -15,6 +15,15 @@ window.Page_zucht_profil = (() => {
   // ----------------------------------------------------------
   // Hilfsfunktionen
   // ----------------------------------------------------------
+  function _esc(s) {
+    if (!s) return '';
+    return String(s)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;');
+  }
 
   function _fmtDate(iso) {
     if (!iso) return '—';
@@ -47,7 +56,7 @@ window.Page_zucht_profil = (() => {
       if (el === 'affected') color = '#EF4444';
     }
 
-    return `<span class="zp-badge" style="background:${color}">${UI.escape(ergebnis || '—')}</span>`;
+    return `<span class="zp-badge" style="background:${color}">${_esc(ergebnis || '—')}</span>`;
   }
 
   function _geneticBadge(ergebnis) {
@@ -56,7 +65,7 @@ window.Page_zucht_profil = (() => {
     if (e === 'clear')    color = '#22C55E';
     if (e === 'carrier')  color = '#F59E0B';
     if (e === 'affected') color = '#EF4444';
-    return `<span class="zp-badge" style="background:${color}">${UI.escape(ergebnis || '—')}</span>`;
+    return `<span class="zp-badge" style="background:${color}">${_esc(ergebnis || '—')}</span>`;
   }
 
   function _titleTypBadge(typ) {
@@ -69,7 +78,7 @@ window.Page_zucht_profil = (() => {
       zucht:       '#10B981',
     };
     const color = colors[t] || '#6B7280';
-    return `<span class="zp-badge" style="background:${color}">${UI.escape(typ || '—')}</span>`;
+    return `<span class="zp-badge" style="background:${color}">${_esc(typ || '—')}</span>`;
   }
 
   // ----------------------------------------------------------
@@ -84,7 +93,7 @@ window.Page_zucht_profil = (() => {
       _container.innerHTML = `
         <div style="text-align:center;padding:var(--space-10) var(--space-4)">
           <div style="font-size:3rem;margin-bottom:var(--space-3)">${UI.icon('warning')}</div>
-          <p class="text-secondary">Kein Hund angegeben.</p>
+          <p style="color:var(--c-text-secondary)">Kein Hund angegeben.</p>
         </div>`;
       return;
     }
@@ -117,7 +126,7 @@ window.Page_zucht_profil = (() => {
       _container.innerHTML = `
         <div style="text-align:center;padding:var(--space-10) var(--space-4)">
           <div style="font-size:3rem;margin-bottom:var(--space-3)">${UI.icon('warning')}</div>
-          <p class="text-danger">${UI.escape(err.message || 'Fehler beim Laden.')}</p>
+          <p style="color:var(--c-danger)">${_esc(err.message || 'Fehler beim Laden.')}</p>
           <button class="btn btn-secondary" onclick="history.back()">Zurück</button>
         </div>`;
     }
@@ -129,7 +138,7 @@ window.Page_zucht_profil = (() => {
   function _renderSkeleton() {
     _container.innerHTML = `
       <div class="zp-layout">
-        <button class="btn btn-ghost btn-sm zp-back-btn mb-4">
+        <button class="btn btn-ghost btn-sm zp-back-btn" style="margin-bottom:var(--space-4)">
           ${UI.icon('arrow-left')} Zurück zur Zuchtkartei
         </button>
         ${UI.skeleton(6)}
@@ -231,21 +240,21 @@ window.Page_zucht_profil = (() => {
                             h.geschlecht === 'weiblich'  ? 'Hündin' : null;
 
     const metaItems = [
-      h.rasse             ? `${UI.icon('paw-print')} ${UI.escape(h.rasse)}`            : null,
+      h.rasse             ? `${UI.icon('paw-print')} ${_esc(h.rasse)}`            : null,
       geschlechtLabel     ? `${gIcon} ${geschlechtLabel}`                          : null,
       geburtsjahrLabel    ? `${UI.icon('calendar-dots')} ${geburtsjahrLabel}`     : null,
     ].filter(Boolean);
 
     const identItems = [
-      h.chip_nr         ? `${UI.icon('barcode')} Chip: ${UI.escape(h.chip_nr)}`                     : null,
-      h.zuchtbuchnummer ? `${UI.icon('book-open')} ZB-Nr.: ${UI.escape(h.zuchtbuchnummer)}`         : null,
-      h.taetowier_nr    ? `${UI.icon('pencil-simple')} Tätowierung: ${UI.escape(h.taetowier_nr)}`   : null,
-      h.farbe           ? `${UI.icon('palette')} ${UI.escape(h.farbe)}`                             : null,
+      h.chip_nr         ? `${UI.icon('barcode')} Chip: ${_esc(h.chip_nr)}`                     : null,
+      h.zuchtbuchnummer ? `${UI.icon('book-open')} ZB-Nr.: ${_esc(h.zuchtbuchnummer)}`         : null,
+      h.taetowier_nr    ? `${UI.icon('pencil-simple')} Tätowierung: ${_esc(h.taetowier_nr)}`   : null,
+      h.farbe           ? `${UI.icon('palette')} ${_esc(h.farbe)}`                             : null,
     ].filter(Boolean);
 
     const elternItems = [
-      h.vater_name  ? `Vater: ${UI.escape(h.vater_name)}`  : null,
-      h.mutter_name ? `Mutter: ${UI.escape(h.mutter_name)}` : null,
+      h.vater_name  ? `Vater: ${_esc(h.vater_name)}`  : null,
+      h.mutter_name ? `Mutter: ${_esc(h.mutter_name)}` : null,
     ].filter(Boolean);
 
     return `
@@ -253,8 +262,8 @@ window.Page_zucht_profil = (() => {
         <div class="zp-header-icon">${gIcon}</div>
         <div class="zp-header-body">
           <h2 class="zp-header-name">
-            ${UI.escape(h.name)}
-            ${h.rufname ? `<span class="zp-header-rufname">(${UI.escape(h.rufname)})</span>` : ''}
+            ${_esc(h.name)}
+            ${h.rufname ? `<span class="zp-header-rufname">(${_esc(h.rufname)})</span>` : ''}
           </h2>
           ${metaItems.length ? `
             <div class="zp-header-meta">
@@ -265,10 +274,10 @@ window.Page_zucht_profil = (() => {
               ${identItems.map(m => `<span>${m}</span>`).join('')}
             </div>` : ''}
           ${elternItems.length ? `
-            <div class="zp-header-meta text-xs-secondary">
+            <div class="zp-header-meta" style="font-size:var(--text-xs);color:var(--c-text-secondary)">
               ${elternItems.join(' &nbsp;·&nbsp; ')}
             </div>` : ''}
-          ${h.notiz ? `<div class="zp-header-notiz">${UI.escape(h.notiz)}</div>` : ''}
+          ${h.notiz ? `<div class="zp-header-notiz">${_esc(h.notiz)}</div>` : ''}
         </div>
       </div>`;
   }
@@ -341,18 +350,18 @@ window.Page_zucht_profil = (() => {
                   box-sizing:border-box;">
         <div style="font-weight:600;font-size:var(--text-sm);
                     white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
-          ${gIcon} ${UI.escape(node.name)}
+          ${gIcon} ${_esc(node.name)}
         </div>
         ${node.rufname
           ? `<div style="font-size:var(--text-xs);opacity:.75;white-space:nowrap;
-                         overflow:hidden;text-overflow:ellipsis;">${UI.escape(node.rufname)}</div>`
+                         overflow:hidden;text-overflow:ellipsis;">${_esc(node.rufname)}</div>`
           : ''}
         ${dob
           ? `<div style="font-size:var(--text-xs);opacity:.65;">${dob}</div>`
           : ''}
         ${node.zuchtbuchnummer
           ? `<div style="font-size:var(--text-xs);opacity:.55;white-space:nowrap;
-                         overflow:hidden;text-overflow:ellipsis;">${UI.escape(node.zuchtbuchnummer)}</div>`
+                         overflow:hidden;text-overflow:ellipsis;">${_esc(node.zuchtbuchnummer)}</div>`
           : ''}
       </div>`;
   }
@@ -368,12 +377,12 @@ window.Page_zucht_profil = (() => {
     const rows = tests.map(t => `
       <tr>
         <td class="zp-td">
-          <span style="font-weight:var(--weight-medium)">${UI.escape(t.test_typ || 'Sonstiges')}</span>
-          ${t.test_name ? `<br><span class="text-xs-secondary">${UI.escape(t.test_name)}</span>` : ''}
+          <span style="font-weight:var(--weight-medium)">${_esc(t.test_typ || 'Sonstiges')}</span>
+          ${t.test_name ? `<br><span style="font-size:var(--text-xs);color:var(--c-text-secondary)">${_esc(t.test_name)}</span>` : ''}
         </td>
         <td class="zp-td">${_healthBadge(t.test_typ || '', t.ergebnis)}</td>
         <td class="zp-td zp-td-muted">${t.untersuch_am ? _fmtDate(t.untersuch_am) : '—'}</td>
-        <td class="zp-td zp-td-muted">${t.labor ? UI.escape(t.labor) : '—'}</td>
+        <td class="zp-td zp-td-muted">${t.labor ? _esc(t.labor) : '—'}</td>
       </tr>`).join('');
 
     return `
@@ -403,11 +412,11 @@ window.Page_zucht_profil = (() => {
     const rows = tests.map(t => `
       <tr>
         <td class="zp-td">
-          <span style="font-weight:var(--weight-medium)">${UI.escape(t.marker_name || '—')}</span>
+          <span style="font-weight:var(--weight-medium)">${_esc(t.marker_name || '—')}</span>
         </td>
         <td class="zp-td">${_geneticBadge(t.ergebnis_klasse)}</td>
         <td class="zp-td zp-td-muted">${t.getestet_am ? _fmtDate(t.getestet_am) : '—'}</td>
-        <td class="zp-td zp-td-muted">${t.labor ? UI.escape(t.labor) : '—'}</td>
+        <td class="zp-td zp-td-muted">${t.labor ? _esc(t.labor) : '—'}</td>
       </tr>`).join('');
 
     return `
@@ -446,15 +455,15 @@ window.Page_zucht_profil = (() => {
         <div class="zp-title-badges">
           ${_titleTypBadge(t.titel_typ)}
           ${t.formwert
-            ? `<span class="zp-badge" style="background:#3B82F6">${UI.escape(t.formwert)}</span>`
+            ? `<span class="zp-badge" style="background:#3B82F6">${_esc(t.formwert)}</span>`
             : ''}
         </div>
-        <div class="zp-title-name">${UI.escape(t.titel_name || '—')}</div>
+        <div class="zp-title-name">${_esc(t.titel_name || '—')}</div>
         <div class="zp-title-meta">
           ${t.verliehen_am ? `${UI.icon('calendar-dots')} ${_fmtDate(t.verliehen_am)}` : ''}
-          ${t.ort          ? `&nbsp;·&nbsp; ${UI.icon('map-pin')} ${UI.escape(t.ort)}`       : ''}
-          ${t.richter      ? `&nbsp;·&nbsp; ${UI.icon('user')} ${UI.escape(t.richter)}`      : ''}
-          ${t.ausstellung  ? `<br><span class="text-xs">${UI.icon('ticket')} ${UI.escape(t.ausstellung)}</span>` : ''}
+          ${t.ort          ? `&nbsp;·&nbsp; ${UI.icon('map-pin')} ${_esc(t.ort)}`       : ''}
+          ${t.richter      ? `&nbsp;·&nbsp; ${UI.icon('user')} ${_esc(t.richter)}`      : ''}
+          ${t.ausstellung  ? `<br><span style="font-size:var(--text-xs)">${UI.icon('ticket')} ${_esc(t.ausstellung)}</span>` : ''}
         </div>
       </div>`).join('');
 
diff --git a/backend/static/js/pages/zuchthunde.js b/backend/static/js/pages/zuchthunde.js
index 384d2ba..9798b02 100644
--- a/backend/static/js/pages/zuchthunde.js
+++ b/backend/static/js/pages/zuchthunde.js
@@ -17,6 +17,10 @@ window.Page_zuchthunde = (() => {
   // ----------------------------------------------------------
   // Hilfsfunktionen
   // ----------------------------------------------------------
+  function _esc(s) {
+    return UI.escape ? UI.escape(s || '') : (s || '').replace(/[&<>"']/g, c =>
+      ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+  }
 
   function _fmtDate(iso) {
     if (!iso) return '—';
@@ -50,7 +54,7 @@ window.Page_zuchthunde = (() => {
       else if (e === '3' || e === 'ED 3')         color = '#EF4444';
     }
 
-    return `<span class="zh-badge" style="background:${color}">${UI.escape(ergebnis || '—')}</span>`;
+    return `<span class="zh-badge" style="background:${color}">${_esc(ergebnis || '—')}</span>`;
   }
 
   function _geneticBadge(ergebnis) {
@@ -59,7 +63,7 @@ window.Page_zuchthunde = (() => {
     if (e === 'clear')    color = '#22C55E';
     if (e === 'carrier')  color = '#EAB308';
     if (e === 'affected') color = '#EF4444';
-    return `<span class="zh-badge" style="background:${color}">${UI.escape(ergebnis || '—')}</span>`;
+    return `<span class="zh-badge" style="background:${color}">${_esc(ergebnis || '—')}</span>`;
   }
 
   // ----------------------------------------------------------
@@ -99,7 +103,7 @@ window.Page_zuchthunde = (() => {
     const zwinger = _breederInfo?.zwingername || 'Mein Zwinger';
     const logoUrl = _breederInfo?.logo_url   || null;
     const logoHtml = logoUrl
-      ? `<img src="${UI.escape(logoUrl)}" alt="Logo"
+      ? `<img src="${_esc(logoUrl)}" alt="Logo"
               style="width:48px;height:48px;border-radius:50%;object-fit:cover;
                      border:2px solid rgba(196,132,58,.5);flex-shrink:0"
               onerror="this.style.display='none'">`
@@ -116,15 +120,15 @@ window.Page_zuchthunde = (() => {
                   padding:var(--space-3) var(--space-4);
                   display:flex;align-items:center;gap:var(--space-3)">
         ${logoHtml}
-        <div class="flex-1-min">
+        <div style="flex:1;min-width:0">
           <h2 style="margin:0 0 2px;font-size:var(--text-lg);font-weight:700;
                      color:var(--c-text);white-space:nowrap;overflow:hidden;
-                     text-overflow:ellipsis;line-height:1.2">${UI.escape(zwinger)}</h2>
+                     text-overflow:ellipsis;line-height:1.2">${_esc(zwinger)}</h2>
           <div style="display:flex;align-items:center;gap:var(--space-2)">
             <svg style="width:11px;height:11px;color:var(--c-primary);flex-shrink:0" viewBox="0 0 256 256">
               <use href="/icons/phosphor.svg#lock-key"></use>
             </svg>
-            <span class="text-xs-secondary">Privater Bereich · Nur du siehst das</span>
+            <span style="font-size:var(--text-xs);color:var(--c-text-secondary)">Privater Bereich · Nur du siehst das</span>
           </div>
         </div>
       </div>`;
@@ -204,7 +208,7 @@ window.Page_zuchthunde = (() => {
       const el = document.getElementById('zh-list');
       if (el) el.innerHTML = `
         <p style="color:var(--c-danger);text-align:center;padding:var(--space-8)">
-          ${UI.escape(err.message || 'Fehler beim Laden.')}
+          ${_esc(err.message || 'Fehler beim Laden.')}
         </p>`;
     }
   }
@@ -224,12 +228,12 @@ window.Page_zuchthunde = (() => {
 
     if (!filtered.length) {
       el.innerHTML = _query
-        ? `<p style="color:var(--c-text-secondary);text-align:center;padding:var(--space-6)">Keine Treffer für „${UI.escape(_query)}".</p>`
+        ? `<p style="color:var(--c-text-secondary);text-align:center;padding:var(--space-6)">Keine Treffer für „${_esc(_query)}".</p>`
         : `
           <div style="text-align:center;padding:var(--space-10) var(--space-4)">
             <div style="font-size:3rem;margin-bottom:var(--space-3)">${UI.icon('dog')}</div>
-            <p class="text-secondary">Noch keine Hunde angelegt.</p>
-            <button class="btn btn-primary mt-4" id="zh-first-btn">
+            <p style="color:var(--c-text-secondary)">Noch keine Hunde angelegt.</p>
+            <button class="btn btn-primary" style="margin-top:var(--space-4)" id="zh-first-btn">
               ${UI.icon('plus')} Ersten Hund anlegen
             </button>
           </div>`;
@@ -295,12 +299,12 @@ window.Page_zuchthunde = (() => {
   // Hund-Card HTML
   // ----------------------------------------------------------
   function _hundCardHTML(h) {
-    const nameLabel   = h.name ? UI.escape(h.name) : '<em class="text-muted">Unbenannt</em>';
-    const rufname     = h.rufname ? ` (${UI.escape(h.rufname)})` : '';
+    const nameLabel   = h.name ? _esc(h.name) : '<em style="color:var(--c-text-muted)">Unbenannt</em>';
+    const rufname     = h.rufname ? ` (${_esc(h.rufname)})` : '';
     const geburtstag  = h.geburtsdatum ? _fmtDate(h.geburtsdatum) : null;
 
-    const vaterLabel  = h.vater_name   ? `Vater: ${UI.escape(h.vater_name)}`  : null;
-    const mutterLabel = h.mutter_name  ? `Mutter: ${UI.escape(h.mutter_name)}` : null;
+    const vaterLabel  = h.vater_name   ? `Vater: ${_esc(h.vater_name)}`  : null;
+    const mutterLabel = h.mutter_name  ? `Mutter: ${_esc(h.mutter_name)}` : null;
     const eltern      = [vaterLabel, mutterLabel].filter(Boolean).join(' &nbsp;·&nbsp; ');
 
     const pubLabel = h.is_public
@@ -310,19 +314,19 @@ window.Page_zuchthunde = (() => {
     return `
       <div class="zh-card" id="zh-card-${h.id}">
         <div class="zh-card-header">
-          <div class="flex-1-min">
+          <div style="flex:1;min-width:0">
             <div class="zh-card-title">
               ${_genderIcon(h.geschlecht)}
-              ${nameLabel}${UI.escape(rufname)}
+              ${nameLabel}${_esc(rufname)}
               ${pubLabel}
             </div>
             <div class="zh-card-meta">
-              ${h.rasse           ? `${UI.icon('paw-print')} ${UI.escape(h.rasse)}&nbsp;&nbsp;` : ''}
+              ${h.rasse           ? `${UI.icon('paw-print')} ${_esc(h.rasse)}&nbsp;&nbsp;` : ''}
               ${geburtstag        ? `${UI.icon('calendar-dots')} ${geburtstag}&nbsp;&nbsp;` : ''}
-              ${h.chip_nr         ? `${UI.icon('barcode')} ${UI.escape(h.chip_nr)}&nbsp;&nbsp;` : ''}
-              ${h.zuchtbuchnummer ? `${UI.icon('book-open')} ${UI.escape(h.zuchtbuchnummer)}&nbsp;&nbsp;` : ''}
+              ${h.chip_nr         ? `${UI.icon('barcode')} ${_esc(h.chip_nr)}&nbsp;&nbsp;` : ''}
+              ${h.zuchtbuchnummer ? `${UI.icon('book-open')} ${_esc(h.zuchtbuchnummer)}&nbsp;&nbsp;` : ''}
             </div>
-            ${eltern ? `<div class="zh-card-meta text-xs-secondary">${eltern}</div>` : ''}
+            ${eltern ? `<div class="zh-card-meta" style="font-size:var(--text-xs);color:var(--c-text-secondary)">${eltern}</div>` : ''}
           </div>
           <div class="zh-card-actions">
             <button class="btn btn-ghost btn-sm zh-pedigree-btn" data-id="${h.id}"
@@ -342,7 +346,7 @@ window.Page_zuchthunde = (() => {
               ${UI.icon('pencil-simple')}
             </button>
             <button class="btn btn-ghost btn-sm zh-delete-btn" data-id="${h.id}"
-                    title="Löschen" class="text-danger">
+                    title="Löschen" style="color:var(--c-danger)">
               ${UI.icon('trash')}
             </button>
           </div>
@@ -360,7 +364,7 @@ window.Page_zuchthunde = (() => {
           </button>
         </div>
 
-        <div class="zh-section-wrap" id="zh-section-${h.id}" class="hidden"></div>
+        <div class="zh-section-wrap" id="zh-section-${h.id}" style="display:none"></div>
       </div>`;
   }
 
@@ -412,7 +416,7 @@ window.Page_zuchthunde = (() => {
       const tests = await API.zuchthunde.healthTests(hundId);
       _renderHealthSection(hundId, wrap, tests);
     } catch (err) {
-      wrap.innerHTML = `<p style="color:var(--c-danger);font-size:var(--text-sm);padding:var(--space-2)">${UI.escape(err.message || 'Fehler.')}</p>`;
+      wrap.innerHTML = `<p style="color:var(--c-danger);font-size:var(--text-sm);padding:var(--space-2)">${_esc(err.message || 'Fehler.')}</p>`;
     }
   }
 
@@ -421,16 +425,16 @@ window.Page_zuchthunde = (() => {
       ? tests.map(t => `
           <div class="zh-detail-row">
             <div class="zh-detail-info">
-              <span class="zh-detail-label">${UI.escape(t.test_typ || 'Sonstiges')}</span>
-              ${t.test_name ? `<span style="color:var(--c-text-secondary);font-size:var(--text-xs)">${UI.escape(t.test_name)}</span>` : ''}
+              <span class="zh-detail-label">${_esc(t.test_typ || 'Sonstiges')}</span>
+              ${t.test_name ? `<span style="color:var(--c-text-secondary);font-size:var(--text-xs)">${_esc(t.test_name)}</span>` : ''}
               ${_healthBadge(t.test_typ || '', t.ergebnis)}
               ${t.untersuch_am ? `<span style="color:var(--c-text-muted);font-size:var(--text-xs)">${_fmtDate(t.untersuch_am)}</span>` : ''}
-              ${t.labor ? `<span style="color:var(--c-text-muted);font-size:var(--text-xs)">${UI.escape(t.labor)}</span>` : ''}
+              ${t.labor ? `<span style="color:var(--c-text-muted);font-size:var(--text-xs)">${_esc(t.labor)}</span>` : ''}
             </div>
             <button class="btn btn-ghost btn-xs zh-health-del-btn" data-tid="${t.id}" title="Löschen"
-                    class="text-danger">${UI.icon('trash')}</button>
+                    style="color:var(--c-danger)">${UI.icon('trash')}</button>
           </div>`).join('')
-      : `<p class="text-sm-muted">Noch keine Gesundheitstests eingetragen.</p>`;
+      : `<p style="color:var(--c-text-muted);font-size:var(--text-sm)">Noch keine Gesundheitstests eingetragen.</p>`;
 
     wrap.innerHTML = `
       <div class="zh-section-inner">
@@ -476,7 +480,7 @@ window.Page_zuchthunde = (() => {
       const tests = await API.zuchthunde.geneticTests(hundId);
       _renderGeneticSection(hundId, wrap, tests);
     } catch (err) {
-      wrap.innerHTML = `<p style="color:var(--c-danger);font-size:var(--text-sm);padding:var(--space-2)">${UI.escape(err.message || 'Fehler.')}</p>`;
+      wrap.innerHTML = `<p style="color:var(--c-danger);font-size:var(--text-sm);padding:var(--space-2)">${_esc(err.message || 'Fehler.')}</p>`;
     }
   }
 
@@ -485,15 +489,15 @@ window.Page_zuchthunde = (() => {
       ? tests.map(t => `
           <div class="zh-detail-row">
             <div class="zh-detail-info">
-              <span class="zh-detail-label">${UI.escape(t.marker_name || '—')}</span>
+              <span class="zh-detail-label">${_esc(t.marker_name || '—')}</span>
               ${_geneticBadge(t.ergebnis_klasse)}
               ${t.getestet_am ? `<span style="color:var(--c-text-muted);font-size:var(--text-xs)">${_fmtDate(t.getestet_am)}</span>` : ''}
-              ${t.labor ? `<span style="color:var(--c-text-muted);font-size:var(--text-xs)">${UI.escape(t.labor)}</span>` : ''}
+              ${t.labor ? `<span style="color:var(--c-text-muted);font-size:var(--text-xs)">${_esc(t.labor)}</span>` : ''}
             </div>
             <button class="btn btn-ghost btn-xs zh-genetic-del-btn" data-tid="${t.id}" title="Löschen"
-                    class="text-danger">${UI.icon('trash')}</button>
+                    style="color:var(--c-danger)">${UI.icon('trash')}</button>
           </div>`).join('')
-      : `<p class="text-sm-muted">Noch keine Gentests eingetragen.</p>`;
+      : `<p style="color:var(--c-text-muted);font-size:var(--text-sm)">Noch keine Gentests eingetragen.</p>`;
 
     wrap.innerHTML = `
       <div class="zh-section-inner">
@@ -539,7 +543,7 @@ window.Page_zuchthunde = (() => {
       const titles = await API.zuchthunde.titles(hundId);
       _renderTitlesSection(hundId, wrap, titles);
     } catch (err) {
-      wrap.innerHTML = `<p style="color:var(--c-danger);font-size:var(--text-sm);padding:var(--space-2)">${UI.escape(err.message || 'Fehler.')}</p>`;
+      wrap.innerHTML = `<p style="color:var(--c-danger);font-size:var(--text-sm);padding:var(--space-2)">${_esc(err.message || 'Fehler.')}</p>`;
     }
   }
 
@@ -548,17 +552,17 @@ window.Page_zuchthunde = (() => {
       ? titles.map(t => `
           <div class="zh-detail-row">
             <div class="zh-detail-info">
-              <span class="zh-detail-label">${UI.escape(t.titel_name || '—')}</span>
-              ${t.titel_typ ? `<span class="zh-badge" style="background:#6B7280">${UI.escape(t.titel_typ)}</span>` : ''}
+              <span class="zh-detail-label">${_esc(t.titel_name || '—')}</span>
+              ${t.titel_typ ? `<span class="zh-badge" style="background:#6B7280">${_esc(t.titel_typ)}</span>` : ''}
               ${t.verliehen_am ? `<span style="color:var(--c-text-muted);font-size:var(--text-xs)">${_fmtDate(t.verliehen_am)}</span>` : ''}
-              ${t.ort     ? `<span style="color:var(--c-text-muted);font-size:var(--text-xs)">${UI.escape(t.ort)}</span>`     : ''}
-              ${t.richter ? `<span style="color:var(--c-text-muted);font-size:var(--text-xs)">${UI.escape(t.richter)}</span>` : ''}
-              ${t.formwert ? `<span class="zh-badge" style="background:#3B82F6">${UI.escape(t.formwert)}</span>` : ''}
+              ${t.ort     ? `<span style="color:var(--c-text-muted);font-size:var(--text-xs)">${_esc(t.ort)}</span>`     : ''}
+              ${t.richter ? `<span style="color:var(--c-text-muted);font-size:var(--text-xs)">${_esc(t.richter)}</span>` : ''}
+              ${t.formwert ? `<span class="zh-badge" style="background:#3B82F6">${_esc(t.formwert)}</span>` : ''}
             </div>
             <button class="btn btn-ghost btn-xs zh-title-del-btn" data-tid="${t.id}" title="Löschen"
-                    class="text-danger">${UI.icon('trash')}</button>
+                    style="color:var(--c-danger)">${UI.icon('trash')}</button>
           </div>`).join('')
-      : `<p class="text-sm-muted">Noch keine Titel eingetragen.</p>`;
+      : `<p style="color:var(--c-text-muted);font-size:var(--text-sm)">Noch keine Titel eingetragen.</p>`;
 
     wrap.innerHTML = `
       <div class="zh-section-inner">
@@ -610,32 +614,32 @@ window.Page_zuchthunde = (() => {
     const vaterOptions = [
       `<option value="">— kein Vater —</option>`,
       ...maennliche.map(h =>
-        `<option value="${h.id}" ${v.vater_id === h.id ? 'selected' : ''}>${UI.escape(h.name)}${h.rufname ? ` (${UI.escape(h.rufname)})` : ''}</option>`),
+        `<option value="${h.id}" ${v.vater_id === h.id ? 'selected' : ''}>${_esc(h.name)}${h.rufname ? ` (${_esc(h.rufname)})` : ''}</option>`),
     ].join('');
 
     const mutterOptions = [
       `<option value="">— keine Mutter —</option>`,
       ...weibliche.map(h =>
-        `<option value="${h.id}" ${v.mutter_id === h.id ? 'selected' : ''}>${UI.escape(h.name)}${h.rufname ? ` (${UI.escape(h.rufname)})` : ''}</option>`),
+        `<option value="${h.id}" ${v.mutter_id === h.id ? 'selected' : ''}>${_esc(h.name)}${h.rufname ? ` (${_esc(h.rufname)})` : ''}</option>`),
     ].join('');
 
     const body = `
       <form id="zh-hund-form" autocomplete="off">
 
-        <div class="grid-2">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
           <div class="form-group">
-            <label class="form-label">Vollständiger Name <span class="text-danger">*</span></label>
+            <label class="form-label">Vollständiger Name <span style="color:var(--c-danger)">*</span></label>
             <input class="form-control" type="text" name="name" required
-                   value="${UI.escape(v.name || '')}" placeholder="z. B. Banyaro's Black Diamond">
+                   value="${_esc(v.name || '')}" placeholder="z. B. Banyaro's Black Diamond">
           </div>
           <div class="form-group">
             <label class="form-label">Rufname</label>
             <input class="form-control" type="text" name="rufname"
-                   value="${UI.escape(v.rufname || '')}" placeholder="z. B. Diamond">
+                   value="${_esc(v.rufname || '')}" placeholder="z. B. Diamond">
           </div>
         </div>
 
-        <div class="grid-2">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
           <div class="form-group">
             <label class="form-label">Geschlecht</label>
             <select class="form-control" name="geschlecht">
@@ -647,43 +651,43 @@ window.Page_zuchthunde = (() => {
           <div class="form-group">
             <label class="form-label">Geburtsdatum</label>
             <input class="form-control" type="date" name="geburtsdatum"
-                   value="${UI.escape(v.geburtsdatum || '')}">
+                   value="${_esc(v.geburtsdatum || '')}">
           </div>
         </div>
 
-        <div class="grid-2">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
           <div class="form-group">
             <label class="form-label">Sterbedatum</label>
             <input class="form-control" type="date" name="sterbedatum"
-                   value="${UI.escape(v.sterbedatum || '')}">
+                   value="${_esc(v.sterbedatum || '')}">
           </div>
           <div class="form-group">
             <label class="form-label">Farbe / Fell</label>
             <input class="form-control" type="text" name="farbe"
-                   value="${UI.escape(v.farbe || '')}" placeholder="z. B. schwarz-braun">
+                   value="${_esc(v.farbe || '')}" placeholder="z. B. schwarz-braun">
           </div>
         </div>
 
-        <div class="grid-2">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
           <div class="form-group">
             <label class="form-label">Chip-Nr.</label>
             <input class="form-control" type="text" name="chip_nr"
-                   value="${UI.escape(v.chip_nr || '')}" placeholder="15-stellig">
+                   value="${_esc(v.chip_nr || '')}" placeholder="15-stellig">
           </div>
           <div class="form-group">
             <label class="form-label">Tätowiernummer</label>
             <input class="form-control" type="text" name="taetowier_nr"
-                   value="${UI.escape(v.taetowier_nr || '')}">
+                   value="${_esc(v.taetowier_nr || '')}">
           </div>
         </div>
 
         <div class="form-group">
           <label class="form-label">Zuchtbuchnummer</label>
           <input class="form-control" type="text" name="zuchtbuchnummer"
-                 value="${UI.escape(v.zuchtbuchnummer || '')}" placeholder="z. B. SZ 123456">
+                 value="${_esc(v.zuchtbuchnummer || '')}" placeholder="z. B. SZ 123456">
         </div>
 
-        <div class="grid-2">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
           <div class="form-group">
             <label class="form-label">Vater</label>
             <select class="form-control" name="vater_id">${vaterOptions}</select>
@@ -694,23 +698,23 @@ window.Page_zuchthunde = (() => {
           </div>
         </div>
 
-        <div class="grid-2">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
           <div class="form-group">
             <label class="form-label">Züchter-Name</label>
             <input class="form-control" type="text" name="zuechter_name"
-                   value="${UI.escape(v.zuechter_name || '')}" placeholder="Bei Fremdzüchter">
+                   value="${_esc(v.zuechter_name || '')}" placeholder="Bei Fremdzüchter">
           </div>
           <div class="form-group">
             <label class="form-label">Eigentümer-Name</label>
             <input class="form-control" type="text" name="eigentuemer_name"
-                   value="${UI.escape(v.eigentuemer_name || '')}">
+                   value="${_esc(v.eigentuemer_name || '')}">
           </div>
         </div>
 
         <div class="form-group">
-          <label class="form-label">Notiz <span class="text-secondary">(intern)</span></label>
+          <label class="form-label">Notiz <span style="color:var(--c-text-secondary)">(intern)</span></label>
           <textarea class="form-control" name="notiz" rows="2"
-                    placeholder="Interne Anmerkungen…">${UI.escape(v.notiz || '')}</textarea>
+                    placeholder="Interne Anmerkungen…">${_esc(v.notiz || '')}</textarea>
         </div>
 
         <div class="form-group">
@@ -803,9 +807,9 @@ window.Page_zuchthunde = (() => {
     const body = `
       <form id="zh-health-form" autocomplete="off">
 
-        <div class="grid-2">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
           <div class="form-group">
-            <label class="form-label">Test-Typ <span class="text-danger">*</span></label>
+            <label class="form-label">Test-Typ <span style="color:var(--c-danger)">*</span></label>
             <select class="form-control" name="test_typ" id="zh-health-typ" required>
               <option value="HD">HD (Hüftgelenksdysplasie)</option>
               <option value="ED">ED (Ellbogendysplasie)</option>
@@ -818,13 +822,13 @@ window.Page_zuchthunde = (() => {
             </select>
           </div>
           <div class="form-group" id="zh-health-name-wrap">
-            <label class="form-label">Test-Name <span class="text-secondary">(bei Sonstiges)</span></label>
+            <label class="form-label">Test-Name <span style="color:var(--c-text-secondary)">(bei Sonstiges)</span></label>
             <input class="form-control" type="text" name="test_name" placeholder="Bezeichnung des Tests">
           </div>
         </div>
 
         <div class="form-group">
-          <label class="form-label">Ergebnis <span class="text-danger">*</span></label>
+          <label class="form-label">Ergebnis <span style="color:var(--c-danger)">*</span></label>
           <input class="form-control" type="text" name="ergebnis" required
                  id="zh-health-ergebnis" placeholder="z. B. A1, A2, B1 …">
           <small class="form-hint" id="zh-health-hint" style="color:var(--c-text-secondary);font-size:var(--text-xs)">
@@ -832,7 +836,7 @@ window.Page_zuchthunde = (() => {
           </small>
         </div>
 
-        <div class="grid-2">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
           <div class="form-group">
             <label class="form-label">Untersuchungsdatum</label>
             <input class="form-control" type="date" name="untersuch_am" value="${today}">
@@ -843,7 +847,7 @@ window.Page_zuchthunde = (() => {
           </div>
         </div>
 
-        <div class="grid-2">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
           <div class="form-group">
             <label class="form-label">Untersucher / Tierarzt</label>
             <input class="form-control" type="text" name="untersucher" placeholder="Dr. Müller">
@@ -927,9 +931,9 @@ window.Page_zuchthunde = (() => {
     const body = `
       <form id="zh-genetic-form" autocomplete="off">
 
-        <div class="grid-2">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
           <div class="form-group">
-            <label class="form-label">Marker / Gen <span class="text-danger">*</span></label>
+            <label class="form-label">Marker / Gen <span style="color:var(--c-danger)">*</span></label>
             <select class="form-control" name="marker_name" required>
               <option value="MDR1">MDR1 (Multi-Drug Resistance)</option>
               <option value="PRA-prcd">PRA-prcd (Progressive Retinaatrophie)</option>
@@ -943,7 +947,7 @@ window.Page_zuchthunde = (() => {
             </select>
           </div>
           <div class="form-group">
-            <label class="form-label">Ergebnis <span class="text-danger">*</span></label>
+            <label class="form-label">Ergebnis <span style="color:var(--c-danger)">*</span></label>
             <select class="form-control" name="ergebnis_klasse" required>
               <option value="clear">clear (frei)</option>
               <option value="carrier">carrier (Träger)</option>
@@ -952,7 +956,7 @@ window.Page_zuchthunde = (() => {
           </div>
         </div>
 
-        <div class="grid-2">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
           <div class="form-group">
             <label class="form-label">Testdatum</label>
             <input class="form-control" type="date" name="getestet_am" value="${today}">
@@ -1016,9 +1020,9 @@ window.Page_zuchthunde = (() => {
     const body = `
       <form id="zh-title-form" autocomplete="off">
 
-        <div class="grid-2">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
           <div class="form-group">
-            <label class="form-label">Titel-Typ <span class="text-danger">*</span></label>
+            <label class="form-label">Titel-Typ <span style="color:var(--c-danger)">*</span></label>
             <select class="form-control" name="titel_typ" required>
               <option value="Ausstellung">Ausstellung</option>
               <option value="Arbeit">Arbeit</option>
@@ -1029,13 +1033,13 @@ window.Page_zuchthunde = (() => {
             </select>
           </div>
           <div class="form-group">
-            <label class="form-label">Titel-Name <span class="text-danger">*</span></label>
+            <label class="form-label">Titel-Name <span style="color:var(--c-danger)">*</span></label>
             <input class="form-control" type="text" name="titel_name" required
                    placeholder="z. B. CAC, CACIB, BOB, IPO 1, BH">
           </div>
         </div>
 
-        <div class="grid-2">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
           <div class="form-group">
             <label class="form-label">Datum</label>
             <input class="form-control" type="date" name="verliehen_am" value="${today}">
@@ -1052,7 +1056,7 @@ window.Page_zuchthunde = (() => {
           </div>
         </div>
 
-        <div class="grid-2">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
           <div class="form-group">
             <label class="form-label">Ort</label>
             <input class="form-control" type="text" name="ort" placeholder="Stadt / Veranstaltungsort">
@@ -1117,14 +1121,14 @@ window.Page_zuchthunde = (() => {
       `<option value="">-- Aus eigenen Hunden --</option>`,
       ..._hunde
         .filter(h => h.geschlecht !== 'weiblich')
-        .map(h => `<option value="${h.id}">${UI.escape(h.name)}${h.rufname ? ` (${UI.escape(h.rufname)})` : ''}</option>`),
+        .map(h => `<option value="${h.id}">${_esc(h.name)}${h.rufname ? ` (${_esc(h.rufname)})` : ''}</option>`),
     ].join('');
 
     const muetterOptions = [
       `<option value="">-- Aus eigenen Hunden --</option>`,
       ..._hunde
         .filter(h => h.geschlecht !== 'maennlich')
-        .map(h => `<option value="${h.id}">${UI.escape(h.name)}${h.rufname ? ` (${UI.escape(h.rufname)})` : ''}</option>`),
+        .map(h => `<option value="${h.id}">${_esc(h.name)}${h.rufname ? ` (${_esc(h.rufname)})` : ''}</option>`),
     ].join('');
 
     const body = `
@@ -1202,9 +1206,9 @@ window.Page_zuchthunde = (() => {
           if (v.gen_vater != null) genInfo.push(`Gen. ${v.gen_vater} Vater`);
           if (v.gen_mutter != null) genInfo.push(`Gen. ${v.gen_mutter} Mutter`);
           const genStr = genInfo.length ? ` <span style="color:var(--c-text-secondary);font-size:var(--text-xs)">(${genInfo.join(' / ')})</span>` : '';
-          return `<li style="padding:var(--space-1) 0">${UI.escape(v.name || '—')}${genStr}</li>`;
+          return `<li style="padding:var(--space-1) 0">${_esc(v.name || '—')}${genStr}</li>`;
         }).join('')
-      : `<li class="text-muted">Keine gemeinsamen Vorfahren gefunden.</li>`;
+      : `<li style="color:var(--c-text-muted)">Keine gemeinsamen Vorfahren gefunden.</li>`;
 
     const welfare = result.welfare;
     let welfareHTML = '';
@@ -1216,13 +1220,13 @@ window.Page_zuchthunde = (() => {
       const wIssueHTML = (welfare.issues || []).map(i => `
         <div style="display:flex;gap:8px;padding:6px 0;border-bottom:1px solid rgba(0,0,0,.06)">
           <span style="color:${wColor};flex-shrink:0">${UI.icon('warning')}</span>
-          <span class="text-sm">${UI.escape(i.text)}</span>
+          <span style="font-size:var(--text-sm)">${_esc(i.text)}</span>
         </div>`).join('');
 
       const wOkHTML = (welfare.ok_points || []).map(p => `
         <div style="display:flex;gap:8px;padding:4px 0">
           <span style="color:#16a34a;flex-shrink:0">${UI.icon('check')}</span>
-          <span class="text-sm-secondary">${UI.escape(p)}</span>
+          <span style="font-size:var(--text-sm);color:var(--c-text-secondary)">${_esc(p)}</span>
         </div>`).join('');
 
       welfareHTML = `
@@ -1250,7 +1254,7 @@ window.Page_zuchthunde = (() => {
               ${ik.toFixed(2)} %
             </div>
             <div style="font-size:var(--text-sm);color:${ampelColor};font-weight:var(--weight-semibold)">
-              ${UI.escape(result.ik_rating || ampelLabel)}
+              ${_esc(result.ik_rating || ampelLabel)}
             </div>
           </div>
         </div>
@@ -1274,7 +1278,7 @@ window.Page_zuchthunde = (() => {
     const footer = `
       <div style="display:flex;flex-direction:column;gap:var(--space-2);width:100%">
         ${kiPaarungBtn}
-        <div class="flex-gap-2">
+        <div style="display:flex;gap:var(--space-2)">
           <button type="button" class="btn btn-secondary flex-1" id="zhresult-back">
             ${UI.icon('arrow-left')} Zurück
           </button>
@@ -1310,7 +1314,7 @@ window.Page_zuchthunde = (() => {
     } catch (err) {
       UI.modal.open({
         title: `${UI.icon('sparkle')} KI-Hunde-Beschreibung`,
-        body: `<p class="text-danger">${UI.escape(err.message || 'Fehler beim Generieren.')}</p>`,
+        body: `<p style="color:var(--c-danger)">${_esc(err.message || 'Fehler beim Generieren.')}</p>`,
         footer: `<button class="btn btn-secondary" data-modal-close>Schließen</button>`,
       });
       return;
@@ -1318,7 +1322,7 @@ window.Page_zuchthunde = (() => {
 
     UI.modal.open({
       title: `${UI.icon('sparkle')} KI-Hunde-Beschreibung`,
-      body: `<div style="white-space:pre-wrap;font-size:var(--text-sm);line-height:1.6">${UI.escape(text)}</div>`,
+      body: `<div style="white-space:pre-wrap;font-size:var(--text-sm);line-height:1.6">${_esc(text)}</div>`,
       footer: `
         <button class="btn btn-secondary flex-1" id="ki-desc-copy">
           ${UI.icon('clipboard-text')} Kopieren
@@ -1410,7 +1414,7 @@ window.Page_zuchthunde = (() => {
     } catch (err) {
       UI.modal.open({
         title: `${UI.icon('chart-bar')} KI-Jahresbericht`,
-        body: `<p class="text-danger">${UI.escape(err.message || 'Fehler beim Generieren.')}</p>`,
+        body: `<p style="color:var(--c-danger)">${_esc(err.message || 'Fehler beim Generieren.')}</p>`,
         footer: `<button class="btn btn-secondary" data-modal-close>Schließen</button>`,
       });
       return;
@@ -1425,7 +1429,7 @@ window.Page_zuchthunde = (() => {
       body: `
         ${savedId ? `<p style="font-size:var(--text-xs);color:var(--c-success);margin:0 0 var(--space-3);display:flex;align-items:center;gap:4px">
           ${UI.icon('check-circle')} Automatisch gespeichert</p>` : ''}
-        <div style="white-space:pre-wrap;font-size:var(--text-sm);line-height:1.6">${UI.escape(text)}</div>`,
+        <div style="white-space:pre-wrap;font-size:var(--text-sm);line-height:1.6">${_esc(text)}</div>`,
       footer: `
         <button class="btn btn-ghost btn-sm" id="ki-bericht-copy">
           ${UI.icon('clipboard-text')} Kopieren
@@ -1480,7 +1484,7 @@ window.Page_zuchthunde = (() => {
           <div style="font-weight:var(--weight-semibold);font-size:var(--text-sm)">
             Jahresbericht ${b.jahr}
           </div>
-          <div class="text-xs-muted">
+          <div style="font-size:var(--text-xs);color:var(--c-text-muted)">
             ${new Date(b.created_at).toLocaleDateString('de', {day:'2-digit',month:'2-digit',year:'numeric',hour:'2-digit',minute:'2-digit'})}
           </div>
         </div>
@@ -1528,7 +1532,7 @@ window.Page_zuchthunde = (() => {
     } catch (err) {
       UI.modal.open({
         title: `${UI.icon('sparkle')} KI-Paarungsanalyse`,
-        body: `<p class="text-danger">${UI.escape(err.message || 'Fehler beim Generieren.')}</p>`,
+        body: `<p style="color:var(--c-danger)">${_esc(err.message || 'Fehler beim Generieren.')}</p>`,
         footer: `<button class="btn btn-secondary" data-modal-close>Schließen</button>`,
       });
       return;
@@ -1557,9 +1561,9 @@ window.Page_zuchthunde = (() => {
           <div style="padding:var(--space-3);border-radius:var(--radius-md);
                       background:${empfehlungColor}18;border:1.5px solid ${empfehlungColor}40;
                       font-weight:var(--weight-semibold);color:${empfehlungColor}">
-            ${UI.icon('check-circle')} ${UI.escape(empfehlungLabel)}
+            ${UI.icon('check-circle')} ${_esc(empfehlungLabel)}
           </div>` : ''}
-          <div style="white-space:pre-wrap;font-size:var(--text-sm);line-height:1.6">${UI.escape(text)}</div>
+          <div style="white-space:pre-wrap;font-size:var(--text-sm);line-height:1.6">${_esc(text)}</div>
         </div>`,
       footer: `
         <button class="btn btn-secondary flex-1" id="ki-paarung-copy">
@@ -1715,11 +1719,11 @@ window.Page_zuchthunde = (() => {
         <p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin:0 0 var(--space-3)">
           Diese Fotos erscheinen im öffentlichen Züchterprofil. Das primäre Foto wird als <strong>Logo</strong> im Hero angezeigt.
         </p>
-        <div id="${galleryId}" class="mb-4">
-          <p class="text-sm-muted">Lädt…</p>
+        <div id="${galleryId}" style="margin-bottom:var(--space-4)">
+          <p style="color:var(--c-text-muted);font-size:var(--text-sm)">Lädt…</p>
         </div>
         <hr style="margin:var(--space-3) 0;border:none;border-top:1px solid var(--c-border)">
-        <form id="bp-upload-form" class="flex-col-gap-2">
+        <form id="bp-upload-form" style="display:flex;flex-direction:column;gap:var(--space-2)">
           <label style="font-size:var(--text-sm);font-weight:600">${UI.icon('upload-simple')} Foto hochladen</label>
           <input class="form-control" type="file" name="file" accept="image/*" required>
           <input class="form-control" type="text" name="caption" placeholder="Bildunterschrift (optional)">
@@ -1735,7 +1739,7 @@ window.Page_zuchthunde = (() => {
       try {
         const photos = await API.breederPhotos.list('breeder', breederId);
         if (!photos.length) {
-          el.innerHTML = `<p class="text-sm-muted">Noch keine Fotos — lade das erste hoch.</p>`;
+          el.innerHTML = `<p style="color:var(--c-text-muted);font-size:var(--text-sm)">Noch keine Fotos — lade das erste hoch.</p>`;
           return;
         }
         el.innerHTML = `
@@ -1748,15 +1752,15 @@ window.Page_zuchthunde = (() => {
                 <div style="position:relative;border-radius:var(--radius-md);overflow:hidden;
                             border:${isPrimary ? '2px solid var(--c-primary)' : '1px solid var(--c-border)'};aspect-ratio:1"
                      data-photo-id="${ph.id}">
-                  <a href="${UI.escape(ph.url || '')}" target="_blank" rel="noopener noreferrer">
-                    <img src="${UI.escape(thumb)}" alt="${UI.escape(ph.caption || '')}"
+                  <a href="${_esc(ph.url || '')}" target="_blank" rel="noopener noreferrer">
+                    <img src="${_esc(thumb)}" alt="${_esc(ph.caption || '')}"
                          loading="lazy" style="width:100%;height:100%;object-fit:cover;display:block"
                          onerror="this.parentElement.parentElement.style.opacity='.4'">
                   </a>
                   ${isPrimary ? `<span style="position:absolute;top:3px;left:3px;background:var(--c-primary);color:white;
                     font-size:9px;font-weight:700;border-radius:999px;padding:1px 5px">Logo</span>` : ''}
                   <!-- Sichtbarkeit -->
-                  <button class="bp-vis-btn" data-photo-id="${ph.id}" data-vis="${UI.escape(ph.visibility)}"
+                  <button class="bp-vis-btn" data-photo-id="${ph.id}" data-vis="${_esc(ph.visibility)}"
                           style="position:absolute;bottom:0;left:0;right:0;background:${vis.color};color:#fff;
                                  border:none;cursor:pointer;font-size:9px;padding:2px 4px;font-weight:700">
                     ${vis.text}
@@ -1801,7 +1805,7 @@ window.Page_zuchthunde = (() => {
         });
       } catch (err) {
         const el = document.getElementById(galleryId);
-        if (el) el.innerHTML = `<p class="text-danger">${UI.escape(err.message || 'Fehler')}</p>`;
+        if (el) el.innerHTML = `<p style="color:var(--c-danger)">${_esc(err.message || 'Fehler')}</p>`;
       }
     }
 
diff --git a/backend/static/js/ui.js b/backend/static/js/ui.js
index 2c5486a..e624c55 100644
--- a/backend/static/js/ui.js
+++ b/backend/static/js/ui.js
@@ -285,189 +285,17 @@ const UI = (() => {
   // ----------------------------------------------------------
   // LEERER ZUSTAND (Empty State)
   // ----------------------------------------------------------
-  // ----------------------------------------------------------
-  // PREVIEW-URL — für lokale Media: _preview.webp statt Original
-  // ----------------------------------------------------------
-  // Verwendung:
-  //   <img src="${UI.previewUrl(profile.foto_url)}"
-  //        onerror="${UI.previewFallback(profile.foto_url)}">
-  function previewUrl(url) {
-    if (!url || !url.startsWith('/media/')) return url || '';
-    return url.replace(/\.(jpe?g|png|gif|webp)$/i, '_preview.webp');
-  }
-  // onerror-Handler: bei 404 vom _preview die Original-URL nachladen,
-  // bei zweitem Fehler das Image komplett ausblenden (kein Browser-Fragezeichen).
-  // Setzt eine Klasse 'img-broken' damit Container ggf. einen Fallback zeigen können.
-  function previewFallback(originalUrl) {
-    if (!originalUrl || !originalUrl.startsWith('/media/')) {
-      return `this.style.display='none';this.classList.add('img-broken')`;
-    }
-    const safe = String(originalUrl).replace(/'/g, "\\'");
-    return `if(this.src.includes('_preview')&&!this.dataset.fb){this.dataset.fb='1';this.src='${safe}'}else{this.style.display='none';this.classList.add('img-broken')}`;
-  }
-
   function emptyState({ icon, title, text, action } = {}) {
     return `
       <div class="empty-state">
         ${icon ? `<div class="empty-state-icon">${icon}</div>` : ''}
         ${title ? `<div class="empty-state-title">${title}</div>` : ''}
         ${text  ? `<div class="empty-state-text">${text}</div>` : ''}
-        ${action ? `<div class="mt-4">${action}</div>` : ''}
+        ${action ? `<div style="margin-top:var(--space-4)">${action}</div>` : ''}
       </div>
     `;
   }
 
-  // ----------------------------------------------------------
-  // ERROR-STATE (dedizierte Error-UI, optional mit Retry-Button)
-  // ----------------------------------------------------------
-  // Verwendung:
-  //   container.innerHTML = UI.errorState({
-  //     title: 'Fehler beim Laden',
-  //     message: err.message,
-  //     retry: async () => { await _loadData(); }
-  //   });
-  let _errorRetryHandlers = new Map();
-  function errorState({ icon, title = 'Etwas ist schiefgelaufen', message = '', retry = null } = {}) {
-    const iconHtml = icon || _svgIcon('warning-circle');
-    const retryId  = retry ? `err-retry-${Date.now()}-${Math.random().toString(36).slice(2,7)}` : '';
-    if (retry) _errorRetryHandlers.set(retryId, retry);
-
-    setTimeout(() => {
-      if (!retryId) return;
-      const btn = document.getElementById(retryId);
-      const fn  = _errorRetryHandlers.get(retryId);
-      if (btn && fn) {
-        btn.addEventListener('click', () => asyncButton(btn, fn));
-        _errorRetryHandlers.delete(retryId);
-      }
-    }, 0);
-
-    return `
-      <div class="empty-state" role="alert">
-        <div class="empty-state-icon text-danger">${iconHtml}</div>
-        <div class="empty-state-title">${escHtml(title)}</div>
-        ${message ? `<div class="empty-state-text">${escHtml(message)}</div>` : ''}
-        ${retry ? `<div class="mt-4">
-          <button id="${retryId}" class="btn btn-primary btn-sm">
-            ${_svgIcon('arrow-clockwise')} Erneut versuchen
-          </button>
-        </div>` : ''}
-      </div>
-    `;
-  }
-
-  // ----------------------------------------------------------
-  // SKELETON LIST — Karten-Skeleton für Listen-Loading
-  // ----------------------------------------------------------
-  // Verwendung: container.innerHTML = UI.skeletonList(5);
-  function skeletonList(count = 4) {
-    return `<div class="flex-col-gap-3">${
-      Array.from({ length: count }, () => `
-        <div class="card" style="padding:var(--space-3);display:flex;gap:var(--space-3);align-items:center">
-          <div style="width:48px;height:48px;border-radius:50%;
-                      background:var(--c-surface-2);animation:skeleton-pulse 1.5s ease infinite;
-                      flex-shrink:0"></div>
-          <div class="flex-1-min">
-            <div style="height:14px;width:60%;background:var(--c-surface-2);
-                        border-radius:var(--radius-sm);margin-bottom:var(--space-2);
-                        animation:skeleton-pulse 1.5s ease infinite"></div>
-            <div style="height:10px;width:85%;background:var(--c-surface-2);
-                        border-radius:var(--radius-sm);
-                        animation:skeleton-pulse 1.5s ease infinite"></div>
-          </div>
-        </div>
-      `).join('')
-    }</div>
-    <style>@keyframes skeleton-pulse{0%,100%{opacity:1}50%{opacity:0.4}}</style>`;
-  }
-
-  // ----------------------------------------------------------
-  // MONEY-INPUT (Euro-Input mit Locale-Format)
-  // ----------------------------------------------------------
-  // Verwendung: UI.moneyInput({ name: 'betrag', value: 12.50, required: true })
-  // Rendert: <div class="money-input-wrap"><span>€</span><input type="number" ...></div>
-  function moneyInput({ name, value = '', placeholder = '0,00', required = false, currency = '€' } = {}) {
-    const val = (value === '' || value == null) ? '' : Number(value).toFixed(2).replace('.', ',');
-    return `
-      <div style="position:relative;display:flex;align-items:center">
-        <span style="position:absolute;left:var(--space-3);color:var(--c-text-muted);
-                     pointer-events:none;font-weight:600">${currency}</span>
-        <input type="text" inputmode="decimal" name="${escHtml(name)}"
-               class="form-control" placeholder="${escHtml(placeholder)}"
-               style="padding-left:calc(var(--space-3) + 18px)"
-               pattern="[0-9]+([,.][0-9]{1,2})?"
-               value="${val}" ${required ? 'required' : ''}>
-      </div>
-    `;
-  }
-
-  // Money parser: Frontend-Helper für Form-Submit
-  function parseMoney(str) {
-    if (str == null || str === '') return null;
-    const cleaned = String(str).replace(',', '.').replace(/[^0-9.]/g, '');
-    const n = parseFloat(cleaned);
-    return isNaN(n) ? null : Math.round(n * 100) / 100;
-  }
-
-  // ----------------------------------------------------------
-  // DATE-PICKER (Wrapper für <input type=date> mit Label)
-  // ----------------------------------------------------------
-  // Verwendung: UI.datePicker({ name: 'datum', label: 'Datum', value: '2026-05-27', max: 'today' })
-  function datePicker({ name, label = '', value = '', min = '', max = '', required = false } = {}) {
-    const today = new Date().toISOString().slice(0, 10);
-    const _min = min === 'today' ? today : min;
-    const _max = max === 'today' ? today : max;
-    const id   = `dp-${name}-${Date.now().toString(36)}`;
-    return `
-      ${label ? `<label for="${id}" class="label-block">${escHtml(label)}${required ? ' *' : ''}</label>` : ''}
-      <input type="date" id="${id}" name="${escHtml(name)}" class="form-control"
-             value="${escHtml(value || '')}"
-             ${_min ? `min="${escHtml(_min)}"` : ''}
-             ${_max ? `max="${escHtml(_max)}"` : ''}
-             ${required ? 'required' : ''}>
-    `;
-  }
-
-  // ----------------------------------------------------------
-  // MAP — Leaflet-Karte zentralisiert erstellen
-  // ----------------------------------------------------------
-  // Verwendung:
-  //   const map = await UI.map.create('mein-map', { center:[51,10], zoom:6 });
-  // Optional: { darkFilter: true } für CSS-Filter im Dark-Mode
-  const map = {
-    OSM_URL: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
-    OSM_MAX_ZOOM: 19,
-
-    async create(containerId, options = {}) {
-      await loadLeaflet();
-      const {
-        center = [51.1657, 10.4515],
-        zoom = 6,
-        zoomControl = true,
-        attributionControl = false,
-        darkFilter = false,
-      } = options;
-      const m = L.map(containerId, { zoomControl, attributionControl }).setView(center, zoom);
-      const tiles = L.tileLayer(this.OSM_URL, { maxZoom: this.OSM_MAX_ZOOM }).addTo(m);
-      if (darkFilter) {
-        const isDark = document.documentElement.dataset.theme === 'dark';
-        if (isDark) tiles.getContainer().style.filter = 'brightness(0.7) invert(1) contrast(0.9) hue-rotate(200deg)';
-      }
-      return m;
-    },
-
-    // SVG-Marker mit eigenem HTML (z.B. mit Pulse-Animation, Rotation, etc.)
-    svgMarker(lat, lon, html, { size = 32, anchorY = null, className = '' } = {}) {
-      const icon = L.divIcon({
-        className,
-        html,
-        iconSize:   [size, size],
-        iconAnchor: [size / 2, anchorY != null ? anchorY : size / 2],
-      });
-      return L.marker([lat, lon], { icon });
-    },
-  };
-
   // ----------------------------------------------------------
   // DATUM-FORMATIERUNG (Deutsch, relativ)
   // ----------------------------------------------------------
@@ -490,73 +318,13 @@ const UI = (() => {
       return fmtDate.format(new Date(dateStr));
     }
 
-    // Datum: "15.03.2026" / "15.03.2026, 14:30"
-    const _fmtDateNumeric = new Intl.DateTimeFormat('de-DE', {
-      day: '2-digit', month: '2-digit', year: 'numeric'
-    });
-    const _fmtDateTimeNumeric = new Intl.DateTimeFormat('de-DE', {
-      day: '2-digit', month: '2-digit', year: 'numeric',
-      hour: '2-digit', minute: '2-digit'
-    });
-    // Wochentag: "Di." / Tag im Monat: "15"
-    const _fmtWeekday = new Intl.DateTimeFormat('de-DE', { weekday: 'short' });
-
     return {
       relative,
-      format:        d => fmtDate.format(new Date(d)),
-      formatShort:   d => fmtDateShort.format(new Date(d)),
-      formatDate:    d => _fmtDateNumeric.format(new Date(d)),         // 15.03.2026
-      formatDateTime:d => _fmtDateTimeNumeric.format(new Date(d)),     // 15.03.2026, 14:30
-      weekday:       d => _fmtWeekday.format(new Date(d)).replace('.', ''),
-      // ISO-Parser: "2026-03-15" → { year, month, day }
-      parseISO(str) {
-        if (!str) return null;
-        const m = String(str).match(/^(\d{4})-(\d{2})-(\d{2})/);
-        return m ? { year: +m[1], month: +m[2], day: +m[3] } : null;
-      },
+      format:      d => fmtDate.format(new Date(d)),
+      formatShort: d => fmtDateShort.format(new Date(d)),
     };
   })();
 
-  // ----------------------------------------------------------
-  // TEXT — String-Helper
-  // ----------------------------------------------------------
-  const text = {
-    /** Schneidet str auf maxLen ab und hängt ellipsis an. */
-    truncate(str, maxLen = 80, ellipsis = '…') {
-      if (!str) return '';
-      const s = String(str);
-      return s.length <= maxLen ? s : s.slice(0, maxLen - ellipsis.length) + ellipsis;
-    },
-    /** Slug aus String — für URL-Pfade. */
-    slug(str) {
-      return String(str || '')
-        .toLowerCase()
-        .replace(/ä/g, 'ae').replace(/ö/g, 'oe').replace(/ü/g, 'ue').replace(/ß/g, 'ss')
-        .replace(/[^a-z0-9]+/g, '-')
-        .replace(/(^-|-$)/g, '');
-    },
-  };
-
-  // ----------------------------------------------------------
-  // MONEY — Currency-Formatierung (de-DE, EUR)
-  // ----------------------------------------------------------
-  const _fmtEur = new Intl.NumberFormat('de-DE', {
-    style: 'currency', currency: 'EUR',
-    minimumFractionDigits: 2, maximumFractionDigits: 2,
-  });
-  const money = {
-    /** Formatiert Zahl als "12,34 €" — null/undefined ergibt "—". */
-    format(value) {
-      if (value == null || value === '' || isNaN(value)) return '—';
-      return _fmtEur.format(Number(value));
-    },
-    /** Mit Suffix wie "/Jahr". */
-    formatWithSuffix(value, suffix = '') {
-      if (value == null || value === '' || isNaN(value)) return '—';
-      return _fmtEur.format(Number(value)) + (suffix ? ' ' + suffix : '');
-    },
-  };
-
   // ----------------------------------------------------------
   // FOTO-VORSCHAU (Input[type=file] → img)
   // ----------------------------------------------------------
@@ -1332,20 +1100,19 @@ const UI = (() => {
     toast, modal,
     setLoading, asyncButton,
     formData, setFormError, clearFormErrors,
-    emptyState, errorState, time, text, money,
-    previewUrl, previewFallback,
-    setupPhotoPreview, scrollTop, skeleton, skeletonList,
-    moneyInput, parseMoney, datePicker,
+    emptyState, time,
+    setupPhotoPreview, scrollTop, skeleton,
     icon: _svgIcon,
     escape, escHtml, help, pageInfo,
     saveToAlbum,
     loadLeaflet,
     leafletMarker,
     locationPicker,
-    map,
     ratingStars,
     dogChip,
     bindDogChip,
+    dogChip,
+    bindDogChip,
   };
 
 })();
diff --git a/backend/static/landing.html b/backend/static/landing.html
index ce34c61..3e8eaa5 100644
--- a/backend/static/landing.html
+++ b/backend/static/landing.html
@@ -4,7 +4,13 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="color-scheme" content="light dark">
-  <script src="/js/landing-init.js?v=1120"></script>
+  <script>
+    (function(){
+      var mq = window.matchMedia('(prefers-color-scheme: dark)');
+      if (mq.matches) document.documentElement.classList.add('dark');
+      mq.addEventListener('change', function(e){ document.documentElement.classList.toggle('dark', e.matches); });
+    })();
+  </script>
   <title>Ban Yaro — Die Hunde-App für Deutschland, Österreich & Schweiz</title>
   <meta name="description" content="Ban Yaro: Die kostenlose All-in-One Hunde-App für DACH. Tagebuch, Giftköder-Alarm, Training mit KI, Forum, Wurfbörse, Stammbaum, Inzucht-Check — DSGVO-konform, offline-fähig, ohne App Store.">
   <meta name="keywords" content="Hunde App, Hunde Community, Wurfbörse, Züchter, Welpen kaufen, Stammbaum Hund, Inzuchtkoeffizient, Hundezucht, Impfpass Hund, Giftköder Alarm, Gassi Community, Hundetraining App, Hunde Forum, Hunde KI, Hundefilm Datenbank, Welpen Marktplatz">
@@ -725,7 +731,7 @@
     <h1>Weil jeder Moment<br>mit ihm zählt.</h1>
     <p>Ban Yaro begleitet euch durch jeden gemeinsamen Tag — Tagebuch, Training und Gesundheit für Hundebesitzer, Stammbaum und Wurfverwaltung für Züchter. Eine App. Mit ganzem Herzen.</p>
     <div style="display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2rem">
-      <a href="/" class="cta-btn" data-stay-in-app>Kostenlos starten</a>
+      <a href="/" class="cta-btn" onclick="sessionStorage.setItem('by_stay_in_app','1')">Kostenlos starten</a>
       <a href="/zuechter" class="cta-btn" style="background:transparent;color:white;border:2px solid rgba(255,255,255,.6)">Ich bin Züchter</a>
     </div>
     <div class="header-badges" style="margin-top:1.5rem">
@@ -843,7 +849,7 @@
     </p>
     <a href="/" class="cta-btn"
        style="align-self:flex-start;background:white;color:#a86e2e;margin:0;box-shadow:0 4px 20px rgba(0,0,0,.2)"
-       data-stay-in-app>Kostenlos starten</a>
+       onclick="sessionStorage.setItem('by_stay_in_app','1')">Kostenlos starten</a>
   </div>
 </div>
 
@@ -945,9 +951,7 @@
       </div>
     </div>
 
-    <span class="section-cta-link" data-toggle-target="hundebesitzer-details"
-          data-toggle-text-open="▴ Weniger anzeigen"
-          style="cursor:pointer">+ Alle Features für Hundebesitzer ansehen ▾</span>
+    <span class="section-cta-link" onclick="var c=document.getElementById('hundebesitzer-details');c.classList.toggle('open');this.textContent=c.classList.contains('open')?'▴ Weniger anzeigen':'+ Alle Features für Hundebesitzer ansehen ▾'">+ Alle Features für Hundebesitzer ansehen ▾</span>
 
     <div id="hundebesitzer-details" class="collapsible-content">
       <div class="feature-group">
@@ -1398,7 +1402,7 @@
           <li>Persönlichkeitstest, Adoption, Ausgaben</li>
         </ul>
         <a href="/" class="section-cta-btn" style="display:block;text-align:center;margin-top:1.5rem"
-           data-stay-in-app>Kostenlos starten</a>
+           onclick="sessionStorage.setItem('by_stay_in_app','1')">Kostenlos starten</a>
       </div>
 
       <!-- Pro -->
@@ -1415,7 +1419,7 @@
           <li>Alles aus Kostenlos inklusive</li>
         </ul>
         <a href="/" class="section-cta-btn" style="display:block;text-align:center;margin-top:1.5rem"
-           data-stay-in-app>Pro starten</a>
+           onclick="sessionStorage.setItem('by_stay_in_app','1')">Pro starten</a>
       </div>
 
       <!-- Züchter -->
@@ -1602,6 +1606,70 @@
   </div>
 </footer>
 
+<script>
+  // App-Links: kein Redirect-Loop
+  document.querySelectorAll('a[href="/"], a[href^="/#"]').forEach(function(a) {
+    a.addEventListener('click', function() {
+      sessionStorage.setItem('by_stay_in_app', '1');
+    });
+  });
+
+  // Scroll-Animationen
+  var _observer = new IntersectionObserver(function(entries) {
+    entries.forEach(function(e) {
+      if (e.isIntersecting) {
+        e.target.classList.add('visible');
+        _observer.unobserve(e.target);
+      }
+    });
+  }, { threshold: 0.12 });
+
+  document.querySelectorAll('.outcome-card, .feature-card, .usp-item, .pricing-card').forEach(function(el) {
+    el.classList.add('fade-up');
+    _observer.observe(el);
+  });
+  document.querySelectorAll('.fade-up').forEach(function(el) {
+    _observer.observe(el);
+  });
+
+  // Live-Zahlen von /api/stats/public
+  var fmt = new Intl.NumberFormat('de-DE');
+  fetch('/api/stats/public')
+    .then(function(r) { return r.json(); })
+    .then(function(d) {
+      function set(id, val) {
+        var el = document.getElementById(id);
+        if (el) el.textContent = fmt.format(val);
+      }
+      // Stats-Band (weiter unten)
+      set('big-users',    d.users);
+      set('big-dogs',     d.dogs);
+      set('big-km',       d.km);
+      set('big-posts',    d.forum_posts);
+      set('big-diary',    d.diary_entries);
+      set('big-kotbeutel', d.kotbeutel);
+
+      // Hero-Streifen: aufsteigend nach Wert sortiert, dynamisch aufgebaut
+      var heroStats = document.getElementById('hero-stats');
+      if (!heroStats || !d.users) return;
+
+      var items = [
+        { val: d.users,         label: 'Hundemenschen'          },
+        { val: d.dogs,          label: 'Hunde'                  },
+        { val: d.km,            label: 'km Gassi-Wege'          },
+        { val: d.diary_entries, label: 'Tagebuch-Einträge'      },
+        { val: d.kotbeutel,     label: 'Mülleimer für Kotbeutel'},
+      ];
+      items.sort(function(a, b) { return a.val - b.val; });
+
+      heroStats.innerHTML = items.map(function(item, i) {
+        return (i > 0 ? '<span class="sep">·</span>' : '') +
+               '<strong>' + fmt.format(item.val) + '</strong> ' + item.label;
+      }).join('');
+      heroStats.style.display = 'flex';
+    })
+    .catch(function() {});
+</script>
 
 </body>
 </html>
diff --git a/backend/static/sw.js b/backend/static/sw.js
index 0b797bf..51b4ac9 100644
--- a/backend/static/sw.js
+++ b/backend/static/sw.js
@@ -4,7 +4,7 @@
    ============================================================ */
 
 // ← EINZIGE Stelle für die Version — STATIC_ASSETS und CACHE_VERSION leiten sich ab
-const VER           = '1120';
+const VER           = '1099';
 const CACHE_VERSION = `by-v${VER}`;
 const CACHE_STATIC  = `${CACHE_VERSION}-static`;
 const CACHE_TILES   = 'ban-yaro-tiles-v1';  // bleibt über SW-Updates erhalten
@@ -36,8 +36,6 @@ const STATIC_ASSETS = [
   `/js/app.js?v=${VER}`,
   `/js/worlds.js?v=${VER}`,
   `/js/offline-indicator.js?v=${VER}`,
-  `/js/boot-early.js?v=${VER}`,
-  `/js/boot.js?v=${VER}`,
   '/js/leaflet.markercluster.js',
   '/css/MarkerCluster.css',
   '/css/MarkerCluster.Default.css',
diff --git a/docker-compose.staging.yml b/docker-compose.staging.yml
index cf5e8b5..38b4182 100644
--- a/docker-compose.staging.yml
+++ b/docker-compose.staging.yml
@@ -17,8 +17,9 @@ services:
       - APP_URL=https://staging.banyaro.app
       - STAGING=true
       - KI_MODE=cloud
-      # VAPID_PUBLIC_KEY / VAPID_PRIVATE_KEY / VAPID_CONTACT
-      # → kommen aus .env (nicht in Git)
+      - VAPID_PUBLIC_KEY=BMKbFAmpsqJ-eFef_4XJcYpuxPWqBNAoy9buMNnMSa6ijcPzltboHi_YccPKJrUD0isBez-vJIzAgjnLTWkzcC0
+      - VAPID_PRIVATE_KEY=8PWa9vvwMqtqsJEJGcwmiLhR0_Yl7duVX3wmWiKS878
+      - VAPID_CONTACT=mailto:admin@banyaro.app
     healthcheck:
       test: ["CMD", "python3", "-c", "import urllib.request; urllib.request.urlopen('http://localhost:8000/')"]
       interval: 30s
diff --git a/docker-compose.yml b/docker-compose.yml
index d984dcd..019c40d 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -13,9 +13,10 @@ services:
     environment:
       - DB_PATH=/data/banyaro.db
       - MEDIA_DIR=/data/media
+      - VAPID_PUBLIC_KEY=BMKbFAmpsqJ-eFef_4XJcYpuxPWqBNAoy9buMNnMSa6ijcPzltboHi_YccPKJrUD0isBez-vJIzAgjnLTWkzcC0
+      - VAPID_PRIVATE_KEY=8PWa9vvwMqtqsJEJGcwmiLhR0_Yl7duVX3wmWiKS878
+      - VAPID_CONTACT=mailto:admin@banyaro.app
       - UMAMI_URL=https://umami.motocamp.de
-      # VAPID_PUBLIC_KEY / VAPID_PRIVATE_KEY / VAPID_CONTACT
-      # → kommen aus .env (nicht in Git)
     healthcheck:
       test: ["CMD", "python3", "-c", "import urllib.request; urllib.request.urlopen('http://localhost:8000/')"]
       interval: 30s
diff --git a/tests/test_race.py b/tests/test_race.py
deleted file mode 100644
index 1ff7b5b..0000000
--- a/tests/test_race.py
+++ /dev/null
@@ -1,233 +0,0 @@
-"""Race-Condition-Tests fuer atomare Counter (invoice_number, founder_number).
-
-Diese Tests pruefen, dass die in Sprint60 eingefuehrten Race-Schutze
-(invoice_counters-Tabelle + atomare SQL-UPDATEs) tatsaechlich eindeutige
-Werte vergeben, wenn mehrere Threads gleichzeitig zugreifen.
-"""
-
-from __future__ import annotations
-
-import concurrent.futures
-import secrets
-import threading
-
-
-# ==================================================================
-# 1) Invoice-Counter — atomare Rechnungsnummern-Vergabe
-# ==================================================================
-class TestInvoiceCounterRace:
-    """_next_invoice_number() in routes/invoices.py nutzt:
-       - dedizierte invoice_counters-Tabelle
-       - BEGIN IMMEDIATE + busy_timeout
-       - SQLite serialisiert Writer
-
-    Test: 20 parallele Aufrufe -> 20 EINDEUTIGE Nummern."""
-
-    def test_parallel_invoice_numbers_are_unique(self):
-        from database import db
-        from routes.invoices import _next_invoice_number
-
-        N = 20
-
-        # Counter fuer Pruefung zuruecksetzen — sonst koennten andere Tests
-        # die Sequence schon hochgezaehlt haben (Konflikt vermeiden wir
-        # ueber einen frischen, einzigartigen Prefix pro Testlauf).
-        prefix = "TEST-" + secrets.token_hex(3).upper()
-
-        results: list[str] = []
-        errors:  list[str] = []
-        lock = threading.Lock()
-
-        def worker():
-            try:
-                with db() as conn:
-                    n = _next_invoice_number(conn, prefix=prefix)
-                with lock:
-                    results.append(n)
-            except Exception as exc:
-                with lock:
-                    errors.append(repr(exc))
-
-        with concurrent.futures.ThreadPoolExecutor(max_workers=N) as pool:
-            futures = [pool.submit(worker) for _ in range(N)]
-            concurrent.futures.wait(futures)
-
-        assert not errors, f"Fehler in Threads: {errors}"
-        assert len(results) == N, f"Erwartete {N} Ergebnisse, bekam {len(results)}"
-        # Duplikate?
-        assert len(set(results)) == N, (
-            f"DUPLIKATE in vergebenen Nummern! {len(results)-len(set(results))} "
-            f"Kollisionen. Beispiele: {results}"
-        )
-
-    def test_invoice_counter_increments_monotonically(self):
-        """Ohne Parallelitaet muss next_num strikt um 1 steigen."""
-        from database import db
-        from routes.invoices import _next_invoice_number
-
-        prefix = "MONO-" + secrets.token_hex(3).upper()
-
-        nums = []
-        for _ in range(5):
-            with db() as conn:
-                nums.append(_next_invoice_number(conn, prefix=prefix))
-
-        # letzte Komponente aus z. B. "MONO-XYZ-2026-0001"
-        tails = [int(n.split("-")[-1]) for n in nums]
-        assert tails == [1, 2, 3, 4, 5], (
-            f"Counter steigt nicht monoton: {tails}"
-        )
-
-
-# ==================================================================
-# 2) Founder-Number — atomare Gruender-Vergabe via partner.py
-# ==================================================================
-class TestFounderNumberAtomic:
-    """partner.py setzt is_founder + founder_number in EINEM UPDATE,
-    routes/dogs.py macht dasselbe via atomarem Sub-Query.
-
-    Wir testen die SQL-Logik direkt (ohne HTTP), weil das partner-
-    Endpunkt-Aufruf-Trace fuer Race-Tests zu komplex ist."""
-
-    def _make_pending_user(self, email_prefix: str = "fp") -> int:
-        """Legt einen User direkt in der DB an, der bereits
-        is_founder_pending=1 hat."""
-        from database import db
-        email = f"{email_prefix}-{secrets.token_hex(4)}@example.com"
-        name  = f"founder{secrets.token_hex(3)}"
-        with db() as conn:
-            cur = conn.execute(
-                """INSERT INTO users
-                   (email, pw_hash, name, referral_code, email_verified, is_founder_pending)
-                   VALUES (?, ?, ?, ?, 1, 1)""",
-                (email, "x", name, secrets.token_hex(4))
-            )
-            return cur.lastrowid
-
-    def _atomic_founder_update(self, user_id: int):
-        """Reproduziert das atomare UPDATE aus routes/dogs.py."""
-        from database import db
-        with db() as conn:
-            conn.execute(
-                """UPDATE users
-                      SET is_founder = 1,
-                          founder_number = (
-                            SELECT IFNULL(MAX(founder_number), 0) + 1
-                              FROM users WHERE is_founder = 1
-                          ),
-                          is_founder_pending = 0
-                    WHERE id = ?
-                      AND is_founder_pending = 1
-                      AND (is_founder IS NULL OR is_founder = 0)
-                      AND (SELECT COUNT(*) FROM users WHERE is_founder = 1) < 100""",
-                (user_id,)
-            )
-
-    def test_parallel_founder_assignments_get_unique_numbers(self):
-        """Zwei parallele Aufrufe fuer zwei verschiedene Pending-User
-        muessen unterschiedliche founder_numbers bekommen."""
-        from database import db
-
-        ids = [self._make_pending_user("race") for _ in range(2)]
-
-        threads = []
-        errors:  list[str] = []
-        lock = threading.Lock()
-
-        def worker(uid):
-            try:
-                self._atomic_founder_update(uid)
-            except Exception as exc:
-                with lock:
-                    errors.append(repr(exc))
-
-        for uid in ids:
-            t = threading.Thread(target=worker, args=(uid,))
-            threads.append(t)
-            t.start()
-        for t in threads:
-            t.join()
-
-        assert not errors, f"Fehler: {errors}"
-
-        with db() as conn:
-            rows = conn.execute(
-                f"SELECT id, founder_number FROM users WHERE id IN ({','.join('?'*len(ids))})",
-                ids
-            ).fetchall()
-
-        numbers = [r["founder_number"] for r in rows]
-        assert all(n is not None for n in numbers), (
-            f"Mindestens eine founder_number ist NULL: {numbers}"
-        )
-        assert len(set(numbers)) == len(numbers), (
-            f"DUPLIKATE bei founder_number: {numbers}"
-        )
-
-    def test_founder_full_means_no_more_numbers(self, monkeypatch):
-        """Wenn bereits 100 Founder existieren, vergibt die atomare
-        Logik KEINE neue Nummer mehr (rowcount = 0)."""
-        from database import db
-
-        # Wir koennen nicht einfach 100 Founder anlegen — stattdessen
-        # mocken wir die Limit-Logik durch einen kleinen Limit-Test:
-        # statt < 100 -> < N, in dem wir einen eigenen Test-User
-        # einfuegen und davor genau N existierende Founder anlegen.
-        N_LIMIT = 3
-
-        # Test-Schwelle waehlen: vorhandene Founder im System zaehlen,
-        # dann auf N_LIMIT auffuellen.
-        with db() as conn:
-            existing = conn.execute(
-                "SELECT COUNT(*) FROM users WHERE is_founder=1"
-            ).fetchone()[0]
-
-        # Wir muessen auf den HARDCODED 100er-Wert in der SQL-Query
-        # vertrauen — also auf 100 auffuellen. Das ist teuer, aber
-        # eindeutig. Wir machen es in einem Insert mit GROUP BY trick.
-        to_create = max(0, 100 - existing)
-        if to_create > 0:
-            with db() as conn:
-                # Bulk-Insert ist am schnellsten
-                conn.executemany(
-                    """INSERT INTO users
-                       (email, pw_hash, name, referral_code, email_verified,
-                        is_founder, founder_number)
-                       VALUES (?, 'x', ?, ?, 1, 1, ?)""",
-                    [
-                        (
-                            f"founder{i}-{secrets.token_hex(3)}@x.test",
-                            f"founder{i}-{secrets.token_hex(3)}",
-                            secrets.token_hex(4),
-                            existing + i + 1,
-                        )
-                        for i in range(to_create)
-                    ]
-                )
-
-        # Pruefen: 100 Founder vorhanden
-        with db() as conn:
-            count = conn.execute(
-                "SELECT COUNT(*) FROM users WHERE is_founder=1"
-            ).fetchone()[0]
-        assert count >= 100, f"Setup falsch: nur {count} Founder"
-
-        # Jetzt: ein neuer Pending-User darf KEINE Nummer mehr bekommen
-        new_uid = self._make_pending_user("over")
-        self._atomic_founder_update(new_uid)
-
-        with db() as conn:
-            row = conn.execute(
-                "SELECT is_founder, founder_number, is_founder_pending FROM users WHERE id=?",
-                (new_uid,)
-            ).fetchone()
-
-        assert row["is_founder"] in (0, None), (
-            "User wurde Founder, obwohl bereits 100 vergeben sind."
-        )
-        assert row["founder_number"] is None, (
-            f"founder_number wurde vergeben trotz vollem Slot: {row['founder_number']}"
-        )
-        # Pending bleibt erhalten — User kann spaeter bei Ausstieg eines
-        # bestehenden Founders nachruecken.
-        assert row["is_founder_pending"] == 1
diff --git a/tests/test_security.py b/tests/test_security.py
deleted file mode 100644
index 68d2b14..0000000
--- a/tests/test_security.py
+++ /dev/null
@@ -1,315 +0,0 @@
-"""Security-Tests: require_owner, JWT-Blacklist, Login-Lockout.
-
-Diese Tests verifizieren die in Sprint60 eingefuehrten Security-Helper
-und stellen sicher, dass z. B. eine versehentliche Aenderung an
-require_owner / blacklist_jti hier sofort einen roten Test ergibt.
-"""
-
-from __future__ import annotations
-
-import secrets
-import time
-
-import pytest
-
-
-# ------------------------------------------------------------------
-# Helper: zweiten frischen User registrieren (wie das `user`-Fixture)
-# ------------------------------------------------------------------
-def _make_other_user(client) -> dict:
-    """Registriert einen zweiten verifizierten User mit JWT-Token."""
-    email = f"other-{secrets.token_hex(4)}@example.com"
-    pw    = "OtherPass123!"
-    name  = f"other{secrets.token_hex(3)}"
-    r = client.post("/api/auth/register", json={
-        "email": email, "password": pw, "name": name
-    })
-    assert r.status_code == 200, r.text
-
-    from database import db
-    with db() as conn:
-        conn.execute("UPDATE users SET email_verified=1 WHERE email=?", (email,))
-
-    r2 = client.post("/api/auth/login", json={"email": email, "password": pw})
-    assert r2.status_code == 200, r2.text
-    token = r2.json()["token"]
-    return {
-        "email":   email,
-        "password": pw,
-        "name":    name,
-        "token":   token,
-        "headers": {"Authorization": f"Bearer {token}"},
-    }
-
-
-# ==================================================================
-# 1) Owner-Check via require_owner — Places
-# ==================================================================
-class TestRequireOwnerPlaces:
-    """places.py nutzt `require_owner` fuer PATCH/DELETE — wir testen
-    den vollen Lebenszyklus mit zwei verschiedenen Usern."""
-
-    def _create_place(self, client, user) -> dict:
-        r = client.post(
-            "/api/places",
-            headers=user["headers"],
-            json={
-                "name": "Test-Cafe",
-                "typ":  "restaurant",
-                "lat":  49.5,
-                "lon":  11.0,
-                "hund_rein": True,
-            },
-        )
-        assert r.status_code == 201, r.text
-        return r.json()
-
-    def test_get_place_is_public(self, client, user):
-        """places sind public — fremder User darf lesen."""
-        place = self._create_place(client, user)
-        other = _make_other_user(client)
-
-        r = client.get(f"/api/places/{place['id']}", headers=other["headers"])
-        assert r.status_code == 200
-        assert r.json()["id"] == place["id"]
-
-    def test_patch_place_other_user_is_forbidden(self, client, user):
-        """PATCH mit fremdem User -> 403 (require_owner greift)."""
-        place = self._create_place(client, user)
-        other = _make_other_user(client)
-
-        r = client.patch(
-            f"/api/places/{place['id']}",
-            headers=other["headers"],
-            json={"name": "Hijacked"},
-        )
-        assert r.status_code == 403, r.text
-
-        # Owner kann immer noch patchen
-        r2 = client.patch(
-            f"/api/places/{place['id']}",
-            headers=user["headers"],
-            json={"name": "Cafe Updated"},
-        )
-        assert r2.status_code == 200
-        assert r2.json()["name"] == "Cafe Updated"
-
-    def test_delete_place_other_user_is_forbidden(self, client, user):
-        """DELETE mit fremdem User -> 403."""
-        place = self._create_place(client, user)
-        other = _make_other_user(client)
-
-        r = client.delete(f"/api/places/{place['id']}", headers=other["headers"])
-        assert r.status_code == 403, r.text
-
-        # Owner kann loeschen
-        r2 = client.delete(f"/api/places/{place['id']}", headers=user["headers"])
-        assert r2.status_code == 204
-
-    def test_patch_nonexistent_place_is_404(self, client, user):
-        """require_owner wirft 404 wenn row None ist."""
-        r = client.patch(
-            "/api/places/9999999",
-            headers=user["headers"],
-            json={"name": "Ghost"},
-        )
-        assert r.status_code == 404
-
-
-# ==================================================================
-# 2) JWT-Blacklist — Logout invalidiert Token serverseitig
-# ==================================================================
-class TestJwtBlacklist:
-    def test_logout_blacklists_bearer_token(self, client):
-        """Nach Logout muss das gleiche Token bei /auth/me 401 ergeben."""
-        # Frischer User in diesem Test — nicht das `user`-Fixture verwenden,
-        # weil andere Tests es weiter brauchen koennten.
-        info = _make_other_user(client)
-
-        # 1) Token funktioniert
-        r = client.get("/api/auth/me", headers=info["headers"])
-        assert r.status_code == 200
-
-        # 2) Logout
-        r2 = client.post("/api/auth/logout", headers=info["headers"])
-        assert r2.status_code == 200
-        assert r2.json()["ok"] is True
-
-        # 3) Token nun blacklisted -> 401
-        r3 = client.get("/api/auth/me", headers=info["headers"])
-        assert r3.status_code == 401, (
-            f"Token wurde nach Logout NICHT blacklisted (status={r3.status_code})"
-        )
-
-    def test_blacklist_entry_persisted_in_db(self, client):
-        """Pruefen, dass das jti tatsaechlich in jwt_blacklist landet."""
-        info = _make_other_user(client)
-
-        # jti aus Token extrahieren
-        import jwt as _jwt
-        payload = _jwt.decode(
-            info["token"], options={"verify_signature": False}
-        )
-        jti = payload.get("jti")
-        assert jti, "Token enthaelt kein jti"
-
-        # Logout
-        client.post("/api/auth/logout", headers=info["headers"])
-
-        from database import db
-        with db() as conn:
-            row = conn.execute(
-                "SELECT jti, expires_at FROM jwt_blacklist WHERE jti=?", (jti,)
-            ).fetchone()
-        assert row is not None, "jwt_blacklist-Eintrag fehlt nach Logout"
-        assert row["jti"] == jti
-
-
-# ==================================================================
-# 3) Login-Lockout — 5 Fehlversuche -> 429 mit Retry-After
-# ==================================================================
-class TestLoginLockout:
-    """In conftest.py wird der Lockout fuer die Test-Session global
-    deaktiviert (sonst wuerden Auth-Tests sich gegenseitig blocken).
-    Hier aktivieren wir ihn fuer einzelne Tests gezielt zurueck."""
-
-    def _enable_lockout(self, monkeypatch):
-        """Aktiviert die Lockout-Logik fuer einen einzelnen Test wieder.
-
-        In conftest.py werden routes.auth._db_is_account_locked und
-        _db_record_login_failure global gestubbt (damit Register-Spam
-        durch andere Tests nicht zur Session-weiten Sperre fuehrt).
-        Hier definieren wir die echten Implementierungen lokal neu
-        (Kopie aus routes/auth.py) und setzen sie per monkeypatch
-        zurueck — das wird nach dem Test automatisch revertiert.
-        """
-        import routes.auth as _ra
-        from database import db
-        from datetime import datetime, timedelta, timezone
-
-        # Counter leeren — sonst beeinflussen vorherige Tests die Sperre.
-        with db() as conn:
-            conn.execute("DELETE FROM login_attempts")
-
-        _LOCKOUT_WINDOW_MIN   = 15
-        _LOCKOUT_ATTEMPTS_MAX = 5
-
-        def _is_locked(email: str):
-            with db() as conn:
-                row = conn.execute(
-                    "SELECT locked_until FROM login_attempts WHERE email=? COLLATE NOCASE",
-                    (email,)
-                ).fetchone()
-            if not row or not row["locked_until"]:
-                return None
-            try:
-                locked_until = datetime.fromisoformat(row["locked_until"])
-            except Exception:
-                return None
-            now = datetime.now(timezone.utc)
-            if locked_until.tzinfo is None:
-                locked_until = locked_until.replace(tzinfo=timezone.utc)
-            if locked_until <= now:
-                return None
-            return int((locked_until - now).total_seconds())
-
-        def _record(email: str):
-            now = datetime.now(timezone.utc)
-            window_start = now - timedelta(minutes=_LOCKOUT_WINDOW_MIN)
-            with db() as conn:
-                row = conn.execute(
-                    "SELECT attempts, last_attempt FROM login_attempts WHERE email=? COLLATE NOCASE",
-                    (email,)
-                ).fetchone()
-                if row:
-                    try:
-                        last = datetime.fromisoformat(row["last_attempt"])
-                        if last.tzinfo is None:
-                            last = last.replace(tzinfo=timezone.utc)
-                    except Exception:
-                        last = now
-                    attempts = (row["attempts"] + 1) if last >= window_start else 1
-                else:
-                    attempts = 1
-
-                locked_until = None
-                if attempts >= _LOCKOUT_ATTEMPTS_MAX:
-                    locked_until = (now + timedelta(minutes=_LOCKOUT_WINDOW_MIN)).isoformat()
-
-                conn.execute(
-                    """INSERT INTO login_attempts (email, attempts, last_attempt, locked_until)
-                       VALUES (?,?,?,?)
-                       ON CONFLICT(email) DO UPDATE SET
-                         attempts=excluded.attempts,
-                         last_attempt=excluded.last_attempt,
-                         locked_until=excluded.locked_until""",
-                    (email.lower(), attempts, now.isoformat(), locked_until)
-                )
-
-        monkeypatch.setattr(_ra, "_db_is_account_locked", _is_locked)
-        monkeypatch.setattr(_ra, "_db_record_login_failure", _record)
-
-    def test_lockout_after_five_failed_logins(self, client, monkeypatch):
-        """5x falsches PW -> 6. Versuch ergibt 429 mit Retry-After."""
-        # Eigenen User anlegen, damit andere Tests das Lockout-Limit nicht
-        # zufaellig schon erreicht haben.
-        info = _make_other_user(client)
-        self._enable_lockout(monkeypatch)
-
-        # 5 Fehlversuche
-        for i in range(5):
-            r = client.post("/api/auth/login", json={
-                "email": info["email"], "password": "WRONG-PW!"
-            })
-            assert r.status_code == 401, (
-                f"Versuch {i+1}: erwartete 401, bekam {r.status_code}"
-            )
-
-        # 6. Versuch: jetzt gelockt
-        r6 = client.post("/api/auth/login", json={
-            "email": info["email"], "password": "WRONG-PW!"
-        })
-        assert r6.status_code == 429, (
-            f"Erwartete 429 nach 5 Fehlversuchen, bekam {r6.status_code}"
-        )
-        assert "Retry-After" in r6.headers, "Retry-After-Header fehlt bei Lockout"
-
-    def test_lockout_writes_to_login_attempts_table(self, client, monkeypatch):
-        """login_attempts-Eintrag muss locked_until enthalten."""
-        info = _make_other_user(client)
-        self._enable_lockout(monkeypatch)
-
-        for _ in range(5):
-            client.post("/api/auth/login", json={
-                "email": info["email"], "password": "WRONG-PW!"
-            })
-
-        from database import db
-        with db() as conn:
-            row = conn.execute(
-                "SELECT attempts, locked_until FROM login_attempts WHERE email=? COLLATE NOCASE",
-                (info["email"],)
-            ).fetchone()
-        assert row is not None, "Kein login_attempts-Eintrag angelegt"
-        assert row["attempts"] >= 5
-        assert row["locked_until"] is not None, "locked_until nicht gesetzt"
-
-
-# ==================================================================
-# 4) Rate-Limit auf /auth/login (Brute-Force-Schutz auf IP-Ebene)
-# ==================================================================
-@pytest.mark.xfail(
-    reason="rl_check ist in conftest fuer alle Tests gestubbt — Rate-Limit "
-           "laesst sich pro Test nicht selektiv reaktivieren ohne andere "
-           "parallele Tests zu beeintraechtigen."
-)
-def test_login_rate_limit_blocks_burst(client):
-    """20+ schnelle Logins -> 429 vom Rate-Limiter."""
-    info = _make_other_user(client)
-    statuses = []
-    for _ in range(25):
-        r = client.post("/api/auth/login", json={
-            "email": info["email"], "password": "WRONG-PW!"
-        })
-        statuses.append(r.status_code)
-    assert 429 in statuses, f"Kein Rate-Limit-Treffer in {statuses}"
diff --git a/tests/test_validation.py b/tests/test_validation.py
deleted file mode 100644
index b52782e..0000000
--- a/tests/test_validation.py
+++ /dev/null
@@ -1,104 +0,0 @@
-"""Pydantic-Validation-Tests: max_length verhindert massive Payloads.
-
-Sprint60 hat in forum.py und diary.py max_length-Felder eingefuehrt
-(titel<=200, text<=10000). Wir testen, dass ueberlange Eingaben
-SOFORT mit 422 abgelehnt werden — bevor sie in die DB gelangen.
-"""
-
-from __future__ import annotations
-
-
-# ==================================================================
-# Forum — ThreadCreate
-# ==================================================================
-class TestForumValidation:
-    def test_forum_thread_with_overlong_title_is_422(self, client, user):
-        """30000-Zeichen-Titel -> 422 (max_length=200)."""
-        r = client.post(
-            "/api/forum/threads",
-            headers=user["headers"],
-            json={
-                "kategorie": "allgemein",
-                "titel":     "T" * 30_000,
-                "text":      "Inhalt",
-            },
-        )
-        assert r.status_code == 422, (
-            f"Erwartete 422 (max_length), bekam {r.status_code}: {r.text[:200]}"
-        )
-
-    def test_forum_thread_with_overlong_text_is_422(self, client, user):
-        """50000-Zeichen-Text -> 422 (max_length=10000)."""
-        r = client.post(
-            "/api/forum/threads",
-            headers=user["headers"],
-            json={
-                "kategorie": "allgemein",
-                "titel":     "Ok-Titel",
-                "text":      "X" * 50_000,
-            },
-        )
-        assert r.status_code == 422, (
-            f"Erwartete 422, bekam {r.status_code}: {r.text[:200]}"
-        )
-
-    def test_forum_thread_at_max_length_passes_validation(self, client, user):
-        """200-Zeichen-Titel + 10000-Zeichen-Text muss durchgehen."""
-        r = client.post(
-            "/api/forum/threads",
-            headers=user["headers"],
-            json={
-                "kategorie": "allgemein",
-                "titel":     "T" * 200,
-                "text":      "X" * 10_000,
-            },
-        )
-        # Darf nicht 422 sein — moegliche Codes 200/201/400 sind ok
-        assert r.status_code != 422, (
-            f"Grenzwerte sollten validieren, bekam 422: {r.text[:200]}"
-        )
-
-
-# ==================================================================
-# Diary — DiaryCreate
-# ==================================================================
-class TestDiaryValidation:
-    def test_diary_with_overlong_text_is_422(self, client, user, dog):
-        """50000-Zeichen-Text -> 422 (max_length=10000)."""
-        r = client.post(
-            f"/api/dogs/{dog['id']}/diary",
-            headers=user["headers"],
-            json={
-                "titel": "Mein Eintrag",
-                "text":  "X" * 50_000,
-            },
-        )
-        assert r.status_code == 422, (
-            f"Erwartete 422, bekam {r.status_code}: {r.text[:200]}"
-        )
-
-    def test_diary_with_overlong_title_is_422(self, client, user, dog):
-        """5000-Zeichen-Titel -> 422 (max_length=200)."""
-        r = client.post(
-            f"/api/dogs/{dog['id']}/diary",
-            headers=user["headers"],
-            json={
-                "titel": "T" * 5_000,
-                "text":  "kurzer Text",
-            },
-        )
-        assert r.status_code == 422, (
-            f"Erwartete 422, bekam {r.status_code}: {r.text[:200]}"
-        )
-
-    def test_diary_with_normal_payload_succeeds(self, client, user, dog):
-        """Sanity-Check: normaler Eintrag geht durch."""
-        r = client.post(
-            f"/api/dogs/{dog['id']}/diary",
-            headers=user["headers"],
-            json={
-                "titel": "Normal",
-                "text":  "Normaler Text-Inhalt.",
-            },
-        )
-        assert r.status_code in (200, 201), r.text