/* Design-Tokens Fahrbase (Task 0.1, ausgebaut mit B12/P0b am 02.09.2026). Farben, Abstaende, Schriftgroessen, Radien, Schatten und Kurven ausschliesslich hier pflegen - nicht in Templates oder anderen CSS-Dateien. **Warum der Ausbau der Anfang des GUI-Upgrades ist:** Vorher standen hier 23 Tokens, und darunter kein einziger fuer Abstaende oder Schriftgroessen. Jede der rund 2900 CSS-Zeilen entschied selbst zwischen 6, 8, 10, 12, 16, 20 und 24 Pixeln - genau das erzeugt den Eindruck "uneinheitlich und aufgeblasen". Kein Framework behebt das, ein Raster schon (siehe docs/gui_upgrade_plan.md). **Vorbild ist Open Props** (open-props.style), aber ohne die Abhaengigkeit: Das Projekt braucht rund 30 Tokens, Open Props bringt mehrere hundert mit. Die Skalen sind uebernommen, die Werte selbst gesetzt. */ /* --- Schriftdateien (03.09.2026: IBM Plex statt Inter) ---------------------- Sven: "das Inter stoert mich auch". Entschieden am Bild (`/stil/schrift`, drei Fassungen an echten Daten): **IBM Plex Sans** fuer alles, **IBM Plex Mono** fuer Kennungen - beide aus einer Hand, beide OFL, beide als Latin-Subset aus @fontsource 5.3.0 (Umlaute und ß sind darin). Keine Serife: Das waere eine Markenentscheidung, und die kommt nach der Uebergabe. **Gemessen, nicht geschaetzt:** Plex Sans laeuft in unseren Groessen 4-8 % schmaler als Inter bei identischer Zeilenhoehe (x-Hoehe 0,516 gegen 0,545, aus den Dateien gelesen). Der Wechsel hat kein Layout verschoben; Groessen, Schnitte und Abstaende sind unveraendert (`docs/gui_typo_plan.md`). **Drei Schnitte je Familie plus der Leitwert 450 fuer Sans.** Alles andere fettet der Browser synthetisch - die Fehlerklasse aus der vierten Durchsicht. Auch Mono liegt in 400/500/600 vor, weil eine Kennung ihren Schnitt erbt (Rechnungsnummer im Titel, Kennzeichen im Kachelnamen). `tests/browser/test_schrift.py` misst jeden Schnitt am gerenderten Bild. */ @font-face { font-family: "IBM Plex Sans"; src: url("/static/fonts/plex-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("/static/fonts/plex-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("/static/fonts/plex-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } /* **450 - der Leitwert** (Sauberkeitscheck, entschieden am 03.09.2026). Plex hat zwischen Regular und Medium den Schnitt "Text"; Plex Medium liegt naeher an SemiBold als Inter Medium, und die Leitspalte der Fahrschuelerliste war Sven damit zu fett. Aus dem IBM-Release (@ibm/plex-sans 1.1.0, Latin-1-Subset, OFL), unter demselben Familiennamen mit Gewicht 450 - `font-weight: 450` greift dann diese Datei. */ @font-face { font-family: "IBM Plex Sans"; src: url("/static/fonts/plex-sans-450.woff2") format("woff2"); font-weight: 450; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("/static/fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("/static/fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("/static/fonts/plex-mono-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } :root { /* --- Abstaende: 8-Punkt-Raster ------------------------------------------ Jeder Abstand kommt aus dieser Skala, kein `margin: 10px` mehr. Die Stufen 1 und 2 sind halbe Schritte, weil es sie im Kleinen wirklich braucht (Badge-Polster, Icon-Abstand); ab Stufe 3 geht es in Achtern weiter. **Bewusst in px, nicht in rem** - anders als die Schriftgroessen. Ein Raster in rem waechst mit der Browser-Schriftgroesse mit und verschiebt dabei Tabellen und Panels; die Schrift soll wachsen duerfen, das Raster nicht. Und: Die 2900 vorhandenen Zeilen rechnen in px, ein Wechsel haette das Bild still verschoben. */ --fb-space-1: 4px; --fb-space-2: 8px; --fb-space-3: 12px; --fb-space-4: 16px; --fb-space-5: 24px; --fb-space-6: 32px; /* Eine Zeilenhoehe fuer alle Tabellen (Abstandspruefung, 03.09.2026): das Mass der Fahrschuelerliste, gemessen 31px. */ --fb-tabellenzeile: 31px; --fb-space-7: 48px; --fb-space-8: 64px; /* --- Schriftgroessen ------------------------------------------------------ Fuenf Stufen fuer Text, zwei fuer Ueberschriften. **In rem**, damit die Browser-Einstellung wirkt - wer schlecht sieht, stellt groesser, und die Anwendung folgt. Die krummen Werte sind gewollt: 15px (0.9375rem) ist die vorhandene Fliesstextgroesse, 13px die der Hilfstexte. **Am 03.09.2026 festgezogen** (Befund 3.12 der zweiten GUI-Runde). Vorher standen 57 Schriftgroessen hart in den Stildateien, darunter neun ausserhalb jeder Skala - und `--fb-text-xl` ("Panel-Titel") wurde nirgends benutzt. Drei Ueberschriftengroessen lagen innerhalb von 6 px beieinander: Panel-Titel 16, Seitentitel 20, Kennzahl 24. Danach waren es sieben Stufen: 12, 13, 14, 15, 17, 22, 24. Was sich dabei bewegt hat: Panel-Titel und Formularabschnitt 16 -> 17, Seitentitel und Steckbrief-Name 20 -> 22, die Marken (Sidebar, Login) 18 -> 17, der Saldo-Betrag 28 -> 24. **Die 28er-Stufe ist ersatzlos entfallen.** Sie hatte genau einen Nutzer (`.fb-saldo-karte__betrag`); eine eigene Stufe fuer eine Stelle ist keine Skala, sondern ein Sonderfall mit Namen. Grosse Zahlen sind jetzt alle `3xl`. **Die 14er-Stufe ist am 03.09.2026 mit der Schriftrolle entfallen** (Sven, nach der vierten Durchsicht). Sie stand an acht Stellen und war an jeder davon nur "ein bisschen kleiner als 15" - keine Rolle, nur Abstand zur Nachbarstufe. Ihre Nutzer sind Beschriftung neben Wert (13, halbfett, Grau 600: Feldbeschriftung, Legende, Steckbrief-dt, Balkenbeschriftung) oder Nebenwert (13: Zeilenaktion, Leerzustand-Text, Einheit, Unterzeile) geworden. **Sechs Stufen**, und `tests/test_gestaltung.py` haelt genau diese sechs fest. */ --fb-text-xs: 0.75rem; /* 12px - Beschriftung ueber Daten, Kuerzel, Badges */ --fb-text-s: 0.8125rem; /* 13px - Beschriftung neben Wert, Nebenwert */ --fb-text-l: 0.9375rem; /* 15px - Text und Wert, Leitwert */ --fb-text-xl: 1.0625rem; /* 17px - Panel-Titel, Formularabschnitt, Marke */ --fb-text-2xl: 1.375rem; /* 22px - Seitentitel, Name im Akten-Kopf */ --fb-text-3xl: 1.5rem; /* 24px - die eine grosse Zahl (Kennzahl, Saldo) */ /* Zeilenhoehen: eng fuer Ueberschriften und Tabellenzellen, normal fuer alles, was gelesen statt ueberflogen wird. */ --fb-leading-tight: 1.25; --fb-leading: 1.5; /* --- Laufweite (03.09.2026) ------------------------------------------------ Zwei Werte, beide mit Grund: **Gross laeuft zu weit.** Die Schrift ist fuer Fliesstext gezeichnet; ab 22px wirken die Abstaende zwischen den Buchstaben zu gross, und die Ueberschrift zerfaellt in Einzelzeichen statt ein Wortbild zu ergeben. `--fb-tracking-eng` nimmt 1,5 % zurueck - unter 22px waere das falsch herum, dort braucht Schrift eher mehr Luft. **Klein und versal braucht Luft.** Spaltenkoepfe und Kachelmarken stehen in 12px Versalien; ohne Sperrung kleben sie zusammen. Beides ist derselbe Gedanke aus zwei Richtungen: Die Laufweite folgt der Groesse. */ --fb-tracking-eng: -0.015em; --fb-tracking-weit: 0.04em; /* --- Bewegung ------------------------------------------------------------- Zwei Dauern und zwei Kurven, mehr braucht eine Verwaltungsanwendung nicht. `--fb-ease` ist die Robert-Penner-Kurve `cubic-out` aus Open Props (cubic-bezier(.215,.61,.355,1)): schneller Anlauf, langer Auslauf. Genau das laesst eine Oberflaeche "reagierend" wirken statt traege - und es ist die Kurve, die Sven am 02.09.2026 ausgesucht hat. `--fb-ease-inout` (Open Props `ease-in-out-3`) ist fuer Zustaende, die kommen *und* gehen - ein Aufklappen etwa. Ein reines ease-out wirkt dort beim Schliessen abgehackt. */ --fb-dauer-schnell: 120ms; --fb-dauer: 200ms; --fb-ease: cubic-bezier(0.215, 0.61, 0.355, 1); --fb-ease-inout: cubic-bezier(0.5, 0, 0.5, 1); --fb-accent: #2f6690; --fb-accent-dark: #24506f; --fb-accent-tint: #e8f1f6; --fb-success: #2f8f5b; --fb-success-tint: #e7f5ec; --fb-warning: #b87a11; --fb-warning-tint: #fbf1df; /* **Dieselbe Aussage, aber lesbar** (02.09.2026, zweite Durchsicht). Die Toene oben sind Flaechenfarben: als 13px-Schrift auf ihrem eigenen Tint kamen sie auf 3,59:1 (gruen) und 3,22:1 (amber) - WCAG AA verlangt 4,5. Nachgemessen, nicht geschaetzt; die Rechnung steht in `tests/test_gestaltung.py`. Diese beiden nur fuer *Text* benutzen, die obigen weiter fuer Flaechen, Raender und Balken (grosse Zahlen ab 24px duerfen bei 3:1 bleiben und tun es auch). */ --fb-success-text: #246f47; --fb-warning-text: #8a5a0b; --fb-danger: #b5615a; --fb-danger-tint: #fbeae8; --fb-gray-50: #f7f8f9; --fb-gray-100: #eef0f2; --fb-gray-200: #e2e5e8; /* **Fehlte bis zum 02.09.2026** und wurde trotzdem zweimal benutzt: Die Marken der Merklisten waren dadurch unsichtbar (`background` ohne Wert), und der Rahmen einer klickbaren Kachel fiel beim Zeigen auf `currentColor` zurueck - ein harter dunkler Kasten. Beides im Standbild nicht zu sehen. `tests/test_gestaltung.py` prueft seither, dass jedes benutzte Token auch definiert ist. */ --fb-gray-300: #d3d8dd; --fb-gray-400: #9aa1a9; --fb-gray-600: #5b6570; --fb-gray-800: #2b323a; /* --- Marke (Fassung C, entschieden am 03.09.2026) ------------------------ **Blau handelt, Teal markiert.** Alex' Logo-Entwurf (docs/marke/) lebt von zwei Farben: Das Dunkelblau traegt die Wortmarke, das Teal ist Schwung, Endung und Linie - ein Akzent, keine Arbeitsfarbe. Uebertragen: Knoepfe, Links, Reiter und Fokus bleiben `--fb-accent` (Blau); das Teal sitzt nur dort, wo die Marke steht - Zeichen und aktiver Punkt in der Sidebar, Gruppenband, Kopflinie der Akte, Zeichen auf der Anmeldeseite. Damit loesen sich beide Messungen aus `gui_review_stufe3.md` ohne Verbiegung: Teal steht nie als Text auf Weiss (4,0 : 1 reichte nicht), und es steht nie neben einem Fortschrittsbalken, weil es keinen Knopf traegt - "Gruen heisst erfuellt" bleibt eindeutig. Drei Werte nach der Dreier-Regel der Statusfarben: Flaeche, Tint, Text. `--fb-marke` auf `--fb-sidebar`: 4,56 : 1 (vorher stand dort das Blau mit 2,55 - unter den 3 : 1, die WCAG 1.4.11 fuer Bedienzeichen verlangt). `--fb-marke-text` auf `--fb-marke-tint`: 6,21 : 1. Beides in `tests/test_gestaltung.py`. Die Sidebar traegt das Navy des Entwurfs. */ --fb-marke: #1b8d8f; --fb-marke-text: #136364; --fb-marke-tint: #e6f4f4; --fb-sidebar: #0b1621; --fb-sidebar-hover: #17242f; --fb-sidebar-text: #b7bfc7; --fb-overlay: rgba(11, 22, 33, 0.55); /* --- Erhebung ------------------------------------------------------------- Drei Stufen statt einer. Bisher gab es nur `-lg` fuer Overlays; Flaechen lagen alle randgleich auf dem Hintergrund und wurden ueber Rahmen getrennt. Rahmen sind das lautere Mittel - Schatten trennen leiser. Die Werte sind bewusst kalt und flach (kein weiches Grau, sondern das Sidebar-Blau mit wenig Deckung): So bleibt die Flaeche ruhig, statt zu schweben. */ --fb-shadow-1: 0 1px 2px rgba(27, 36, 48, 0.06); --fb-shadow-2: 0 2px 8px -2px rgba(27, 36, 48, 0.1); --fb-shadow-lg: 0 20px 40px -12px rgba(27, 36, 48, 0.35); /* --- Flaechenrollen (03.09.2026) ------------------------------------------ **Drei Rezepte fuer dieselbe weisse Flaeche** waren der Befund der zweiten Sicht: `.fb-panel` Rahmen ohne Schatten, `.fb-kachel` Rahmen **plus** Schatten, `.fb-kennzahl` und `.fb-leer` Rahmen ohne Schatten, `.fb-form` noch einmal dasselbe von Hand. Vier Stellen, an denen jemand entscheiden musste, wie eine Flaeche aussieht - und drei verschiedene Antworten. Jetzt gibt es **eine** Antwort, und sie steht hier: * **Flaeche** - liegt direkt auf der Seite: `--fb-flaeche` mit Rahmen und `--fb-flaeche-schatten`. Panel, Kachel, Kennzahl, Formular, Leerzustand. * **Innen** - steht *in* einer Flaeche: `--fb-flaeche-innen`, **kein** Rahmen, kein Schatten, kleinerer Radius. Tabellenkopf, Tagespensum, Kuerzel-Pille, kleiner Leerzustand. * **Schwebend** - liegt *ueber* der Seite: `--fb-shadow-lg`. Dialog, Combobox-Liste. **Flaeche in Flaeche wird eingelassen, nie erhoben** - weiss auf weiss mit Rahmen ist der Kasten im Kasten. Und `--fb-shadow-2` gibt es nur im `:hover` von etwas Klickbarem; nichts Ruhendes bekommt mehr als `--fb-flaeche-schatten`. **Warum der Schatten ein eigenes Token ist:** Ob Flaechen einen tragen, ist **eine** Entscheidung fuer alle - und sie faellt am Bild, nicht am Argument. Steht sie hier, kostet ein Wechsel eine Zeile statt fuenf. **Entschieden am 03.09.2026 (Sven): `none`.** Zwei Fassungen standen dafuer gleich breit nebeneinander (Wegwerfseite `/stil/flaechen`, mit der Entscheidung geloescht - dasselbe Verfahren wie bei den drei Fassungen des Akten-Kopfes). Nachgesehen waren sie kaum zu unterscheiden: 1px Versatz bei 6 % Deckung. **Ein Effekt, den man suchen muss, ist keiner** - und er kostete fuenf Flaechen einen zusaetzlichen Malvorgang. Es ist ausserdem die kleinere Bewegung gegenueber dem Bestand: Panel, Formular, Kennzahl und Leerzustand hatten noch nie einen Schatten, nur die Kachel. **Bleibt umkehrbar:** `var(--fb-shadow-1)` hier, und alle Flaechen tragen ihn wieder. */ --fb-flaeche-grund: var(--fb-gray-50); --fb-flaeche: #fff; --fb-flaeche-innen: var(--fb-gray-50); --fb-flaeche-rand: var(--fb-gray-200); --fb-flaeche-schatten: none; /* --- Formular --------------------------------------------------------------- Ein Abstand fuer jeden Abschnitt in jeder Maske (Sauberkeitscheck, 03.09.2026). Vorher entschied jede Maske selbst, und die Fahrschueler- Maske gab je Abschnitt rund 90px aus - so viel wie ihre Felder. */ --fb-abschnitt-abstand: var(--fb-space-5); /* --- Ebenen --------------------------------------------------------------- Zwei `z-index`-Werte gibt es, und genau bei zwei entsteht sonst der dritte mit 999 (Open-Props-Gegenpruefung, vierte Durchsicht). Schwebend liegt ueber der Seite (Combobox-Liste), der Dialog ueber allem. */ --fb-ebene-schwebend: 10; --fb-ebene-dialog: 100; /* --- Radien --------------------------------------------------------------- `-sm` ist neu, fuer kleine Flaechen (Badge, Kuerzel), auf denen 6px schon rund wirken. */ --fb-radius-sm: 4px; --fb-radius: 6px; --fb-radius-lg: 12px; --fb-font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* **Kennungen** - Kennzeichen, Rechnungsnummer, IBAN, Kuerzel. Fahrbase ist voll davon, und sie werden **abgetippt oder vorgelesen**, nicht gelesen: Eine Schreibmaschinenschrift sagt genau das, und ihre feste Laufweite macht 0/O und 1/l/I unterscheidbar - bei einer IBAN kein Schoenheitsfehler. **Seit dem 03.09.2026 IBM Plex Mono, selbst gehostet** - vorher der Systemstack (SF Mono, Consolas, DejaVu), also auf jedem Rechner eine andere Schrift. Plex Mono ist auf Plex Sans abgestimmt: gleiche x-Hoehe, gleiche Kapitaelchenhoehe, kein Groessenausgleich mehr noetig. **Vorsicht bei langen Kennungen:** Monospace laeuft breiter als die Grundschrift (Durchschnittsbreite 0,60 gegen 0,53 em). Wo eine Kennung in einer engen Spalte steht, vorher nachsehen. */ --fb-font-kennung: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }