/* ERZEUGT aus gemeinsam/tokens.css - Aenderungen dort, nicht hier. */ /* =========================================================================== QRAKI TOKENS - DIE EINE QUELLE =========================================================================== Hier stehen die Grundwerte von Qraki genau EINMAL. Website und App holen sie von hier; niemand schreibt eine Farbe, einen Radius oder einen Abstand noch einmal irgendwo anders hin. WARUM DIESE DATEI EXISTIERT (Marc, 14. September 2026, Master-Brief): "Wir wollen nicht wieder mehrere Farbdefinitionen haben." Die Analyse im Fundament hatte 93 Hexfarben und 98 Schattenregeln gezaehlt. Dazu kam ein konkreter Fall: codes.html laedt kopf.css, aber nicht seite.css - dort war ein Token schlicht undefiniert. Eine kopierte Farbe haette das geflickt und das Problem vergroessert. WER SIE BEKOMMT: tokens_verteilen.js schreibt diese Datei nach docs/tokens.css (Website, als erstes Stylesheet auf JEDER Seite) und in den STYLES-Block von karteibox_1.jsx (App). Zwei Ziele, eine Quelle. Wer hier etwas aendert, aendert es ueberall - genau das ist der Zweck. ACHTUNG BEIM BEARBEITEN: Der Inhalt landet in einer JS-Zeichenkette mit Backticks. Es darf deshalb weder ein Backtick noch eine Dollar-Klammer- Einsetzung in dieser Datei stehen, sonst bricht der Build der App. tokens_verteilen.js prueft beides und bricht ab, statt es zu uebersehen. =========================================================================== */ /* ---------------------------------------------------------------- 1 MARKE */ :root{ /* QRAKI BRAND PURPLE. Verbindlich seit 14. September 2026. Gemessen an Qrakis Koerper in allen sechs Flat-Vorlagen: Farbton 265,6 / Saettigung 98 / Helligkeit 60. Der aeltere Wert #8B5ED7 aus dem Briefing-Dokument trug denselben Ton und dieselbe Helligkeit, aber nur 60 % Saettigung - daneben wirkte alles Gebaute blass. Er ist veraltet und darf nicht mehr als Primary auftauchen. */ --qraki:#8B36FD; /* Fuer Hover und Gedruecktes. Weisse Schrift kommt darauf auf 7,10 statt 5,19 - die Beschriftung wird beim Zeigen also besser lesbar, nicht schlechter. Kein zweites Primary-Lila, nur dieser eine dunklere Ton. */ --qraki-tief:#6D28D9; /* Das dritte und letzte Markenlila (Marc, 16.09.): der HELLE Gegenpol zu --qraki-tief. Kein Ersatz fuer --qraki-schrift - das ist die LESBARE Lilaschrift auf dunklem Grund und traegt 11px-Etiketten; #A855F7 kaeme dort auf 4.43:1 und damit unter AA, #BD92F6 haelt 7.18:1. Zwei Rollen, zwei Werte. */ --qraki-hell:#A855F7; /* PRIMARY ist ab jetzt modusunabhaengig (Marc, 15. September 2026): eine Markenfarbe, weisser Text, Hover dunkler. Vorher lag der Hauptknopf auf --accent und war damit je Modus eine andere Farbe (#B27FF5 dunkel, #7519F0 hell) - beide gut lesbar, aber keine von beiden die Marke. Weiss auf #8B36FD ergibt 5,19:1, auf #6D28D9 sogar 7,10:1 - beim Zeigen wird die Schrift also besser lesbar, nicht schlechter. --accent bleibt unangetastet: Chips, Mikrofon und Zustandsflaechen brauchen weiter einen Ton, der sich vom Grund abhebt. */ --primary:var(--qraki); --primary-auf:#FFFFFF; --primary-druck:var(--qraki-tief); /* ------------------------------------------------------------- 2 MASS */ /* Vier Radien, mehr nicht. */ --r-s:12px; --r-m:16px; --r-l:20px; --r-xl:24px; /* ------------------------------------------------- TYPOGRAFIE-STUFEN */ /* Sieben Stufen nach fundament/03-design-system.md, Abschnitt 2. Sie ersetzen 42 gewachsene Einzelwerte - fast alle davon waren Rauschen: 12,5 / 13 / 13,5 nebeneinander, 10,5 / 11 / 11,5, 14 / 14,5. Eine Abweichung vom Vertrag, bewusst: Der Vertrag kennt SMALL = 13 fuer alles Kleine. Die App hat dort zwei Rollen - dichte Bedienelemente (Chips, Sekundaerknoepfe, 28 Stellen) und Meta-Text unter einer Ueberschrift (62 Stellen). Beide auf 13 zu ziehen haette die Bedienelemente um 7 % verkleinert, ohne dass etwas gewonnen waere. Deshalb --fs-small und --fs-meta getrennt. Display-Groessen bleiben eigen: die Lernkarte mit ihren Laengenstufen, die Feier-Zahl, die Begruessung, der TV-Modus. Die sind komponiert, nicht gerastert. */ /* 28/34 ist die getroffene Entscheidung fuer den Screen-Titel, nicht die 26 des Vertrags (Marc, 15.09.). Der Token bildet ab, was gilt - ein Token, der 26 sagt, waehrend die Ueberschrift 28 benutzt, waere eine Luege im System. */ --fs-h1:28px; /* Screen-Titel */ --fs-h1-weit:34px; /* Screen-Titel ab Tablet */ --fs-titel:26px; /* Titel und Schliessen-Zeichen in Blatt und Dialog */ --fs-h2:20px; /* Abschnitt */ --fs-h3:17px; /* Karten-Titel, Zeile */ --fs-body:16px; /* Inhalt, Eingaben */ --fs-button:16px; /* alle Knoepfe - im Vertrag derselbe Wert wie Body */ --fs-small:14px; /* dichte Bedienelemente, Sekundaertext */ --fs-meta:13px; /* Meta, Untertitel */ --fs-label:11px; /* Augenbrauen, Kapitaelchen */ /* Acht Abstaende. Alles dazwischen ist ein Versehen. */ --a1:4px; --a2:8px; --a3:12px; --a4:16px; --a5:24px; --a6:32px; --a7:48px; /* ZWEI GROESSEN FUER MOTIVE, NICHT SIEBEN (Marc, 17.09.2026: "Icongroessen generell so, dass sie mit blossem Auge erkennbar sind, in der App schon ziemlich winzig, bei den Chips auf Home und auch in der Bibliothek"). Vorher standen 18, 22, 24, 26, 26, 26 und 30px nebeneinander - dieselbe Sache in sieben Groessen, und die kleinste war bei einer detaillierten Farbillustration nicht mehr lesbar. HIER und nicht in karteibox_1.jsx: tokens_verteilen.js schreibt diesen Block dorthin, eine Ergaenzung drueben waere beim naechsten Bau weg gewesen - genau das ist beim ersten Versuch passiert, und weil var() ohne Rueckfallwert ungueltig wird, standen die Motive ploetzlich in Naturgroesse da (96px statt 32). */ --motiv:32px; --motiv-chip:24px; --a8:64px; /* Eine Dauer fuer alle Uebergaenge. */ --dauer:160ms; /* Eine Schrift fuer Website und App. Rounded zuerst, damit Qraki auf Apple- Geraeten seine runde Anmutung hat; Nunito als Ersatz, weil es dieselbe Rundung mitbringt. --disp gab es in der App getrennt und war identisch - es zeigt jetzt hierher, statt sich zu wiederholen. */ --ui:ui-rounded,'SF Pro Rounded','Nunito',system-ui,-apple-system,'Segoe UI',sans-serif; --disp:var(--ui); } /* ------------------------------------------------- 3 FLAECHEN, DUNKEL */ /* Dunkel ist der Normalfall. Die Website kennt nur ihn. Die App kennt drei Modi - hell, dunkel, automatisch -, deshalb die Staffelung weiter unten. Der Grundton #111F29 kommt von der Website und aus dem Fundament. Die App stand bis zum 14. September 2026 auf #0E0F11, einem fast neutralen Schwarz - genau die Abdrift, die der Master-Brief in Abschnitt 4 verbietet: "nicht wieder in ein anderes Blau-Schwarz oder Grau-Blau abdriften". */ /* Die dunklen Werte tragen - wie die hellen - einen eigenen Namen. Sie werden an ZWEI Stellen gebraucht: als Normalfall, und dort, wo etwas dunkel bleiben muss, obwohl die App auf Hell steht (die Tour zum Beispiel). Nur so steht auch hier kein Farbwert zweimal. */ :root{ /* FARBMASTER 16.09.2026. Marcs Formel: Deep Ocean -> Surfaces -> Qraki -> Illustrationen. Tiefes Meerblau, nicht schwarz, nicht grau, nicht violett. Marc nennt "Surface / Cards" als EINEN Wert - deshalb tragen --flaeche und --karte hier denselben; die Stufe darueber (--hoch) ist sein "Elevated". Damit hat die Staffelung eine Stufe weniger als vorher. Wo das sichtbar wird, steht im Bericht; erfunden habe ich dafuer nichts. */ --dunkel-grund:#0C1B25; --dunkel-flaeche:#202C3A; --dunkel-karte:#202C3A; --dunkel-hoch:#263548; --dunkel-linie:#334456; /* Im Dunkeln traegt die Flaeche selbst die Stufe, der Rand bleibt der gewoehnliche Linienwert. */ --dunkel-hoch-rand:#334456; --dunkel-nav-linie:#1F2937; --dunkel-nav-aus:#98A2B3; --dunkel-tinte:#F5F7FA; --dunkel-soft:#B8C2D0; --dunkel-leise:#8794A5; --dunkel-qraki-schrift:#BD92F6; --dunkel-ok:#57C8A5; --dunkel-warn:#F2BC48; --dunkel-fehler:#E05D5D; --dunkel-blau:#4D8CEB; --dunkel-schleier:rgba(0,0,0,.6); } :root, .kbx[data-modus="dunkel"]{ --grund:var(--dunkel-grund); --flaeche:var(--dunkel-flaeche); --karte:var(--dunkel-karte); --hoch:var(--dunkel-hoch); --hoch-rand:var(--dunkel-hoch-rand); --nav-linie:var(--dunkel-nav-linie); --nav-aus:var(--dunkel-nav-aus); --linie:var(--dunkel-linie); --tinte:var(--dunkel-tinte); --soft:var(--dunkel-soft); --leise:var(--dunkel-leise); --qraki-schrift:var(--dunkel-qraki-schrift); --ok:var(--dunkel-ok); --warn:var(--dunkel-warn); --fehler:var(--dunkel-fehler); --blau-signal:var(--dunkel-blau); --karten-schatten:none; --schleier:var(--dunkel-schleier); } /* ---------------------------------------------------- 4 FLAECHEN, HELL */ /* Hell ist die Schwester von Dunkel, nicht die brave Cousine: ein Hauch Violett im Grund statt Neutralgrau, Flaechen mit Ton, Karten klar weiss. Nachgerechnet auf diesem Grund: Tinte 13,8:1, leise Schrift 4,8:1. WARUM DIE WERTE EINEN EIGENEN NAMEN HABEN: Hell wird an ZWEI Stellen gebraucht - wenn jemand es bewusst waehlt, und wenn "automatisch" auf ein helles System trifft. Ueber eine Media-Query hinweg laesst sich eine Deklarationsliste nicht teilen. Stuenden die Farben zweimal da, waere genau die Doppelung zurueck, die diese Datei verhindern soll - also stehen die WERTE einmal hier oben und werden unten nur noch zugewiesen. */ :root{ /* HELL-MODUS, FLAECHENORDNUNG (Marc, 16.09.2026). Vorher lief die Leiter in ZWEI Richtungen: Karten waren HELLER als der Grund (#FFFFFF gegen #F7F6FB), ruhige Flaechen DUNKLER (#EEEBF7). Das ist keine Leiter, sondern Rauschen - und --hell-karte und --hell-hoch trugen denselben Wert, es gab also gar keine erhoehte Ebene. Jetzt steigt alles vom Grund aus nach oben, so wie Licht sich verhaelt: wer ein Blatt auf den Tisch legt, faengt mehr davon. Dafuer musste der Grund TIEFER - #F7F6FB ist fast Weiss und laesst nichts mehr darueber. Geloest ueber Flaeche, nicht ueber Farbe: kein zusaetzliches Lila. */ /* VARIANTE A2, abgenommen am 16.09.2026. Der Grund liegt auf dem FARBTON des dunklen Grundes (#0C1B25, 204 Grad) - Hell und Dunkel sind damit Geschwister und nicht zwei Entwuerfe. Die Karten sind bewusst NICHT reinweiss. Das hat zwei Gruende: sie wirken weicher statt grell, und erst dadurch wird Weiss zur ECHTEN erhoehten Ebene. Vorher trugen --hell-karte und --hell-hoch beide #FFFFFF; der Hover-Zustand auf aktiven Karten war dadurch wirkungslos. */ --hell-grund:#D6DCE1; --hell-flaeche:#EBEEEF; --hell-karte:#F2F5F7; --hell-hoch:#FFFFFF; --hell-linie:#C3CBD1; /* Card und Raised sind im Hellen beide weiss. Die Stufe dazwischen macht dieser Rand - kein dritter Grauwert, kein Schatten (Marc). */ --hell-hoch-rand:#C9D1D6; /* Bottom Navigation, aus marke/BOTTOM-NAV-REFERENZ.md. Eigene Werte, weil das Blatt die Trennlinie ausdruecklich "very subtle" nennt und die Linienfarbe der App dort zu kraeftig waere. */ --hell-nav-linie:#C8D0D6; --hell-nav-aus:#98A2B3; /* Schrift auf den neuen Flaechen nachgerechnet. --hell-leise war mit #7B8290 auf dem alten Grund bei 3.59:1 und damit unter AA; auf dem tieferen Grund haelt #626B78 jetzt 4.55:1 und auf weisser Karte 5.39:1. Das ist der HELLSTE Ton, der beides noch traegt - dunkler waere unnoetig laut. */ /* Auf dem tieferen Grund nachgerechnet: Tinte 16.48:1, soft 8.05:1, leise 6.23:1 auf der Karte - alle bequem ueber AA. */ --hell-tinte:#16202A; --hell-soft:#3F4D57; --hell-leise:#53636D; /* LILA-SCHRIFT, nicht Lila-FLAECHE. Auf dem tieferen Grund traegt #8B36FD als kleine Schrift nur noch 3.75:1 und faellt unter AA. Diese Variante ist deshalb vertieft; Knoepfe, Schalter und Balken bleiben unveraendert #8B36FD. */ --hell-qraki-schrift:#6D28D9; --hell-ok:#12775A; --hell-warn:#B8860B; --hell-fehler:#C43C3C; --hell-blau:#2F6FD1; --hell-karten-schatten:0 1px 3px rgba(60,40,110,.08); --hell-schleier:rgba(30,24,50,.45); } .kbx[data-modus="hell"]{ color-scheme:light; --grund:var(--hell-grund); --flaeche:var(--hell-flaeche); --karte:var(--hell-karte); --hoch:var(--hell-hoch); --hoch-rand:var(--hell-hoch-rand); --nav-linie:var(--hell-nav-linie); --nav-aus:var(--hell-nav-aus); --linie:var(--hell-linie); --tinte:var(--hell-tinte); --soft:var(--hell-soft); --leise:var(--hell-leise); --qraki-schrift:var(--hell-qraki-schrift); --ok:var(--hell-ok); --warn:var(--hell-warn); --fehler:var(--hell-fehler); --blau-signal:var(--hell-blau); --karten-schatten:var(--hell-karten-schatten); --schleier:var(--hell-schleier); } /* "Automatisch" faellt auf Dunkel zurueck, weil :root oben dunkel ist - hier wird nur der helle Fall nachgereicht. */ @media (prefers-color-scheme: light){ .kbx[data-modus="auto"]{ color-scheme:light; --grund:var(--hell-grund); --flaeche:var(--hell-flaeche); --karte:var(--hell-karte); --hoch:var(--hell-hoch); --hoch-rand:var(--hell-hoch-rand); --nav-linie:var(--hell-nav-linie); --nav-aus:var(--hell-nav-aus); --linie:var(--hell-linie); --tinte:var(--hell-tinte); --soft:var(--hell-soft); --leise:var(--hell-leise); --qraki-schrift:var(--hell-qraki-schrift); --ok:var(--hell-ok); --warn:var(--hell-warn); --fehler:var(--hell-fehler); --blau-signal:var(--hell-blau); --karten-schatten:var(--hell-karten-schatten); --schleier:var(--hell-schleier); } } /* ------------------------------------------- 5 KURZNAMEN DER WEBSITE */ /* Die Website und ihre Kopfleiste sprechen dieselben Werte unter kuerzeren Namen an. Die Uebersetzung steht HIER und nicht in seite.css, weil sonst jede Seite ohne seite.css leer ausginge - genau das war der Fall von codes.html am 14. September 2026: kopf.css fragte nach --marke, und niemand hatte es definiert. Die App ueberschreibt dieselben Namen weiter unten auf .kbx, je Farbwelt. Das ist gewollt: Hier steht der Grundfall, dort die Farbwahl des Kindes. */ :root{ --marke:var(--qraki); --qraki-purple:var(--qraki); --qraki-purple-dark:var(--qraki-tief); --accent:var(--qraki-schrift); --accent-satt:var(--qraki-schrift); --auf:#FFFFFF; --paper:var(--grund); --card:var(--karte); --still:var(--flaeche); --line:var(--linie); --ink:var(--tinte); }