/* ============================================================================= CI-KIT — Portfolio Corporate Identity Eine einheitliche UI-Sprache für alle Apps des Portfolios. Stil: luftig & rund (Basis: uhren-projekt), Indigo-Akzent. Themes: Dark (Default) + Light via Stack: Framework-agnostisch. Funktioniert in React (var(--accent)), Jinja2/HTML, Svelte, plain HTML — überall wo CSS geladen wird. Aufbau: 1) Tokens 2) Base/Reset 3) Komponenten 4) Utilities Version: 1.0.0 ========================================================================== */ /* ============================================================================= 1) TOKENS ========================================================================== */ :root, html[data-theme="dark"] { color-scheme: dark; /* native Controls (Scrollbar, Inputs) dunkel */ /* -- Flächen / Neutrale Palette ------------------------------------------ */ --bg: #0c0d10; --surface: #17191f; --surface-2: #1f222a; --surface-3: #262a33; --border: rgba(255, 255, 255, .08); --border-strong:rgba(255, 255, 255, .16); /* -- Text ----------------------------------------------------------------- */ --text: #e7e9ee; --muted: #9298a3; /* -- Akzent (Indigo) ------------------------------------------------------ */ --accent: #6c8cff; --accent-hover: #82a0ff; --accent-soft: rgba(108, 140, 255, .16); --accent-contrast:#ffffff; /* -- Status --------------------------------------------------------------- */ --success: #46c08a; --success-soft: rgba(70, 192, 138, .18); --danger: #ef6b6b; --danger-soft: rgba(239, 107, 107, .20); --warning: #e0a32b; --warning-soft: rgba(230, 170, 40, .22); --info: var(--accent); --info-soft: var(--accent-soft); /* -- Effekte -------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .30); --shadow: 0 8px 30px rgba(0, 0, 0, .35); --shadow-lg: 0 16px 48px rgba(0, 0, 0, .50); --overlay: rgba(0, 0, 0, .55); --overlay-bd: rgba(255, 255, 255, .28); } html[data-theme="light"] { color-scheme: light; --bg: #f3f4f7; --surface: #ffffff; --surface-2: #f5f6f9; --surface-3: #eceef3; --border: rgba(20, 24, 40, .10); --border-strong:rgba(20, 24, 40, .18); --text: #1c2230; --muted: #6b7280; --accent: #4f6ef2; --accent-hover: #3f5ee0; --accent-soft: rgba(79, 110, 242, .12); --accent-contrast:#ffffff; --success: #2f9e6e; --success-soft: rgba(47, 158, 110, .14); --danger: #e0524f; --danger-soft: rgba(224, 82, 79, .14); --warning: #c9871a; --warning-soft: rgba(201, 135, 26, .16); --shadow-sm: 0 1px 2px rgba(20, 24, 40, .06); --shadow: 0 6px 22px rgba(20, 24, 40, .08); --shadow-lg: 0 16px 48px rgba(20, 24, 40, .16); --overlay: rgba(20, 24, 40, .35); --overlay-bd: rgba(0, 0, 0, .18); } :root { /* -- Typografie (theme-unabhängig) --------------------------------------- */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --fs-xs: 0.6875rem; /* 11px — Mikro-Labels, Badges */ --fs-sm: 0.8125rem; /* 13px — Hilfstext, Buttons, Inputs */ --fs-md: 0.875rem; /* 14px — Body (Default) */ --fs-lg: 0.9375rem; /* 15px — Card-Titel (h2) */ --fs-xl: 1.125rem; /* 18px — Seiten-/Brand-Titel (h1) */ --fs-2xl: 1.375rem; /* 22px — Hero */ --fs-3xl: 1.75rem; /* 28px — Display */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.25; --lh-base: 1.5; /* -- Spacing (8px-Basis) ------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 2.5rem; /* 40px */ /* -- Radius (rund/luftig) ------------------------------------------------- */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; /* Cards */ --radius-pill: 999px; /* -- Bewegung ------------------------------------------------------------- */ --transition-fast: .12s ease; --transition: .15s ease; --transition-theme: .25s ease; /* -- Layout --------------------------------------------------------------- */ --sidebar-width: 300px; --container-max: 1200px; /* -- Ebenen --------------------------------------------------------------- */ --z-dropdown: 100; --z-modal: 200; --z-toast: 300; /* -- Kategorische Palette (für Charts, Tags, Kategorien) ------------------ */ --cat-red: #ef4444; --cat-orange: #f97316; --cat-amber: #eab308; --cat-green: #22c55e; --cat-cyan: #06b6d4; --cat-blue: #3b82f6; --cat-violet: #8b5cf6; --cat-gray: #6b7280; } /* ============================================================================= 2) BASE / RESET ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-md); line-height: var(--lh-base); color: var(--text); background: var(--bg); transition: background var(--transition-theme), color var(--transition-theme); } h1, h2, h3, h4 { margin: 0; font-weight: var(--fw-semibold); line-height: var(--lh-tight); } h1 { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: .2px; } h2 { font-size: var(--fs-lg); margin-bottom: var(--space-4); letter-spacing: .2px; } h3 { font-size: var(--fs-sm); color: var(--muted); text-transform: uppercase; letter-spacing: .6px; margin: var(--space-5) 0 var(--space-1); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } code, kbd, pre { font-family: var(--font-mono); font-size: .9em; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: var(--radius-pill); border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Helfer-Klassen, die quer in beiden Referenzprojekten vorkamen */ .muted { color: var(--muted); font-size: var(--fs-sm); } .right { text-align: right; } .center { text-align: center; } .ok { color: var(--success); font-size: var(--fs-sm); } /* ============================================================================= 3) KOMPONENTEN ========================================================================== */ /* -- Card ------------------------------------------------------------------ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-5); box-shadow: var(--shadow); } .card + .card { margin-top: var(--space-5); } .card-flush { padding: 0; overflow: hidden; } /* -- Buttons --------------------------------------------------------------- */ /* Doppelt selektiert: canonical .btn (React) UND bare