/* 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:16px; /* Meta, Untertitel (Designsystem 1.0: 16 statt 14) */ --fs-label:14px; /* 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 - fuer Website und App. Die App kennt dazu nur noch die hellere dunkle Stufe "Vollmond" (seit 26.09.2026). 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 KEIN HELL MEHR */ /* HELL IST GESTRICHEN (Marc, 26.09.2026: "zugunsten einer stringenten Darstellung - wir haben ein perfekt funktionierendes dunkles Design, schoen reduziert"). Es gibt zwei DUNKLE Stufen: Nacht (Standard, oben) und Vollmond (etwas heller; in der App als .kbx[data-mond] bei den Paletten). Die App folgt nicht mehr dem System. */ /* ------------------------------------------- 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); } /* ----------------------------------------- 6 DESIGNSYSTEM 1.0 */ /* QRAKI-DESIGNSYSTEM 1.0 (Nachtschicht 03./04.10.2026, Blatt system.html; FREIGEGEBEN (Marc, 4.10.2026: "Designsystem passt mega gut"), aus dem Prototyp ins Repo uebernommen am 4.10.2026). Rund ist die Grundform, Tiefe kommt aus Helligkeit, Lila als FLAECHE nur fuer die EINE CTA; als Farbe eines Icons heisst Lila: gezeigt oder aktiv. Hier stehen nur die NEUEN Rollen. Was es schon gab, bleibt, wo es war: --qraki, --grund, --flaeche, --tinte, --soft, --leise, --r-s bis --r-xl, --a1 bis --a8. Drei bewusste Abweichungen vom Blatt, damit nichts doppelt heisst: - --fs-titel bleibt 26 (Name im Profil, Schliessen-Zeichen). Die 22er-Stufe des Blatts (Blatt-Titel, Kachel gross) heisst hier --fs-blatt. - --linie bleibt der Rand-Ton der App (#334456); die Haarlinie des Blatts braucht die App nicht (Zeilen trennt Luft, nicht Linien). - --lila-schrift ist kein neuer Wert, sondern --qraki-schrift (#BD92F6, im Vollmond #C9A4FA) unter dem Namen des Systems. */ :root{ --auf-qraki:#FFFFFF; /* Vier Stufen Tiefe: Grund, Flaeche, Flaeche-hoch, Flaeche-druck. */ --flaeche-hoch:#2C3D52; /* Plakette, Chip, Knopf zwei, Schalter-Spur */ --flaeche-druck:#34475F; /* gedrueckt / gezeigt / Chip an */ --icon:#98A2B3; /* Linien-Icon in Ruhe: grau */ --icon-an:#A66BFF; /* gezeigt/aktiv: 5,1:1 auf Grund (#8B36FD hat als 14-px-Wort nur 3,4:1) */ --lila-schrift:var(--qraki-schrift); /* Signale. Kein Rot fuer Falsch: daneben tritt zurueck, richtig leuchtet Mint. */ --mint:#57C8A5; --gold:#F8C828; --koralle:#FF8D7E; --himmel:#5AA2F5; /* Motiv-Palette: nur fuer Bilder, je Ton genau EIN Schatten. */ --m-lila:#9D5CFF; --m-lila-s:#7B3BEA; --m-lila-h:#CDB0FF; --m-gold:#F8C828; --m-gold-s:#E09A12; --m-mint:#57C8A5; --m-mint-s:#2E9C7C; --m-koralle:#FF7E6B; --m-koralle-s:#D9503F; --m-himmel:#5AA2F5; --m-himmel-s:#2F74D0; --m-weiss:#F5F7FA; --m-weiss-s:#C5CFDB; /* Radien: die Skala oben plus die Enden. Verschachtelt: innen = aussen minus Abstand. */ --r-xs:8px; --r-2xl:32px; --r-rund:999px; /* Masse */ --rand:20px; --tast:48px; --zeile:64px; --plakette:44px; --motiv-zeile:40px; --motiv-kachel:56px; --motiv-gross:96px; /* Typo: sechs Stufen, nichts unter 14. --fs-meta ist ab dem System 16 statt 14 (Marc 30.09.: "Text oft zu klein"); dichte Bedienelemente bleiben --fs-small 14. */ --fs-display:34px; --fs-ort:32px; --fs-blatt:22px; --fs-zeile:19px; --fs-text:18px; --fs-cta:20px; /* Tiefe: nur was schwebt, wirft Schatten. */ --tiefe-schwebt:0 16px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08); --tiefe-cta-schwebt:0 10px 30px rgba(139,54,253,.40); /* Bewegung: ease-in-out, vier Dauern. */ --ease:cubic-bezier(.45,0,.55,1); --ease-flug:cubic-bezier(.5,0,.1,1); /* = FLUG_EASE in buehnenflug.js */ --dauer-tipp:120ms; --dauer-zustand:240ms; --dauer-blatt:420ms; --dauer-flug:640ms; --druck:scale(.975); } /* Vollmond: nur Flaechen und Grau steigen, Lila bleibt. */ .kbx[data-modus="dunkel"][data-mond]{ --flaeche-hoch:#3B5170; --flaeche-druck:#466183; --icon:#B0BCCB; --icon-an:#C9A4FA; }