Öffnungszeiten: Website-Skript mit Status und Tabelle

public/embed/zeiten.js ruft die öffentliche Zeiten-API einmal je Seite ab und füllt
die Platzhalter [data-webklar-zeiten] (tabelle, status, badge; data-plan, Hauptplan
ohne Angabe). Reine Funktionen (waehleWechsel, naechsterWechsel, waehleHinweis,
jetztMitServer, tabelleDaten) stehen zwischen den Marken @rein-anfang/@rein-ende.
Timer auf den nächsten Wechsel (jede Wartezeit auf 10 Minuten begrenzt), Neuladen
höchstens alle 10 Minuten, Daten älter als 24 Stunden, Fehler oder aktiv:false
lassen das Ersatz-HTML stehen bzw. stellen es wieder her. Testseite zeiten-demo.html.

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

public/embed/zeiten-demo.html

@@ -0,0 +1,57 @@
+<!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>Öffnungszeiten 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:760px;margin:0 auto;padding:32px 16px}
+  h2{margin:32px 0 12px}
+  .ersatz{margin:0;padding:12px 16px;border:2px dashed #94a3b8;border-radius:12px;background:#fff}
+  .ersatz table{border-collapse:collapse}
+  .ersatz th,.ersatz td{padding:.25em .75em .25em 0;text-align:left}
+  /* Gestaltung ueber CSS-Variablen der Seite (alle optional): [data-webklar-zeiten]{ --wkz-offen:#0f766e; --wkz-heute:#fde68a; } */
+</style>
+</head>
+<body>
+<header>Testseite der Kundenwebsite (intern, nicht verlinkt)</header>
+<main>
+  <h1>Öffnungszeiten</h1>
+  <p>Der siteKey unten ist ein Platzhalter: für echte Daten <code>data-site</code> durch den siteKey des Projekts ersetzen (und bei Bedarf <code>data-api</code> am Script-Tag ergänzen). Ohne Daten (oder bei einem Fehler) bleibt überall das Ersatz-HTML stehen.</p>
+
+  <h2>Tabelle (Hauptplan)</h2>
+  <div data-webklar-zeiten data-modus="tabelle">
+    <div class="ersatz">
+      <table>
+        <caption>&Ouml;ffnungszeiten</caption>
+        <tr><th scope="row">Montag</th><td>09:00 &#8211; 18:00</td></tr>
+        <tr><th scope="row">Dienstag</th><td>09:00 &#8211; 18:00</td></tr>
+        <tr><th scope="row">Mittwoch</th><td>09:00 &#8211; 18:00</td></tr>
+        <tr><th scope="row">Donnerstag</th><td>09:00 &#8211; 18:00</td></tr>
+        <tr><th scope="row">Freitag</th><td>09:00 &#8211; 18:00</td></tr>
+        <tr><th scope="row">Samstag</th><td>09:00 &#8211; 13:00</td></tr>
+        <tr><th scope="row">Sonntag</th><td>geschlossen</td></tr>
+      </table>
+    </div>
+  </div>
+
+  <h2>Status (Hauptplan)</h2>
+  <div data-webklar-zeiten data-modus="status">
+    <p class="ersatz">Mo&#8211;Fr 09:00 &#8211; 18:00 Uhr, Sa 09:00 &#8211; 13:00 Uhr.</p>
+  </div>
+
+  <h2>Badge (Plan „haupt“, im Fließtext)</h2>
+  <p>Wir haben gerade <span data-webklar-zeiten data-modus="badge" data-plan="haupt">Mo&#8211;Fr 09:00 &#8211; 18:00 Uhr</span> für Sie da.</p>
+
+  <h2>Unbekannter Plan (Ersatz-HTML bleibt, Warnung in der Konsole)</h2>
+  <div data-webklar-zeiten data-modus="status" data-plan="gibt-es-nicht">
+    <p class="ersatz">Dieser Platzhalter nennt einen Plan, den es nicht gibt.</p>
+  </div>
+</main>
+<footer>Fußbereich</footer>
+<script src="/embed/zeiten.js" data-site="abcdefghijklmnop" defer></script>
+</body>
+</html>