/* Design-Tokens der Wiener Solutions App. * * Bewusst NICHT das appica-tokens.css aus CRM und RRISE: das sind interne * Werkzeuge in kühlem Blaugrau, diese App steht auf dem geteilten Bildschirm * eines Handwerksmeisters und soll wie sein Betriebssystem aussehen, nicht wie * ein Dashboard. Eigene Palette, eigene Schriften — das ist die eine bewusste * Abweichung von der Hausschrift der anderen Projekte. * * Zwei Randbedingungen aus dem Verkaufsgespräch stehen über allem: * - lesbar auf einem 13-Zoll-Laptop über eine mäßige Videoverbindung. * Deshalb große Grundschrift, hoher Kontrast, keine 12px-Graustufen. * - die Akzentfarbe ist pro Mandant konfigurierbar (--akzent wird vom * JavaScript auf gesetzt). Alles Farbige leitet sich daraus ab. * * Kein Dark Mode. Die App wird in Tageslicht-Videocalls gezeigt und gedruckt; * ein zweites Farbschema wäre eine zweite Sache, die im falschen Moment falsch * aussieht. */ @font-face { font-family: 'Satoshi'; src: url('/fonts/satoshi-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('/fonts/satoshi-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('/fonts/satoshi-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Instrument Serif'; src: url('/fonts/instrument-serif-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } :root { color-scheme: light; /* ---- Flächen: warmes Off-White, abgestufte Warmgraus ------------------- */ --papier: #FAF9F7; /* Seitenhintergrund */ --flaeche: #FFFFFF; /* Karten, Tabellen */ --flaeche-2: #F4F2EE; /* Tabellenkopf, ruhige Zonen */ --flaeche-3: #EAE7E1; /* Hover, gefüllte Chips */ /* ---- Text: tiefes Anthrazit, nichts wird heller als --text-schwach ----- */ --text: #1A1A18; --text-mittel: #4A4843; --text-schwach: #6E6B64; /* die hellste erlaubte Textfarbe */ --linie: #E2DED7; --linie-stark: #CFC9BF; /* ---- Akzent ------------------------------------------------------------ --akzent setzt app.js aus den Einstellungen. Die Ableitungen bleiben über color-mix relativ dazu, damit eine geänderte Firmenfarbe nicht sieben weitere Tokens von Hand nachziehen muss. */ --akzent: #2F5D8C; --akzent-text: #FFFFFF; --akzent-zart: color-mix(in oklab, var(--akzent) 8%, var(--flaeche)); --akzent-hell: color-mix(in oklab, var(--akzent) 18%, var(--flaeche)); --akzent-linie: color-mix(in oklab, var(--akzent) 32%, var(--linie)); --akzent-dunkel: color-mix(in oklab, var(--akzent) 82%, #000); /* ---- Status: gedeckte Signalfarben, keine Ampel ------------------------ Ein leuchtendes Grün neben einem leuchtenden Rot lässt jede Tabelle nach Bugtracker aussehen. Diese hier sind entsättigt und dunkel genug, um auf Papier und über eine schlechte Videoverbindung zu funktionieren. */ --st-entwurf: #6E6B64; --st-entwurf-bg: #EFEDE8; --st-offen: #3F5A70; --st-offen-bg: #E7EDF2; --st-faellig: #9C4221; --st-faellig-bg: #F6E9E1; --st-bezahlt: #3F6046; --st-bezahlt-bg: #E6EEE7; --st-abgelehnt: #7A6A5C; --st-abgelehnt-bg: #F0EBE4; /* ---- Typografie -------------------------------------------------------- Satoshi als UI-Schrift (geometrisch, kräftig, nicht Inter), Instrument Serif für große Zahlen und Seitenüberschriften. Genau zwei Schriften. */ --schrift: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif; --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif; /* Grundschrift größer als üblich — siehe Kopfkommentar. */ --gr-basis: 16.5px; --gr-klein: 14.5px; --gr-mikro: 13px; /* ---- Maße --------------------------------------------------------------- */ --radius: 10px; --radius-s: 7px; --radius-xs: 5px; /* Schatten sehr zurückhaltend und warm getönt: eine Arbeitsoberfläche soll flach wirken, nicht wie gestapelte Karten. */ --schatten: 0 1px 2px rgba(26, 26, 24, .05); --schatten-2: 0 4px 16px rgba(26, 26, 24, .09); --schatten-3: 0 18px 48px rgba(26, 26, 24, .16); --breite: 1240px; }