/* Die Farben, Schriften und Schatten der Hub. EINMAL, nicht vierzehnmal. * * WARUM ES DIESE DATEI GIBT * Bis zum 24.09.2026 stand derselbe :root-Block in jeder der vierzehn Seiten. * Die Werte stimmten fast alle ueberein, und genau das ist die Gefahr: wer * eine Farbe aendert, aendert sie auf einer Seite, und niemand merkt, dass * dreizehn andere stehen bleiben. Dieselbe Doppelpflege wie damals der Pool * und die neun Chatterlisten. * * Gefunden beim Zusammenlegen: 985 rohe Farbwerte in den vierzehn Seiten, 245 * davon verschieden, und die Drift hatte schon angefangen. --text-0 stand * einmal als #ffffff und einmal als #fff, --font-serif trug auf einer Seite * ein zusaetzliches 'Playfair Display', das die anderen dreizehn nicht kennen. * * WAS HIER STEHT UND WAS NICHT * Hier stehen NUR Werte, keine Regeln. Kein Selektor ausser :root, keine * Bauteile. Eine Datei, die beides mischt, wird zu der einen Datei, die * niemand mehr anfasst. * * Abstaende und Schriftgroessen kommen dazu, wenn die Seiten sie benutzen * koennen (Schritt 3). Ein Token, das niemand benutzt, driftet von der * Wirklichkeit weg, ohne dass es auffaellt. * * DIE WACHE * test/tokens.mjs prueft, dass keine Seite eigene Tokens definiert, und * test/tokens-browser.mjs laedt alle vierzehn Seiten und vergleicht die * TATSAECHLICH berechneten Werte gegeneinander. Eine Seite, die ausschert, * faellt auf, bevor du sie siehst. */ :root { /* ---- Flaechen ---- */ --bg-0: #08122a; /* Seitengrund */ --bg-1: #0c1930; /* Panel */ --bg-2: #142040; /* erhoeht: Kopfzeile, Tabellenkopf */ --surface: rgba(20, 32, 64, 0.6); /* Flaeche ueber dem Grund */ --surface-hover: rgba(30, 44, 84, 0.8); /* ---- Linien ---- */ --border: rgba(224, 128, 255, 0.18); --border-strong: rgba(224, 128, 255, 0.4); /* ---- Text ---- */ --text-0: #ffffff; /* Ueberschrift, Zahl */ --text-1: #d4cce8; /* Fliesstext */ --text-2: #aabbcc; /* Nebensache, Zeitangabe */ --text-3: #889; /* fast weg */ /* ---- Akzente ---- */ --accent-pink: #e080ff; --accent-purple: #a86ee8; --accent-cyan: #00ccff; /* ---- Zustaende ---- */ --accent-good: #6ee5b0; --accent-warn: #ffd166; --accent-error: #ff8ab0; /* ---- Verlaeufe ---- */ --gradient-brand: linear-gradient(135deg, #e080ff 0%, #a86ee8 50%, #00ccff 100%); --gradient-button: linear-gradient(135deg, #e080ff 0%, #a86ee8 50%, #00ccff 100%); /* ---- DIE TONLEITER ---- 204 Toene in ueber sechzig Deckkraften standen in den Seiten, allein Rosa in zweiundzwanzig Abstufungen, und niemand haette sagen koennen, warum ein Rand 0.18 traegt und der daneben 0.20. Gezaehlt am 24.09.2026, geordnet nach Zweck statt nach Farbe: Flaechen haeuften sich zwischen 0.05 und 0.16 Linien haeuften sich zwischen 0.30 und 0.45 ROSA IST STRUKTUR, NICHT SIGNAL. Jede Trennlinie und jeder Panelrand der Hub ist rosa, deshalb drei Linienstufen statt einer. Die anderen fuenf sind Signalfarben, und ein Signal braucht zwei: eine Flaeche und eine Linie. AUSGESCHRIEBEN, NICHT GERECHNET. color-mix() waere eleganter, die Toene wuerden ihrer Grundfarbe von selbst folgen. Es braucht aber Chrome 111, und auf einem aelteren Telefon faellt so ein Wert ersatzlos aus: dann steht eine Chatterin vor einer Seite ohne Raender. Stattdessen prueft test/tokens.mjs, dass der RGB-Anteil jedes Tons dem seiner Grundfarbe entspricht. Dieselbe Sicherheit, ohne dass ein Browser mitspielen muss. Verlaeufe, Schatten und Filter bleiben aussen vor: ein Verlaufsstopp ist Zierrat, keine Flaeche. */ --tint-soft: rgba(224, 128, 255, 0.06); --tint: rgba(224, 128, 255, 0.14); --border-soft: rgba(224, 128, 255, 0.08); --cyan-fill: rgba(0, 204, 255, 0.12); --cyan-line: rgba(0, 204, 255, 0.4); --good-fill: rgba(110, 229, 176, 0.12); --good-line: rgba(110, 229, 176, 0.4); --warn-fill: rgba(255, 209, 102, 0.12); --warn-line: rgba(255, 209, 102, 0.4); --error-fill: rgba(255, 138, 176, 0.12); --error-line: rgba(255, 138, 176, 0.4); --purple-fill: rgba(168, 110, 232, 0.12); --purple-line: rgba(168, 110, 232, 0.4); /* ---- Eingelassene Flaechen und Text auf Hell ---- Beim Tokenisieren der Farben am 24.09.2026 gefunden: #0a0e1f stand neununddreissigmal roh in den Seiten, achtunddreissigmal davon als Textfarbe auf dem hellen Knopfverlauf. Es war also laengst ein Gestaltungswert, nur ohne Namen. Dasselbe bei dem eingelassenen Grund von Eingabefeldern und Pillen. */ --text-on-accent: #0a0e1f; /* Text auf dem Verlauf */ --sunk: rgba(10, 14, 31, 0.6); /* Eingabefeld, Pille */ --sunk-soft: rgba(10, 14, 31, 0.4); /* dasselbe, leichter */ /* ---- Schatten ---- */ --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4); --shadow-glow: 0 0 40px rgba(224, 128, 255, 0.3); --shadow-button: 0 8px 24px rgba(168, 144, 255, 0.4); /* Knopf unter dem Zeiger */ /* ---- SCHRIFTGROESSEN, SIEBEN STUFEN ---- Gezaehlt am 24.09.2026: 571 Angaben in 24 verschiedenen Groessen, darunter 9.5, 10.5, 11.5, 12.5, 13.5, 14.5 und 15.5. Halbe Pixel entstehen nicht aus einer Entscheidung, sondern aus dem Wunsch, etwas einen Hauch kleiner zu machen als daneben. Die Leiter ist keine Anpassung an den Bestand, sondern eine Wahl: 359 der 571 Angaben treffen sie ohne Aenderung, der Rest verschiebt sich um durchschnittlich 0.32px. Groesster Sprung 4px, dreiundzwanzigmal. */ --fs-1: 11px; /* Label in Versalien, Zeitangabe, Fussnote */ --fs-2: 12px; /* Nebentext, dichte Tabellenzelle */ --fs-3: 13px; /* Grundtext. Die meistbenutzte Groesse der Hub */ --fs-4: 14px; /* Eingabefeld, hervorgehobener Text */ --fs-5: 16px; /* Zwischenueberschrift */ --fs-6: 20px; /* Panelueberschrift */ --fs-7: 28px; /* Seitentitel */ /* ---- ABSTAENDE, SIEBEN STUFEN ---- 1348 Angaben in 34 Werten von 1px bis 90px. Die Leiter deckt alles bis 32px ab, also das, was INNERHALB eines Bauteils passiert. Darueber ist es Seitenaufbau und keine Abstandsfrage; die knapp dreissig Stellen werden beim Kopfbereich von Hand angefasst. Sie zieht enger, mit Absicht: 10px wird 8, 14px wird 12, 18 und 20 werden 16. Das sind 423 Stellen, die zusammen den Unterschied zwischen 222 und rund 690 sichtbaren Pixeln ausmachen. */ --s-1: 2px; --s-2: 4px; --s-3: 6px; --s-4: 8px; --s-5: 12px; --s-6: 16px; --s-7: 24px; /* ---- LINIEN, ZWEI STAERKEN ---- Die Richtung A trennt mit Linien statt mit Kaesten (Entscheidung von David, 29.09.2026, nach drei Entwuerfen an /dossier und der Startseite). Sie sind NEUTRAL und nicht rosa: in A traegt Farbe Bedeutung, und eine Trennlinie bedeutet nichts. Die rosa getoenten --border bleiben dort, wo die Linie etwas SAGT, zum Beispiel am Rand eines Abschnitts, der zu einem Akzent gehoert. Zwei Staerken genuegen: die feine trennt Zeilen, die starke trennt Abschnitte. Eine dritte waere wieder eine Stufe, die niemand waehlt. */ --linie: rgba(255, 255, 255, 0.10); --linie-stark: rgba(255, 255, 255, 0.22); /* Was unter dem Zeiger passiert, wenn es keine Flaechen mehr gibt: eine Spur heller werden, mehr nicht. Und der eine Akzent in hell, fuer den Hauptknopf unter dem Zeiger. */ --flaeche-hover: rgba(255, 255, 255, 0.05); --cyan-hell: #4cd8ff; /* ---- DER ABSTAND ZWISCHEN ABSCHNITTEN ---- Die Abstaende oben (--s-1 bis --s-7) ordnen INNERHALB eines Abschnitts. Dieser eine ordnet ZWISCHEN ihnen, und er ist mit Absicht kein s-8: er gehoert zu einer anderen Frage. David am 30.09.2026: "Es liest sich wie ein Fliesstext. Von der ersten Tabelle bis zur letzten laeuft alles in einem Zug durch. Ich will Abschnitt fuer Abschnitt wahrnehmen." Die Luecke lag bei 16px, also genau so gross wie der Abstand zwischen zwei Zeilen INNERHALB einer Tafel. Zwei Dinge, die dasselbe messen, sehen aus wie eine Sache. 48px, gemessen und gewaehlt: dreimal die alte Luecke liest sich als Schnitt. 64 haetten acht Prozent mehr Seitenlaenge gekostet und kaum mehr Trennung gebracht. Der Preis bei 48: /supervisor wird 17 Prozent laenger, und auf dem ersten Bildschirm beginnt eine Tafel weniger. */ --abschnitt: 48px; /* ---- RUNDUNGEN, VIER STUFEN ---- 259 Angaben in zwoelf Werten: 4, 6, 7, 8, 9, 10, 11, 12, 14, 16, 18 und 999. Zwischen 9, 10, 11 und 12 kann niemand einen Unterschied sehen, und gewaehlt hat sie auch niemand; sie sind beim Schreiben entstanden. */ --r-1: 8px; /* Pille, Marke, kleiner Knopf */ --r-2: 12px; /* Knopf, Eingabefeld, Meldung */ --r-3: 18px; /* Panel */ --r-rund: 999px; /* wirklich rund */ /* Seit der Richtung A ist die Kante der Regelfall: Panel, Knopf, Marke und Eingabefeld sind eckig. Die Stufen daruber bleiben fuer das, was wirklich rund ist (Sternkarten der Startseite, Punkte, das Spiel). */ --r-0: 0; /* ---- Schriften ---- Fraunces bleibt der Marke vorbehalten: Logo, Markenzeile, sonst nichts. In einer dichten Tabelle liest eine Serifenschrift schlechter, und davor sitzen die Chatterinnen acht Stunden. Entscheidung von David, 24.09.2026. 'Playfair Display' stand nur auf einer der vierzehn Seiten und ist hier nicht mehr dabei. */ --font-sans: 'Inter', -apple-system, sans-serif; --font-serif: 'Fraunces', serif; --font-mono: 'JetBrains Mono', 'Menlo', monospace; --headline-tracking: -0.028em; /* ---- Schichtplan ---- Die einzigen Tokens, die nur eine Seite benutzt. Sie stehen trotzdem hier: der Punkt dieser Datei ist, dass es genau EINEN Ort gibt. Eine Ausnahme waere der Anfang der naechsten Kopie. ROT IST DIE EINZIGE ALARMFARBE und bleibt echten unbesetzten Luecken vorbehalten, die David anfassen muss. Alles, was gedeckt ist, bleibt ruhig. Ein von Hand gesetzter Ersatz bekommt einen blassen Cyanhinweis. Unbesetzte Schicht: niemand zugewiesen, sieben Tage lang. Mit Absicht NICHT dasselbe Rot wie ein offener Tag, sondern stumpfer, weil es kein Loch in einer besetzten Schicht ist, sondern eine fehlende Schicht. */ --cell-open-bg: rgba(255, 82, 104, 0.16); --cell-open-brd: rgba(255, 82, 104, 0.55); --cell-open-text: #ff9aa8; --cell-none-bg: rgba(120, 30, 46, 0.45); --cell-none-brd: rgba(255, 82, 104, 0.35); --cell-none-text: #ffb3bd; --cell-adhoc-bg: rgba(0, 204, 255, 0.08); --cell-adhoc-brd: rgba(0, 204, 255, 0.30); --cell-adhoc-text: #8fe3ff; }