/* Operian OS — Mobile-Shell-Layer (additiv, NEBEN dem eingefrorenen Bundle). * * Der Bundle (assets/index-r1.js) bleibt unangetastet — Bundle-Freeze-Doktrin (CLAUDE.md). * Alle künftigen Regeln hier sind ausschließlich auf @media (max-width: 767px) beschränkt; * das Desktop-/Tablet-Verhalten (≥768px) darf durch diese Datei nie verändert werden. */ /* M1.1 — authentifizierte OS-Menüleiste auf Smartphones erreichbar halten. * * Die Leiste ist React-gerendert (Bundle, eingefroren) ohne IDs/data-Attribute; die * Tailwind-Utility-Klassen sind Build-Output des GENAU EINMAL gepatchten Bundles und * ändern sich nicht zur Laufzeit — daher sind Struktur-Selektoren (Kindposition) unter * dem stabilen z-[9999]-Leisten-Root hier verlässlich. Der Abmelden-Button hat zusätzlich * ein stabiles title="Abmelden" (deutsches UI-Label, semantisch, kein Utility-Artefakt). * * Leisten-Struktur (siehe DOM-Audit): * div[class*="z-[9999]"] Leisten-Root (h-9, volle Breite) * ├─ div (links) erstes Kind * │ ├─ div > button "vilo" primärer VILO-Menütrigger — bleibt erhalten * │ ├─ span (nur bei fokussiertem Fenster!) App-Name (z.B. "Dienstplan") — zusätzliches * │ │ Kind, das NUR erscheint wenn ein Fenster offen/ * │ │ fokussiert ist (per Audit mit offenem Fenster * │ │ nachträglich entdeckt, M1.3). Verschiebt bei * │ │ einer rein positionsbasierten Auswahl (nth- * │ │ child) den folgenden Menü-Wrapper von Position * │ │ 2 auf 3 — siehe Klassen-Selektor unten, der * │ │ davon absichtlich unabhängig ist. * │ └─ div.ml-1 Desktop-Menü (Ablage/Bearbeiten/…/Hilfe) — * │ Position unter den Geschwistern variiert (2 * │ ohne, 3 mit fokussiertem Fenster), daher hier * │ per Klassenkombination statt nth-child anvisiert * └─ div (rechts, letztes Kind) * ├─ div (Status-Icons: Lautstärke/WLAN/Akku) * ├─ div (Name-Span, .vilo-clock, Datum, Uhrzeit) * └─ button[title="Abmelden"] Logout — muss sichtbar/tappbar bleiben */ @media (max-width: 767px) { /* Desktop-Menülabels (Ablage…Hilfe) verbergen — der primäre VILO-Trigger (erstes Kind der linken Gruppe) bleibt unangetastet. Das ist der eine Cluster, der bei knapper Breite den Account-/Logout-Bereich rechts aus dem Viewport schiebt. Anvisiert über die vollständige, stabile Klassenkombination (nicht nth-child) — sonst würde die Regel bei fokussiertem Fenster (zusätzlicher App-Name-Span verschiebt die Kindposition) ins Leere laufen und der volle Desktop-Menü den Abmelden-Button aus dem Viewport drängen. */ div[class*="z-[9999]"] > div:first-child > div.flex.items-center.gap-0.ml-1 { display: none; } /* Zeiterfassungs-Widget-Uhr (.vilo-clock, siehe unten in dieser Datei rechts bereits verborgen) taucht bei FOKUSSIERTEM Zeiterfassungs-Fenster zusätzlich links neben dem App-Namen auf (kernel.js hängt sie dort als Menüleisten-Erweiterung der aktiven App ein — per Audit entdeckt: eigene id="vilo-clock-zeiterfassung", ca. 90px breit). Ohne dieses Verstecken schiebt sie bei "Zeiterfassung" fokussiert bereits bei 375px den Abmelden-Button aus dem Viewport (388px Rechtskante bei 375px Breite gemessen). Bleibt wie ihr rechtes Gegenstück auf Mobil ausgeblendet — dieselbe Vorgabe wie in M1.1. */ div[class*="z-[9999]"] > div:first-child > span.vilo-clock { display: none; } /* Status-Icons (Lautstärke/WLAN/Akku) sind auf dem Smartphone redundant (das Betriebs- system des Geräts zeigt sie bereits) und nicht Teil der geforderten Mobil-Funktionen (Account/Logout/VILO-Menü) — verbergen schafft den nötigen Platz, ohne Uhr oder Nutzernamen anzutasten. */ div[class*="z-[9999]"] > div:last-child > div:first-child { display: none; } /* Nutzername neben der Uhr auf sehr schmalen Screens einklappen, statt umzubrechen (der Name darf laut Vorgabe eingeschränkt werden). */ div[class*="z-[9999]"] > div:last-child > div:nth-child(2) > span:first-child { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Zeiterfassungs-Widget-Uhr (.vilo-clock), Trennstrich und Datum verbergen — laut Vorgabe darf die Uhr entfallen; ohne sie bricht "Sa., 11. Juli" nicht mehr in die zweite Zeile um und sprengt die feste Leistenhöhe (h-9). Die kompakte Uhrzeit (letztes Kind) bleibt sichtbar. */ div[class*="z-[9999]"] > div:last-child > div:nth-child(2) > span.vilo-clock, div[class*="z-[9999]"] > div:last-child > div:nth-child(2) > span:nth-child(3), div[class*="z-[9999]"] > div:last-child > div:nth-child(2) > span:nth-child(4) { display: none; } /* Abmelden-Button: sichtbarer, tappbarer Bereich vergrößern (Ziel 44×44px), ohne die Leistenhöhe (h-9/36px) zu verändern — die Hit-Fläche wächst über ein Pseudo-Element symmetrisch nach außen, das Layout der Leiste bleibt unberührt. */ div[class*="z-[9999]"] > div:last-child > button[title="Abmelden"] { position: relative; min-width: 32px; } div[class*="z-[9999]"] > div:last-child > button[title="Abmelden"]::before { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } } /* M1.3b — App-Name-Span (siehe M1.1-Audit oben) darf bei 320px den Abmelden-Button nicht * aus dem Viewport drängen. Der Span erscheint nur bei fokussiertem Fenster und übernimmt * unverändert dessen Anzeigenamen (z.B. "Dienstplan" = 79px, "Zeiterfassung" = 98px, * "Team" = kürzer) — kein CSS-Fixmaß im Bundle. Gemessen bei 320px mit "Zeiterfassung" * fokussiert: Logout-rechte-Kante lag bei 324.5px (4.5px außerhalb) statt bei ≤320px wie * bei "Dienstplan" (307.6px) — ausschließlich bei 320px und nur bei längeren Namen tritt * der Überlauf auf; 375px+ hat genug Spielraum (unverändert, siehe M1.1-Doku) und bleibt * daher bewusst außerhalb dieser schmaleren Zusatz-Query. max-width:70px hält selbst den * längsten Namen ("Zeiterfassung") sicher unter dem Budget (vilo-Trigger + Span + Nutzer- * Cluster + Logout muss in 320px passen); überschüssiger Text wird abgeschnitten (Ellipse) * statt den Logout-Button zu verdrängen. overflow:hidden hebt zugleich die implizite * Flex-Mindestbreite auf (dieselbe Notwendigkeit wie beim Dock in M1.3), sonst bliebe * max-width auf diesem Flex-Kind wirkungslos. */ @media (max-width: 340px) { div[class*="z-[9999]"] > div:first-child > span.text-white\/80.text-xs.font-semibold.px-2 { max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; } } /* M1.2 — OS-Fenster auf Smartphones erreichbar machen (App-Iframe bekommt Mobil-Breite). * * Fenster-DOM (siehe DOM-Audit, React-gerendert/eingefroren, keine IDs/data-Attribute): * .window-shadow Fenster-Root — EIGENE, semantische Klasse * (kein Tailwind-Utility-Artefakt, daher als * Selektor stabil). Inline: position:absolute; * top/width/height (900×600 Desktop-Fixmaß) + * transform (Kaskaden-Offset + Öffnen/Schließen- * Animation). z-index pro Fenster aufsteigend * (oberstes/fokussiertes Fenster = höchster Wert * — bereits vorhandene, verlässliche Stapel- * reihenfolge; kein JS/kernel.js nötig, da auf * Mobil ohnehin nur EIN Fenster deckungsgleich * den ganzen Screen füllt und das oberste per * nativer z-index-Stapelung allein sichtbar/ * bedienbar ist — dahinterliegende Fenster sind * vollständig verdeckt, kein CSS-Trick nötig, um * "das aktive Fenster" gesondert zu selektieren). * ├─ div.rounded-2xl.overflow-hidden…w-full.h-full Clip-Wrapper * │ ├─ div.cursor-grab…bg-neutral-800 Titelleiste (44px, draggable) — bleibt erhalten * │ │ ├─ div.flex.items-center.gap-0 Ampel: button.window-btn (rot/gelb/grün = * │ │ │ Schließen/Minimieren/Maximieren) — eigene, * │ │ │ semantische Klasse, bleibt unangetastet * │ │ ├─ div (zentrierter Titel-Text) * │ │ └─ div.w-16 (Aktualisieren-Button) * │ └─ div.flex-1.overflow-auto.bg-neutral-900 Content-Pane * │ └─ div.w-full.h-full > iframe.w-full.h-full App-Iframe — erbt Breite/Höhe vom * │ Fenster-Root, braucht kein eigenes Ziel * └─ 8× div.absolute.cursor-{ns,ew,nwse,nesw}-resize Resize-Handles, direkte Kinder von * .window-shadow (Geschwister des Clip-Wrappers) — auf Mobil überflüssig/fehleranfällig * (versehentliches Ändern der Fenstergröße per Touch), da das Fenster ohnehin fix * bildschirmfüllend ist. * * Kein Ahnen-Element von .window-shadow setzt transform/filter/perspective (per Audit * geprüft) — position:fixed verankert daher zuverlässig am echten Viewport, nicht an einem * versehentlich neuen Containing Block. Topleiste (z-[9999], M1.1) und Dock (z-9990, vom * Bundle bereits unabhängig positioniert/gestapelt) bleiben unangetastet und liegen dank * ihrer höheren z-index-Werte weiterhin sichtbar über dem Fenster. Der Dock (per DOM-Audit: * .absolute.bottom-4…, feste Pillenhöhe 92px, Bodenabstand ursprünglich 16px) würde bei * einem exakt bildschirmfüllenden Fenster dessen unteren Bereich optisch verdecken — * App-Inhalte dort blieben zwar über den Dock sichtbar, aber nicht mehr tappbar (Dock hat * höheren z-index). Die Fensterhöhe reserviert daher unten Platz nach DERSELBEN Formel wie * der in M1.3 safe-area-bewusst positionierte Dock-Bodenabstand (siehe dort) + 4px Puffer, * damit beide bei einem Home-Indicator (env(safe-area-inset-bottom) > 0) synchron bleiben * — der Dock selbst wird dabei nicht angefasst (non-goal: keine Dock-Änderungen in M1.2). * Bei env()=0 (Desktop-Browser ohne Notch, hier verifiziert) ergibt die Formel exakt die * bisherigen 112px (92px Pille + 16px Bodenabstand + 4px Puffer) — keine sichtbare Änderung * im getesteten Environment. */ @media (max-width: 767px) { .window-shadow { /* Überschreibt die Inline-Kaskaden-/Animations-Werte (top/width/height/transform) — !important nötig, da React sie laufend per style-Attribut setzt. position:fixed löst das Fenster bewusst aus dem absolut/kaskadierend positionierten Desktop- Container heraus und verankert es direkt am Viewport. */ position: fixed !important; top: 36px !important; left: 0 !important; width: 100vw !important; /* 36px Topleiste + 96px (92px Dock-Pille + 4px Puffer) + derselbe safe-area-bewusste Bodenabstand wie der Dock (M1.3) — bei env()=0 identisch zum bisherigen 148px. */ height: calc(100vh - 36px - 96px - max(16px, calc(env(safe-area-inset-bottom) + 8px))) !important; height: calc(100dvh - 36px - 96px - max(16px, calc(env(safe-area-inset-bottom) + 8px))) !important; /* Kaskaden-/Öffnen-Transform (translate+scale) auf Mobil neutralisieren — dadurch wird auch ein versehentlicher Titelleisten-Drag (der denselben Transform verändern würde) wirkungslos, ohne dass Drag-Handler selbst angefasst werden müssen. */ transform: none !important; border-radius: 0 !important; max-width: 100vw !important; max-height: none !important; } /* Innerer Clip-Wrapper füllt bereits per w-full/h-full das (jetzt bildschirmfüllende) Fenster-Root; nur die abgerundeten Ecken werden für den bildschirmfüllenden Look auf 0 gesetzt (rein visuell, keine Layout-/Verhaltensänderung). */ .window-shadow > .rounded-2xl { border-radius: 0 !important; } /* Resize-Handles (direkte Geschwister-Divs des Clip-Wrappers) ausblenden und deaktivieren — das Fenster ist auf Mobil fix bildschirmfüllend, Touch-Resize ist weder möglich noch gewünscht (Vorgabe: Resize-Handles auf Mobil unterdrücken). */ .window-shadow > div[class*="cursor-ns-resize"], .window-shadow > div[class*="cursor-ew-resize"], .window-shadow > div[class*="cursor-nwse-resize"], .window-shadow > div[class*="cursor-nesw-resize"] { display: none !important; pointer-events: none !important; } } /* M1.3 — OS-Dock auf Smartphones erreichbar halten (alle erlaubten Apps ohne Clipping). * * Dock-DOM (siehe DOM-Audit, React-gerendert/eingefroren, keine IDs/data-Attribute): * div[class*="bottom-4"][class*="justify-center"] Dock-Root — absolute, volle Breite, * z-index:9990 (inline, unangetastet), zentriert * sein Kind per justify-center. Einziges Element * mit dieser Klassenkombination (per Audit * geprüft) — als Selektor stabil. * └─ div (Animations-Wrapper, opacity/transform inline) * └─ div.glass-dock.rounded-3xl.px-4.py-3.flex.items-center.gap-2 Die sichtbare * Dock-Pille. „.glass-dock" allein ist NICHT eindeutig (auch die Topleiste aus M1.1 * trägt diese Klasse) — „.rounded-3xl" kommt nur bei der Pille vor und disambiguiert * zuverlässig. Breite ist inhaltsgetrieben (kein fixes CSS-Maß): 6 erlaubte Icons * à 56×66px (w-14 h-14 + Label-Zeile) + gap-2 (8px) + px-4/py-3-Padding ergeben * gemessen ≈410px Pillenbreite bei diesem Manifest-Stand (Bestellungen, Reservier- * ungen, Raumplan, Reports, Personal-Gruppe, Franchise — verifiziert per DOM-Audit, * inkl. zweier unsichtbarer 0×0-Gruppenmitglieder "Team"/"Zeiterfassung", die im * Personal-Fächer aufgehen und keinen eigenen Platz in der Pille beanspruchen). * ≈410px > jede Zielbreite (320/375/390px) → ohne Eingriff werden die äußersten * Icons (erstes/letztes) beidseitig über den Viewport-Rand hinaus abgeschnitten. * * Gewählte Lösung: interner horizontaler Scroll auf der Pille selbst (kleinste additive * Änderung aus der Vorgabe), statt Icons zu verkleinern oder zu verstecken — Icon-Größe, * Touch-Zielgröße (56×66px) und Fächer-Verhalten bleiben exakt wie im Desktop-Fall * unangetastet, es wird nur zusätzlich wischbar, wenn nicht alles auf einmal passt. Die * eigentliche Positionierung (bottom-4 → 16px) wird zusätzlich safe-area-bewusst gemacht, * damit der Dock auf Geräten mit Home-Indicator nicht im Indicator-Bereich landet — bei * env(safe-area-inset-bottom)=0 (hier verifiziertes Environment) bleibt der Wert exakt bei * 16px, keine sichtbare Änderung im getesteten Browser. */ @media (max-width: 767px) { div[class*="bottom-4"][class*="justify-center"] { bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px)) !important; } /* Zwischen Dock-Root und Pille sitzt ein klassenloser Animations-Wrapper-Div (nur inline opacity/transform), der als Flex-Kind des Dock-Roots per Default auf die Inhaltsbreite der Pille besteht (implizite Flex-Mindestbreite). Ohne diese Regel bleibt die weiter unten gesetzte max-width:100% auf der Pille wirkungslos, da sie sich gegen genau diesen (dann noch unbegrenzten) Wrapper berechnet. */ div[class*="bottom-4"][class*="justify-center"] > div { max-width: 100%; min-width: 0; } /* Pille darf nicht breiter als der Viewport werden; erlaubt aber weiterhin volle Icon-Größe — Überschuss wird intern gescrollt statt am Viewport-Rand abgeschnitten. overflow-x:auto hebt zugleich die implizite Flex-Mindestbreite auf (min-width:auto), ohne die überschrieben würde max-width bei einem Flex-Kind wirkungslos bleiben und die Pille trotzdem auf ihre Inhaltsbreite (~410px) bestehen. */ .glass-dock.rounded-3xl { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .glass-dock.rounded-3xl::-webkit-scrollbar { display: none; } /* Icons dürfen beim Scrollen nicht schrumpfen (Touch-Ziel bleibt 56×66px) — ohne dies würde derselbe Flex-Shrink-Mechanismus, der die Pille selbst schrumpfen lässt, auch die einzelnen dock-item-Buttons stauchen. */ .glass-dock.rounded-3xl > button.dock-item { flex-shrink: 0; } } /* ============================================================================ * M2 — Sperrbildschirm (Konto-Auswahl „Gastro System" + 4-stelliger PIN) auf * Smartphones (Hoch- UND Querformat) erreichbar, flüssig scrollbar & * kollisionsfrei halten. Reines Shell-Overlay gegen die vom eingefrorenen * Bundle (assets/index-r1.js, React/Framer-Motion) gerenderte Lock-Screen- * DOM — KEIN Bundle-/kompiliertes-CSS-Eingriff (Freeze-Doktrin). * * Anker (per Quell-Audit gegen das deployte, byte-identische Bundle verifiziert): * .desktop-bg.justify-center Lock-Root. ACHTUNG: .desktop-bg trägt AUCH der * OS-Desktop nach dem Login (dort „desktop-bg relative", OHNE justify-center). * Einziges Element mit BEIDEN Klassen ist der Lock-Root → nie bare .desktop-bg. * .flex.gap-8 Konto-Liste. „gap-8" kommt im GESAMTEN Bundle genau * EINMAL vor → global eindeutig (Dots=gap-4, Keypad=gap-3). Direkte Kinder = * Konto-