/* Nur für die Demo: Hinweisband, Meldung, Seitenpanel. Alles andere kommt aus hub.css (Original). */
.demo-band {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 200;
  background: var(--anthrazit); color: #fff; font-size: 11.5px; line-height: 1; padding: 7px 12px;
  border-radius: 999px; box-shadow: var(--sh2); pointer-events: none; opacity: .92; white-space: nowrap;
}
@media (max-width: 900px) { .demo-band { bottom: calc(76px + env(safe-area-inset-bottom)); } }
.demo-meldung {
  position: fixed; left: 50%; top: 18px; transform: translate(-50%, -12px); z-index: 300; opacity: 0;
  background: var(--s1); color: var(--ink1); border: 1px solid var(--line); box-shadow: var(--sh2);
  border-radius: 10px; padding: 10px 14px; font-size: 12.5px; transition: opacity .2s, transform .2s;
}
.demo-meldung.an { opacity: 1; transform: translate(-50%, 0); }
.demo-panel-hinter { position: fixed; inset: 0; z-index: 90; background: rgba(16, 20, 28, .28); }
.demo-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 91; width: min(560px, 100vw); overflow-y: auto;
  background: var(--s1); border-left: 1px solid var(--line); box-shadow: var(--sh2);
  transform: translateX(24px); opacity: 0; transition: transform .22s ease, opacity .22s ease;
}
.demo-panel.an { transform: none; opacity: 1; }
.demo-panel.breit { width: min(880px, 100vw); }
/* Handy: Hinweisband weicht Rückgängig-Leiste, Blättern und Vollbildern (sonst verdeckt es deren untere Zeile). */
@media (max-width: 900px) {
  body:has(.ll-hinweis, .blatt, .ll-blatt, .ll-vollbild, .such-fenster, .seitenkachel.offen, .demo-panel) .demo-band { display: none; }
}