/* Ausschließlich im Demo-Modus geladen: Status hat Vorrang vor Dimensionsfarben. */
#visualization .vis-item.demo-released:not(.vis-background) {
  background: #dcf3e5 !important;
  border-color: #28704b !important;
  color: #123d28 !important;
}
/* Bereits gespeicherte oder freigegebene Termine sind nach einer Änderung rot. */
#visualization .vis-item.demo-changed:not(.vis-background) {
  background: #ffe0e6 !important;
  border-color: #c00017 !important;
  color: #760010 !important;
}
html[data-theme="dark"] #visualization .vis-item.demo-released:not(.vis-background) {
  background: #265443 !important;
  border-color: #68b08b !important;
  color: #fff !important;
}
html[data-theme="dark"] #visualization .vis-item.demo-changed:not(.vis-background) {
  background: #8a1730 !important;
  border-color: #ff8798 !important;
  color: #fff !important;
}
/* Text erbt die Statusfarbe, auch wenn die alte Oberfläche Unterelemente einfärbt. */
#visualization .vis-item.demo-released .vis-item-content *,
#visualization .vis-item.demo-changed .vis-item-content * { color: inherit !important; }

/* Der Hinweis überlagert weder Werkzeugleiste noch Eingaben und bleibt schließbar. */
.demo-interest {
  position: fixed;
  right: 20px;
  bottom: 48px;
  z-index: 10000;
  width: min(340px, calc(100vw - 32px));
  padding: 18px 42px 18px 18px;
  border: 1px solid var(--line);
  border-left: 4px solid #c00017;
  border-radius: 12px;
  box-shadow: 0 8px 28px #0003;
  color: var(--ink);
  background: var(--surface);
  font: 14px/1.5 "Segoe UI", Arial, sans-serif;
}
.demo-interest p { margin: 6px 0 12px; color: var(--muted); }
.demo-interest a { color: #c00017; text-decoration: underline; font-weight: 650; }
html[data-theme="dark"] .demo-interest a { color: #ff8798; }
.demo-interest-close {
  position: absolute; right: 4px; top: 4px;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--ink); font-size: 24px; cursor: pointer;
}
.demo-interest-close:hover { background: var(--field); }
.demo-interest a:focus-visible, .demo-interest-close:focus-visible {
  outline: 3px solid #377ed0; outline-offset: 2px;
}

/* Deaktivierte Demo-Bereiche bleiben erkennbar und mit einer Erklärung versehen. */
#navigation .demo-unavailable, #buttonmenu .demo-unavailable {
  opacity: .5; cursor: not-allowed; filter: grayscale(1);
  color: var(--muted) !important; background: transparent !important;
}
.demo-unavailable-note { margin: 8px 0; font-size: 12px; color: var(--muted); }