/* ============================================================ PALETTE.CSS – die einzige Quelle für Farben in der App ------------------------------------------------------------ 15 Palettenfarben aus Einstellungen → Farben (FARBEN, Feld Schluessel): Hauptfarben gold, anthrazit · Auftragsfarben orange (Gott lieben), koralle (Mitmenschen lieben), tuerkis (Jünger machen) · Sonderfarben rot, kupfer, senf, gruen, petrol, blau, indigo, violett, beere, grau. Je Farbe: --pal- (Farbe), -hell, -mittel, -dunkel (aus FARBEN), -tint (zarte Fläche) und -nacht (Fläche im dunklen Modus), gemischt. assets/element-farben.js setzt die Werte aus der Datenbank; hier stehen nur Startwerte. Grautöne (--neutral-…) und der dunkle Modus (--nacht-…) sind aus Anthrazit gemischt. Außer Weiß, Schwarz und Schatten gibt es keine Farbe in der App, die nicht aus dieser Datei kommt. ============================================================ */ :root { /* Reich Gottes */ --pal-gold: #E8C255; --pal-gold-hell: #FFE07F; --pal-gold-mittel: #C59556; --pal-gold-dunkel: #835C30; --pal-gold-tint: color-mix(in srgb, var(--pal-gold) 10%, #fff); --pal-gold-nacht: color-mix(in srgb, var(--pal-gold) 22%, var(--pal-anthrazit-dunkel)); /* Anthrazit */ --pal-anthrazit: #58595B; --pal-anthrazit-hell: #F1F1F2; --pal-anthrazit-mittel: #A7A9AC; --pal-anthrazit-dunkel: #231F20; --pal-anthrazit-tint: color-mix(in srgb, var(--pal-anthrazit) 10%, #fff); --pal-anthrazit-nacht: color-mix(in srgb, var(--pal-anthrazit) 22%, var(--pal-anthrazit-dunkel)); /* Gott lieben */ --pal-orange: #FBB04C; --pal-orange-hell: #FEC46F; --pal-orange-mittel: #D4814E; --pal-orange-dunkel: #994F24; --pal-orange-tint: color-mix(in srgb, var(--pal-orange) 10%, #fff); --pal-orange-nacht: color-mix(in srgb, var(--pal-orange) 22%, var(--pal-anthrazit-dunkel)); /* Mitmenschen lieben */ --pal-koralle: #F3705A; --pal-koralle-hell: #F69679; --pal-koralle-mittel: #CF3C53; --pal-koralle-dunkel: #892433; --pal-koralle-tint: color-mix(in srgb, var(--pal-koralle) 10%, #fff); --pal-koralle-nacht: color-mix(in srgb, var(--pal-koralle) 22%, var(--pal-anthrazit-dunkel)); /* Jünger machen */ --pal-tuerkis: #7ACCC8; --pal-tuerkis-hell: #AEDFE4; --pal-tuerkis-mittel: #62A0B4; --pal-tuerkis-dunkel: #386D7C; --pal-tuerkis-tint: color-mix(in srgb, var(--pal-tuerkis) 10%, #fff); --pal-tuerkis-nacht: color-mix(in srgb, var(--pal-tuerkis) 22%, var(--pal-anthrazit-dunkel)); /* Rot */ --pal-rot: #B12F38; --pal-rot-hell: #F7EAEB; --pal-rot-mittel: #E0ACAF; --pal-rot-dunkel: #6A1C22; --pal-rot-tint: color-mix(in srgb, var(--pal-rot) 10%, #fff); --pal-rot-nacht: color-mix(in srgb, var(--pal-rot) 22%, var(--pal-anthrazit-dunkel)); /* Kupfer */ --pal-kupfer: #B4632D; --pal-kupfer-hell: #F8EFEA; --pal-kupfer-mittel: #E1C1AB; --pal-kupfer-dunkel: #6C3B1B; --pal-kupfer-tint: color-mix(in srgb, var(--pal-kupfer) 10%, #fff); --pal-kupfer-nacht: color-mix(in srgb, var(--pal-kupfer) 22%, var(--pal-anthrazit-dunkel)); /* Senf */ --pal-senf: #C0990C; --pal-senf-hell: #F9F5E7; --pal-senf-mittel: #E6D69E; --pal-senf-dunkel: #735C07; --pal-senf-tint: color-mix(in srgb, var(--pal-senf) 10%, #fff); --pal-senf-nacht: color-mix(in srgb, var(--pal-senf) 22%, var(--pal-anthrazit-dunkel)); /* Grün */ --pal-gruen: #3E9B67; --pal-gruen-hell: #ECF5F0; --pal-gruen-mittel: #B2D7C2; --pal-gruen-dunkel: #255D3E; --pal-gruen-tint: color-mix(in srgb, var(--pal-gruen) 10%, #fff); --pal-gruen-nacht: color-mix(in srgb, var(--pal-gruen) 22%, var(--pal-anthrazit-dunkel)); /* Petrol */ --pal-petrol: #2D6A80; --pal-petrol-hell: #EAF0F2; --pal-petrol-mittel: #ABC3CC; --pal-petrol-dunkel: #1B404D; --pal-petrol-tint: color-mix(in srgb, var(--pal-petrol) 10%, #fff); --pal-petrol-nacht: color-mix(in srgb, var(--pal-petrol) 22%, var(--pal-anthrazit-dunkel)); /* Blau */ --pal-blau: #4677C8; --pal-blau-hell: #ECF1FA; --pal-blau-mittel: #B5C9E9; --pal-blau-dunkel: #2A4778; --pal-blau-tint: color-mix(in srgb, var(--pal-blau) 10%, #fff); --pal-blau-nacht: color-mix(in srgb, var(--pal-blau) 22%, var(--pal-anthrazit-dunkel)); /* Indigo */ --pal-indigo: #353D82; --pal-indigo-hell: #EBECF2; --pal-indigo-mittel: #AEB1CD; --pal-indigo-dunkel: #20254E; --pal-indigo-tint: color-mix(in srgb, var(--pal-indigo) 10%, #fff); --pal-indigo-nacht: color-mix(in srgb, var(--pal-indigo) 22%, var(--pal-anthrazit-dunkel)); /* Violett */ --pal-violett: #8062C8; --pal-violett-hell: #F2EFFA; --pal-violett-mittel: #CCC0E9; --pal-violett-dunkel: #4D3B78; --pal-violett-tint: color-mix(in srgb, var(--pal-violett) 10%, #fff); --pal-violett-nacht: color-mix(in srgb, var(--pal-violett) 22%, var(--pal-anthrazit-dunkel)); /* Beere */ --pal-beere: #C4386F; --pal-beere-hell: #F9EBF1; --pal-beere-mittel: #E7AFC5; --pal-beere-dunkel: #762243; --pal-beere-tint: color-mix(in srgb, var(--pal-beere) 10%, #fff); --pal-beere-nacht: color-mix(in srgb, var(--pal-beere) 22%, var(--pal-anthrazit-dunkel)); /* Grau */ --pal-grau: #7D828C; --pal-grau-hell: #F2F2F4; --pal-grau-mittel: #CBCDD1; --pal-grau-dunkel: #4B4E54; --pal-grau-tint: color-mix(in srgb, var(--pal-grau) 10%, #fff); --pal-grau-nacht: color-mix(in srgb, var(--pal-grau) 22%, var(--pal-anthrazit-dunkel)); /* Grautöne aus Anthrazit (hell → dunkel) */ --neutral-50: color-mix(in srgb, var(--pal-anthrazit) 3%, #fff); --neutral-100: color-mix(in srgb, var(--pal-anthrazit) 7%, #fff); --neutral-200: color-mix(in srgb, var(--pal-anthrazit) 14%, #fff); --neutral-300: color-mix(in srgb, var(--pal-anthrazit) 25%, #fff); --neutral-400: color-mix(in srgb, var(--pal-anthrazit) 45%, #fff); --neutral-500: color-mix(in srgb, var(--pal-anthrazit) 68%, #fff); --neutral-600: var(--pal-anthrazit); --neutral-700: color-mix(in srgb, var(--pal-anthrazit) 50%, var(--pal-anthrazit-dunkel)); --neutral-800: var(--pal-anthrazit-dunkel); /* Dunkler Modus: Flächen aus Anthrazit-Dunkel */ --nacht-950: color-mix(in srgb, var(--pal-anthrazit-dunkel) 70%, #000); --nacht-900: color-mix(in srgb, var(--pal-anthrazit-dunkel) 85%, #000); --nacht-800: var(--pal-anthrazit-dunkel); --nacht-700: color-mix(in srgb, var(--pal-anthrazit-dunkel) 80%, var(--pal-anthrazit)); --nacht-600: color-mix(in srgb, var(--pal-anthrazit-dunkel) 55%, var(--pal-anthrazit)); /* Bisherige Namen (Gold/Anthrazit) → Palette */ --gold: var(--pal-gold); --gold-hell: var(--pal-gold-hell); --gold-mittel: var(--pal-gold-mittel); --gold-dunkel: var(--pal-gold-dunkel); --gold-tint: var(--pal-gold-tint); --gold-hover: color-mix(in srgb, var(--pal-gold) 90%, #000); --anthrazit: var(--pal-anthrazit); --anthrazit-dunkel: var(--pal-anthrazit-dunkel); }