Öffnungszeiten: Editor für Hinweis- und Kontakt-Leiste, Google und Vorschau

Hinweis-Leiste (Liste, „Hinweis-Leiste anlegen“, Art, Knopf, Zeitraum, Preis-Hinweis),
Kontakt-Leiste (Telefon, Adresse, WhatsApp mit Datenschutz-Haken, R12 in der Kundenansicht),
Google (Für Google kopieren, Profil-Link), Live-Vorschau mit Regler „Uhrzeit testen“
und UI-Prüfung test/ui/zeiten-portal.ui.mjs.

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

public/zeiten.css

@@ -1,4 +1,5 @@
-/* Öffnungszeiten live im Kundenbereich (zeiten.js, zeiten-bestellen.js und der Editor: zeiten-editor.js, zeiten-plaene.js, zeiten-ausnahmen.js).
+/* Öffnungszeiten live im Kundenbereich (zeiten.js, zeiten-bestellen.js und der Editor: zeiten-editor.js, zeiten-plaene.js, zeiten-ausnahmen.js,
+   zeiten-leisten.js, zeiten-google.js).
    Farben und Abstände aus den Tokens von kundenbereich.css (.kb-page). Die Bausteine der Bestell- und Statusseiten (tm-bestellen, tm-statuskarte,
    tm-rechtstext, tm-haken, tm-pille, tm-box, tm-meldung, tm-info …) stehen in termine.css und gelten hier mit; neu sind nur Klassen mit zt-
    und die Regeln für #view-zeiten. Handy: bis 880px wie die App-Ansicht, Tippflächen mindestens 44px. */
@@ -66,11 +67,48 @@
 .zt-tag > .tm-fehler { margin-top: 8px; }
 .zt-feiertag .zt-tag { margin-top: 10px; padding: 0; border: 0; background: transparent; }
 
+/* Editor II: Live-Vorschau mit Regler „Uhrzeit testen“, Hinweis-Leiste, Kontakt-Leiste, Google (zeiten-editor.js, zeiten-leisten.js, zeiten-google.js) */
+.zt-editor [hidden] { display: none; }
+.zt-vorschau { padding: 16px 18px; }
+.zt-vorschau-zeile { margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
+.zt-vorschau-text { font-size: 17px; }
+.zt-vorschau-text::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--kb-muted); }
+.zt-vorschau-text[data-offen='true']::before { background: #4ade80; }
+.zt-vorschau-text[data-offen='false']::before { background: #f87171; }
+.zt-vorschau-text[data-offen='null']::before { background: #fbbf24; }
+.zt-regler { min-width: 0; margin: 14px 0 0; padding: 0; border: 0; }
+.zt-regler legend { padding: 0; margin-bottom: 2px; font-size: 13px; font-weight: 600; }
+.zt-regler-felder { display: flex; flex-wrap: wrap; gap: 0 14px; }
+.zt-regler-felder .tm-feld { margin-top: 8px; }
+.zt-regler-ergebnis { margin-top: 10px; font-size: 14px; line-height: 1.5; color: inherit; overflow-wrap: anywhere; }
+.zt-regler-ergebnis:empty { display: none; }
+.zt-regler-ergebnis[role='alert'] { color: #fecaca; }
+.zt-regler .tm-feld select, .zt-regler .tm-feld input { min-height: 40px; }
+.zt-art { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
+.zt-art-info { background: #e0f2fe; color: #0c4a6e; }
+.zt-art-aktion { background: #dcfce7; color: #14532d; }
+.zt-art-urlaub { background: #fef3c7; color: #78350f; }
+.zt-art-wichtig { background: #b91c1c; color: #ffffff; }
+.zt-muster { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; font-size: 14px; line-height: 1.4; text-align: center; }
+.zt-muster-text { overflow-wrap: anywhere; }
+.zt-muster-knopf { padding: 3px 12px; border-radius: 999px; border: 1.5px solid currentColor; font-size: 13px; font-weight: 700; }
+.zt-knopf-felder { margin-top: 0; }
+.zt-hinweis-form .zt-tag { margin-top: 0; }
+.zt-whatsapp { margin-top: 10px; padding: 0 14px 10px; border-radius: 12px; border: 1px solid var(--kb-border); background: rgba(255, 255, 255, 0.02); }
+.zt-google-text {
+  display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 12px; font: inherit; font-size: 14px; line-height: 1.6; resize: vertical; white-space: pre; overflow: auto;
+  border: 1px solid var(--kb-border-strong); background: rgba(255, 255, 255, 0.05); color: inherit;
+}
+.zt-google-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
+.zt-google-aktionen a { display: inline-flex; align-items: center; text-decoration: none; }
+.zt-google-meldung { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: inherit; }
+.zt-google-meldung:empty { display: none; }
+
 @media (max-width: 880px), (pointer: coarse) {
   #view-zeiten button, #view-zeiten .kb-btn-outline, #view-zeiten .kb-btn-primary { min-height: 44px; }
   #view-zeiten .tm-haken { align-items: center; min-height: 44px; margin-top: 0; margin-bottom: 0; }
   #view-zeiten .tm-haken input { margin-top: 0; }
-  #view-zeiten .zt-zeit input, #view-zeiten .zt-tag select, #view-zeiten .zt-feiertag select { min-height: 44px; }
+  #view-zeiten .zt-zeit input, #view-zeiten .zt-tag select, #view-zeiten .zt-feiertag select, #view-zeiten .zt-regler .tm-feld select, #view-zeiten .zt-regler .tm-feld input { min-height: 44px; }
 }
 @media (max-width: 600px) {
   .zt-fenster-name { min-width: 100%; }