/* Die App - was nur gilt, wenn der Personalmanager in der App läuft =================================================================== Michael, 22.09.2026. static/app.js setzt , sobald die Seite in der iPhone- oder Android-App steht; im Browser greift hier nichts. Die App zeigt die Seite bis unter die Statusleiste (oben Uhr und Akku, unten der Wischbalken). Wie hoch die sind, sagt das Telefon: auf dem iPhone über env(safe-area-inset-…), auf Android setzt Capacitor dieselben Werte als --safe-area-inset-… (SystemBars, insetsHandling "css"), weil ältere Android-Webansichten env() dafür nicht kennen. Beides an einer Stelle, damit keine Seite es selbst rechnet. */ :root { --app-oben: var(--safe-area-inset-top, env(safe-area-inset-top, 0px)); --app-unten: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)); } /* Die Menüleiste wächst um die Statusleiste nach oben - ihr Weiß liegt dann hinter der Uhr, und weil sie klebt (top: 0), bleibt es beim Scrollen so. Ihre Höhe misst base.html als --kopfhoehe; die Aktionszeile darunter rückt damit von selbst mit. .25rem ist ihr Polster aus base.html. */ .in-app .navbar { padding-top: calc(.25rem + var(--app-oben)); } .in-app body { padding-bottom: var(--app-unten); } /* Die Anmeldung hat keine Menüleiste; dort rückt die Seite selbst. 1.5rem ist ihr Polster aus login_rahmen.html. */ .in-app body:has(.login-wrapper) { padding-top: calc(1.5rem + var(--app-oben)); } /* Das Angebot, Face ID einzurichten - einmal nach der ersten Anmeldung in der App, unten über dem Inhalt, bis es beantwortet ist. */ .app-angebot { position: fixed; z-index: 1050; left: var(--abstand-5); right: var(--abstand-5); bottom: calc(var(--abstand-5) + var(--app-unten)); display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-5); padding: var(--abstand-6); background: var(--weiss); border: 1px solid var(--grau-3); border-radius: var(--radius-3); box-shadow: var(--schatten-stark); font-size: var(--schrift-3); } .app-angebot .text { flex: 1 1 12rem; } .app-angebot i.bi { color: var(--gruen); } /* Eine Nachricht, die ankommt, während die App offen ist: als Meldung oben, so wie die Bestätigungen der Seite. */ .app-nachricht { position: fixed; z-index: 1060; left: var(--abstand-5); right: var(--abstand-5); top: calc(var(--abstand-5) + var(--app-oben)); padding: var(--abstand-5) var(--abstand-6); background: var(--blau); color: var(--weiss); border-radius: var(--radius-3); box-shadow: var(--schatten-stark); font-size: var(--schrift-3); } .app-nachricht b { display: block; }