Shop H1: Einbau-Widget public/embed/shop.js (Raster, Detail, Warenkorb, Kasse mit Server-Zusammenfassung, Rückkehr von Stripe, Widerrufsfunktion) und statische Tests

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

public/embed/shop-demo.html

@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="de">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="robots" content="noindex">
+<title>Webshop Testseite</title>
+<style>
+  body{margin:0;font-family:system-ui,sans-serif;background:#f6f7f9;color:#1f2937;line-height:1.5}
+  header,footer{padding:16px 24px;background:#e8ebf0}
+  main{max-width:900px;margin:0 auto;padding:32px 16px}
+  h2{margin:32px 0 12px}
+  .fallback{margin:0;padding:16px;border:2px dashed #94a3b8;border-radius:12px;background:#fff}
+  /* Gestaltung ueber CSS-Variablen der Seite (alle optional); die Akzentfarbe kommt sonst aus den Shop-Einstellungen:
+     [data-webklar-shop]{ --wks-akzent:#0f766e; --wks-radius:4px; } */
+</style>
+</head>
+<body>
+<header>Testseite der Kundenwebsite (intern, nicht verlinkt)</header>
+<main>
+  <h1>Unser Online-Shop</h1>
+
+  <!-- Platzhalter-siteKey: durch den Schluessel des Shops ersetzen. data-api weglassen = Herkunft des Skripts.
+       Der Ausweichtext bleibt ohne JavaScript und bei Fehlern (Shop nicht aktiv, nicht erreichbar) stehen.
+       Mit data-ansicht="widerruf" oeffnet das Widget gleich die Widerrufsfunktion. -->
+  <div data-webklar-shop="abcdefghijklmnop">
+    <p class="fallback" id="ausweich-shop">Unser Shop ist gerade nicht erreichbar. Bestellungen telefonisch unter 06301 1234.</p>
+  </div>
+</main>
+<footer>Fußbereich</footer>
+<script src="/embed/shop.js" defer></script>
+</body>
+</html>