/* Öffnungszeiten live im Kundenbereich (zeiten.js, zeiten-bestellen.js; der Editor kommt mit den Aufgaben 29 und 30 dazu).
   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. */

#view-zeiten .kb-panel { max-width: none; }
#view-zeiten .fn-project { margin-bottom: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; }
#view-zeiten button:focus-visible, #view-zeiten input:focus-visible, #view-zeiten select:focus-visible, #view-zeiten textarea:focus-visible,
#view-zeiten summary:focus-visible, #view-zeiten a:focus-visible { outline: 3px solid #d4b4ff; outline-offset: 2px; }
#view-zeiten input, #view-zeiten select, #view-zeiten textarea { color-scheme: dark; } /* Kalender und Auswahllisten der Zeitfelder dunkel */
#view-zeiten .kb-btn-outline, #view-zeiten .kb-btn-primary { min-height: 40px; }

/* Ansicht: oben die Karte oder die Bestellseite, darunter der Platz des Editors */
.zt-kopf > .kb-panel { margin-bottom: 16px; }
.zt-editor { margin-top: 4px; }
.zt-editor[hidden] { display: none; }
.zt-editor:empty { display: none; }
.zt-hinweis h3 { margin-bottom: 8px; }
.zt-hinweis .kb-btn-outline { margin-top: 4px; }
.zt-bestellen .tm-bestellen-aktion .kb-btn-outline { justify-self: start; }
.zt-status .tm-box { margin-bottom: 0; }
.zt-status .tm-box .kb-btn-outline { flex: 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; }
}
@media (max-width: 600px) {
  .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; }
  #view-zeiten .tm-rechtstext { max-height: 260px; }
}
@media (prefers-reduced-motion: reduce) { #view-zeiten * { transition: none !important; animation: none !important; } }