/* ========================================================== BCL – Zentrales Design Auto-Themes via - blueA2 (Kunden /service) Soft Tech Blue (A2) - white (Mitarbeiter /verwaltung) White Business - slate (Mitarbeiter /mobil) Slate Blue (Outdoor/Tablet) ========================================================== */ /* ---------- Theme Tokens (Default Fallback) ---------- */ :root{ --bg:#ffffff; --bg2:#ffffff; --card:#ffffff; --ink:#0b1324; --muted:#42526b; --line:#d7e2f2; --accent:#0D4FAF; --accent2:#1F6FEB; --radius: 12px; --shadow: 0 2px 12px rgba(11,58,126,.14); } /* ========================================================== THEME: Kunden – Soft Tech Blue (A2) ========================================================== */ html[data-theme="blueA2"]{ --bg:#DCEBFF; --bg2:#CFE3FF; --card:#ffffff; --ink:#0b1324; --muted:#42526b; --line:#D7E2F2; --accent:#0D4FAF; --accent2:#1F6FEB; --shadow:0 2px 12px rgba(11,58,126,.18); } /* ========================================================== THEME: Verwaltung – White Business ========================================================== */ html[data-theme="white"]{ --bg:#ffffff; --bg2:#ffffff; --card:#ffffff; --ink:#0b1324; --muted:#5b677a; --line:#e2e6ee; --accent:#0D4FAF; --accent2:#1F6FEB; --shadow:0 2px 10px rgba(15,23,42,.08); } /* ========================================================== THEME: Mobil – Slate Blue (Tablet/Outdoor) ========================================================== */ html[data-theme="slate"]{ --bg:#EEF2F7; --bg2:#E3E9F2; --card:#ffffff; --ink:#0f172a; --muted:#475569; --line:#D5DCE6; --accent:#0D4FAF; --accent2:#1F6FEB; --shadow:0 2px 12px rgba(15,23,42,.10); } /* ---------- Base ---------- */ *{ box-sizing:border-box; } html, body{ height:100%; } body{ margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, Helvetica, sans-serif; color: var(--ink); background: linear-gradient(180deg, var(--bg), var(--bg2)); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Links */ a{ color: var(--accent); font-weight:800; text-decoration:none; } a:hover{ text-decoration:underline; } /* ---------- Topbar ---------- */ .bcl-topbar{ background: rgba(255,255,255,.55); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(13,79,175,.22); } html[data-theme="white"] .bcl-topbar{ background:#f6f8fc; border-bottom:1px solid #e2e6ee; } html[data-theme="slate"] .bcl-topbar{ background: rgba(255,255,255,.62); border-bottom: 1px solid rgba(15,23,42,.10); } .bcl-topbar-inner{ max-width:1100px; margin:auto; padding:12px 14px; display:flex; justify-content:space-between; align-items:center; gap:12px; } .bcl-brand{ min-width:0; display:flex; flex-direction:column; gap:2px; } .bcl-title{ font-weight:950; font-size:16px; color:#0B2C63; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .bcl-subtitle{ color:#294A80; font-size:12px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } html[data-theme="white"] .bcl-title{ color:#0b1324; } html[data-theme="white"] .bcl-subtitle{ color:#5b677a; } html[data-theme="slate"] .bcl-title{ color:#0f172a; } html[data-theme="slate"] .bcl-subtitle{ color:#475569; } /* ---------- Buttons ---------- */ .btn{ border-radius:999px; padding:8px 14px; font-weight:900; border:1px solid var(--accent); background: linear-gradient(180deg, var(--accent2), var(--accent)); color:white; cursor:pointer; } .btn:hover{ filter:brightness(1.05); } .btn:active{ transform: translateY(1px); } .btn-primary{ /* kept for semantic usage */ } /* ---------- Layout ---------- */ .bcl-shell{ max-width:1100px; margin:auto; padding:16px 14px 50px; } /* Cards */ .card{ background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding:14px; margin:14px 0; } /* Section head helpers (optional) */ .card-head{ border-bottom:1px solid var(--line); padding-bottom:8px; margin-bottom:10px; display:flex; justify-content:space-between; gap:12px; } .h2{ font-weight:950; font-size:14px; margin:0; } .small{ color:var(--muted); font-size:12px; font-weight:650; } .badge{ background: rgba(13,79,175,.10); border:1px solid var(--line); padding:4px 8px; border-radius:999px; font-weight:900; font-size:12px; color: #294A80; } html[data-theme="white"] .badge{ color:#5b677a; background:#f3f6fb; } html[data-theme="slate"] .badge{ color:#475569; background:#eef2f7; } /* ---------- Legacy Overrides (bgcolor) ---------- */ body[bgcolor]{ background: linear-gradient(180deg, var(--bg), var(--bg2)) !important; } table[bgcolor], tr[bgcolor], td[bgcolor]{ background:#fff !important; } /* Tables */ table{ width:100% !important; border-collapse:collapse; } td, th{ padding:10px; border-bottom:1px solid var(--line); vertical-align: top; } tr:last-child td{ border-bottom:0; } /* Inputs */ textarea{ width:100%; border:1px solid var(--line); border-radius:10px; padding:10px; font-size:14px; background:#fff; color: var(--ink); } /* Images */ img{ max-width:100%; border-radius:10px; height:auto; } /* Responsive */ @media (min-width:760px){ .bcl-title{ font-size:18px; } .card{ padding:16px; } .btn{ padding:9px 15px; } .bcl-shell{ padding:18px 14px 52px; } } /* ================================================== GHS Symbole – bewusst groß & gut sichtbar ================================================== */ /* typische GHS-Icons (quadratisch) */ img[src*="ghs"], img[src*="GHS"], img[src*="gefahr"], img[src*="piktogramm"], .ghs-icon{ width: 56px !important; height: auto !important; max-width: none !important; margin: 6px 6px 6px 0; } /* Desktop etwas größer */ @media (min-width:760px){ img[src*="ghs"], img[src*="GHS"], img[src*="gefahr"], img[src*="piktogramm"], .ghs-icon{ width: 68px !important; } }