/* ═════════════════════════════════════════════════════════════════════════ 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 Kopfzeile (Benachrichtigungs-Popup + Hintergrund) 850 Sheet-Scrim / Sheet 860 / 870 Chat-Button / -Overlay (app.css, unverändert) 900–902 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; } /* 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 immer vollflächig — kein schwebendes Desktop-Fenster und keine Umschaltung Maximieren/Verkleinern (auch ein vom Desktop mitgebrachtes „maximized“ ändert nichts). inset:0 folgt wie 100dvh dem sichtbaren Viewport, die Eingabezeile liegt also nicht hinter den Browserleisten. 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 { inset: 0; 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) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); box-sizing: border-box; } /* Die obere Safe Area trägt die Kopfzeile selbst, damit die Statusleiste ihre Farbe hat. */ body:has(.mobile-shell) .chat-overlay-header { padding-top: calc(.6rem + env(safe-area-inset-top, 0px)); } body:has(.mobile-shell) .chat-overlay-maximize { 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; } }