/* Demo-Hinweis (nur demo.hornnetwork.tech) – Apple-Stil: dezentes Band oben, Toast unten */
.demo-banner { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; text-align: center;
  padding: 7px 16px; padding-top: max(7px, env(safe-area-inset-top)); font-size: 13px; line-height: 1.3; color: var(--muted);
  background: color-mix(in srgb, var(--orange) 10%, var(--bg)); border-bottom: .5px solid var(--line); position: relative; z-index: 11; }
.demo-banner b { color: var(--text); font-weight: 600; }
.demo-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); flex: none; }
body.has-bg .demo-banner { background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
body.has-bg .demo-banner + .navbar, .demo-banner + .navbar { top: 0; }
.demo-toast { position: fixed; z-index: 1000; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translate(-50%, 16px); opacity: 0;
  display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 14px; font-size: 15px;
  background: color-mix(in srgb, var(--card) 82%, transparent); color: var(--text); box-shadow: 0 8px 30px rgba(0,0,0,.18);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); transition: opacity .25s, transform .25s; pointer-events: none; }
.demo-toast.zeigen { opacity: 1; transform: translate(-50%, 0); }
.demo-toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); flex: none; }
@media (prefers-reduced-motion: reduce) { .demo-toast { transition: none; } }