/* * Produktfarben für die Familienbausteine · produkte.css · Stand 0.1 * * Jedes Projekt setzt . Die Werte sind keine Kopien, * sondern Verweise auf tokens.css (Farbsystem v3). Vier Rollen je Produkt: * * --p-light Tönungen (Grund, Bühne, Balken) — nie Text * --p-base Punkte, Balken, Akzent auf dunklem Grund — nie Text auf Weiß * --p-deep gedrückter Zustand * --p-ink kleiner Text und Linien auf hellem Grund, mindestens 4,5:1 * --p-akzent große Akzente (H1-Akzent, Kennzahlen): die Logofarbe selbst, * wo sie auf Weiß mindestens 3:1 erreicht (deep), sonst ink * --p-fill Füllung des Hauptknopfs * --p-auf-fill Schrift auf dem Hauptknopf, mindestens 4,5:1 auf --p-fill * * Farbregel (Phil, 13.09.2026): Die Seite trägt die Farben des Logos. Eine * dunklere Textstufe gibt es nur, wo kleiner Text den Kontrast braucht, und * sie bleibt im Farbton des Logos. Große Akzente nehmen die Logofarbe. * * Commerce = Butler · Guide · Scout, bewusst dieselbe Farbe (tokens.css). * Karat füllt den Knopf mit base und schreibt dunkel darauf (9:1), wie die * Karat-Seite es seit dem Start tut; weiße Schrift trüge base nur 2,0:1. */ [data-produkt='butler'], [data-produkt='guide'], [data-produkt='scout'] { --p-light: var(--nx-commerce-light); --p-base: var(--nx-commerce-base); --p-deep: var(--nx-commerce-deep); --p-ink: var(--nx-commerce-ink); --p-akzent: var(--nx-commerce-deep); /* 3,9:1, groß genug */ --p-fill: var(--nx-commerce-ink); --p-auf-fill: #ffffff; } [data-produkt='pilot'] { --p-light: var(--nx-pilot-light); --p-base: var(--nx-pilot-base); --p-deep: var(--nx-pilot-deep); --p-ink: var(--nx-pilot-deep); --p-akzent: var(--nx-pilot-deep); --p-fill: var(--nx-pilot-deep); --p-auf-fill: #ffffff; } [data-produkt='karat'] { --p-light: var(--nx-karat-light); --p-base: var(--nx-karat-base); --p-deep: var(--nx-karat-deep); --p-ink: var(--nx-karat-ink); --p-akzent: var(--nx-karat-deep); /* 3,2:1, nur für große Akzente */ --p-fill: var(--nx-karat-base); --p-auf-fill: #2c3037; /* bewusst dunkler als --nx-schrift: das Graphit #4b535e erreicht auf Gold nur 3,9:1 (Stand 0.15) */ } [data-produkt='nutria'] { --p-light: var(--nx-nutria-light); --p-base: var(--nx-nutria-base); --p-deep: var(--nx-nutria-deep); --p-ink: var(--nx-nutria-ink); /* Phil will Nutria sichtbar grün (13.09.2026): große Akzente tragen eine eigene Stufe nahe am Logo-deep (3,12:1 auf Weiß), der Hauptknopf die Logofarbe base mit dunkler Schrift (7,31:1), wie Karat. ink bleibt für kleinen Text und den Zweitknopf. */ --p-akzent: var(--nx-nutria-akzent); --p-fill: var(--nx-nutria-base); --p-auf-fill: #2c3037; /* wie Karat: #4b535e erreicht auf Grün nur 4,3:1 */ } /* Die Group hat als einziges Produkt einen Farbton-Verlauf, und der ist ihre Farbe: große Akzente (H1-Akzent, Kennzahlen) tragen den Verlauf als Schriftfüllung, der Hauptknopf den deep-Verlauf. Kleiner Text, Linien und Marken sind neutral grau (ID-Neutralton), keine feste Violettstufe mehr (Phil, 13.09.2026: das Lila ist keine Logofarbe). Die Tönung der Bühne bleibt das helle Violett aus der Mitte des Verlaufs. */ [data-produkt='group'] { --p-light: var(--nx-mentor-light); --p-base: var(--nx-id-base); --p-deep: var(--nx-id-deep); --p-ink: var(--nx-id-ink); --p-akzent: var(--nx-id-ink); --p-fill: linear-gradient(135deg, var(--nx-group-grad-deep-start), color-mix(in srgb, var(--nx-group-grad-deep-end) 93%, #000000)); --p-auf-fill: #ffffff; } [data-produkt='group'] .nx-knopf--haupt { background: var(--p-fill); background-origin: border-box; } /* sonst wiederholt sich der Verlauf unter dem Rand (Phil, 16.09.2026) */ /* Im Dunkelmodus trägt base den Text (familie.css setzt --p-ink auf base); der Karat-Knopf bleibt, Nutria und Commerce füllen mit base und schreiben dunkel. */ [data-theme='dark'][data-produkt='butler'], [data-theme='dark'][data-produkt='guide'], [data-theme='dark'][data-produkt='scout'], [data-theme='dark'][data-produkt='nutria'], [data-theme='dark'][data-produkt='pilot'] { --p-fill: var(--p-base); --p-auf-fill: #0d0f12; } /* Group: Verlauf als Schriftfüllung für die großen Akzente; hell die deep- Stufen (wie die Wortmarke on-light), dunkel die base-Stufen. */ /* Der Verlauf liegt auf einem Inline-Element je Zeile (box-decoration-break: clone): Auf dem Blockkasten der H1 endete er bei zweizeiligem, zentriertem Text vor dem Rosa, weil die Zeilen schmaler sind als der Kasten (Tyrion, 13.09.2026). Die Group setzt den H1-Text deshalb in ein . */ [data-produkt='group'] .nx-seite h1 > span:not(.nx-hero__ueber), [data-produkt='group'] .nx-kennzahlen b { -webkit-box-decoration-break: clone; box-decoration-break: clone; /* Waagerecht wie in der Wortmarke: Bei zweizeiliger, zentrierter H1 fehlte mit 135° das Rosa am Ende der zweiten Zeile (Tyrion, 13.09.2026). */ background: linear-gradient(90deg, var(--nx-group-grad-deep-start), var(--nx-mentor-deep) 50%, var(--nx-group-grad-deep-end)); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme='dark'][data-produkt='group'] .nx-seite h1 > span:not(.nx-hero__ueber), [data-theme='dark'][data-produkt='group'] .nx-kennzahlen b { background: linear-gradient(90deg, var(--nx-group-grad-start), var(--nx-group-grad-mid) 50%, var(--nx-group-grad-end)); -webkit-background-clip: text; background-clip: text; } /* Im Dunkelmodus setzt familie.css --p-ink auf base; die Group bleibt grau. */ [data-theme='dark'][data-produkt='group'] { --p-ink: var(--nx-id-light); }