/* ===================================================================== KalkKalk – Design-Tokens (Baukalkulation · Mathies) Einbinden: Theme: – ohne Attribut folgt es dem System Alle Farben sind auf WCAG-Kontrast (≥ 4,5:1 für Text) geprüft. ===================================================================== */ /* ---------- Schriften (lokal gehostet, kein Google-CDN → DSGVO) ---------- */ @font-face { font-family: "Jost"; /* freie Futura-Alternative – Hausschrift Mathies */ src: url("../fonts/Jost-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } :root { /* ---------- Grundpalette (feste Markenfarben) ---------- */ --kk-braun: #532E1E; /* Markenfarbe Mathies */ --kk-braun-dunkel: #3B2014; /* Hover/aktiv auf Braun */ --kk-braun-hell: #7A5A48; /* Sekundärtext hell */ --kk-kalk: #F4F0E6; /* Kalkweiß – Grundfläche */ --kk-kalk-dunkel: #EAE3D4; /* abgesetzte Fläche */ --kk-weiss: #FFFDF8; /* Karten, Eingabefelder */ --kk-sand: #D9CBB8; /* Ränder, Trennlinien */ --kk-stein: #8A7C6A; /* deaktiviert, Platzhalter (nur ≥ 18px) */ --kk-tinte: #2B1A12; /* Fließtext */ /* Status (Handwerks-Töne statt Ampel-Neon) */ --kk-moos: #4E6B3A; /* ok / Gewinn */ --kk-ocker: #96600F; /* Warnung / knapp kalkuliert */ --kk-ziegel: #A33A2A; /* Fehler / Verlust */ --kk-blaugrau: #3E5C76; /* Info / Hinweis */ /* ---------- Semantische Tokens: HELL (Standard) ---------- */ --kk-bg: var(--kk-kalk); --kk-flaeche: var(--kk-weiss); --kk-flaeche-2: var(--kk-kalk-dunkel); --kk-rand: var(--kk-sand); --kk-text: var(--kk-tinte); --kk-text-2: var(--kk-braun-hell); --kk-text-aus: var(--kk-stein); --kk-akzent: var(--kk-braun); --kk-akzent-hover: var(--kk-braun-dunkel); --kk-auf-akzent: var(--kk-kalk); --kk-ok: var(--kk-moos); --kk-warnung: var(--kk-ocker); --kk-fehler: var(--kk-ziegel); --kk-info: var(--kk-blaugrau); --kk-kopf-bg: var(--kk-braun); /* App-Kopfzeile bleibt immer braun */ --kk-kopf-text: var(--kk-kalk); --kk-logo: url("../logo/kalkkalk-wortmarke-braun.svg"); /* ---------- Typografie ---------- */ --kk-font-marke: "Jost", Futura, "Century Gothic", sans-serif; /* Überschriften: Versalien, gesperrt */ --kk-font-text: "Jost", Futura, "Century Gothic", sans-serif; /* Fließtext, UI, Formulare */ --kk-font-zahl: "IBM Plex Mono", Consolas, "Courier New", monospace; --kk-sperrung: 0.08em; /* Buchstabenabstand für Versal-Überschriften wie MATHIES */ --kk-t-xs: 0.8125rem; /* 13 */ --kk-t-s: 0.9375rem; /* 15 */ --kk-t-m: 1rem; /* 16 – Grundgröße */ --kk-t-l: 1.375rem; /* 22 */ --kk-t-xl: 1.875rem; /* 30 */ --kk-t-2xl: 2.625rem; /* 42 */ /* ---------- Abstände, Radien, Schatten ---------- */ --kk-1: 4px; --kk-2: 8px; --kk-3: 12px; --kk-4: 16px; --kk-5: 24px; --kk-6: 32px; --kk-7: 48px; --kk-8: 64px; --kk-radius-s: 4px; /* Eingaben, Buttons */ --kk-radius-m: 8px; /* Karten */ --kk-radius-l: 16px; /* Dialoge, App-Icon-Stil */ --kk-schatten: 0 1px 2px rgb(43 26 18 / 0.08), 0 4px 12px rgb(43 26 18 / 0.06); --kk-summe-strich: 3px double currentColor; /* Markenzeichen: doppelter Summenstrich */ color-scheme: light; } /* ---------- DUNKEL: explizit gewählt ---------- */ :root[data-theme="dunkel"] { --kk-bg: #1C1411; --kk-flaeche: #271C17; --kk-flaeche-2: #32251F; --kk-rand: #4A382E; --kk-text: #F4F0E6; --kk-text-2: #CBB9A6; --kk-text-aus: #8E7C6C; --kk-akzent: #D4A582; /* Braun ist auf Dunkel zu schwach → Kalkbraun hell */ --kk-akzent-hover: #E3BD9F; --kk-auf-akzent: #1C1411; --kk-ok: #8FB070; --kk-warnung: #E0A94A; --kk-fehler: #E8836F; --kk-info: #8CAFCB; --kk-kopf-bg: #532E1E; --kk-kopf-text: #F4F0E6; --kk-logo: url("../logo/kalkkalk-wortmarke-kalkweiss.svg"); --kk-schatten: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.3); color-scheme: dark; } /* ---------- DUNKEL: automatisch, wenn nichts gewählt ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) { --kk-bg: #1C1411; --kk-flaeche: #271C17; --kk-flaeche-2: #32251F; --kk-rand: #4A382E; --kk-text: #F4F0E6; --kk-text-2: #CBB9A6; --kk-text-aus: #8E7C6C; --kk-akzent: #D4A582; --kk-akzent-hover: #E3BD9F; --kk-auf-akzent: #1C1411; --kk-ok: #8FB070; --kk-warnung: #E0A94A; --kk-fehler: #E8836F; --kk-info: #8CAFCB; --kk-logo: url("../logo/kalkkalk-wortmarke-kalkweiss.svg"); --kk-schatten: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.3); color-scheme: dark; } } /* ---------- Kleine Helfer-Klassen ---------- */ .kk-zahl { font-family: var(--kk-font-zahl); font-variant-numeric: tabular-nums; text-align: right; } .kk-summe { font-family: var(--kk-font-zahl); font-weight: 600; border-bottom: var(--kk-summe-strich); padding-bottom: 2px; } .kk-ok { color: var(--kk-ok); } .kk-warnung { color: var(--kk-warnung); } .kk-fehler { color: var(--kk-fehler); }