/* ============================================================ SHAH CONSULTING GmbH — Token-Bruecke ------------------------------------------------------------ Die Komponentenschicht dieser Plattform (``sc.css``, ``sc-app.css``) stammt aus einem abgeloesten System und spricht dessen Token-Namen (``--surface-1``, ``--fw-bold``, ``--r-xl``, ``--fs-h1`` …). Diese Datei belegt JEDEN dieser Namen mit einem Wert aus ``sc-tokens.css``. Damit traegt die gesamte Oberflaeche die Shah-Consulting-Formensprache, ohne dass eine einzige Komponentenregel doppelt gepflegt werden muss. Es gibt keine zweite Quelle: was hier nicht auf ``--sc-*`` zeigt, existiert nicht mehr. Verbindliche Uebersetzungen (DESIGNSYSTEM.md): §1 Akzent = Marken-Hellgrau. Interaktives invertiert. §4 Der Hausstil ist LEICHT — 400 fuer Ueberschriften, 500 fuer Betonung. Es gibt kein 700/900 mehr. §5 Alles Klickbare ist eine Pille. Radien wachsen mit der Schachtelung. §5 Schatten sind leise; Hierarchie traegt die Flaechenstufe. LADEREIHENFOLGE (verbindlich): sc-fonts.css -> sc-tokens.css -> sc-bridge.css -> sc.css -> sc-components.css -> sc-app.css ============================================================ */ :root { /* ---- Flaechen ---------------------------------------------------- */ --bg-canvas: var(--sc-bg-deep); --bg-base: var(--sc-bg); --surface-1: var(--sc-bg-card); --surface-2: var(--sc-bg-raised); --surface-3: var(--sc-bg-raised); --surface-4: var(--sc-bg-elevated); /* ---- Haarlinien: deckende Linien statt Weiss-Alpha ---------------- */ --border-subtle: var(--sc-line-subtle); --border-default: var(--sc-line); --border-strong: var(--sc-line-strong); --border-focus: var(--sc-accent); /* ---- Text -------------------------------------------------------- */ --text-primary: var(--sc-text); --text-secondary: var(--sc-text-2); --text-tertiary: var(--sc-text-3); --text-disabled: var(--sc-text-disabled); --text-on-accent: var(--sc-on-accent); /* ---- Akzent: KEIN Buntton. Der Akzent ist das Logo-Hellgrau. ------ Die Rampe behaelt ihre Namen (die Komponentenschicht referenziert sie an vielen Stellen), fuehrt aber ausschliesslich Graustufen. */ --accent-300: var(--sc-text-2); --accent-400: var(--sc-text); --accent-500: var(--sc-accent); --accent-600: var(--sc-accent-down); --accent-700: var(--sc-line-strong); --accent-800: var(--sc-line); --brand: var(--sc-accent); --brand-soft: rgba(233,234,236,0.10); --brand-soft-2: rgba(233,234,236,0.16); /* ---- Semantik: entsaettigt, Produkt-UI (DESIGNSYSTEM.md §3) ------- */ --status-progress: var(--sc-info); --status-progress-bg: var(--sc-info-tint); --status-design: var(--sc-info); --status-design-bg: var(--sc-info-tint); --status-review: var(--sc-warn); --status-review-bg: var(--sc-warn-tint); --status-complete: var(--sc-ok); --status-complete-bg: var(--sc-ok-tint); --priority-high: var(--sc-error); --priority-medium: var(--sc-warn); --priority-low: var(--sc-info); --danger: var(--sc-error); --warning: var(--sc-warn); --success: var(--sc-ok); --info: var(--sc-info); --danger-bg: var(--sc-error-tint); --success-bg: var(--sc-ok-tint); --info-bg: var(--sc-info-tint); --warning-bg: var(--sc-warn-tint); /* ---- Schrift ----------------------------------------------------- */ --font-sans: var(--sc-font-body); --font-display: var(--sc-font-display); --font-mono: var(--sc-font-mono); /* ---- Gewichte: der Hausstil ist LEICHT (DESIGNSYSTEM.md §4) ------- Die alten Namen bleiben, aber 700/900 gibt es nicht mehr: "bold" landet auf 500, "black" auf dem Display-Gewicht 400. Genau daran haengt der leichte Charakter des Systems. */ --fw-regular: var(--sc-weight-regular); --fw-medium: var(--sc-weight-medium); --fw-bold: var(--sc-weight-medium); --fw-black: var(--sc-weight-display); /* ---- Groessenskala ----------------------------------------------- */ --fs-display: var(--sc-text-3xl); --fs-h1: var(--sc-text-2xl); --fs-h2: var(--sc-text-xl); --fs-h3: var(--sc-text-md); --fs-body: var(--sc-text-base); --fs-sm: var(--sc-text-sm); --fs-xs: var(--sc-text-xs); --fs-2xs: var(--sc-text-xs); --fs-hero: var(--sc-text-hero); --fs-display-2: var(--sc-text-3xl); --fs-lead: var(--sc-text-lg); /* ---- Leading / Tracking ------------------------------------------ */ --lh-tight: var(--sc-leading-display); --lh-snug: var(--sc-leading-heading); --lh-normal: var(--sc-leading-normal); --ls-tight: var(--sc-tracking-display); --ls-normal: var(--sc-tracking-normal); --ls-wide: var(--sc-tracking-meta); --ls-eyebrow: var(--sc-tracking-meta); /* ---- Abstaende (die Stufen sind deckungsgleich, 4px-Basis) -------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* ---- Radien (DESIGNSYSTEM.md §5) ---------------------------------- Die Pille gilt fuer alles KLICKBARE -- nicht fuer Container. Diese Stufen werden auch von Tabellen, Wells und Feldern benutzt; wuerde man sie global auf 9999px legen, wuerden Tabellen zu Kapseln. Die Pille setzen deshalb die Klassen selbst (.sc-btn/.sc-pill/.sc-badge/.sc-chip/ .sc-navlink in sc-components.css), nicht die Radius-Stufe. */ --r-xs: var(--sc-radius-sm); --r-sm: var(--sc-radius-sm); --r-md: var(--sc-radius-md); --r-lg: var(--sc-radius-md); --r-xl: var(--sc-radius-lg); --r-2xl: var(--sc-radius-xl); --r-pill: var(--sc-radius-pill); /* ---- Hoehen ------------------------------------------------------- */ --h-btn-sm: 34px; --h-btn-md: 42px; --h-btn-lg: 50px; --h-input: 44px; /* ---- Layout ------------------------------------------------------- */ --rail-w: 72px; --sidebar-w: 300px; --gap-grid: var(--space-4); --maxw-app: 1440px; --maxw-page: var(--sc-container); --maxw-wide: var(--sc-container); --maxw-prose: var(--sc-container-content); --gutter: clamp(20px, 5vw, 48px); --section-y: clamp(64px, 9vw, 128px); --section-y-sm: clamp(40px, 6vw, 72px); /* ---- Schatten: leise. Das Kachel-Merkmal ist die Innenlicht-Kante. */ --shadow-xs: var(--sc-shadow-card); --shadow-sm: var(--sc-shadow-card); --shadow-md: var(--sc-shadow-raised); --shadow-lg: var(--sc-shadow-floating); --shadow-card: var(--sc-edge-top), var(--sc-shadow-card); /* ---- Kein farbiger Glow mehr: der Fokus ist ein Akzent-Ring. ------ */ --glow-brand: var(--sc-shadow-raised); --glow-brand-ring: 0 0 0 1px var(--sc-line-strong), var(--sc-shadow-raised); --glow-focus: 0 0 0 2px var(--sc-bg), 0 0 0 4px var(--sc-accent); /* ---- Verlaeufe: das DS kennt keinen Farbverlauf als Markenmittel. - Beide Namen bleiben belegt, tragen aber nur eine leise Flaechenaufhellung. */ --grad-brand: linear-gradient(135deg, var(--sc-bg-elevated) 0%, var(--sc-bg-card) 100%); --grad-brand-soft: linear-gradient(135deg, rgba(233,234,236,0.06), rgba(233,234,236,0.02)); --blur-panel: 20px; --blur-chip: 12px; /* ---- Bewegung ----------------------------------------------------- */ --ease-out: var(--sc-ease); --ease-inout: var(--sc-ease); --ease-spring: var(--sc-ease-spring); --dur-fast: var(--sc-duration-fast); --dur-base: var(--sc-duration-base); --dur-slow: var(--sc-duration-slow); --hover-lift: translateY(-2px); --press-scale: scale(0.98); } /* ============================================================ Hell-Variante. Die --sc-*-Primitiven kippen bereits in sc-tokens.css; hier werden nur die abgeleiteten Namen nachgezogen, die auf feste Alpha-Werte zeigen und deshalb nicht automatisch mitwandern. ============================================================ */ :root[data-theme="light"], [data-theme="light"], .sc-light { --brand-soft: rgba(21,22,23,0.06); --brand-soft-2: rgba(21,22,23,0.10); --grad-brand: linear-gradient(135deg, var(--sc-bg-raised) 0%, var(--sc-bg-deep) 100%); --grad-brand-soft: linear-gradient(135deg, rgba(21,22,23,0.04), rgba(21,22,23,0.01)); } /* ============================================================ Print / A4 (Handout, Rechnung, Teilnahmebescheinigung). Das Design-System hat dafuer eine eigene Papier-Palette (DESIGNSYSTEM.md §3): --sc-paper / --sc-paper-card / --sc-ink / --sc-line-on-paper. Genau die wird hier gesetzt -- der Druck traegt damit dieselbe Marke wie der Bildschirm. Aktivierbar ueber , greift automatisch im @media print. ============================================================ */ [data-print], [data-print] body { --bg-canvas: var(--sc-paper); --bg-base: var(--sc-paper); --surface-1: var(--sc-paper-card); --surface-2: var(--sc-paper-card); --surface-3: var(--sc-paper); --surface-4: var(--sc-paper); --text-primary: var(--sc-ink); --text-secondary: var(--sc-ink-2); --text-tertiary: var(--sc-ink-2); --border-subtle: var(--sc-line-on-paper); --border-default: var(--sc-line-on-paper); --border-strong: var(--sc-line-on-paper); --brand: var(--sc-ink); --status-progress: var(--sc-ink); --grad-brand: none; --glow-brand: none; --glow-brand-ring: 0 0 0 1px var(--sc-line-on-paper); --shadow-card: none; } @media print { :root, body { --bg-canvas: var(--sc-paper) !important; --bg-base: var(--sc-paper) !important; --surface-1: var(--sc-paper-card) !important; --surface-2: var(--sc-paper-card) !important; --text-primary: var(--sc-ink) !important; --text-secondary: var(--sc-ink-2) !important; --border-subtle: var(--sc-line-on-paper) !important; --brand: var(--sc-ink) !important; --shadow-card: none !important; } .sc-card, .sc-tile, .sc-panel { box-shadow: none !important; border-color: var(--sc-line-on-paper) !important; } }