/* ===================================================================== tokens.css · Ripping Sheet · die Werte --------------------------------------------------------------------- Die EINZIGE Datei mit rohen Werten (Farben, Pixel, Zeiten). ui.css, katalog.css und später style.css benutzen ausschließlich var(--…). Geprüft von pruefung/design-waechter.mjs. Gliederung 1 Schrift-Datei 2 Farb-Leitern dunkel (Radix Colors) 3 Farb-Leitern hell (Radix Colors) + Zwilling für „wie das Gerät“ 4 Festwerte (gelten in beiden Schemata: Bild, Bühne, Facebook) 5 Farb-Rollen (das benutzen die Bausteine) 5a Rollen-Abweichung hell (kleiner Block; die Bausteine merken nichts) 6 Schrift (5 Größen, 3 Stärken) 7 Abstände (4-Pixel-Raster, 9 Stufen) 8 Ecken und Linien (3 Radien + Pille, 3 Strichstärken) 9 Maße (Leiste, Kopf, Bedien-Höhen, Symbole) 10 Ebenen (ein Schatten) 11 Bewegung (3 Dauern, 1 Kurve) 12 Weniger Bewegung (prefers-reduced-motion) · 12a Wechsel des Schemas 13 Kontrast-Tabelle (gerechnet von pruefung/kontrast.mjs) Ein Design, zwei Schemata (Viktor, 05.10.2026) Beide werden ausgeliefert und gleich streng geprüft. Die Leitern (2, 3) hängen am Schema, die Rollen (5) an „:root, [data-schema]“. Ein Baustein fragt nur nach Rollen und kennt sein Schema nicht. ohne Attribut wie das Gerät (prefers-color-scheme) data-schema="hell" hell, egal was das Gerät sagt data-schema="dunkel" dunkel, egal was das Gerät sagt Das Attribut setzt UI.schema() aus bausteine.js (Wahl im Browser gemerkt, Schlüssel rs-schema) und das kleine Skript im . Ein Stück Seite mit eigenem data-schema ist eine Insel im anderen Schema. Dunkle Inseln Flächen, auf denen Videos und Vorschaubilder beurteilt werden, bleiben in beiden Schemata dunkel. Ihre Klassen stehen in den Selektor-Listen von Abschnitt 2 und 5 (INSELN): dort rechnet alles aus der dunklen Leiter, ohne dass Markup oder Baustein etwas wissen müssen. Umbruch-Breiten (CSS erlaubt in @media keine Variablen, darum stehen die zwei Zahlen in ui.css im Klartext und hier zum Nachlesen): bis 1280 px Seitenleiste klappt auf Symbole ein (64 px), Ränder 20 statt 32 bis 1040 px Sichtung stapelt: Bedenken unter die Bühne Dazu EINE Umbruch-Höhe (niedrige Fenster, z. B. 1366 × 768 im Browser): bis 800 px hoch die breite Seitenleiste rückt zusammen (Stationen 28 statt 36) ===================================================================== */ /* 1 · Schrift-Datei ---------------------------------------------------- */ @font-face { font-family: "Inter"; src: url("schrift/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } /* 2 · Farb-Leitern dunkel (Radix Colors, dark.ts) ------------------------ Jede Stufe hat EINE Aufgabe — in jeder Farbe dieselbe: 1 Grund der App 2 ruhige Fläche (Leiste, Karte, Dialog) 3 Bedien-Fläche Ruhe · bei Farben: getönte Zustands-Fläche 4 Bedien-Fläche überfahren 5 Bedien-Fläche gedrückt / gewählt 6 Trenner, Kartenrand 7 Rand eines Zustands (Hinweis-Kasten) · bei Slate: Schiene des Fließbands 8 — (frei gehalten) · bei Slate im hellen Schema: Schiene des Fließbands 9 kräftige Fläche · bei Slate: Bedien-Rand (3 : 1) 10 kräftige Fläche überfahren · bei Slate: Rand überfahren, Gewählt-Linie 11 leiser Text · bei Farben: Zustands-Wort und -Symbol 12 voller Text · bei Farben im hellen Schema: Zustands-Wort Bausteine greifen NICHT auf die Leitern zu, nur auf die Rollen (5). */ :root, [data-schema="dunkel"], .buehne, .seitenfach__medium, .bildstreifen, .medienkarte__wahl { /* INSELN: immer dunkel */ color-scheme: dark; /* Slate · kühles Grau, trägt die ganze Oberfläche */ --slate-1: #111113; --slate-2: #18191b; --slate-3: #212225; --slate-4: #272a2d; --slate-5: #2e3135; --slate-6: #363a3f; --slate-7: #43484e; --slate-8: #5a6169; --slate-9: #696e77; --slate-10: #777b84; --slate-11: #b0b4ba; --slate-12: #edeef0; /* Blue · NUR Haupthandlung und „wartet auf dich“ */ --blue-1: #0d1520; --blue-2: #111927; --blue-3: #0d2847; --blue-4: #003362; --blue-5: #004074; --blue-6: #104d87; --blue-7: #205d9e; --blue-8: #2870bd; --blue-9: #0090ff; --blue-10: #3b9eff; --blue-11: #70b8ff; --blue-12: #c2e6ff; /* Amber · „läuft gerade“ */ --amber-1: #16120c; --amber-2: #1d180f; --amber-3: #302008; --amber-4: #3f2700; --amber-5: #4d3000; --amber-6: #5c3d05; --amber-7: #714f19; --amber-8: #8f6424; --amber-9: #ffc53d; --amber-10: #ffd60a; --amber-11: #ffca16; --amber-12: #ffe7b3; /* Green · „fertig / live“ */ --green-1: #0e1512; --green-2: #121b17; --green-3: #132d21; --green-4: #113b29; --green-5: #174933; --green-6: #20573e; --green-7: #28684a; --green-8: #2f7c57; --green-9: #30a46c; --green-10: #33b074; --green-11: #3dd68c; --green-12: #b1f1cb; /* Red · „Fehler / Stillstand“ */ --red-1: #191111; --red-2: #201314; --red-3: #3b1219; --red-4: #500f1c; --red-5: #611623; --red-6: #72232d; --red-7: #8c333a; --red-8: #b54548; --red-9: #e5484d; --red-10: #ec5d5e; --red-11: #ff9592; --red-12: #ffd1d9; /* Durchscheinendes · je Schema ein Rohwert, weil es auf dem Grund liegt */ --schleier: #000000b8; /* hinter Dialog und Seitenfach */ --glas: #111113e0; /* Seitenkopf über rollendem Inhalt (Slate 1) */ --schatten-schwebend: 0 24px 64px -16px #000000b8, 0 4px 12px -4px #00000066; } /* 3 · Farb-Leitern hell (Radix Colors, light.ts) ------------------------- Dieselben zwölf Aufgaben je Stufe. Der Block steht ZWEIMAL: einmal für die feste Wahl „hell“, einmal als Zwilling für „wie das Gerät“, wenn das Gerät hell ist. Beide müssen Zeichen für Zeichen gleich sein — das prüft „node pruefung/kontrast.mjs --pruefen“. */ [data-schema="hell"] { color-scheme: light; --slate-1: #fcfcfd; --slate-2: #f9f9fb; --slate-3: #f0f0f3; --slate-4: #e8e8ec; --slate-5: #e0e1e6; --slate-6: #d9d9e0; --slate-7: #cdced6; --slate-8: #b9bbc6; --slate-9: #8b8d98; --slate-10: #80838d; --slate-11: #60646c; --slate-12: #1c2024; --blue-1: #fbfdff; --blue-2: #f4faff; --blue-3: #e6f4fe; --blue-4: #d5efff; --blue-5: #c2e5ff; --blue-6: #acd8fc; --blue-7: #8ec8f6; --blue-8: #5eb1ef; --blue-9: #0090ff; --blue-10: #0588f0; --blue-11: #0d74ce; --blue-12: #113264; --amber-1: #fefdfb; --amber-2: #fefbe9; --amber-3: #fff7c2; --amber-4: #ffee9c; --amber-5: #fbe577; --amber-6: #f3d673; --amber-7: #e9c162; --amber-8: #e2a336; --amber-9: #ffc53d; --amber-10: #ffba18; --amber-11: #ab6400; --amber-12: #4f3422; --green-1: #fbfefc; --green-2: #f4fbf6; --green-3: #e6f6eb; --green-4: #d6f1df; --green-5: #c4e8d1; --green-6: #adddc0; --green-7: #8eceaa; --green-8: #5bb98b; --green-9: #30a46c; --green-10: #2b9a66; --green-11: #218358; --green-12: #193b2d; --red-1: #fffcfc; --red-2: #fff7f7; --red-3: #feebec; --red-4: #ffdbdc; --red-5: #ffcdce; --red-6: #fdbdbe; --red-7: #f4a9aa; --red-8: #eb8e90; --red-9: #e5484d; --red-10: #dc3e42; --red-11: #ce2c31; --red-12: #641723; --schleier: #00051d74; --glas: #fcfcfde0; --schatten-schwebend: 0 24px 64px -16px #00083046, 0 4px 12px -4px #00002d17; } /* Zwilling: wie das Gerät (kein data-schema am ) und das Gerät ist hell */ @media (prefers-color-scheme: light) { :root:not([data-schema]) { color-scheme: light; --slate-1: #fcfcfd; --slate-2: #f9f9fb; --slate-3: #f0f0f3; --slate-4: #e8e8ec; --slate-5: #e0e1e6; --slate-6: #d9d9e0; --slate-7: #cdced6; --slate-8: #b9bbc6; --slate-9: #8b8d98; --slate-10: #80838d; --slate-11: #60646c; --slate-12: #1c2024; --blue-1: #fbfdff; --blue-2: #f4faff; --blue-3: #e6f4fe; --blue-4: #d5efff; --blue-5: #c2e5ff; --blue-6: #acd8fc; --blue-7: #8ec8f6; --blue-8: #5eb1ef; --blue-9: #0090ff; --blue-10: #0588f0; --blue-11: #0d74ce; --blue-12: #113264; --amber-1: #fefdfb; --amber-2: #fefbe9; --amber-3: #fff7c2; --amber-4: #ffee9c; --amber-5: #fbe577; --amber-6: #f3d673; --amber-7: #e9c162; --amber-8: #e2a336; --amber-9: #ffc53d; --amber-10: #ffba18; --amber-11: #ab6400; --amber-12: #4f3422; --green-1: #fbfefc; --green-2: #f4fbf6; --green-3: #e6f6eb; --green-4: #d6f1df; --green-5: #c4e8d1; --green-6: #adddc0; --green-7: #8eceaa; --green-8: #5bb98b; --green-9: #30a46c; --green-10: #2b9a66; --green-11: #218358; --green-12: #193b2d; --red-1: #fffcfc; --red-2: #fff7f7; --red-3: #feebec; --red-4: #ffdbdc; --red-5: #ffcdce; --red-6: #fdbdbe; --red-7: #f4a9aa; --red-8: #eb8e90; --red-9: #e5484d; --red-10: #dc3e42; --red-11: #ce2c31; --red-12: #641723; --schleier: #00051d74; --glas: #fcfcfde0; --schatten-schwebend: 0 24px 64px -16px #00083046, 0 4px 12px -4px #00002d17; } } /* 4 · Festwerte (gelten in beiden Schemata) ------------------------------- Was auf einem BILD liegt, richtet sich nach dem Bild, nicht nach dem Schema. Die BÜHNE (Video-Bühne der Review, große Vorschau im Seitenfach, Vorschau-Streifen) ist in beiden Schemata dunkel. Und die blaue Taste sieht in beiden gleich aus: helles Blau mit dunkler Schrift (5,6 : 1; weiße Schrift hätte 3,3 : 1). */ :root { --akzent-tinte: #0d1520; /* Schrift auf der blauen Taste (Blue 1 dunkel) */ --bild-schild: #111113c7; /* Schild unten auf einem Vorschaubild */ --bild-schrift: #edeef0; /* Schrift auf diesem Schild */ --bild-linie: #d6ebfd30; /* feiner Rand um ein Bild (Slate A6 dunkel) */ --bild-grund: #111113; /* Fläche hinter einem Bild, das noch lädt */ --buehne-grund: #111113; /* Fläche der Bühne (= Slate 1 dunkel) */ --buehne-linie: #363a3f; /* ihr Rand im hellen Schema (= Slate 6 dunkel) */ --buehne-text: #edeef0; /* Schrift auf der Bühne (= Slate 12 dunkel) */ --buehne-text-leise: #b0b4ba; /* leise Schrift dort (= Slate 11 dunkel) */ --buehne-fokus: #edeef0; /* Fokus-Ring auf Bühne und Bild-Schild */ /* Facebook-Vorschau im Upload-Gate: sieht in beiden Schemata aus wie Metas Feed (bewusste Ausnahme vom System). Benutzt nur von den Klassen fb-… Noch ohne Nutzer: der Umbau des Upload-Gates nimmt sie statt der Rohwerte, die heute in style.css stehen. */ --fb-grund: #ffffff; --fb-text: #050505; --fb-text-leise: #65676b; --fb-text-nur-lesen: #333333; --fb-linie: #dadde1; --fb-fuss: #f0f2f5; --fb-taste: #e4e6eb; --fb-blau: #1b74e4; --fb-video: #000000; --fb-schrift: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --fb-schrift-text: 15px; --fb-schrift-kopf: 14.5px; --fb-schrift-zusatz: 13px; --fb-schrift-klein: 12px; --fb-ecke: 10px; --fb-video-hoehe: 500px; } /* 5 · Farb-Rollen ----------------------------------------------------------- Die Sprache der Bausteine. Wer eine Farbe braucht, nimmt eine Rolle — nie eine Leiter-Stufe, nie einen Rohwert. Der Block gilt für :root UND für jede Insel mit data-schema, damit die Rollen dort mit den Leitern der Insel neu gerechnet werden. */ :root, [data-schema], .buehne, .seitenfach__medium, .bildstreifen, .medienkarte__wahl { /* INSELN: rechnen aus der dunklen Leiter */ /* Grund · die Arbeitsfläche ist die dunkelste Stufe, damit das Video der hellste Gegenstand im Bild bleibt. */ --grund: var(--slate-1); --grund-leiste: var(--slate-2); /* Seitenleiste, Handlungs-Leiste */ /* Flächen */ --flaeche: var(--slate-2); /* Karte, Liste, Dialog, Kasten */ --flaeche-schwebend: var(--slate-3); /* Menü, Kurzmeldung */ --flaeche-bedien: var(--slate-3); /* Knopf, Feld, Segment · Ruhe */ --flaeche-bedien-hover: var(--slate-4); /* überfahren · Zeile unter der Hand */ --flaeche-bedien-aktiv: var(--slate-5); /* gedrückt */ --flaeche-hover: var(--slate-3); /* Zeile, Tabellenzeile, Bedenken unter der Hand, wenn sie auf dem Grund liegen */ /* Linien */ --linie: var(--slate-6); /* Trenner, Rand von Karte und Kasten */ --linie-leise: var(--slate-4); /* Trenner zwischen Zeilen einer Liste */ --linie-bedien: var(--slate-9); /* Rand des Neben-Knopfs · 3 : 1 */ --linie-bedien-hover: var(--slate-10); --linie-eingabe: var(--slate-9); /* Rand von Feld, Auswahl, Haken, Schalter · 3 : 1 gegen Grund UND Fläche (bewusst Stufe 9 statt 7) */ --linie-eingabe-hover: var(--slate-10); /* Neutral-kräftig · erledigte Glieder, Weg der Zeit, Schieber */ --neutral: var(--slate-10); --neutral-leer: var(--slate-5); /* offenes Glied, leere Bahn */ --schiene-leise: var(--slate-7); /* Schiene des Fließbands in der Seitenleiste: verbindet nur, trägt keinen Zustand; rund 2 : 1 gegen die Leiste (hell: Stufe 8) */ /* Text · nur zwei Stufen, beide über 6 : 1 auf jeder Fläche */ --text: var(--slate-12); --text-leise: var(--slate-11); /* Akzent · gehört der Haupthandlung. Sonst nichts ist blau gefüllt. */ --akzent: var(--blue-9); --akzent-hover: var(--blue-10); --akzent-schrift: var(--akzent-tinte); --akzent-rand: var(--blue-9); /* Rand der blauen Taste: hält sie auch auf hellen Flächen bei 3 : 1 (hell: 11) */ /* Fokus · heller, NEUTRALER Ring. Blau bleibt dem Handeln vorbehalten. */ --fokus: var(--slate-12); /* Gewählt · neutral: hellere Fläche + Linie mit 3 : 1 + helle Marke. Nie blau. Gilt für Segment, Reiter, Station, gewählte Karte und Zeile. */ --gewaehlt-flaeche: var(--slate-5); --gewaehlt-linie: var(--slate-10); /* 3 : 1 gegen Bahn UND gegen Fläche */ --gewaehlt-marke: var(--slate-12); /* Strich, Unterstrich, gefüllter Haken */ --gewaehlt-schrift: var(--slate-1); /* Zeichen AUF der hellen Marke */ /* Zustände · immer Farbe + Symbol + Wort. Je Zustand sechs Rollen: flaeche (3) · flaeche-hover (4) · linie (7) · kraeftig (9) · text (11) zeichen (11) = das Symbol; im hellen Schema bleibt es farbig, während das Wort auf Stufe 12 geht (siehe 5a) */ /* BLAU · wartet auf dich (Gate, der Mensch ist dran) */ --dran-flaeche: var(--blue-3); --dran-flaeche-hover: var(--blue-4); --dran-linie: var(--blue-7); --dran-kraeftig: var(--blue-9); --dran-text: var(--blue-11); --dran-zeichen: var(--blue-11); --dran-text-leiste: var(--blue-11); /* das Wort OHNE eigene Fläche auf dem Grund der Seitenleiste (Signal der Station): bleibt in beiden Schemata blau (hell 4,5 : 1). Unter der Hand und in der gewählten Station gilt --dran-text */ /* BERNSTEIN · läuft gerade (die KI-Kette arbeitet) */ --laeuft-flaeche: var(--amber-3); --laeuft-flaeche-hover: var(--amber-4); --laeuft-linie: var(--amber-7); --laeuft-kraeftig: var(--amber-9); --laeuft-text: var(--amber-11); --laeuft-zeichen: var(--amber-11); /* GRÜN · fertig / live */ --fertig-flaeche: var(--green-3); --fertig-flaeche-hover: var(--green-4); --fertig-linie: var(--green-7); --fertig-kraeftig: var(--green-9); --fertig-text: var(--green-11); --fertig-zeichen: var(--green-11); /* ROT · Fehler oder Stillstand */ --fehler-flaeche: var(--red-3); --fehler-flaeche-hover: var(--red-4); --fehler-linie: var(--red-7); --fehler-kraeftig: var(--red-9); --fehler-text: var(--red-11); --fehler-zeichen: var(--red-11); /* GRAU · ruht */ --ruht-flaeche: var(--slate-4); --ruht-flaeche-hover: var(--slate-5); --ruht-linie: var(--slate-7); --ruht-kraeftig: var(--slate-9); --ruht-text: var(--slate-11); --ruht-zeichen: var(--slate-11); /* Logo-Zeichen „R mit Schiene“ · EIN Zeichen für App und Favicon: neutrale Kachel, das R darauf, die Schiene (sein Stamm) klar abgesetzt. Nicht blau — Blau gehört dem Handeln. */ --logo-kachel: var(--slate-12); --logo-zeichen: var(--slate-1); --logo-schiene: var(--slate-9); } /* 5a · Rollen-Abweichung hell ------------------------------------------------ Mit dem reinen Leiter-Tausch fallen im hellen Schema einige Paare unter Soll (Bernstein 9 ist auf Weiß kaum zu sehen; Stufe 11 auf Stufe 3 liegt bei 4,2 : 1). Darum legt dieser kleine Block einzelne ROLLEN auf eine andere Stufe. Kein Baustein wird angefasst. Wie Abschnitt 3 steht er zweimal (feste Wahl und Zwilling für „wie das Gerät“). */ [data-schema="hell"] { --flaeche-hover: var(--slate-4); --linie-bedien: var(--slate-10); --linie-bedien-hover: var(--slate-11); --linie-eingabe: var(--slate-10); --linie-eingabe-hover: var(--slate-11); --neutral: var(--slate-11); --schiene-leise: var(--slate-8); --gewaehlt-linie: var(--slate-11); --akzent-rand: var(--blue-11); --dran-text: var(--blue-12); --dran-kraeftig: var(--blue-10); --laeuft-text: var(--amber-12); --laeuft-kraeftig: var(--amber-11); --fertig-text: var(--green-12); --fertig-kraeftig: var(--green-10); --fehler-text: var(--red-12); --fehler-kraeftig: var(--red-10); --ruht-kraeftig: var(--slate-10); } @media (prefers-color-scheme: light) { :root:not([data-schema]) { --flaeche-hover: var(--slate-4); --linie-bedien: var(--slate-10); --linie-bedien-hover: var(--slate-11); --linie-eingabe: var(--slate-10); --linie-eingabe-hover: var(--slate-11); --neutral: var(--slate-11); --schiene-leise: var(--slate-8); --gewaehlt-linie: var(--slate-11); --akzent-rand: var(--blue-11); --dran-text: var(--blue-12); --dran-kraeftig: var(--blue-10); --laeuft-text: var(--amber-12); --laeuft-kraeftig: var(--amber-11); --fertig-text: var(--green-12); --fertig-kraeftig: var(--green-10); --fehler-text: var(--red-12); --fehler-kraeftig: var(--red-10); --ruht-kraeftig: var(--slate-10); } } :root { /* 6 · Schrift ------------------------------------------------------------- Inter (mitgeliefert, schrift/). 5 Größen. Jede hat ihre feste Zeilenhöhe im 4-Pixel-Raster. klein 12 NUR Beschriftungen: Etikett, Zähler (Zahl), Zeitstempel, Feld- und Gruppen-Name, Tabellenkopf, Bild-Schild grund 14 alles andere — auch zweite Zeilen (dann in --text-leise) betont 16 Zeilen-Titel, Frage in der Handlungs-Leiste, großer Knopf kopf 20 Abschnitt, Dialog-Titel titel 24 Seitentitel, große Zahl */ --schrift: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --schrift-merkmale: "calt", "cv05", "ss03"; --ziffern-gleich: tabular-nums; --schrift-klein: 12px; --zeile-klein: 16px; --schrift-grund: 14px; --zeile-grund: 20px; --schrift-betont: 16px; --zeile-betont: 24px; --schrift-kopf: 20px; --zeile-kopf: 28px; --schrift-titel: 24px; --zeile-titel: 32px; --zeile-lesen: 22px; /* Lesetext in Grundgröße (Bedenken, Copy) — ruhiger als 20; zwei Zeilen = 44, im Raster */ --gewicht-normal: 400; --gewicht-mittel: 500; --gewicht-stark: 600; --laufweite-titel: -0.02em; --laufweite-kopf: -0.012em; --laufweite-grund: 0em; --laufweite-klein: 0.005em; /* 7 · Abstände (4-Pixel-Raster, 9 Stufen) --------------------------------- */ --raum-1: 4px; --raum-2: 8px; --raum-3: 12px; --raum-4: 16px; --raum-5: 20px; --raum-6: 24px; --raum-7: 32px; --raum-8: 48px; --raum-9: 64px; /* 8 · Ecken und Linien ----------------------------------------------------- Drei Radien, die ineinander passen: Karte (14) minus Innenabstand (8) = Bild-Ecke und Knopf in der Karte (6); Segment-Schalter (10) minus Innenabstand (4) = Segment-Feld (6). Dazu die Pille für alles, was einen Zustand oder eine Zahl trägt. */ --ecke-s: 6px; /* Etikett, Bild, Segment-Feld, Haken, Menü-Eintrag */ --ecke-m: 10px; /* Knopf, Feld, Station, Kurzmeldung, Video */ --ecke-l: 14px; /* Karte, Kasten, Dialog, Bühne im hellen Schema */ --ecke-rund: 999px; /* Pille: Abzeichen, Zähler, Schalter, Balken, Glied */ --strich: 1px; /* jede Linie */ --strich-stark: 2px; /* Fokus-Ring, Abspiel-Marke, Reiter-Unterstrich */ --strich-schiene: 3px; /* Zustands-Schiene am Zeilenanfang */ /* 9 · Maße ---------------------------------------------------------------- */ --mass-leiste: 248px; /* Seitenleiste */ --mass-leiste-schmal: 64px; /* Seitenleiste auf Symbole (bis 1280 px) */ --mass-kopf: 56px; /* Seitenkopf */ --mass-handlung: 64px; /* feste Handlungs-Leiste */ --mass-inhalt-max: 1496px; /* größte Inhaltsbreite */ --mass-lesen-max: 560px; /* größte Zeilenlänge für Lesetext */ --mass-tabelle-lesen: 960px; /* Tabelle mit wenigen Spalten (Ordner-Ansicht): Name und Angaben bleiben im selben Blick */ /* Die EINE Regel für die Inhaltsbreite jeder Ansicht: links ein Rand, rechts mindestens derselbe, Inhalt nie breiter als --mass-inhalt-max, linksbündig. (100 % = Breite der Seite neben der Leiste.) */ --rand-seite: var(--raum-7); --rand-links: var(--rand-seite); --rand-rechts: max(var(--rand-seite), calc(100% - var(--mass-inhalt-max) - var(--rand-seite))); --mass-bedien-s: 28px; /* kleiner Knopf, Zeitmarke */ --mass-bedien-m: 36px; /* Knopf, Feld, Auswahl, Segment */ --mass-bedien-l: 44px; /* Haupthandlung in der Handlungs-Leiste */ --mass-klick-min: 24px; /* kein Klickziel ist kleiner */ --mass-abzeichen: 24px; /* Zustands-Abzeichen */ --mass-etikett: 20px; /* Eigenschafts-Etikett, Zähler */ --mass-zeile: 64px; /* Listenzeile mit Vorschaubild */ --mass-zeile-dicht: 40px; /* Tabellenzeile */ --mass-glied: 6px; /* Höhe eines Glieds der Schritt-Schiene */ --mass-balken: 4px; /* Höhe des Fortschritts-Balkens */ --mass-karte-min: 200px; /* Raster: Karten nie schmaler */ --mass-daumen: 32px; /* kleines Hochkant-Bild in Listen */ --mass-feld: 240px; /* übliche Feldbreite */ --mass-menue: 240px; /* schmalstes Menü */ --mass-dialog: 480px; --mass-fach: 520px; /* Seitenfach (Schublade rechts) */ --mass-meldung: 420px; --mass-video-min: 320px; /* Vorgabe für die Video-Höhe, bis die Ansicht sie setzt */ --mass-medium-max: 480px; /* Bild oder Video im Seitenfach nie höher */ --mass-textblock-max: 320px; /* Auftragstext, Protokoll: rollt ab hier */ --hoehe-fenster: 100vh; /* volle Fensterhöhe (Gerüst, Seitenleiste) */ --breite-behaelter: 100cqi; /* Breite des messenden Behälters (Sichtung) */ --flut: 100vmax; /* „größer als jedes Feld“: deckt Autofill zu */ --umbruch-leiste: 1280px; /* bis hier ist die Seitenleiste eingeklappt (liest bausteine.js; dieselbe Zahl steht in ui.css in @media) */ --mass-bedenken-min: 320px; /* Bedenken-Spalte nie schmaler */ --symbol-s: 14px; --symbol-m: 16px; --symbol-l: 20px; --symbol-xl: 32px; /* (bausteine.js liest diese vier Größen) */ --format-hoch: 9 / 16; /* Video-Ads, Bühne, Vorschaubild in Listen */ --format-karte: 4 / 5; /* Zuschnitt der Medien-Karte, oben angeschlagen */ --format-quadrat: 1 / 1; /* Bild-Ads im Katalog-Muster */ --deckkraft-gesperrt: 0.45; --deckkraft-gedimmt: 0.72; --anteil-kurz: 40%; /* Lade-Platzhalter: Längen einer Textzeile */ --anteil-mittel: 65%; --anteil-lang: 85%; /* 10 · Ebenen ---------------------------------------------------------------- Tiefe entsteht durch Flächen-Stufe + feine Linie. EIN Schatten (je Schema in 2/3), nur für Dinge, die wirklich schweben: Menü, Kurzmeldung, Dialog, Seitenfach. */ --ebene-innen-1: 1; /* innerhalb eines Bausteins: liegt über dem Nachbarn */ --ebene-innen-2: 2; /* … und noch eine Stufe darüber (Knoten auf der Schiene) */ --ebene-kopf: 10; --ebene-handlung: 20; --ebene-menue: 30; --ebene-fach: 40; --ebene-meldung: 60; /* Dialoge brauchen keine Ebene: liegt im Top-Layer */ /* 11 · Bewegung ---------------------------------------------------------------- Kurz und ruhig. Nichts federt, nichts hüpft. Drei Dauern, eine Kurve. */ --dauer-kurz: 120ms; /* überfahren, drücken, Farbe */ --dauer-mittel: 180ms; /* umschalten, aufklappen, Menü */ --dauer-ruhig: 240ms; /* Dialog, Seitenfach, Kurzmeldung */ --kurve: cubic-bezier(0.2, 0, 0, 1); --dauer-meldung: 5000ms; /* so lange steht eine Kurzmeldung (liest bausteine.js) */ /* Umläufe (keine Übergänge, sondern Dauer-Zeichen für „arbeitet“) */ --dauer-kreis: 900ms; /* eine Umdrehung des „läuft“-Symbols */ --dauer-puls: 1600ms; /* Atmen des Lade-Platzhalters */ --dauer-wandern: 1400ms; /* Wandern der Zustands-Schiene bei „läuft“ */ --kurve-gleich: linear; /* nur für Umläufe: gleichmäßig */ --kurve-atmen: ease-in-out; /* nur für das Atmen des Platzhalters */ --druck: 0.97; /* Knopf gibt beim Drücken leicht nach */ --lauf: running; } /* 12 · Weniger Bewegung ------------------------------------------------------ Wer im System „Bewegung reduzieren“ gewählt hat, bekommt jeden Zustand sofort. Umläufe stehen still; der Zustand bleibt an Symbol, Wort und Form lesbar. */ @media (prefers-reduced-motion: reduce) { :root { --dauer-kurz: 1ms; --dauer-mittel: 1ms; --dauer-ruhig: 1ms; --druck: 1; --lauf: paused; } } /* 12a · Wechsel des Schemas --------------------------------------------------- Beim Umschalten (Hell · Dunkel · Wie das Gerät) kippt alles im selben Bild: UI.schema() setzt für zwei Bilder data-wechsel am , so lange ruhen die Farb-Übergänge. Sonst hinken Flächen mit 120 ms nach und stehen einen Moment hell auf dunkel. */ :root[data-wechsel] *, :root[data-wechsel] *::before, :root[data-wechsel] *::after { transition: none !important; } /* 13 · Kontrast-Tabelle --------------------------------------------------------- Gerechnet nach WCAG 2 (relative Leuchtdichte) von pruefung/kontrast.mjs aus genau dieser Datei. Nach jeder Farb-Änderung: node pruefung/kontrast.mjs --schreiben Soll: Text 4,5 : 1 · Bedien-Rand, Gewählt-Zeichen, Schiene, Symbol, Fokus 3 : 1 · Fläche unter der Hand gegen ihren Grund 1,15 : 1 (spürbar) · Schiene des Fließbands (verbindet nur, trägt keinen Zustand) 1,75 : 1. Beide Schemata werden gleich streng geprüft: „--pruefen“ verlangt 0 / 0. KONTRAST-TABELLE:ANFANG Paar Soll dunkel hell — Text — Text auf Grund 4,50 16,24 15,98 Text auf Fläche (Karte, Leiste) 4,50 15,15 15,58 Text auf Bedien-Fläche 4,50 13,70 14,40 Text auf Bedien-Fläche, überfahren 4,50 12,42 13,41 Text auf gewählter Fläche 4,50 11,25 12,54 Leiser Text auf Grund 4,50 9,05 5,79 Leiser Text auf Fläche 4,50 8,44 5,64 Leiser Text auf Bedien-Fläche (auch: gesperrte Haupt-Taste) 4,50 7,63 5,22 Leiser Text auf Bedien-Fläche, überfahren 4,50 6,92 4,85 Leiser Text auf gewählter Fläche 4,50 6,27 4,54 — Haupthandlung — Schrift auf der blauen Taste 4,50 5,61 5,61 Schrift auf der blauen Taste, überfahren 4,50 6,56 5,05 Blaue Taste gegen Grund 3,00 5,77 3,18 Blaue Taste gegen Fläche 3,00 5,38 3,10 Rand der blauen Taste gegen Bedien-Fläche (Karte unter der Hand) 3,00 4,87 4,18 Rand der blauen Taste gegen Bedien-Fläche, überfahren (Zeile im Kasten) 3,00 4,42 3,89 — Zustand — Wartet auf dich: Wort auf seiner Fläche 4,50 7,07 11,25 Wartet auf dich: Wort auf Grund 4,50 8,97 12,30 Wartet auf dich: Wort auf Leiste und Fläche 4,50 8,36 12,00 Wartet auf dich: Wort auf Bedien-Fläche (Fach im Kasten) 4,50 7,56 11,09 Wartet auf dich: Wort auf gewählter Station 4,50 6,21 9,66 Wartet auf dich: Wort auf überfahrener Station 4,50 6,86 10,32 Wartet auf dich: Wort frei auf der Leiste (Signal der Station) 4,50 8,36 4,53 Wartet auf dich: Symbol auf seiner Fläche 3,00 7,07 4,25 Wartet auf dich: Symbol auf gewählter Station 3,00 6,21 3,64 Wartet auf dich: Schiene gegen Grund 3,00 5,77 3,53 Wartet auf dich: Schiene gegen Fläche (Liste im Kasten) 3,00 5,38 3,45 Wartet auf dich: Glied gegen Bedien-Fläche (Fach im Kasten) 3,00 4,87 3,19 Wartet auf dich: voller Text im Hinweis 4,50 12,81 14,62 Wartet auf dich: leiser Text im Hinweis 4,50 7,14 5,29 Läuft: Wort auf seiner Fläche 4,50 10,26 10,46 Läuft: Wort auf Grund 4,50 12,31 11,09 Läuft: Wort auf Leiste und Fläche 4,50 11,48 10,81 Läuft: Wort auf Bedien-Fläche (Fach im Kasten) 4,50 10,38 9,99 Läuft: Wort auf gewählter Station 4,50 8,53 8,70 Läuft: Symbol auf seiner Fläche 3,00 10,26 4,24 Läuft: Symbol auf gewählter Station 3,00 8,53 3,53 Läuft: Schiene gegen Grund 3,00 11,95 4,49 Läuft: Schiene gegen Fläche (Liste im Kasten) 3,00 11,14 4,38 Läuft: Glied gegen Bedien-Fläche (Fach im Kasten) 3,00 10,07 4,05 Läuft: voller Text im Hinweis 4,50 13,54 15,08 Läuft: leiser Text im Hinweis 4,50 7,54 5,46 Fertig: Wort auf seiner Fläche 4,50 7,85 10,99 Fertig: Wort auf Grund 4,50 10,05 12,01 Fertig: Wort auf Leiste und Fläche 4,50 9,37 11,71 Fertig: Wort auf Bedien-Fläche (Fach im Kasten) 4,50 8,48 10,83 Fertig: Wort auf gewählter Station 4,50 6,96 9,43 Fertig: Symbol auf seiner Fläche 3,00 7,85 4,21 Fertig: Symbol auf gewählter Station 3,00 6,96 3,61 Fertig: Schiene gegen Grund 3,00 5,97 3,46 Fertig: Schiene gegen Fläche (Liste im Kasten) 3,00 5,57 3,37 Fertig: Glied gegen Bedien-Fläche (Fach im Kasten) 3,00 5,03 3,12 Fertig: voller Text im Hinweis 4,50 12,69 14,62 Fertig: leiser Text im Hinweis 4,50 7,07 5,30 Fehler: Wort auf seiner Fläche 4,50 7,74 10,84 Fehler: Wort auf Grund 4,50 8,95 12,12 Fehler: Wort auf Leiste und Fläche 4,50 8,34 11,82 Fehler: Wort auf Bedien-Fläche (Fach im Kasten) 4,50 7,54 10,93 Fehler: Wort auf gewählter Station 4,50 6,20 9,52 Fehler: Symbol auf seiner Fläche 3,00 7,74 4,54 Fehler: Symbol auf gewählter Station 3,00 6,20 3,99 Fehler: Schiene gegen Grund 3,00 4,81 4,25 Fehler: Schiene gegen Fläche (Liste im Kasten) 3,00 4,49 4,15 Fehler: Glied gegen Bedien-Fläche (Fach im Kasten) 3,00 4,06 3,83 Fehler: voller Text im Hinweis 4,50 14,06 14,28 Fehler: leiser Text im Hinweis 4,50 7,83 5,17 Ruht: Wort auf seiner Fläche 4,50 6,92 4,85 Ruht: Wort auf Grund 4,50 9,05 5,79 Ruht: Wort auf Leiste und Fläche 4,50 8,44 5,64 Ruht: Wort auf Bedien-Fläche (Fach im Kasten) 4,50 7,63 5,22 Ruht: Wort auf gewählter Station 4,50 6,27 4,54 Ruht: Symbol auf seiner Fläche 3,00 6,92 4,85 Ruht: Symbol auf gewählter Station 3,00 6,27 4,54 Ruht: Schiene gegen Grund 3,00 3,68 3,69 Ruht: Schiene gegen Fläche (Liste im Kasten) 3,00 3,43 3,59 Ruht: Glied gegen Bedien-Fläche (Fach im Kasten) 3,00 3,10 3,32 — Bedien-Rand — Rand des Neben-Knopfs gegen Grund 3,00 3,68 3,69 Rand des Neben-Knopfs gegen Fläche 3,00 3,43 3,59 Rand des Neben-Knopfs gegen seine Füllung 3,00 3,10 3,32 Feld-Rand gegen Grund 3,00 3,68 3,69 Feld-Rand gegen Fläche 3,00 3,43 3,59 Feld-Rand gegen Feld-Füllung 3,00 3,10 3,32 Feld-Rand überfahren gegen Füllung überfahren 3,00 3,40 4,85 Rand des Gefahr-Knopfs gegen Grund 3,00 4,81 4,25 Schrift des Gefahr-Knopfs auf seiner Füllung 4,50 7,74 10,84 — Fokus — Fokus-Ring gegen Grund 3,00 16,24 15,98 Fokus-Ring gegen Fläche 3,00 15,15 15,58 Fokus-Ring gegen Bedien-Fläche 3,00 13,70 14,40 — Gewählt — Gewählt-Linie gegen die Bahn (Segment) 3,00 3,75 5,22 Gewählt-Linie gegen ihre Füllung (Segment, Zeile) 3,00 3,08 4,54 Gewählt-Linie gegen Grund (Karte, Zeile) 3,00 4,44 5,79 Gewählt-Linie gegen Fläche (Zeile im Kasten) 3,00 4,14 5,64 Gewählt-Marke gegen Leiste (Station) 3,00 15,15 15,58 Gewählt-Marke gegen gewählte Fläche (Umschalt-Knopf an) 3,00 11,25 12,54 Zeichen auf der hellen Marke (Haken) 3,00 16,24 15,98 — Unter der Hand — Zeile überfahren gegen Grund 1,15 1,18 1,19 Zeile überfahren gegen Fläche (im Kasten) 1,15 1,21 1,16 Gewählte Zeile gegen Grund 1,15 1,44 1,27 — Schiene — Erledigtes Glied gegen offenes Glied 3,00 3,08 4,54 Erledigtes Glied gegen Fläche 3,00 4,14 5,64 Erledigtes Glied gegen Bedien-Fläche (Fach im Kasten) 3,00 3,75 5,22 Fließband: Schiene gegen die Leiste (verbindet nur, trägt keinen Zustand) 1,75 1,90 1,81 — Bühne und Bild — Schrift auf der Bühne 4,50 16,24 16,24 Leise Schrift auf der Bühne 4,50 9,05 9,05 Fokus-Ring auf der Bühne 3,00 16,24 16,24 Fokus-Ring auf dem Bild-Schild (Bild darunter schwarz) 3,00 16,69 16,69 Schrift auf dem Bild-Schild (Bild darunter weiß) 4,50 8,20 8,20 — Logo — R auf der Kachel 3,00 16,24 15,98 Schiene auf der Kachel 3,00 4,41 4,96 Schiene gegen das R (Unterschied) 3,00 3,68 3,21 110 Paare · unter Soll: dunkel 0 · hell 0 („!“ = unter Soll) KONTRAST-TABELLE:ENDE ----------------------------------------------------------------------------- */