/* * layout.pwa.css — Evidence-First System * PWA-spezifische Overrides. * Gilt ausschließlich wenn html.pwa-standalone gesetzt ist. * Geladen nach layout.browser.css. * * 01 — SAFETY NETS * 02 — PWA MOBILE STRUCTURE * 03 — PWA OPEN STATE * 04 — PWA SCRIM / OVERLAY */ /* ========================================================= 01 — SAFETY NETS Browser-UI im PWA-Kontext unterdrücken. ========================================================= */ /* Browser Menu Card darf im Standalone-Modus nie erscheinen */ @media (display-mode: standalone) { #browser-menu-card { display: none !important; } } /* ========================================================= 02 — PWA MOBILE STRUCTURE Statische PWA-Mobile-Struktur: Sidebar, Stage, Safe Area. ========================================================= */ /* Globaler Content-Offset — Safe Area kompensiert */ html.pwa-standalone { --safe-inset-top: env(safe-area-inset-top, 0px); --app-content-offset: calc(var(--safe-inset-top) + 85px); } /* Hero Block — Safe Area Offset (außerhalb @media — html-Selektor) */ html.pwa-standalone .hero-block { padding-top: calc(var(--safe-inset-top) + 60px); } /* Header-Overlay: 90% solid oben, Ease-Out Fade ab 50% — auf #ui-controls */ html.pwa-standalone #ui-controls::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: calc(env(safe-area-inset-top, 0px) + 60px); background: linear-gradient(to bottom, color-mix(in srgb, var(--surface-page) 90%, transparent) 0%, color-mix(in srgb, var(--surface-page) 90%, transparent) 50%, color-mix(in srgb, var(--surface-page) 88%, transparent) 54%, color-mix(in srgb, var(--surface-page) 85%, transparent) 58%, color-mix(in srgb, var(--surface-page) 80%, transparent) 62%, color-mix(in srgb, var(--surface-page) 74%, transparent) 66%, color-mix(in srgb, var(--surface-page) 66%, transparent) 70%, color-mix(in srgb, var(--surface-page) 56%, transparent) 75%, color-mix(in srgb, var(--surface-page) 44%, transparent) 80%, color-mix(in srgb, var(--surface-page) 30%, transparent) 86%, color-mix(in srgb, var(--surface-page) 16%, transparent) 92%, color-mix(in srgb, var(--surface-page) 5%, transparent) 97%, transparent 100% ); backdrop-filter: blur(0.5px); -webkit-backdrop-filter: blur(0.5px); pointer-events: none; } /* Footer-Overlay: 90% solid unten, Ease-Out Fade ab 50% — auf #content-fade-bottom */ html.pwa-standalone #content-fade-bottom::before { content: ''; position: fixed; bottom: 0; left: 0; right: 0; height: calc(env(safe-area-inset-bottom, 0px) + 60px); background: linear-gradient(to top, color-mix(in srgb, var(--surface-page) 90%, transparent) 0%, color-mix(in srgb, var(--surface-page) 90%, transparent) 50%, color-mix(in srgb, var(--surface-page) 88%, transparent) 54%, color-mix(in srgb, var(--surface-page) 85%, transparent) 58%, color-mix(in srgb, var(--surface-page) 80%, transparent) 62%, color-mix(in srgb, var(--surface-page) 74%, transparent) 66%, color-mix(in srgb, var(--surface-page) 66%, transparent) 70%, color-mix(in srgb, var(--surface-page) 56%, transparent) 75%, color-mix(in srgb, var(--surface-page) 44%, transparent) 80%, color-mix(in srgb, var(--surface-page) 30%, transparent) 86%, color-mix(in srgb, var(--surface-page) 16%, transparent) 92%, color-mix(in srgb, var(--surface-page) 5%, transparent) 97%, transparent 100% ); backdrop-filter: blur(0.5px); -webkit-backdrop-filter: blur(0.5px); pointer-events: none; } @media (max-width: 768px) { .app-sidebar { position: fixed; top: 0; left: 0; height: 100dvh; width: 100vw; z-index: 0; border-right: none; overflow: hidden; transform: none; transition: none; box-shadow: none; display: flex; flex-direction: column; background: var(--surface-card); } /* Safe-area direkt auf Sidebar — deckt Safe-Area-Zone physisch ab */ .app-sidebar { padding-top: env(safe-area-inset-top, 0px); } .app-sidebar .sidebar-brand { padding-top: var(--space-3); } /* Sidebar scrollt intern */ .app-sidebar .sidebar-nav { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Stage-Animation — nur im PWA-Kontext relevant */ .app-stage { transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.28s cubic-bezier(0.4, 0, 0.2, 1); } /* ui-controls-Animation — wandert synchron mit Stage */ #ui-controls { transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); } } /* ========================================================= 03 — PWA OPEN STATE Alle Regeln für body.sidebar-open. ========================================================= */ @media (max-width: 768px) { /* Scroll-Lock — verhindert Background-Scroll bei offenem Sidebar */ html:has(body.sidebar-open) { overflow: hidden; } body.sidebar-open { overscroll-behavior: none; } /* Touch-Ownership — Stage blockiert direkten Input */ body.sidebar-open .app-stage { pointer-events: none; } body.sidebar-open .app-sidebar { pointer-events: auto; } /* Stage-Transform — schiebt Vordergrundebene nach rechts */ body.sidebar-open .app-stage { transform: translateX(72vw); border-radius: var(--radius-stage-open); overflow: hidden !important; } /* ui-controls wandert synchron mit Stage */ body.sidebar-open #ui-controls { transform: translateX(72vw); } /* Overlay-UI ausblenden — Schließen erfolgt via Touch/Swipe */ body.sidebar-open #btn-hamburger, body.sidebar-open #btn-settings, body.sidebar-open #section-nav-trigger { display: none; } } /* ========================================================= 04 — PWA SCRIM / OVERLAY Dim-Effekt auf app-main bei offenem Sidebar. Nur im pwa-standalone Kontext. ========================================================= */ html.pwa-standalone body.sidebar-open { overflow: hidden; } html.pwa-standalone body.sidebar-open .app-main::after { content: ''; position: absolute; inset: 1px; background: var(--surface-page); opacity: 0.8; z-index: 35; pointer-events: auto; }