/* Demo-Schicht: Hinweis unten (Speichern, Senden, Verweise nach außen). */
#demo-hinweis {
	position: fixed; left: 50%; bottom: 72px; transform: translate(-50%, 12px); z-index: 2147483000;
	max-width: min(92vw, 460px); padding: 10px 16px; border-radius: 12px;
	background: rgba(20, 23, 28, .94); color: #fff; font: 500 14px/1.4 system-ui, -apple-system, sans-serif;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .3); opacity: 0; pointer-events: none;
	transition: opacity .2s, transform .2s; text-align: center;
}
#demo-hinweis.an { opacity: 1; transform: translate(-50%, 0); }

/* Demo-Leiste unten links: Ansicht Büro oder Mitarbeiter App */
#demo-leiste {
	position: fixed; left: 14px; bottom: 14px; z-index: 2147482999; display: flex; align-items: center; gap: 2px;
	padding: 4px 4px 4px 6px; border-radius: 999px; background: rgba(20, 23, 28, .92); color: #fff;
	font: 500 12px/1 system-ui, -apple-system, sans-serif; box-shadow: 0 8px 26px rgba(0, 0, 0, .28); backdrop-filter: blur(8px);
}
#demo-leiste a { white-space: nowrap; color: #dfe4e8; text-decoration: none; padding: 6px 9px; border-radius: 999px; }
#demo-leiste a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
#demo-leiste a.on { background: #007a86; color: #fff; font-weight: 600; }
#demo-leiste .demo-ibx { font-weight: 800; letter-spacing: -.02em; padding: 6px 8px; }
#demo-leiste .demo-tag { margin-right: 4px; background: #5cc4b6; color: #06302d; font-weight: 700; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; }
#demo-leiste .demo-lbl { opacity: .7; margin: 0 4px 0 6px; }
@media (max-width: 899px) {
	/* Am Handy klein über der unteren Leiste der App */
	#demo-leiste { left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 78px); font-size: 11.5px; opacity: .94; }
	#demo-leiste a { padding: 5px 8px; }
	#demo-hinweis { bottom: calc(env(safe-area-inset-bottom, 0px) + 124px); }
}

/* iPad als App vom Home-Bildschirm (31.10.2026, Wunsch Michel): Wieland OS zeichnet unter die Statusleiste, rückt die Kopfleiste
   aber nur bis 760 px herunter. Ab 761 px Kopfleiste und Seitenleiste um die Statusleiste nach unten; im Browser und am Mac ist der Wert 0. */
@media (display-mode: standalone) and (min-width: 761px) {
	html { --demo-oben: env(safe-area-inset-top, 0px); }
	html .os .os-side, html .os.schmal .os-side { padding-top: var(--demo-oben); }
	html .os-top { padding-top: var(--demo-oben); height: calc(var(--top) + var(--demo-oben)); }
	html .neu-laden { top: calc(var(--top) + var(--demo-oben)); }
}