/* ═════════════════════════════════════════════════════════════════════════ Mobile Shell (bis 768 px) — Anpassungen an den bestehenden Shell-Elementen. Die neuen mobilen Komponenten (Server/Components/Layout/Mobile) bringen ihr eigenes, isoliertes CSS mit. Diese Datei passt nur an, was außerhalb von ihnen liegt und dort nicht erreichbar ist: Radzen-Layout, Kopfzeile, Sidebar, Chat-Button/-Overlay und das Benachrichtigungs-Popup. Desktop-Schutz: Jede wirksame Regel steht in einer max-width-Media-Query UND greift nur, wenn die mobile Shell gerendert ist (body:has(.mobile-shell)) — also angemeldet mit vollständigem Profil. Über 768 px ändert diese Datei nichts; außerhalb der Media-Queries stehen nur Variablen (Leistenhöhe, mobiler Seitenabstand). Schichten (z-index) der Shell, nur mobil: Seiteninhalt (rz-body, eigener Stacking Context) 0 Untere Leiste 800 Chat (Bereich der Leiste zwischen Kopfzeile und Leiste) 845 Kopfzeile (Benachrichtigungs-Popup + Hintergrund) 850 Sheet-Scrim / Sheet 860 / 870 Blazor-Fehlerleiste / Radzen-Dialog / -Notification 1000 / 1001 / 1002 Radzen-Popups (Dropdown, an body gehängt) 2000 Reconnect-Overlay 20000 ═════════════════════════════════════════════════════════════════════════ */ :root { /* Höhe der unteren Leiste ohne Safe Area; von den mobilen Komponenten mitgenutzt. */ --ms-tabbar-height: 64px; /* Seitlicher Inhaltsabstand mobiler Seiten mit randlosem Scroller (Dashboard, Trainingsanmeldung). Wert = der bisherige linke Dashboard-Abstand: rz-body-Padding + .25rem Innenabstand des Dashboard-Scrollers. Wirkt nur, wo eine Seite ihn bis 768 px verwendet. */ --app-mobile-gutter: calc(var(--rz-layout-body-padding, 1rem) + .25rem); } @media (max-width: 768px) { /* Layout endet über der unteren Leiste: Nichts verschwindet dahinter, auch keine position:fixed-Elemente der Seiten (rz-body bildet mit transform ihren Containing Block, z. B. die Sheets der Trainingswünsche). dvh statt vh: sonst läge der untere Rand hinter den Browserleisten. !important überschreibt die Inline-Höhe des Layouts, die der Desktop unverändert behält. */ body:has(.mobile-shell) .rz-layout { height: calc(100dvh - var(--ms-tabbar-height) - env(safe-area-inset-bottom, 0px)) !important; } /* Seiten mit randlosem Scroller (Markierung .app-mobile-fullbleed, z. B. Dashboard und Trainingsanmeldung): rz-body ohne seitliches Padding. Der Scroller der Seite reicht damit von Bildschirmrand zu Bildschirmrand – die Scrollleiste liegt außen und nicht neben den Karten – und trägt links und rechts --app-mobile-gutter selbst als Innenabstand. */ body:has(.mobile-shell) .rz-layout:has(.app-mobile-fullbleed) > .rz-body { padding-left: 0; padding-right: 0; } /* Seiten mit eigener Kopfzeile (MobilePageHeader: Zurück-Pfeil und Titel) setzen sie bündig unter die App-Kopfzeile; den Abstand darunter trägt ihr Scrollbereich selbst. */ body:has(.mobile-shell) .rz-layout:has(.mobile-page-header) > .rz-body { padding-top: 0; } /* Scroller dieser Seiten (.app-mobile-scroller): Radzens Theme gibt jedem Scroll-Container in .rz-layout eine eigene 16-px-Leiste (::-webkit-scrollbar), und eine solche Leiste belegt Layoutplatz – der Inhalt stand rechts 16 px weiter vom Rand als links. Mobil gilt deshalb die native Overlay-Leiste der Plattform, die keinen Platz belegt: scrollbar-width (Standard) hat in Chromium Vorrang vor ::-webkit-scrollbar; wo eine Engine diesen Vorrang nicht kennt, belegt die Radzen-Leiste mit Breite 0 keinen Platz mehr (iOS zeichnet seinen Indikator ohnehin als Overlay). */ body:has(.mobile-shell) .app-mobile-scroller { scrollbar-width: thin; } body:has(.mobile-shell) .rz-layout .app-mobile-scroller::-webkit-scrollbar { width: 0; height: 0; } /* Keine Desktop-Sidebar: Die Navigation übernimmt die mobile Shell. */ body:has(.mobile-shell) .rz-layout > .rz-sidebar { display: none !important; } /* Kopfzeile: Marke, Impersonation-Hinweis, Benachrichtigungen. Über der Leiste, damit der Hintergrund des Benachrichtigungs-Popups auch sie abdeckt. */ body:has(.mobile-shell) .rz-layout > .rz-header { z-index: 850; height: calc(56px + env(safe-area-inset-top, 0px)); min-height: calc(56px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); padding-left: max(.5rem, env(safe-area-inset-left, 0px)); padding-right: max(.5rem, env(safe-area-inset-right, 0px)); box-sizing: border-box; } /* Was die Kopfzeile auf dem Desktop zusätzlich trägt, liegt mobil in „Mehr“ bzw. im Organisationsbereich: Sidebar-Schalter, Vereins-/Akademie-Wechsel, Impersonation, Begrüßung, Profil, Abmelden (das Formular bleibt im DOM — „Abmelden“ in „Mehr“ sendet es). */ body:has(.mobile-shell) .rz-header .rz-sidebar-toggle, body:has(.mobile-shell) .rz-header .app-header-context-switch, body:has(.mobile-shell) .rz-header .app-header-impersonation, body:has(.mobile-shell) .rz-header .app-header-username, body:has(.mobile-shell) .rz-header .app-header-iconlink, body:has(.mobile-shell) .rz-header .app-header-logout-form { display: none !important; } body:has(.mobile-shell) .rz-header .app-header-actions { padding-right: 0; } /* Der Chat-Einstieg ist mobil der Eintrag in der unteren Leiste. */ body:has(.mobile-shell) .chat-fab { display: none; } /* Benachrichtigungen: das bestehende Popup bildschirmbreit unter der Kopfzeile statt 360 px rechtsbündig (lief links aus dem Bild). Die Inline-Werte gelten weiter am Desktop. */ body:has(.mobile-shell) .notification-bell-popup { position: fixed !important; top: calc(56px + env(safe-area-inset-top, 0px) + .35rem) !important; left: .5rem !important; right: .5rem !important; width: auto !important; margin-top: 0 !important; max-height: calc(100dvh - 56px - env(safe-area-inset-top, 0px) - var(--ms-tabbar-height) - env(safe-area-inset-bottom, 0px) - 1rem) !important; } /* Chat: mobil ein Bereich der unteren Leiste wie Dashboard und Kalender — zwischen Kopfzeile und Leiste, beide bleiben sichtbar und bedienbar (der Chat-Tab ist aktiv). Kein schwebendes Desktop-Fenster, keine Umschaltung Maximieren/Verkleinern (auch ein vom Desktop mitgebrachtes „maximized“ ändert nichts) und kein Schließen: Verlassen wird er über die Leiste. Er liegt unter Kopfzeile und Sheets, damit sich „Verein“ und „Mehr“ über ihn legen wie über eine Seite, und ohne Abdunkeln. Bis 600 px zeigt app.css Raumliste ODER Unterhaltung, darüber beide. */ body:has(.mobile-shell) .chat-overlay, body:has(.mobile-shell) .chat-overlay.maximized { top: calc(56px + env(safe-area-inset-top, 0px)); right: 0; bottom: calc(var(--ms-tabbar-height) + env(safe-area-inset-bottom, 0px)); left: 0; z-index: 845; width: auto; height: auto; max-width: none; max-height: none; border: none; border-radius: 0; box-shadow: none; padding: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); box-sizing: border-box; } /* Den Titel trägt die Leiste (aktiver Tab), Maximieren und Schließen entfallen: keine Kopfzeile des Fensters — die Raumliste bzw. die Unterhaltung beginnt direkt unter der App-Kopfzeile. */ body:has(.mobile-shell) .chat-overlay-scrim, body:has(.mobile-shell) .chat-overlay-header { display: none; } /* iOS vergrößert die Seite beim Fokus jedes Eingabefelds unter 16 px und bleibt danach gezoomt. */ body:has(.mobile-shell) .chat-composer-input, body:has(.mobile-shell) .chat-input { font-size: 16px; } }