Öffnungszeiten: Editor für Pläne, Feiertage und Ausnahmen

Speichern über PUT /api/zeiten (Version, 409, Feldfehler per ID-Pfad), Zeitpläne mit
Wochentagen, Hauptplan wechseln und Löschen (R10, R33), Feiertage je Bundesland,
Betriebsurlaub und Sondertage mit Hinweis-Leisten-Frage. Die Hülle behält den Editor
bei einem neuen Stand und zeichnet nur den Kopf neu.

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

public/zeiten.css

@@ -1,4 +1,4 @@
-/* Öffnungszeiten live im Kundenbereich (zeiten.js, zeiten-bestellen.js; der Editor kommt mit den Aufgaben 29 und 30 dazu).
+/* Öffnungszeiten live im Kundenbereich (zeiten.js, zeiten-bestellen.js und der Editor: zeiten-editor.js, zeiten-plaene.js, zeiten-ausnahmen.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. */
@@ -21,12 +21,59 @@
 .zt-status .tm-box { margin-bottom: 0; }
 .zt-status .tm-box .kb-btn-outline { flex: none; }
 
+/* Editor: Zeitplaene, Feiertage, Ausnahmen (zeiten-editor.js, zeiten-plaene.js, zeiten-ausnahmen.js) */
+.zt-editor > * + * { margin-top: 16px; }
+.zt-editor > .tm-meldung:empty, .zt-editor > .tm-box[hidden] { margin: 0; }
+.zt-kopfbereich:empty { display: none; }
+.zt-spaeter { margin: 0 4px; line-height: 1.5; }
+.zt-plaene { display: grid; gap: 12px; }
+.zt-plan { border-radius: 14px; background: var(--kb-surface); border: 1px solid var(--kb-border); }
+.zt-plan[open] { border-color: var(--kb-purple-line); }
+.zt-plan-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 44px; padding: 12px 16px; list-style: none; cursor: pointer; }
+.zt-plan-kopf::-webkit-details-marker { display: none; }
+.zt-plan-kopf::before { content: '▸'; flex: none; color: var(--kb-muted); transition: transform 0.15s; }
+.zt-plan[open] > .zt-plan-kopf::before { transform: rotate(90deg); }
+.zt-plan-kopf .tm-name { display: inline; }
+.zt-plan-kopf .tm-meta { display: inline; margin: 0; }
+.zt-plan-kopf code, .tm-formular code { padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); font-size: 12.5px; }
+.zt-plan > .tm-editor { margin: 0; padding: 0 16px 16px; }
+.zt-plan-form .tm-frage-knoepfe { margin-top: 16px; }
+.zt-plan-form > .tm-hinweis { margin-top: 10px; }
+.zt-werkzeuge { display: flex; flex-wrap: wrap; gap: 0 10px; }
+.zt-werkzeuge:empty { display: none; }
+.zt-editor .tm-abschnitt > .tm-frage-box { margin: 12px 0 16px; }
+.zt-tage { display: grid; gap: 10px; margin-top: 14px; }
+.zt-tag { min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--kb-border); background: rgba(255, 255, 255, 0.02); }
+.zt-tag > .tm-feld { margin-top: 0; }
+.zt-tag-felder { display: grid; gap: 10px; margin-top: 8px; }
+.zt-tag-felder[hidden], .zt-zeiten[hidden] { display: none; }
+.zt-tag select, .zt-feiertag select {
+  width: 100%; max-width: 360px; box-sizing: border-box; padding: 10px 12px; border-radius: 12px; font: inherit; font-size: 16px;
+  border: 1px solid var(--kb-border-strong); background: rgba(255, 255, 255, 0.05); color: inherit;
+}
+.zt-tag select option { color: #111; }
+.zt-zeiten { display: grid; gap: 8px; }
+.zt-fenster { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
+.zt-fenster-name { min-width: 11rem; font-size: 13px; color: var(--kb-muted); }
+.zt-zeit { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }
+.zt-zeit input {
+  width: 8.5rem; min-height: 40px; box-sizing: border-box; padding: 8px 10px; border-radius: 12px; font: inherit; font-size: 16px; font-variant-numeric: tabular-nums;
+  border: 1px solid var(--kb-border-strong); background: rgba(255, 255, 255, 0.05); color: inherit;
+}
+.zt-tag [aria-invalid='true'] { border-color: #f87171; }
+.zt-tag > .tm-fehler { margin-top: 8px; }
+.zt-feiertag .zt-tag { margin-top: 10px; padding: 0; border: 0; background: transparent; }
+
 @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; }
 }
 @media (max-width: 600px) {
+  .zt-fenster-name { min-width: 100%; }
+  .zt-zeit input { width: 7.75rem; }
+  .zt-plan > .tm-editor { padding: 0 12px 14px; }
   .zt-bestellen .tm-bestellen-aktion { justify-items: stretch; }
   .zt-status .tm-box .kb-btn-outline { width: 100%; }
   .zt-status .tm-aktionen > * { flex: 1 1 auto; }