/* =========================================================================== Farbsystem "Deep Indigo" – die einzige Quelle für alle Seiten. 1. Primitive rohe Leitern, nirgends direkt verwenden 2. Semantisch was Komponenten lesen (--bg, --text, …) 3. Domäne die Sprache der Galaxie (--move-own, --node-hole, …) Braucht eine Stelle einen Zwischenton, wird eine Stufe aus den Leitern genommen – keine neuen Einzelwerte erfinden. Diese Datei wird von index.html, feedback.html und 404.html eingebunden. galaxy.js liest die Domänen-Tokens beim Start per getComputedStyle aus, damit Canvas und DOM aus derselben Quelle zeichnen. =========================================================================== */ :root { /* --- 1. Primitive ------------------------------------------------------ */ --indigo-950: #0b0922; --indigo-900: #14113a; --indigo-850: #191545; --indigo-800: #1e1a4d; --indigo-700: #2a2463; --indigo-600: #3a3280; --indigo-500: #4e45a0; --indigo-400: #6c63be; --indigo-300: #8b84b8; --indigo-200: #b0a9d6; --indigo-100: #d2cdec; --indigo-50: #e6e2f8; --gold-800: #4a3a12; --gold-700: #6b5420; --gold-600: #8f7228; --gold-500: #c79a38; --gold-400: #ffd166; --gold-300: #ffdd8c; --gold-200: #ffe9b3; --violet-800: #2e2145; --violet-700: #43305f; --violet-600: #5c4180; --violet-500: #9b72cc; --violet-400: #b98be8; --violet-300: #cba6f0; --violet-200: #dcc2f5; --coral-600: #b84a42; --coral-500: #d65c52; --coral-400: #f0736a; --coral-300: #f5938c; /* Reines Weiß. Nur für gleißende Kerne und den Knopf im Hover – nie für Text: --text ist --indigo-50 und bleibt es. */ --white: #ffffff; --mint-600: #3a9e76; --mint-500: #4cb88c; --mint-400: #5fd3a3; --mint-300: #85deb8; /* --- 2. Semantisch ----------------------------------------------------- */ /* Kein --bg mehr: Der Grundton jeder Seite ist der Weltraum (--space-deep), nicht die Indigo-Leiter der Panels. Ein eigener Hintergrund-Token daneben war eine zweite Wahrheit, und sie kam dreimal als violetter Block zurück. */ --panel: rgba(30, 26, 77, 0.88); /* Die Einstiegskarten stehen allein vor dem Himmel, nicht als eine von mehreren Flächen: dunkler und deckender als ein Panel, damit sich der Text nicht mit dem Sternenfeld dahinter mischt. Der Wert stand doppelt in style.css; hier steht er einmal. */ --panel-solid: rgba(13, 16, 34, 0.92); --panel-border: rgba(150, 140, 220, 0.20); /* Die leiseste Linie: trennt Zeilen *innerhalb* einer Gruppe, wo --panel-border die Gruppen selbst trennt. Zwei Gewichte, zwei Aufgaben. */ --rule-faint: rgba(150, 140, 220, 0.09); --text: var(--indigo-50); --text-dim: var(--indigo-300); --accent: var(--indigo-400); --gold: var(--gold-400); --win: var(--mint-400); --draw: var(--indigo-300); --loss: var(--coral-400); /* Button-System "Instrument": heller Solid = Aktion, Ghost = Rest. */ --btn-bg: var(--indigo-50); --btn-bg-hover: #ffffff; --btn-fg: var(--indigo-950); --btn-ring: rgba(230, 226, 248, 0.14); /* --- 2b. Maß, Rhythmus, Bewegung -------------------------------------- Abgeleitet, nicht erfunden: gezählt wurde, was im CSS schon steht. 13px trug 38 Deklarationen, Radius 8px siebzehn, gap 8px elf. Die Leiter hält diese Werte fest und streicht die Beinahe-Dubletten (11,5 neben 12; 10 neben 12 neben 14 beim Radius) – zwei Werte, die sich um einen halben Pixel unterscheiden, sind keine Entscheidung, sondern ein Versehen. */ /* Schrift. --fs-base ist die Stimme des Instruments: kompakt, nicht klein. */ --fs-micro: 10px; /* Abzeichen, Versalien-Label */ --fs-small: 12px; /* Meta, Bildunterschrift, Zahl unter der Zahl */ --fs-base: 13px; /* der Normalfall, Bedienelemente und Fließtext */ --fs-lead: 15px; /* Kartentitel, hervorgehobene Zeile */ --fs-title: 17px; /* Panel-Überschrift */ --fs-display: 20px; /* Wortmarke, Seitentitel */ --fs-hero: 28px; /* Einstiegskarte */ /* Der Hub setzt eine Zeile groß, weil sie die einzige Aussage der Fläche ist. Die Stufe darunter (28) ließ sie neben dem Brett verschwinden. */ --fs-mega: 40px; /* die eine Zeile des Hubs */ /* Abstand. Zweierschritte bis 12, dann Vierer – enger geht das Auge nicht. */ --sp-1: 4px; --sp-2: 6px; --sp-3: 8px; --sp-4: 10px; --sp-5: 12px; --sp-6: 16px; --sp-7: 20px; --sp-8: 24px; --sp-9: 32px; /* Höhe der Bedienelemente. Gezählt wurde, was da war: Die Knöpfe der Werkzeugseiten lagen zwischen 26 und 33 px, die Brettnavigation bei 26. Auf einem 1560 px breiten Analysebildschirm ist das keine Sparsamkeit, sondern Geiz — und es machte den Engine-Schalter unauffindbar. */ --ctl-h: 40px; /* Felder, Auswahl, gewöhnliche Knöpfe */ --ctl-h-lg: 48px; /* Symbolknöpfe am Brett, Hauptknöpfe */ /* Form. Klein rund, groß ruhig – Pillen bleiben kleinen Bedienelementen. */ --r-xs: 4px; /* Balken, Marker */ --r-sm: 6px; /* Chip, Krümel */ --r-md: 8px; /* Knopf, Feld, Listenzeile */ --r-lg: 14px; /* Panel */ --r-xl: 20px; /* Einstiegskarte */ /* Höhe. Immer Versatz plus weicher Schatten, nie ein farbiger Hof ohne Versatz: Der ist Dekoration und war hier zweimal die Signatur, an der man eine Vorlage erkennt. Drei Stufen genügen. */ --el-1: 0 6px 24px rgba(0, 0, 0, 0.55); /* hebt sich ab */ --el-2: 0 8px 40px rgba(0, 0, 0, 0.50); /* schwebendes Panel */ --el-3: 0 18px 60px rgba(0, 0, 0, 0.60); /* Overlay über allem */ /* Bruchstellen. Sie stehen hier als Kommentar und nicht als Token, weil CSS in einer `@media`-Abfrage keine Variablen liest — die Leiter ist eine Verabredung, kein Wert. Am 23. August 2026 gezählt: **sieben verschiedene `max-width`-Werte** (340, 560, 640, 700, 720, 900, 1080) und 25 `max-width` gegen 12 `min-width` — also überall Rechner zuerst, kleiner als Nachtrag. In trust.css standen `min-width: 900px` und `max-width: 900px` nebeneinander: **bei genau 900 px griffen beide.** Vier Stufen genügen, und jede beantwortet eine Frage: 340px Was passt auf ein iPhone SE der ersten Bauart? 720px Wandert die Leiste nach unten? (Telefon gegen Rechner) 900px Steht das Brett neben seinen Karten oder darüber? -- die Gegenrichtung ist immer 901, nie 900 1080px Ist Platz für die dritte Spalte? Dazu drei Abfragen, die nicht die Breite messen: max-height: 560px Trägt das Fenster eine senkrechte Leiste? pointer: coarse Tippt ein Finger? (nicht: ist der Schirm klein) beides zusammen Wird ein Telefon quer gehalten? -- absichtlich enger als die 560er allein: ein flaches Fenster am Rechner ist kein Querformat Die 4076 bestehenden Regeln sind bewusst NICHT nachgezogen worden — das wäre ein Umbau mit Rückschlagrisiko und ohne Gewinn für den Besucher. Wer eine neue Abfrage schreibt, nimmt eine von hier. Wer eine achte braucht, trägt sie hier ein und sagt, welche Frage sie beantwortet. */ /* Stapelung. Vorher gab es keine Leiter, sondern zehn gewachsene Zahlen zwischen -1 und 40 — und zwei davon standen auf 30, genau wie die Fußleiste. Was später im Dokument steht, gewinnt bei Gleichstand: So deckten der Einstiegsschirm der Galaxie und ihr Ladeschleier die Leiste zu, und alle sechs Ziele waren auf dem ersten Schirm jedes Besuchers tot. Gemessen am 23. August 2026. Die Leiter hat deshalb eine Regel, die über allen Werten steht: **Die Navigation ist das Oberste.** Ein Schleier, der sie verdeckt, nimmt dem Besucher den einzigen Ausweg — auf dem Telefon gibt es keine Ecke, in die er sonst klicken könnte. Wer etwas darüber legen will, braucht einen eigenen Weg hinaus und trägt ihn hier ein. */ --z-base: 1; /* hebt sich vom Hintergrund ab, sonst nichts */ --z-sticky: 10; /* was beim Rollen stehen bleibt */ --z-panel: 20; /* schwebendes Panel, Einstiegsschirm, Ladeschleier */ --z-nav: 30; /* die Fußleiste — das Oberste */ --z-escape: 40; /* nur mit eigenem Ausweg: Rundgang, Vollbild-Dialog */ /* Bewegung. Das Chrome ist still; diese Werte gelten für Zustandswechsel, nicht für Auftritte. Bei reduzierter Bewegung greift shell.css. */ --mo-quick: 150ms; /* Farbe, Rahmen – die Rückmeldung selbst */ --mo-calm: 250ms; /* Größe, Aufklappen */ --mo-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* exponentiell auslaufend */ /* --- 3. Domäne (von galaxy.js ausgelesen) ------------------------------ */ --move-own: var(--gold-400); /* dein Zug */ --move-opp: var(--violet-400); /* Zug des Gegners */ --move-neutral: var(--indigo-200); /* Farbe "Beide": Besitz unbestimmt */ --node-hole: var(--coral-400); /* Ausreißer: verlierst du zu oft */ --node-pulsar: var(--mint-400); /* Ausreißer: gewinnst du auffällig */ /* Dieselben Ausreißer als gezeichnetes Objekt. Bewusst getrennt von den beiden Tokens darüber: Die färben Beschriftung und Listen (Bedeutung), diese hier das Bild auf der Leinwand (Illustration) – ein Schwarzes Loch ist orange glühend, seine Beschriftung coral. Sie standen bisher zweimal als Hexwert da: in galaxy.js und noch einmal in der Legende. Solange beide zufällig übereinstimmten, fiel es nicht auf; genau so überlebte der "ring = score" monatelang. */ --hole-body: #000000; /* der Schlund selbst: echte Leere */ --hole-doppler: #ffc2ba; /* die auf uns zulaufende Seite des Rings */ /* Das Orange der alten Akkretionsscheibe, das Violett des Verzerrungshofs und das Cyan des Neutronensterns sind ersatzlos entfallen. Sie standen in keiner Leiter und waren die lautesten Flächen der Karte, ohne etwas zu sagen. Ausreißer tragen jetzt die Tokens, die ohnehin für sie da sind: --node-hole und --node-pulsar. Damit stimmen Körper und Beschriftung zum ersten Mal überein. */ /* Die Brettfelder. Illustration wie die Erde: Sie liegen bewusst im Indigo der Seite statt im üblichen Braun-Beige, damit das Brett zur Galaxie gehört und nicht wie ein eingeklebtes Fremdteil wirkt. */ /* Ein Brett im ganzen Produkt: Dieselben zwei Toene tragen das Diagramm des Tagespuzzles im DOM und das Brett der Review auf der Leinwand. Vorher lag das Review-Brett zwei Stufen heller und war die hellste Flaeche jeder Ansicht – auf einer dunklen Seite zieht das den Blick vom Ergebnis weg. */ --board-light: var(--indigo-500); --board-dark: var(--indigo-700); /* Die Figuren und die Schrift auf den Urteilsabzeichen. Zwei Weiß- und zwei Schwarzwerte, weil eine Figur eine Kontur braucht und ein Abzeichen seine Schrift nach der eigenen Helligkeit wählt. */ --piece-light: #f5f0ff; --piece-dark: #0c0e1c; --badge-ink-dark: #03040a; --badge-ink-light: #f2f0ff; /* Der Sternenhintergrund hinter allem. Bedeutungsfrei wie --starlight, aber kühler und schwächer – er darf nie mit einem Datenpunkt verwechselt werden. */ --starfield: #cfd8ff; /* Die Erde im Zentrum – die Startstellung, kein Zug. Illustration wie die Ausreißer oben, bewusst entsättigt, damit sie sich in die Indigo-Palette einfügt statt sie zu sprengen. */ /* Das Zentrum hört auf, die einzige gesättigte Fläche der Karte zu sein: Meerblau und Laubgrün sind der Indigo-Leiter gewichen. Es bleibt ein Planet, aber einer, der zum Himmel gehört. */ --earth-sea-lit: var(--indigo-500); --earth-sea: var(--indigo-700); --earth-sea-deep: var(--indigo-950); --earth-land: var(--indigo-400); /* Die Wortmarke als Ganzes. Der Verlauf stand fünfmal wörtlich im Code – in style.css zweimal, in home.css, feedback.html und 404.html. Fünf Kopien laufen beim ersten Nachziehen auseinander, und eine davon fällt garantiert erst Monate später auf. */ --wordmark-fade: #aab2d6; --wordmark-ink: linear-gradient(90deg, var(--white), var(--wordmark-fade)); --node-core: var(--indigo-100); /* Zentrum */ --link: rgba(140, 130, 205, 0.30); /* Verbindungslinien */ /* Der Weltraum selbst. Bis hierher standen diese beiden Werte als Hexzahlen in galaxy.js – die Seiten ohne Leinwand konnten den Himmel deshalb nicht treffen und liefen ins Violette. Jetzt lesen Canvas und CSS dieselbe Quelle: --space in der Mitte, --space-deep am Rand. */ --space: #0a0d1f; /* Achtung: --space-deep steht zwangsläufig ein zweites Mal als Klartext – in den jeder Seite und in site.webmanifest. Meta-Tags können keine CSS-Variablen lesen. Vorher liefen die drei Seiten mit drei verschiedenen Werten auseinander, von denen keiner den Seitenhintergrund traf. Wer diesen Ton ändert, ändert sie mit. */ --space-deep: #03040a; /* Zeichnungen am Himmel (Easter Eggs, Figuren) – bewusst bedeutungsfrei. Gold und Violett sind Datenfarben und dürfen hier nicht auftauchen: eine goldene Krone auf einem Gegnerzug wäre schlicht gelogen. */ --starlight: var(--indigo-50); /* --- 4. Papier --------------------------------------------------------- * * Der Trainingsplan wird gedruckt, und Papier ist ein Medium wie der * Bildschirm: Es braucht seine Leiter an derselben Stelle, sonst stehen * am Ende doch wieder Hexzahlen im Stylesheet. Die Charta kennt dafür * keine Ausnahme, und sie braucht auch keine. * * Umgekehrter Grund, gleiche Absicht: Auf dem Schirm trägt Tiefe die Ruhe, * auf Papier trägt Weiß sie. Ein dunkler Plan, den jemand an die Wand * hängen will, kostet eine halbe Patrone. * * Kein reines Schwarz auf reinem Weiß – der Kontrast ist härter als jedes * Auge braucht und lässt gedruckten Text flimmern. */ --paper: #ffffff; --ink: #111111; /* Fließtext */ --ink-dim: #555555; /* Beleg-Nebensatz, Einheiten, Fußzeile */ --ink-mark: #777777; /* Aufzählungsstriche */ --ink-rule: #bbbbbb; /* Abschnittstrenner */ --ink-rule-soft: #dddddd; /* Zeilentrenner in Tabellen */ }