/** * ═══════════════════════════════════════════════════════════════ * § BRAND TOKENS · v1.0 * Terrakotta-Kupfer System · Dein erster qm * 19. April 2026 * * Diese Datei ist Single Source of Truth für alle Projekte: * CRM · ImmoAnalyse · Website · Aftersales-Portal · Pactum * * Regel: Niemals Farbwerte hart kodieren. Immer via var(). * Regel: Token-Namen sind namens-agnostisch (--accent statt --kupfer). * ═══════════════════════════════════════════════════════════════ */ :root { /* ─── CANVAS & SURFACE ─────────────────────────────────────── */ --canvas: #F3EFE7; /* Haupt-BG, warmer Kaschmir-Ton */ --canvas-deep: #EBE6DA; /* Zweite BG-Ebene */ --canvas-subtle: #F7F4ED; /* Minimal heller für Hero-Bereiche */ --surface: #FDFBF6; /* Karten, Modals, Haupt-Content-Container */ --surface-2: #EFEADE; /* Input-Felder, Secondary-Buttons, Hover-States */ --surface-3: #E6E0D1; /* Pressed-States, aktive Tabs */ --elevated: #FFFFFF; /* Höchste Ebene - Popover, Tooltips */ /* ─── INK (TEXT & ICONS) ───────────────────────────────────── */ --ink-1: #14110E; /* Primary text, Headlines */ --ink-2: #5C554D; /* Secondary text, Body */ --ink-3: #948C82; /* Tertiary text, Meta */ --ink-4: #BCB4A8; /* Disabled, Placeholder */ --ink-inverse: #FDFBF6; /* Text auf dunklem Grund */ /* ─── HAIRLINES & BORDERS ──────────────────────────────────── */ --hairline: #DED7C6; /* Standard-Trennlinien */ --hairline-strong: #C9C0AB; /* Betonte Trennlinien */ --hairline-subtle: #EAE3D2; /* Sehr dezente Linien */ /* ─── ACCENT · TERRAKOTTA-KUPFER (N4) ──────────────────────── */ --accent: #A85E3A; /* Hauptakzent - Primary CTA, wichtigste Zahl */ --accent-deep: #82442A; /* Hover, Pressed, Deep-Variante */ --accent-light: #C87E5A; /* Auf dunklem Grund, Secondary-Akzent */ --accent-bright: #D49471; /* Highlight, Glow, aktive Zustände */ --accent-soft: rgba(168, 94, 58, 0.08); /* Hover-Background */ --accent-soft-strong: rgba(168, 94, 58, 0.18); /* Pill-Border, aktive Hintergründe */ --accent-wash: rgba(168, 94, 58, 0.04); /* Sehr dezenter Hintergrund */ /* ─── DARK BLOCK · Signature-Bereiche ──────────────────────── */ --dark-block: #14110E; /* Schwarz-warm für Hero-Blöcke */ --dark-block-2: #1F1A14; /* Zweite dunkle Ebene */ --dark-ink-1: #FDFBF6; /* Primary auf Dark */ --dark-ink-2: rgba(253, 251, 246, 0.7); /* Secondary auf Dark */ --dark-ink-3: rgba(253, 251, 246, 0.5); /* Tertiary auf Dark */ --dark-hairline: rgba(253, 251, 246, 0.1); /* Trennlinien auf Dark */ /* ─── SEMANTIC · passend zur Palette ───────────────────────── */ --success: #4F6B42; /* Olivgrün statt Bootstrap-Grün */ --success-soft: rgba(79, 107, 66, 0.1); --success-deep: #3A5030; --warning: #B8842A; /* Honig statt Gelb */ --warning-soft: rgba(184, 132, 42, 0.1); --warning-deep: #8F6620; --danger: #8B3A2F; /* Warmes Rostrot statt Feuerwehrrot */ --danger-soft: rgba(139, 58, 47, 0.1); --danger-deep: #6B2B22; --info: #4A5A6F; /* Gedämpftes Stahlblau */ --info-soft: rgba(74, 90, 111, 0.1); --info-deep: #36424F; /* ─── STATUS · CRM-spezifisch ──────────────────────────────── */ --status-neu: var(--accent); --status-cc1: var(--ink-2); --status-qual: var(--success); --status-notar: var(--dark-block); --status-after: var(--accent-light); --status-verloren: var(--ink-4); /* ─── CHANNEL · Online vs. Organisch ───────────────────────── */ --channel-online: var(--info); --channel-organisch: var(--accent-deep); /* ─── TYPOGRAPHY ───────────────────────────────────────────── */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', monospace; /* Font-Size-Skala (Desktop) */ --text-xs: 11px; /* Caption, Mono-Labels */ --text-sm: 12px; /* Small Body, Meta */ --text-base: 14px; /* Default Body */ --text-md: 15px; /* Comfortable Body */ --text-lg: 16px; /* Large Body, Sub-Headlines */ --text-xl: 19px; /* Section Headlines */ --text-2xl: 24px; /* Page Headlines */ --text-3xl: 30px; /* Hero Small */ --text-4xl: 38px; /* Hero Medium */ --text-5xl: 48px; /* Hero Large */ --text-6xl: 64px; /* Display */ /* Font-Weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Line-Heights */ --leading-tight: 1.05; /* Headlines */ --leading-snug: 1.25; /* Sub-Headlines */ --leading-normal: 1.5; /* Body */ --leading-relaxed: 1.6; /* Large Body, Reading */ /* Letter-Spacing */ --tracking-tightest: -0.035em; /* Large Display */ --tracking-tighter: -0.025em; /* Headlines */ --tracking-tight: -0.015em; /* Body large */ --tracking-normal: -0.005em; /* Body */ --tracking-wide: 0.04em; /* Mono Numbers */ --tracking-wider: 0.1em; /* Mono Labels */ --tracking-widest: 0.2em; /* Uppercase Overlines */ /* Font-Feature-Settings (als Referenz — in CSS direkt setzen) */ /* Für Zahlen: font-feature-settings: 'tnum', 'zero'; */ /* Für Display: font-feature-settings: 'cv11', 'ss03'; */ /* ─── SPACING · 4px-Basis ──────────────────────────────────── */ --space-0: 0; --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 10px; --space-6: 12px; --space-8: 16px; --space-10: 20px; --space-12: 24px; --space-14: 28px; --space-16: 32px; --space-20: 40px; --space-24: 48px; --space-28: 56px; --space-32: 64px; --space-40: 80px; --space-48: 96px; /* ─── RADIUS ───────────────────────────────────────────────── */ --radius-none: 0; --radius-xs: 3px; /* Pills, Mono-Tags */ --radius-sm: 6px; /* Buttons, Inputs, kleine Badges */ --radius-md: 8px; /* Cards, Panels */ --radius-lg: 12px; /* Große Cards, Modals */ --radius-xl: 16px; /* Hero-Cards, App-Container */ --radius-full: 999px; /* Kreise, Pills rund */ /* Signatur-Radius für Monogramm */ --radius-monogram: 11px; /* Das ikonische Rounded Square */ /* ─── SHADOWS · warm getönt, nicht grau ───────────────────── */ --shadow-none: none; --shadow-sm: 0 1px 2px rgba(20, 17, 14, 0.04); --shadow-card: 0 1px 2px rgba(20, 17, 14, 0.04), 0 8px 24px rgba(20, 17, 14, 0.06); --shadow-raised: 0 2px 4px rgba(20, 17, 14, 0.05), 0 14px 30px rgba(20, 17, 14, 0.07); --shadow-floating:0 4px 8px rgba(20, 17, 14, 0.06), 0 24px 56px rgba(20, 17, 14, 0.1); --shadow-dialog: 0 8px 16px rgba(20, 17, 14, 0.08), 0 40px 80px rgba(20, 17, 14, 0.14); /* Akzent-Glow für Hero-CTAs */ --shadow-accent: 0 4px 12px rgba(168, 94, 58, 0.25); --shadow-accent-strong: 0 6px 20px rgba(168, 94, 58, 0.35); /* Inset-Shadow für Dark Blocks (ambient light) */ --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.04); /* ─── GRID-PATTERN (für Canvas) ────────────────────────────── */ --grid-line: rgba(20, 17, 14, 0.015); --grid-size: 48px; /* ─── MOTION ───────────────────────────────────────────────── */ --duration-instant: 80ms; --duration-fast: 180ms; --duration-medium: 240ms; --duration-slow: 360ms; --duration-slower: 560ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-decelerate: cubic-bezier(0, 0, 0.2, 1); --ease-accelerate: cubic-bezier(0.4, 0, 1, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); /* Standardtransition für Hovers */ --transition-colors: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); --transition-transform: transform var(--duration-fast) var(--ease-standard); --transition-all: all var(--duration-fast) var(--ease-standard); /* ─── Z-INDEX ──────────────────────────────────────────────── */ --z-base: 1; --z-elevated: 10; --z-sticky: 100; --z-overlay: 1000; --z-modal: 2000; --z-popover: 3000; --z-tooltip: 4000; --z-toast: 5000; /* ─── CHART-PALETTE · für Vermögensvisualisierungen ───────── */ --chart-1: var(--accent); --chart-2: var(--accent-light); --chart-3: var(--accent-deep); --chart-4: var(--info); --chart-5: var(--success); --chart-6: var(--ink-2); /* Für positive Trends */ --trend-up: var(--success); --trend-down: var(--danger); --trend-flat: var(--ink-3); /* ─── LAYOUT-CONSTANTS ─────────────────────────────────────── */ --max-width-content: 1200px; --max-width-wide: 1400px; --max-width-reading: 680px; --sidebar-width: 280px; --sidebar-width-wide: 320px; --header-height: 64px; --header-height-slim: 56px; /* ─── FOCUS-RING ───────────────────────────────────────────── */ --focus-ring: 0 0 0 2px var(--canvas), 0 0 0 4px var(--accent); --focus-ring-inset: inset 0 0 0 2px var(--accent); } /* ═══════════════════════════════════════════════════════════════ * GLOBAL BASE STYLES * Diese werden automatisch angewendet, wenn tokens.css geladen wird * ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--ink-1); background: var(--canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv11', 'ss03'; margin: 0; } /* ═══════════════════════════════════════════════════════════════ * UTILITY CLASSES * Häufig benötigte Klassen, die das System-Feeling erzwingen * ═══════════════════════════════════════════════════════════════ */ /* Zahlen - immer tabular, immer slashed zero */ .tnum { font-feature-settings: 'tnum', 'zero'; font-variant-numeric: tabular-nums; } /* Mono-Schrift */ .mono { font-family: var(--font-mono); font-feature-settings: 'tnum', 'zero'; } /* Kursiv-Emphase - unsere typografische Signatur */ .em-accent { font-style: italic; font-weight: var(--weight-medium); color: var(--accent); } /* Canvas-Grid-Pattern */ .bg-grid { background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size: var(--grid-size) var(--grid-size); } /* Focus-ring nur bei Keyboard-Navigation */ :focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Deutsche Zahlenformatierung enforcen */ .num-de { font-feature-settings: 'tnum', 'zero'; font-variant-numeric: tabular-nums; } /* ═══════════════════════════════════════════════════════════════ * PRINT-ANPASSUNG * PDFs und Druck übernehmen die Marke, aber mit weniger Shadows * ═══════════════════════════════════════════════════════════════ */ @media print { :root { --shadow-card: 0 0 0 1px var(--hairline); --shadow-raised: 0 0 0 1px var(--hairline-strong); --canvas: #FFFFFF; --surface: #FFFFFF; } body { background: white; } } /* ═══════════════════════════════════════════════════════════════ * DARK MODE (vorbereitet, aber noch nicht aktiv) * Wird in Phase 3 aktiviert, wenn gewünscht * ═══════════════════════════════════════════════════════════════ */ /* @media (prefers-color-scheme: dark) { ... } — später */