/* ============================================================ GM Design System (GDS) — Single Source of Truth Version 1.0 · Stand 2026-04-21 ============================================================ Konsumiert von: - Planungsdashboard (Desktop + Mobile + TV) Dark-Theme - Urlaubsdashboard Dark-Theme - Fuhrpark App Light-Theme (setzt oder ) ------------------------------------------------------------ Regeln: - Referenziere nie Hex-Werte direkt im Komponenten-CSS. - Neue Farben/Maße NUR durch Erweiterung dieser Datei. - Semitransparenzen fuer Rollen-Badges kommen aus rgba(var(--gds-role-*), alpha) — KEINE eigenen Hex-Varianten. ============================================================ */ :root { /* ========================================================== 1 MARKE ========================================================== */ --gds-brand: #f5a300; --gds-brand-dark: #c8860a; --gds-brand-soft: rgba(245, 163, 0, 0.16); --gds-brand-strong: rgba(245, 163, 0, 0.34); --gds-brand-border: rgba(245, 163, 0, 0.42); /* ========================================================== 2 STATUS ========================================================== */ --gds-good: #22c55e; --gds-watch: #f59e0b; --gds-critical: #ef4444; --gds-good-halo: rgba(34, 197, 94, 0.16); --gds-watch-halo: rgba(245, 158, 11, 0.16); --gds-critical-halo: rgba(239, 68, 68, 0.16); /* ========================================================== 3 DOMAENE (Hochbau / Tiefbau / GalaBau) ========================================================== */ --gds-hochbau: #8fb9e8; --gds-tiefbau: #aeb7c4; --gds-galabau: #6fc28a; /* ========================================================== 4 ROLLEN — RGB-Triplets fuer .person-badge-* Verwendung: rgba(var(--gds-role-X), alpha) ========================================================== */ --gds-role-polier: 96, 165, 250; --gds-role-vorarbeiter: 245, 163, 0; --gds-role-eh: 239, 68, 68; --gds-role-kran: 45, 212, 191; --gds-role-bagger: 163, 230, 53; --gds-role-maschinist: 192, 132, 252; /* ========================================================== 5 TYPOGRAFIE ========================================================== */ --gds-font-sans: Bahnschrift, "Trebuchet MS", "Segoe UI", system-ui, sans-serif; --gds-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace; --gds-fs-hero: clamp(2rem, 4vw, 3.4rem); --gds-fs-h1: 1.7rem; --gds-fs-h2: 1.3rem; --gds-fs-h3: 1.05rem; --gds-fs-body: 1rem; --gds-fs-meta: 0.85rem; --gds-fs-cap: 0.78rem; --gds-fs-cap-xs: 0.68rem; --gds-lh-tight: 1.0; --gds-lh-snug: 1.15; --gds-lh-normal: 1.35; --gds-ls-kicker: 0.08em; --gds-ls-over: 0.14em; --gds-fw-regular: 400; --gds-fw-medium: 500; --gds-fw-semi: 650; --gds-fw-bold: 750; --gds-fw-extrabold: 900; /* ========================================================== 6 SPACING — 2er-Skala (keine krummen Werte zulassen) ========================================================== */ --gds-s-2: 2px; --gds-s-4: 4px; --gds-s-6: 6px; --gds-s-8: 8px; --gds-s-10: 10px; --gds-s-12: 12px; --gds-s-14: 14px; --gds-s-16: 16px; --gds-s-18: 18px; --gds-s-20: 20px; --gds-s-24: 24px; --gds-s-32: 32px; --gds-s-40: 40px; /* ========================================================== 7 RADIUS ========================================================== */ --gds-r-chip: 999px; --gds-r-input: 12px; --gds-r-card-s: 16px; --gds-r-card: 18px; --gds-r-card-l: 22px; --gds-r-board: 24px; /* ========================================================== 8 ELEVATION ========================================================== */ --gds-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04); --gds-shadow-2: 0 8px 20px rgba(0, 0, 0, 0.18); --gds-shadow-3: 0 24px 60px rgba(0, 0, 0, 0.28); /* ========================================================== 9 TOUCH ========================================================== */ --gds-tap: 44px; --gds-tap-lg: 48px; /* ========================================================== 10 THEME — DARK (Default: Planung + Urlaub) ========================================================== */ --gds-bg: #0d1520; --gds-bg-gradient: radial-gradient(circle at -10% -12%, rgba(245, 163, 0, 0.14), transparent 30%), linear-gradient(180deg, #0b131d 0%, #0d1520 100%); --gds-panel: #101923; --gds-panel-2: #12202d; --gds-panel-3: #162434; --gds-panel-grad: linear-gradient(180deg, rgba(17, 28, 40, 0.98), rgba(12, 20, 30, 0.98)); --gds-line: rgba(255, 255, 255, 0.08); --gds-text: #fbfdff; --gds-text-muted: #95a4b8; --gds-chip-bg: linear-gradient(180deg, #dbe6f3, #bdd2ea); --gds-chip-border: rgba(232, 240, 250, 0.58); --gds-chip-text: #10151f; --gds-input-bg: #0f1926; --gds-btn-primary-bg: linear-gradient(180deg, rgba(245, 163, 0, 0.18), rgba(245, 163, 0, 0.08)); --gds-btn-primary-border: rgba(245, 163, 0, 0.24); --gds-btn-primary-text: var(--gds-brand); } /* ============================================================ THEME — LIGHT (Fuhrpark App) Aktivierung: oder entsprechend im body ============================================================ */ [data-theme="light"] { --gds-bg: #F5F4F0; --gds-bg-gradient: none; --gds-panel: #ffffff; --gds-panel-2: #F8F7F3; --gds-panel-3: #EEEBE3; --gds-panel-grad: #ffffff; --gds-line: #E8E3D9; --gds-text: #1a1a1a; --gds-text-muted: #6b7280; --gds-chip-bg: #F8F7F3; --gds-chip-border: #E8E3D9; --gds-chip-text: #1a1a1a; --gds-input-bg: #ffffff; --gds-btn-primary-bg: var(--gds-brand); --gds-btn-primary-border: var(--gds-brand); --gds-btn-primary-text: #1a1a1a; /* Rollen-Farbfelder werden im Light-Theme intensiver */ --gds-brand-soft: rgba(245, 163, 0, 0.12); --gds-brand-strong: rgba(245, 163, 0, 0.26); } /* ============================================================ BASE — Body-Grundlagen ============================================================ */ html, body { margin: 0; min-height: 100%; background: var(--gds-bg-gradient, var(--gds-bg)); color: var(--gds-text); font-family: var(--gds-font-sans); line-height: var(--gds-lh-normal); -webkit-text-size-adjust: 100%; } *, *::before, *::after { box-sizing: border-box; } /* ============================================================ PERSON-BADGE — einzige Wahrheit fuer Rollen-Kennzeichnung ------------------------------------------------------------ Verwendung: P EH ------------------------------------------------------------ Gilt identisch fuer Desktop, Mobile, TV. Keine App darf eigene Badge-Klassen definieren. ============================================================ */ .person-badges { display: inline-flex; gap: var(--gds-s-4); flex-wrap: wrap; align-items: center; } .person-badge { display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; min-width: 21px; border-radius: 50%; border: 1px solid var(--gds-brand-border); background: var(--gds-brand-soft); color: var(--gds-brand); font-family: var(--gds-font-sans); font-size: 0.7rem; font-weight: var(--gds-fw-extrabold); line-height: 1; letter-spacing: 0; text-align: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); } .person-badge-polier { background: rgba(var(--gds-role-polier), 0.32); border-color: rgba(var(--gds-role-polier), 0.78); color: #d9ecff; } .person-badge-vorarbeiter { background: rgba(var(--gds-role-vorarbeiter), 0.34); border-color: rgba(var(--gds-role-vorarbeiter), 0.78); color: #ffe7ad; } .person-badge-eh { background: rgba(var(--gds-role-eh), 0.34); border-color: rgba(var(--gds-role-eh), 0.78); color: #ffd2d2; } .person-badge-kran { background: rgba(var(--gds-role-kran), 0.32); border-color: rgba(var(--gds-role-kran), 0.74); color: #cbfff8; } .person-badge-bagger { background: rgba(var(--gds-role-bagger), 0.32); border-color: rgba(var(--gds-role-bagger), 0.76); color: #ecffc7; } .person-badge-maschinist { background: rgba(var(--gds-role-maschinist), 0.34); border-color: rgba(var(--gds-role-maschinist), 0.78); color: #f1dcff; } /* Kran + Bagger: kuerzeres Label nutzt enger gesetzte Schrift */ .person-badge-kran, .person-badge-bagger { letter-spacing: -0.03em; } /* ============================================================ GDS-CHIP — Summen-/Kontext-Pille Verwendung: 28 Mitarbeiter ============================================================ */ .gds-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 7px 13px; border-radius: var(--gds-r-chip); background: var(--gds-chip-bg); border: 1px solid var(--gds-chip-border); color: var(--gds-chip-text); font-family: var(--gds-font-sans); font-size: var(--gds-fs-cap); font-weight: var(--gds-fw-bold); line-height: 1; white-space: nowrap; box-shadow: var(--gds-shadow-2); } /* ============================================================ GDS-BUTTON ============================================================ */ .gds-btn { min-height: var(--gds-tap); padding: 10px 16px; border-radius: var(--gds-r-input); border: 1px solid var(--gds-line); background: var(--gds-input-bg); color: var(--gds-text); font-family: var(--gds-font-sans); font-weight: var(--gds-fw-bold); cursor: pointer; } .gds-btn--primary { background: var(--gds-btn-primary-bg); border-color: var(--gds-btn-primary-border); color: var(--gds-btn-primary-text); } /* ============================================================ GDS-CARD — universelle Card-Grundform Varianten: .gds-card Standard (Radius 18) .gds-card--board Board-Container (Radius 24) .gds-card--site Site-/List-Item (Radius 16) .gds-card--brand Brand-Header (Radius 22) ============================================================ */ .gds-card { background: var(--gds-panel-grad); border: 1px solid var(--gds-line); border-radius: var(--gds-r-card); box-shadow: var(--gds-shadow-3); } [data-theme="light"] .gds-card { background: var(--gds-panel); box-shadow: var(--gds-shadow-1); } .gds-card--board { border-radius: var(--gds-r-board); } .gds-card--site { border-radius: var(--gds-r-card-s); } .gds-card--brand { border-radius: var(--gds-r-card-l); } /* ============================================================ STATUS-DOT Verwendung: .gds-status-dot--watch / --critical ============================================================ */ .gds-status-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--gds-good); box-shadow: 0 0 0 5px var(--gds-good-halo); flex-shrink: 0; display: inline-block; } .gds-status-dot--watch { background: var(--gds-watch); box-shadow: 0 0 0 5px var(--gds-watch-halo); } .gds-status-dot--critical { background: var(--gds-critical); box-shadow: 0 0 0 5px var(--gds-critical-halo); } /* ============================================================ TYPOGRAPHIE-UTILITIES ============================================================ */ .gds-kicker { font-family: var(--gds-font-sans); font-size: var(--gds-fs-cap); font-weight: var(--gds-fw-medium); line-height: 1; letter-spacing: var(--gds-ls-kicker); text-transform: uppercase; color: var(--gds-brand); } .gds-overline { font-family: var(--gds-font-sans); font-size: var(--gds-fs-cap-xs); font-weight: var(--gds-fw-medium); line-height: 1; letter-spacing: var(--gds-ls-over); text-transform: uppercase; color: var(--gds-text-muted); } .gds-meta { font-size: var(--gds-fs-meta); color: var(--gds-text-muted); } /* ============================================================ HELPERS ============================================================ */ .gds-hidden { display: none !important; }