/** * smart@work – einheitliches UI wie die Startseite (index / sw365-lp + bgai.css) * Reihenfolge: bgai.css?v=8 → dlx365.css → ggf. bg-unfall*.css → diese Datei zuletzt. * Voraussetzung: */ @import url('./fire365-theme.css'); /* —— Basis: gleiche Typo & Farbwelt wie Startseite (alle App-Seiten, auch ohne ohs-modern) —— */ body.sw365-app { margin: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; color: var(--f365-ink); --dlx-bg: #eef2f8; --dlx-border: var(--f365-border); --dlx-text: var(--f365-ink); --dlx-muted: var(--f365-muted); --dlx-accent: var(--f365-accent); --dlx-accent-rgb: 37, 99, 235; --dlx-surface: #ffffff; } body.sw365-app:not(.bgai-dashboard) { background: var(--f365-page-bg) !important; } body.sw365-app.ohs-modern, body.sw365-app.menu-fw { background: var(--f365-page-bg) !important; } /* theme-bg (DEMO): kein Grün-Mix, nur health365 AC-Blau wie Startseite */ body.sw365-app.theme-bg { --dlx-g900: #1e40af !important; --dlx-g800: #2563eb !important; --dlx-g700: #3b82f6 !important; --dlx-accent: #2563eb !important; --dlx-accent-rgb: 37, 99, 235 !important; background: var(--f365-page-bg) !important; } /* —— Shell: Sidebar (dunkel, wie health365 AC-Header) —— */ body.sw365-app .dlx-sidebar { background: linear-gradient(195deg, #0c1220 0%, #1e3a8a 55%, #0f172a 100%) !important; border-right: 3px solid #2563eb !important; box-shadow: 8px 0 32px rgba(15, 23, 42, 0.35); color: #e2e8f0; } body.sw365-app .dlx-nav-section { color: #93c5fd !important; opacity: 1 !important; letter-spacing: 0.08em; } body.sw365-app .dlx-nav-item, body.sw365-app .dlx-sidebar a { color: rgba(248, 250, 252, 0.92) !important; } body.sw365-app .dlx-nav-item:hover { background: rgba(37, 99, 235, 0.22) !important; } body.sw365-app .dlx-nav-item.active { background: rgba(37, 99, 235, 0.35) !important; color: #fff !important; box-shadow: inset 3px 0 0 0 #60a5fa !important; } body.sw365-app .dlx-burger { background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(147, 197, 253, 0.45) !important; color: #fff !important; } body.sw365-app .dlx-badge { background: linear-gradient(145deg, #dbeafe, #bfdbfe) !important; color: #1e40af !important; border: 1px solid #93c5fd !important; font-weight: 800 !important; } body.sw365-app .dlx-brand-name { color: #f8fafc !important; font-weight: 800 !important; } /* —— Shell: Topbar hell wie Startseite (sw365-topbar) —— */ body.sw365-app .dlx-topbar { background: rgba(255, 255, 255, 0.96) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--f365-border) !important; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important; padding-left: max(18px, env(safe-area-inset-left)) !important; padding-right: max(18px, env(safe-area-inset-right)) !important; } body.sw365-app .dlx-topbar-title { color: var(--f365-ink) !important; font-weight: 800 !important; letter-spacing: -0.02em !important; } body.sw365-app .dlx-topbar-right { color: var(--f365-muted) !important; } body.sw365-app .dlx-chip { background: var(--f365-blue-50) !important; border: 1px solid var(--f365-blue-200) !important; color: var(--f365-blue-800) !important; font-weight: 600 !important; } body.sw365-app .dlx-chip b { color: var(--f365-blue-950) !important; } body.sw365-app .dlx-user { background: linear-gradient(145deg, #dbeafe, #bfdbfe) !important; border: 1px solid #93c5fd !important; color: #1e40af !important; } body.sw365-app .dlx-topbar .btn, body.sw365-app .dlx-topbar .btn-sm, body.sw365-app .dlx-topbar-logout { border-radius: 10px !important; background: #fff !important; color: var(--f365-blue-700) !important; border: 1px solid var(--f365-border) !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important; } body.sw365-app .dlx-topbar .btn:hover, body.sw365-app .dlx-topbar-logout:hover { background: var(--f365-blue-50) !important; } /* —— Inhalt —— */ body.sw365-app .dlx-content { padding: clamp(12px, 3vw, 22px) clamp(14px, 4vw, 24px) !important; padding-bottom: calc(clamp(12px, 3vw, 22px) + env(safe-area-inset-bottom)) !important; } body.sw365-app .dlx-surface { max-width: min(1120px, 100%) !important; margin: 0 auto !important; width: 100%; border-radius: 16px !important; box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06) !important; border: 1px solid var(--f365-border) !important; box-sizing: border-box; } body.sw365-app .dlx-page-head { flex-wrap: wrap !important; align-items: flex-start !important; gap: 14px !important; } body.sw365-app .dlx-page-head h1 { font-size: clamp(1.25rem, 4.5vw, 1.85rem) !important; line-height: 1.2 !important; overflow-wrap: anywhere; word-break: normal; } body.sw365-app .dlx-page-head p { font-size: clamp(0.875rem, 2.5vw, 1rem) !important; } body.sw365-app .bg-actions, body.sw365-app .dlx-page-head .bg-actions { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; } @media (min-width: 720px) { body.sw365-app .bg-actions, body.sw365-app .dlx-page-head .bg-actions { width: auto; margin-left: auto; justify-content: flex-end; } } /* Kachel-Hub */ body.sw365-app .dlx-tiles { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)) !important; gap: 18px !important; width: 100%; } body.sw365-app .dlx-tile { border-radius: 16px !important; border: 1px solid var(--f365-border) !important; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06) !important; min-width: 0 !important; } body.sw365-app.ohs-modern .bg-badge, body.sw365-app .bg-badge { background: rgba(37, 99, 235, 0.08) !important; border-color: rgba(37, 99, 235, 0.22) !important; color: var(--f365-blue-800) !important; } /* Tabellen: horizontal scroll im Surface */ body.sw365-app .dlx-surface .dlx-table, body.sw365-app table.dlx-table { width: 100%; border-collapse: collapse; } body.sw365-app .dlx-surface > div[style*='overflow'] { max-width: 100%; } /* Überschreibt dunkle Topbar von bg-unfall-feuerwehr bei gleicher Spezifität */ body.sw365-app.bg-fw .dlx-topbar, body.sw365-app.bg-unfall .dlx-topbar { background: rgba(255, 255, 255, 0.96) !important; border-bottom: 1px solid var(--f365-border) !important; } body.sw365-app.bg-fw .dlx-topbar-title, body.sw365-app.bg-unfall .dlx-topbar-title { color: var(--f365-ink) !important; } /* —— Login / Registrierung —— */ body.sw365-app.dlx-auth-page { background: var(--f365-page-bg) !important; } body.sw365-app .dlx-auth-topbar { background: rgba(255, 255, 255, 0.96) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--f365-border) !important; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important; height: auto !important; min-height: 64px !important; padding: 12px max(18px, env(safe-area-inset-left)) !important; padding-right: max(18px, env(safe-area-inset-right)) !important; } body.sw365-app .dlx-auth-brand { color: var(--f365-ink) !important; } body.sw365-app .dlx-pill { background: var(--f365-blue-50) !important; border: 1px solid var(--f365-blue-200) !important; color: var(--f365-blue-800) !important; } body.sw365-app .dlx-appname { font-weight: 800 !important; color: var(--f365-ink) !important; } body.sw365-app .dlx-auth-wrap { padding: clamp(20px, 5vw, 34px) clamp(16px, 4vw, 22px) !important; padding-bottom: max(28px, env(safe-area-inset-bottom)) !important; } body.sw365-app .dlx-auth-grid { gap: clamp(18px, 4vw, 26px) !important; } body.sw365-app .dlx-auth-card { border-radius: 16px !important; border: 1px solid var(--f365-border) !important; } body.sw365-app .dlx-primary-btn, body.sw365-app .dlx-demo-btn { background: linear-gradient(180deg, var(--f365-blue-500), var(--f365-blue-800)) !important; color: #fff !important; box-shadow: 0 8px 24px rgba(37, 99, 235, 0.28) !important; } body.sw365-app .dlx-auth-icon { background: var(--f365-blue-50) !important; border: 1px solid var(--f365-blue-200) !important; color: var(--f365-blue-800) !important; } body.sw365-app .dlx-auth-illustration { background: linear-gradient(135deg, rgba(219, 234, 254, 0.95), rgba(191, 219, 254, 0.45)) !important; min-height: 180px; height: auto !important; } body.sw365-app .dlx-link { color: var(--f365-blue-700) !important; } @media (max-width: 520px) { body.sw365-app .dlx-auth-product, body.sw365-app .dlx-auth-title { font-size: clamp(1.2rem, 6vw, 1.45rem) !important; } body.sw365-app .dlx-provider-btn { min-height: 52px !important; font-size: 15px !important; } } /* OHS: eigene Seitenkopf-Leiste wie helle App-Topbar */ body.sw365-app .ohs-topbar { background: rgba(255, 255, 255, 0.96) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--f365-border) !important; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06) !important; } body.sw365-app .ohs-title { color: var(--f365-ink) !important; } body.sw365-app .ohs-sub { color: var(--f365-muted) !important; } /* Kompakt-Login ohne volles Auth-Layout */ body.sw365-app:not(.dlx-auth-page) .dlx-auth-box { max-width: min(480px, 100%); margin: clamp(24px, 6vw, 48px) auto; padding: clamp(22px, 4vw, 30px); background: #fff; border-radius: 16px; border: 1px solid var(--f365-border); box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06); box-sizing: border-box; } body.sw365-app:not(.dlx-auth-page) .dlx-auth-box input, body.sw365-app:not(.dlx-auth-page) .dlx-auth-box button { min-height: 48px; border-radius: 12px; font-family: inherit; } body.sw365-app:not(.dlx-auth-page) .dlx-auth-box .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; } body.sw365-app:not(.dlx-auth-page) .dlx-auth-box .actions button, body.sw365-app:not(.dlx-auth-page) .dlx-auth-box .actions .btn { flex: 1 1 auto; min-width: min(140px, 100%); } /* OHS-Karten / Sektionen */ body.sw365-app .ohs-section, body.sw365-app .ohs-card { border-radius: 16px !important; } body.sw365-app .ohs-grid { grid-template-columns: 1fr !important; } @media (min-width: 900px) { body.sw365-app .ohs-grid { grid-template-columns: 1.4fr 0.9fr !important; } } /* —— Kacheln / Flächen wie Startseite (.bg-card, .dlx-surface) —— */ body.sw365-app .bg-card, body.sw365-app .dlx-surface { background: var(--dlx-surface) !important; border: 1px solid var(--f365-border) !important; border-radius: 16px !important; box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06) !important; } body.sw365-app .dlx-surface h1, body.sw365-app .dlx-surface h2, body.sw365-app .dlx-surface h3 { color: var(--f365-ink) !important; } body.sw365-app .dlx-surface .muted, body.sw365-app .dlx-surface .text-muted { color: var(--f365-muted) !important; } /* Primär-Buttons in Inhaltsbereichen (nicht nur Auth) */ body.sw365-app .dlx-surface .btn-primary, body.sw365-app .dlx-surface button.btn-primary, body.sw365-app .dlx-surface input[type='submit'].btn-primary { background: linear-gradient(180deg, var(--f365-blue-500), var(--f365-blue-800)) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 8px 24px rgba(37, 99, 235, 0.28) !important; } body.sw365-app .dlx-surface .btn-primary:hover, body.sw365-app .dlx-surface button.btn-primary:hover { filter: brightness(1.05); } body.sw365-app .dlx-surface .btn-secondary, body.sw365-app .dlx-surface button.btn-secondary { background: #fff !important; border: 1px solid var(--f365-border) !important; color: var(--f365-ink) !important; } body.sw365-app .dlx-note { background: var(--f365-blue-50) !important; border: 1px solid var(--f365-blue-200) !important; color: var(--f365-blue-900) !important; } /* OHS App-Shell: gleiche Seitenhintergrund-Farbe wie Startseite */ body.sw365-app .ohs-app-shell { background: var(--f365-page-bg) !important; } /* ========== Login: Apple-inspiriert (nur .dlx-auth-apple auf login.html) ========== */ body.sw365-app.dlx-auth-page.dlx-auth-apple { background: #f5f5f7 !important; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', sans-serif !important; } body.sw365-app.dlx-auth-page.dlx-auth-apple .dlx-auth-topbar { background: rgba(251, 251, 253, 0.82) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important; box-shadow: none !important; backdrop-filter: saturate(180%) blur(16px) !important; -webkit-backdrop-filter: saturate(180%) blur(16px) !important; } body.sw365-app.dlx-auth-page.dlx-auth-apple .dlx-auth-card { border-radius: 22px !important; border: 1px solid rgba(0, 0, 0, 0.06) !important; box-shadow: 0 4px 28px rgba(0, 0, 0, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.04) !important; background: #fff !important; padding: clamp(22px, 4vw, 30px) !important; } body.sw365-app.dlx-auth-page.dlx-auth-apple .dlx-auth-product, body.sw365-app.dlx-auth-page.dlx-auth-apple .dlx-auth-title { font-weight: 700 !important; letter-spacing: -0.02em !important; color: var(--f365-ink) !important; } body.sw365-app.dlx-auth-page.dlx-auth-apple .dlx-auth-subtitle { font-weight: 500 !important; color: #86868b !important; } body.sw365-app.dlx-auth-page.dlx-auth-apple .dlx-auth-text, body.sw365-app.dlx-auth-page.dlx-auth-apple .dlx-auth-bullets { color: #3a3a3c !important; font-weight: 500 !important; } body.sw365-app.dlx-auth-page.dlx-auth-apple .dlx-auth-icon { border-radius: 12px !important; font-weight: 600 !important; } body.sw365-app.dlx-auth-page.dlx-auth-apple .dlx-auth-illustration { border-radius: 16px !important; border: 1px solid rgba(0, 0, 0, 0.05) !important; background: linear-gradient(165deg, #f5f5f7 0%, #e8e8ed 100%) !important; } body.sw365-app.dlx-auth-page.dlx-auth-apple .dlx-illus-placeholder { color: #86868b !important; font-weight: 600 !important; font-size: 14px !important; } body.sw365-app.dlx-auth-page.dlx-auth-apple .dlx-provider-btn { border-radius: 14px !important; min-height: 50px !important; font-weight: 600 !important; font-size: 15px !important; border-color: #d2d2d7 !important; box-shadow: none !important; background: #fff !important; } body.sw365-app.dlx-auth-page.dlx-auth-apple .dlx-provider-btn:hover { background: #fafafa !important; border-color: #c7c7cc !important; } body.sw365-app.dlx-auth-page.dlx-auth-apple .dlx-auth-divider { margin: 20px 0 14px !important; } body.sw365-app.dlx-auth-page.dlx-auth-apple .dlx-auth-divider span { font-weight: 600 !important; font-size: 13px !important; color: #86868b !important; } body.sw365-app.dlx-auth-page.dlx-auth-apple #login-form label { font-weight: 600 !important; font-size: 13px !important; color: #3a3a3c !important; margin-top: 14px !important; } body.sw365-app.dlx-auth-page.dlx-auth-apple #login-form label:first-of-type { margin-top: 0 !important; } body.sw365-app.dlx-auth-page.dlx-auth-apple #login-form input, body.sw365-app.dlx-auth-page.dlx-auth-apple #login-form select { border-radius: 12px !important; border-color: #d2d2d7 !important; font-size: 16px !important; min-height: 48px !important; } body.sw365-app.dlx-auth-page.dlx-auth-apple #login-form input:focus, body.sw365-app.dlx-auth-page.dlx-auth-apple #login-form select:focus { border-color: #0071e3 !important; box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15) !important; } body.sw365-app.dlx-auth-page.dlx-auth-apple .dlx-password-row input { flex: 1 !important; } body.sw365-app.dlx-auth-page.dlx-auth-apple .dlx-eye { border-radius: 12px !important; border-color: #d2d2d7 !important; color: #636366 !important; display: grid !important; place-items: center !important; flex-shrink: 0 !important; } body.sw365-app.dlx-auth-page.dlx-auth-apple .dlx-primary-btn { width: 100% !important; margin-top: 6px !important; border-radius: 980px !important; padding: 14px 20px !important; background: #1d1d1f !important; color: #fff !important; font-weight: 600 !important; font-size: 16px !important; letter-spacing: -0.01em !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important; } body.sw365-app.dlx-auth-page.dlx-auth-apple .dlx-primary-btn:hover { filter: brightness(1.07) !important; } body.sw365-app.dlx-auth-page.dlx-auth-apple .dlx-auth-row .dlx-check { font-weight: 500 !important; color: #3a3a3c !important; font-size: 14px !important; } body.sw365-app.dlx-auth-page.dlx-auth-apple .dlx-auth-foot { text-align: center !important; font-weight: 500 !important; font-size: 14px !important; } /* Trial-Hinweis (klar lesbar) */ body.sw365-app.dlx-auth-page .dlx-trial-hint { margin: 10px 0 18px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(180deg, rgba(239, 246, 255, 0.95), rgba(255, 255, 255, 0.98)); border: 1px solid var(--f365-blue-200); box-shadow: 0 1px 3px rgba(37, 99, 235, 0.06); } body.sw365-app.dlx-auth-page.dlx-auth-apple .dlx-trial-hint { background: rgba(255, 255, 255, 0.9); border: 1px solid #d2d2d7; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } body.sw365-app.dlx-auth-page .dlx-trial-hint-lead { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--f365-text); font-weight: 500; } body.sw365-app.dlx-auth-page .dlx-trial-hint-steps { margin: 0 0 10px; padding-left: 1.2rem; font-size: 13px; line-height: 1.55; color: var(--f365-muted); font-weight: 500; } body.sw365-app.dlx-auth-page .dlx-trial-hint-foot { margin: 0; font-size: 13px; line-height: 1.45; color: var(--f365-muted); font-weight: 500; }