Kundenansicht neu P2: öffentliche Seiten und Auftragsbestätigung im neuen Stil, Text unverändert

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

public/neu/oeffentlich/offline.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <meta name="theme-color" content="#ffffff">
+  <title>Offline – WEBklar Kundenbereich</title>
+  <!-- Wird vom Service Worker (sw.js) ohne Internet angezeigt: alles inline, keine weiteren Dateien -->
+  <style>
+    html, body { height: 100%; margin: 0; }
+    body {
+      display: grid; place-items: center; padding: 24px; box-sizing: border-box;
+      background: #fff; color: #1a1f36;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+      text-align: center; line-height: 1.5; -webkit-font-smoothing: antialiased;
+    }
+    main { max-width: 340px; }
+    svg { width: 72px; height: 72px; border-radius: 12px; box-shadow: 0 0 0 1px rgba(60, 66, 87, 0.16), 0 1px 1px rgba(0, 0, 0, 0.06); }
+    h1 { margin: 22px 0 8px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
+    p { margin: 0 0 26px; color: #5e6678; font-size: 15px; }
+    button {
+      min-height: 44px; padding: 0 24px; border: none; border-radius: 6px; background: #111; color: #fff;
+      font: inherit; font-weight: 600; font-size: 15px; cursor: pointer;
+      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 5px rgba(60, 66, 87, 0.08);
+    }
+    button:active { opacity: 0.85; }
+    button:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
+  </style>
+</head>
+<body>
+  <main>
+    <svg viewBox="0 0 512 512" aria-hidden="true">
+      <rect width="512" height="512" fill="#fff"/>
+      <g transform="translate(256 256) scale(0.9) translate(-256 -256)">
+        <ellipse cx="256" cy="256" rx="210" ry="150" fill="#111" transform="rotate(-28 256 256)"/>
+        <circle cx="356" cy="172" r="18" fill="#fff"/>
+        <path transform="translate(256 256) rotate(-28)" d="M 0,-170 C 22,-105 60,-72 120,-56 C 60,-40 22,-8 0,64 C -22,-8 -60,-40 -120,-56 C -60,-72 -22,-105 0,-170 Z" fill="#fff"/>
+      </g>
+    </svg>
+    <h1>Keine Internetverbindung</h1>
+    <p>Der Kundenbereich braucht eine Verbindung. Sobald du wieder online bist, geht es hier weiter.</p>
+    <button type="button" onclick="location.reload()">Erneut versuchen</button>
+  </main>
+  <script>
+    window.addEventListener('online', () => location.reload())
+  </script>
+</body>
+</html>