/* bulung.css · v1 · 2026-10-01 · sha256 1af769b9f5a4e585a92d602559a083ea624b02d243640bb3b44489c02d70f54e */ /* Erzeugt von baue.mjs. NICHT von Hand aendern — die naechste Erzeugung ueberschreibt jede Handarbeit, und der Waechter meldet sie vorher. */ /* ── tokens/colors.css ───────────────────────────────────────────────── */ /* Bulung Logistics — Farben ========================================================================== Quelle der Markenfarben ist das CI-Booklet von dotsandlines, Seite 6. Dort stehen sie woertlich: Bulung Green #a2c629 (RAL 120 70 70, Pantone 2299 C), Ocean Blue #040c2c (RAL 5011, Pantone 534 C). Waehrend der Aufraeumarbeit am 2026-08-29 waren DREI verschiedene Gruens im Umlauf (#a2c629 in den Token, #a1c52b im Vektorlogo, #94cc4e in den PNG-Assets). Es gilt genau eines: #a2c629. ZWEI REGISTER. Hell steht auf :root, Dunkel unter [data-register="dunkel"]. Beide tragen DIESELBEN Namen mit anderen Werten — das ist die Bedingung dafuer, dass Penpot sie als zwei Token-Themes fuehren kann. Achtung: bulung-at-dashboard und bulung-daily-report drehen das um (dunkel ist dort der Grundzustand, hell die Ausnahme). Die WERTE sind dieselben. ALLE KONTRASTE SIND GERECHNET, NICHT GESCHAETZT — `node tokens/kontrast.mjs` rechnet sie nach. Wer hier einen Wert aendert, laesst das Skript laufen. ========================================================================== */ :root { /* ---- Marke (registerneutral, aus dem CI-Booklet) ---- */ --green: #a2c629; /* Bulung Green — RAL 120 70 70 · Pantone 2299 C */ --navy: #040c2c; /* Ocean Blue — RAL 5011 · Pantone 534 C */ --grey-dark: #8a8b8b; /* CI "Dark Grey" · RAL 9005 */ --grey-light: #f0f0f1; /* CI "Light Grey" */ --white: #ffffff; /* Das CI nennt --grey-dark "Font Color". Auf Weiss traegt es 3,42 : 1 und faellt damit durch 1.4.3. Es ist hier eine DEKORFARBE (Linien, Symbole, ausgegraute Flaechen). Fuer Text steht --text-muted bereit. */ /* ---- Marke abgeleitet ---- */ --navy-light: #0a1540; /* navy aufgehellt, Hover auf Navy */ --navy-hover: #1b2758; /* Hover des Hauptknopfs — sichtbar heller als Navy, Weiss darauf 14,2 : 1 */ --green-hover: #93b622; /* im Hellregister geht Hover nach UNTEN */ --green-deep: #6f9018; /* dunkle Kante fuer Balken und Ringe */ --green-light: rgba(162, 198, 41, 0.14); /* leiser Gruenschleier */ --green-medium: rgba(162, 198, 41, 0.26); /* mittlerer Gruenschleier */ /* ---- Gruen als TINTE ---- #a2c629 auf Weiss sind 1,97 : 1. Als Text, Symbol oder Fokusring ist die Markenfarbe damit unbrauchbar. Diese zwei Werte sind der Ersatz; sie stammen aus bulung-at-dashboard/src/app.css und sind dort nachgerechnet. */ --green-ink: #3f6a0f; /* Gruen als Text/Symbol — 6,40 : 1 auf Weiss */ --green-ink-hover: #35590c; /* dessen Hover */ --focus-ring: #3d6205; /* Fokusring — 7,12 : 1 auf Weiss */ /* ---- Flaechenleiter (7 Stufen) ---- Die Reihenfolge ist die Auskunft: eingelassen -> Grund -> Papier -> Bedienflaeche -> Hover -> Ueberlagerung. SEIT DEM 23.09.2026 NEUTRAL STATT BLAUSTICHIG. Die alte Leiter (#e8ecf4, #e4ebfa …) legte einen hellblauen Schleier ueber jede Flaeche; neben Ocean Blue als Schrift wirkte das Ganze wie eingefaerbt statt wie Papier. Die neue Leiter ist ein kuehles Grau mit einem Hauch Blau (der Blauanteil liegt je Stufe 2-3 Punkte ueber Rot) — genug, um mit Navy verwandt zu sein, zu wenig, um als Farbe gelesen zu werden. */ --fl-rail: #ffffff; /* Navigation — Papier, von der Arbeitsflaeche durch die Kante getrennt */ --fl-0: #f6f7f9; /* Arbeitsgrund unter den Karten */ --fl-well: #f9fafb; /* eingelassen: Tabellenkopf, Bahnen, Kartenfuss */ --fl-1: #ffffff; /* Karte, Panel — das Papier */ --fl-2: #f4f5f8; /* Bedienflaeche: Chip, Werkzeugleiste */ --fl-3: #eef0f4; /* Hover, Auswahl, aktive Zeile */ --fl-over: #ffffff; /* echte Ueberlagerung: Drawer, Popover, Modal */ /* ---- Flaechen, die Bauteile benutzen (Aliasse auf die Leiter) ---- */ --bg: #f4f5f7; /* Seitengrund der Website- und Folienwelt */ --surface: var(--fl-1); --surface-alt: #fafbfc; /* Zebrastreifen, Einlassungen */ /* ---- Text ---- */ --text: #040c2c; /* = navy */ --text-secondary: #5a6578; /* 5,89 : 1 auf Weiss */ --text-muted: #6b7083; /* 4,92 : 1 auf Weiss, 4,51 : 1 auf --bg */ --text-on-dark: #ffffff; --text-on-dark-soft: rgba(255, 255, 255, 0.85); --ink-on-green: var(--navy); /* Schrift auf einer gruenen Flaeche */ /* ---- Kanten ---- --border ist die Haarlinie zwischen Zeilen und Karten; sie darf leise sein. --border-strong ist der Rand eines BEDIENELEMENTS (Eingabefeld, Auswahlfeld, Kontrollkaestchen) und traegt die 3 : 1 aus 1.4.11. */ --border: #e4e6eb; /* 1,25 : 1 — bewusst dekorativ */ --border-light: #eef0f3; --border-strong: #898d9c; /* 3,31 : 1 auf Weiss, 3,03 : 1 auf --bg */ --border-hover: #707487; /* 4,63 : 1 — beim Ueberfahren wird die Kante STAERKER */ /* ---- Zustaende ---- */ --state-hover: var(--fl-3); --state-selected: var(--green-light); --state-disabled-bg: #f1f3f7; --state-disabled-ink: #8b90a0; /* nur fuer ausgegrauten Text */ --state-focus: var(--focus-ring); /* ---- Semantische Zustandsfarben (Badge, Toast, Hinweisband) ---- */ --status-info-bg: #dbeafe; --status-info-fg: #1e40af; --status-info-dot: #2563eb; --status-warn-bg: #fef9c3; --status-warn-fg: #854d0e; --status-warn-dot: #ca8a04; --status-success-bg: #eef4e1; /* seit 2026-09-23 deckend: der Lindschleier las sich als Neonstift */ --status-success-fg: #3d5a00; --status-success-dot: #a2c629; --status-error-bg: #fee2e2; --status-error-fg: #991b1b; --status-error-dot: #ef4444; --status-neutral-bg: #f1f5f9; --status-neutral-fg: #475569; --status-neutral-dot: #94a3b8; /* ---- Auftragsstatus (fachlich, Order Portal) ---- NICHT dasselbe wie die semantischen Zustaende oben. Diese elf beschreiben, wie weit ein Auftrag ist, und sie sind eine LEITER, keine Sammlung: Arbeit noetig -> blau (hereingekommen) · cyan (im ERP offen) · gold (verschoben) erledigt -> Bulung-Gruen (zugesagt) · Teal (unterwegs) · grau (fertig) auffaellig -> rot, und nur das Wer eine Farbe aendert, muss die Reihenfolge mitdenken. Quelle: order-portal/static/styles.css. Sie gelten nur im HELLEN Register — das Order Portal ist hell, eine dunkle Fassung waere erfunden. */ --auftrag-empfangen-bg: #dbeafe; --auftrag-empfangen-fg: #1e40af; --auftrag-empfangen-dot: #3b82f6; --auftrag-offen-bg: #cffafe; --auftrag-offen-fg: #155e75; --auftrag-offen-dot: #0891b2; --auftrag-aktualisiert-bg: #fcd34d; --auftrag-aktualisiert-fg: #78350f; --auftrag-aktualisiert-dot: #b45309; --auftrag-organisiert-bg: rgba(162, 198, 41, 0.15); --auftrag-organisiert-fg: #3d5a00; --auftrag-organisiert-dot: #a2c629; --auftrag-disponiert-bg: #d1fae5; --auftrag-disponiert-fg: #065f46; --auftrag-disponiert-dot: #10b981; --auftrag-entladen-bg: #f1f5f9; --auftrag-entladen-fg: #475569; --auftrag-entladen-dot: #94a3b8; --auftrag-reklamation-bg: #fee2e2; --auftrag-reklamation-fg: #991b1b; --auftrag-reklamation-dot: #ef4444; --auftrag-erledigt-bg: #e2e8f0; --auftrag-erledigt-fg: #334155; --auftrag-erledigt-dot: #64748b; --auftrag-neu-bg: #dcfce7; --auftrag-neu-fg: #166534; --auftrag-neu-dot: #22c55e; --auftrag-default-bg: #f1f5f9; --auftrag-default-fg: #475569; --auftrag-default-dot: #94a3b8; /* ALTBESTAND: `positioniert` wird seit 2026-08-27 nie mehr geschrieben, steht aber in der Historie und an Auftraegen, die das Gateway gerade nicht beantworten kann. Nicht fuer Neues verwenden. */ --auftrag-positioniert-bg: rgba(162, 198, 41, 0.15); --auftrag-positioniert-fg: #3d5a00; --auftrag-positioniert-dot: #a2c629; /* ---- Gefahr ---- */ --danger: #c62828; /* 5,62 : 1 auf Weiss — #ef4444 traegt nur 3,76 */ --danger-hover: #a91d1d; --danger-surface: #ef4444; /* nur als FLAECHE, nie als Text auf Weiss */ /* ---- Signaturlinie: 3 px, gruen -> navy ---- Penpot kennt keinen Token-Typ `gradient`. Dieser Wert kommt beim Import NICHT mit und steht in tokens/penpot/pruefe.mjs als bewusste Auslassung. */ --gradient-accent: linear-gradient(90deg, var(--green) 0%, var(--navy) 100%); /* ---- Glas, leise (HR-Portal, seit 28.09.2026) ---- Zweite Fassung. Die erste (Farbgrund 0,32, vier Flecken, bunte Verlaeufe fuer Kacheln und Initialen) las sich als KI-Vorlage und ist am selben Tag entfallen; ganz ohne Glas war das Portal „zu langweilig". Diese Fassung halbiert den Farbgrund und kennt nur zwei Verlaeufe (Rail, Anmeldung). Bunte Verlaeufe fuer Kacheln, Symbole oder Initialen gibt es NICHT. LESBARKEIT: der Farbgrund ist so schwach, dass `--text-muted` auch DIREKT auf dem Kern des kraeftigsten Flecks 4,5 : 1 traegt (gruen: Mischfarbe ~ #eff5dd). Auf Glas (78 % Weiss) sowieso. */ --glass-fl: rgba(255, 255, 255, 0.78); /* Karte, Tabelle, Kachel */ --glass-fl-stark: rgba(255, 255, 255, 0.86); /* Kopfzeile, Tafel, Menue: liegt ueber rollendem Text */ --glass-fl-zart: rgba(255, 255, 255, 0.5); /* eingelassene Flaeche auf Glas */ --glass-licht: rgba(255, 255, 255, 0.9); /* helle Innenkante: die „Glaskante" */ --glass-rand: rgba(4, 12, 44, 0.08); /* aeussere Haarlinie um Glas */ --glass-dunkel-rand: rgba(255, 255, 255, 0.1); /* Kante der Navy-Rail */ --aura-gruen: rgba(162, 198, 41, 0.16); --aura-blau: rgba(37, 99, 235, 0.09); --aura-tuerkis: rgba(8, 145, 178, 0.09); /* Rail: Navy mit leichter Tiefe nach unten. Weiss darauf: 17,17 / 19,19 / 17,78. */ --verlauf-rail: linear-gradient(180deg, #0b1745 0%, #040c2c 55%, #041a26 100%); /* Schild der Anmeldung. Weiss: 19,19 / 15,31 / 10,01. */ --verlauf-held: linear-gradient(120deg, #040c2c 0%, #0b1f5e 55%, #0e4a4a 100%); } /* ========================================================================== DUNKELREGISTER Zwei von drei laufenden Apps sind dunkel. Bis zum 2026-08-29 hatte das Design-System dafuer keinen einzigen Wert. Diese Leiter stammt aus bulung-at-dashboard/src/app.css und laeuft dort seit dem 10.08.2026. Nachgerechnet auf --fl-1: Text 14,50 · Text sekundaer 7,90 · Text leise 5,54 · Gruen als Text 9,19. ========================================================================== */ [data-register="dunkel"] { --navy-light: #16224a; --navy-hover: #22305e; --green-hover: #b4d838; /* im Dunkelregister geht Hover nach OBEN */ --green-deep: #8bab1f; --green-light: rgba(162, 198, 41, 0.13); --green-medium: rgba(162, 198, 41, 0.22); /* Auf dunklem Grund traegt die Markenfarbe selbst 9,19 : 1 — die Ersatztinte des Hellregisters wird hier NICHT gebraucht. */ --green-ink: var(--green); --green-ink-hover: var(--green-hover); --focus-ring: var(--green); --fl-rail: #070c20; --fl-0: #060b1c; --fl-well: #080f28; --fl-1: #0c1430; --fl-2: #121b3d; --fl-3: #18234c; --fl-over: #1b2757; --bg: var(--fl-0); --surface: var(--fl-1); --surface-alt: var(--fl-well); --text: #dfe6f7; --text-secondary: rgba(223, 230, 247, 0.72); --text-muted: rgba(223, 230, 247, 0.58); --text-on-dark: #dfe6f7; --text-on-dark-soft: rgba(223, 230, 247, 0.6); --ink-on-green: var(--navy); --border: rgba(150, 175, 240, 0.22); --border-light: rgba(150, 175, 240, 0.12); --border-strong: rgba(150, 175, 240, 0.52); /* 3,16 : 1 auf --fl-1 */ --border-hover: rgba(150, 175, 240, 0.70); /* 4,72 : 1 auf --fl-1 */ --state-hover: var(--fl-3); --state-selected: var(--green-light); --state-disabled-bg: rgba(150, 175, 240, 0.08); --state-disabled-ink: rgba(223, 230, 247, 0.4); --status-info-bg: rgba(59, 130, 246, 0.18); --status-info-fg: #93c5fd; --status-info-dot: #3b82f6; --status-warn-bg: rgba(202, 138, 4, 0.20); --status-warn-fg: #fcd34d; --status-warn-dot: #ca8a04; --status-success-bg: rgba(162, 198, 41, 0.18); --status-success-fg: #cfe17f; --status-success-dot: #a2c629; --status-error-bg: rgba(239, 68, 68, 0.20); --status-error-fg: #fca5a5; --status-error-dot: #ef4444; --status-neutral-bg: rgba(150, 175, 240, 0.12);--status-neutral-fg: #a8b3cc; --status-neutral-dot: #94a3b8; --danger: #fca5a5; --danger-hover: #f87171; --danger-surface: #ef4444; } /* ── tokens/typography.css ───────────────────────────────────────────── */ /* Bulung Logistics — Typografie ========================================================================== Aus dem CI-Booklet, Seite 7: HEADLINE / SUBHEADLINE Basier Circle Bold, Zeilenhoehe = Schriftgrad x 1,2 CAPTION Jost Semi, Sperrung 200 (= 0.2em), Grossbuchstaben COPY TEXT Jost Book, Zeilenhoehe = Schriftgrad x 1,6 CALL TO ACTION Jost Book, Grossbuchstaben und unterstrichen ZAHLEN BRAUCHEN EINE EIGENE SCHRIFT. In Tabellen, Kennzahlen und Betraegen muessen Ziffern untereinander stehen. Dafuer gibt es --font-mono (IBM Plex Mono) und --num-tabular; das Design-System hatte dafuer bis zum 2026-08-29 kein Token, waehrend die Produktion es seit Monaten benutzt. Basier Circle ist eine KOMMERZIELLE Schrift (Atipo Foundry). Sie liegt hier als OTF, weil dotsandlines sie mit dem CI geliefert hat. Sie darf NICHT oeffentlich ausgeliefert werden, ohne dass die Lizenz das deckt — siehe readme.md, Abschnitt Lizenzen. Jost und IBM Plex Mono stehen unter der SIL Open Font License und sind frei. ========================================================================== */ :root { /* ---- Familien ---- */ --font-display: "Basier Circle", "Jost", -apple-system, BlinkMacSystemFont, sans-serif; --font-body: "Jost", -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* DIE SCHRIFT DER ARBEITSFLAECHEN — seit 2026-10-01 Inter (Ansage Auftraggeber: „professionelles B2B-Enterprise-Gefuehl"). Jost ist eine Markenschrift: rund, geometrisch, mit kleiner x-Hoehe. Auf einer Seite, die man EINMAL liest, traegt sie die Marke; bei 14 px in einer Tabelle, die man den ganzen Tag liest, wirkte sie duenn und unruhig. Inter ist fuer genau diese Groesse gezeichnet. Die Marke bleibt in Logo, Signet, Farbe und auf Website und Folien (--font-body/-display). Die Basis schaltet Inter mit `cv11` (einstoeckiges a) — das holt etwas von der Geometrie der Marke in die Arbeitsschrift. */ --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* ZIFFERN IN DER OBERFLAECHE — seit 2026-10-01 Inter (vorher Jost, davor Plex Mono). Inter traegt eigene Tabellenziffern (`tnum`). `--font-mono` bleibt fuer das, was wirklich Code ist: Pfade, Pruefsummen, Kennungen. */ --font-num: var(--font-ui); /* ---- Schnitte ---- */ --fw-light: 300; /* @kind font */ --fw-book: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ --fw-semi: 600; /* @kind font */ --fw-bold: 700; /* @kind font */ /* ---- Groessenskala ---- Zwei Skalen, weil zwei Welten: die Marketing-Welt (Website, Folien) liest man einmal, die Arbeitsflaechen (Portale, Dashboards) den ganzen Tag. Wer die Lesefassung auf eine Tabelle legt, bekommt halb so viele Zeilen ins Bild. */ --fs-caption: 12px; /* Etiketten, Bildunterschriften — Grossbuchstaben */ --fs-meta: 13px; /* Meta, Kleingedrucktes */ --fs-body: 16px; /* Grundtext */ --fs-lg: 18px; --fs-h3: 20px; --fs-h2: 25px; --fs-h1: 33px; --fs-display: 48px; /* Aufmacher */ --fs-display-lg: 64px; /* Arbeitsflaechen — dichter. Gemessen an den laufenden Portalen. */ --fs-app-micro: 12px; /* Spaltenkopf. 2026-10-01: 11 -> 12, Inter in normaler Schreibung statt Jost in Versalien */ --fs-app-caption: 12px; --fs-app-body: 14px; /* Tabellenzelle, Formularfeld */ --fs-app-lg: 15px; --fs-app-h3: 16px; /* 2026-10-01: 17 -> 16 mit Inter (groessere x-Hoehe) */ --fs-app-h2: 18px; /* 2026-10-01: 20 -> 18 */ --fs-app-h1: 24px; /* 2026-09-25: 26 -> 30; 2026-09-27: 30 -> 28; 2026-10-01: 28 -> 24 mit Inter — Enterprise-Seitentitel sind ruhig, die Rangfolge kommt aus Gewicht und Sperrung */ --fs-app-kpi: 28px; /* die Zahl einer Kennzahlkachel; 2026-09-27: 30 -> 24; 2026-09-28: 24 -> 28, seit die Zahl auf eigener Kachel steht und neben 12-px-Etikett eine Stufe Abstand braucht (HR-Portal) */ /* ---- Zeilenhoehen ---- */ --lh-display: 1.2; /* @kind font — CI: Schriftgrad x 1,2 */ --lh-heading: 1.25; /* @kind font */ --lh-body: 1.6; /* @kind font — CI: Schriftgrad x 1,6 */ --lh-dense: 1.45; /* @kind font — Tabellen und Formulare. 2026-10-01: 1.35 -> 1.45, Inter braucht bei 14 px rund 20 px Zeile */ /* ---- Sperrung ---- */ --ls-caption: 0.2em; /* @kind font — CI: spacing 200 */ --ls-subhead: 0.12em; /* @kind font — CI: spacing 120 */ --ls-label: 0.04em; /* @kind font */ --ls-tight: -0.02em; /* @kind font — Ueberschriften der Arbeitsflaechen ab 16 px. 2026-10-01: -0.015 -> -0.02 fuer Inter */ /* ---- Ziffern ---- Penpot kennt keinen Token-Typ fuer font-variant-numeric. Der Wert steht hier als CSS-Baustein und ist in tokens/penpot/pruefe.mjs als bewusste Auslassung verzeichnet. */ --num-tabular: tabular-nums; /* @kind other */ } /* ── tokens/spacing.css ──────────────────────────────────────────────── */ /* Bulung Logistics — Abstaende, Groessen, Layout ========================================================================== Registerneutral: diese Werte sind in Hell und Dunkel dieselben. Die Skala hiess bis 2026-08-29 4/8/16/24/32/48/64. Das ist die Skala einer LESEFASSUNG. Die Arbeitsflaechen der Produktion (Order Portal, AT-Dashboard) brauchen dichtere Stufen und benutzten deshalb 2/6/12/20 an den Token vorbei. Diese vier Halbstufen sind jetzt Teil der Skala. ENTFALLEN: --bp-tablet und --bp-mobile. Eine Media Query kann eine Custom Property nicht lesen — `@media (max-width: var(--bp-tablet))` ist ungueltiges CSS und wird vom Browser stillschweigend verworfen. Die zwei Token waren also wirkungslos und haben Sicherheit vorgetaeuscht. Die Haltepunkte stehen als Zahlen in den Media Queries und sind unten als Kommentar verzeichnet. ========================================================================== */ :root { /* ---- Abstandsskala ---- */ --space-2xs: 2px; /* Haarabstand: Symbol zu Text, Punkt zu Etikett */ --space-xs: 4px; /* Abstaende innerhalb einer Zeile */ --space-2s: 6px; /* dichte Werkzeugleisten */ --space-sm: 8px; /* enge Gruppen */ --space-2m: 12px; /* Polster einer Tabellenzelle, Chip */ --space-md: 16px; /* Standardpolster */ --space-2l: 20px; /* Polster einer Arbeitskarte */ --space-lg: 24px; /* Kartenpolster, Abschnittsabstand */ --space-xl: 32px; /* Behaelterpolster, Abstand zwischen Abschnitten */ --space-2xl: 48px; /* grosse Abschnittstrennung */ --space-3xl: 64px; /* ---- Polster ---- */ --pad-card: 24px; --pad-card-dense: 16px; /* Karte auf einer Arbeitsflaeche */ --pad-cell: 12px 16px; /* Tabellenzelle — 2026-09-27 10 → 14 (gedraengt mit Jost); 2026-10-01 → 12 mit Inter und Zeile 1,45: rund 45 px je Zeile */ --pad-container: 32px; --pad-container-mobile: 16px; /* ---- Symbolgroessen ---- Die acht Markenicons sind ILLUSTRATIV (zweifarbig, feine Linien). Unter 20 px verlieren sie ihre gruenen Details. --icon-sm ist fuer Oberflaechensymbole gedacht, nicht fuer die Markenicons. */ --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-brand: 48px; /* Mindestgroesse fuer die acht Markenicons */ /* ---- Layout ---- */ --maxw-text: 72ch; /* Lesebreite eines Fliesstexts */ --maxw-page: 1180px; /* Marketingseiten (Website, Folien) */ --maxw-app: 1840px; /* Arbeitsflaechen mit Tabellen */ --sidebar-w: 232px; /* linke Rail der Anwendungen */ --nav-height: 60px; /* ---- Haltepunkte ---- NUR als Notiz. Sie MUESSEN in der Media Query als Zahl stehen: @media (max-width: 768px) { ... } Haltepunkte des Hauses: 480 · 560 · 768 · 1024 · 1280 · 1440 · 1600 */ } /* ── tokens/effects.css ──────────────────────────────────────────────── */ /* Bulung Logistics — Radien, Schatten, Kanten, Bewegung, Stapelfolge ========================================================================== Radien, Kanten, Bewegung und Stapelfolge sind registerneutral. SCHATTEN NICHT: auf dunklem Grund traegt ein Schatten nichts, weil unter einer dunklen Karte kein Licht fehlt. Die Produktion setzt sie dort auf `0 0 transparent` und arbeitet mit der Flaechenleiter statt mit Hoehe. Genau das steht unten im Dunkelregister. ========================================================================== */ :root { /* ---- Radien ---- */ --radius-xs: 6px; /* Abzeichen — seit 2026-10-01 ein Etikett statt einer Pille */ --radius-sm: 8px; /* Eingabefelder, Knoepfe */ --radius: 12px; /* Karten — auf Karten nicht ueberschreiten */ --radius-lg: 16px; /* Ueberlagerungen, Modale */ --radius-pill: 9999px; /* ---- Schatten (nur zwei Stufen — keine Schattenorgien) ---- */ --shadow-xs: 0 1px 2px rgba(4, 12, 44, 0.05); /* Knopf, Feld, Karte — gerade genug, um zu liegen */ --shadow-sm: 0 1px 3px rgba(4, 12, 44, 0.05); --shadow-md: 0 4px 16px rgba(4, 12, 44, 0.07); --shadow-over: 0 24px 60px -20px rgba(4, 12, 44, 0.3); /* Drawer, Popover */ /* Hauptknopf (seit 2026-10-01): helle Innenkante oben, dichter Schatten unten. Gibt der Navy-Flaeche Koerper, ohne Glanz und ohne Leuchten. */ --shadow-knopf-haupt: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(4, 12, 44, 0.24); /* Weicher Hof um ein fokussiertes Feld, zusaetzlich zur Kante in --focus-ring. Allein traegt er keinen Kontrast — er ist Schmuck. */ --focus-hof: 0 0 0 3px rgba(61, 98, 5, 0.16); /* ---- Kanten ---- */ --border-width: 1px; /* @kind other */ --border-accent-width: 2px; /* @kind other */ --border-row-accent: 3px; /* @kind other — Zeilenbalken links */ /* ---- Fokus ---- Sichtbarer Ring, 2 px, mit 2 px Abstand zum Element. Die Farbe kommt aus --focus-ring (colors.css) und traegt im Hellregister 7,12 : 1. */ --focus-width: 2px; /* @kind other */ --focus-offset: 2px; /* @kind other */ /* ---- Verdunkelung hinter Modalen ---- */ --backdrop: rgba(4, 12, 44, 0.4); --backdrop-blur: 4px; /* @kind other */ /* ---- Glas (seit 28.09.2026, leise Fassung) ---- Die Weichzeichnung fuer schwebende Flaechen (Kopfzeile, Menue, Tafel). Der Glasschatten ist flacher als in der ersten Fassung: 8 statt 12 px Versatz, 0,14 statt 0,22 Deckkraft. Die Karte liegt auf, sie schwebt nicht. Erste Zeile = helle Innenkante oben. */ --glass-blur: 18px; /* @kind other */ --glass-saettigung: 160%; /* @kind other */ --shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 24px -16px rgba(4, 12, 44, 0.14), 0 1px 3px rgba(4, 12, 44, 0.04); /* Leuchtschatten (Glow) gab es hier am 28.09.2026 kurz: am selben Tag wieder entfernt. Ein leuchtender Knopf ist das Erkennungszeichen einer KI-Vorlage, nicht der Marke. */ /* ---- Bewegung (sparsam und funktional) ---- Penpot kennt keine Token-Typen `duration` und `cubicBezier`. Diese vier Werte kommen beim Import NICHT mit; sie stehen als bewusste Auslassung in tokens/penpot/pruefe.mjs. */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --dur-fast: 200ms; /* @kind other */ --dur-mid: 300ms; /* @kind other */ --dur-enter: 400ms; /* @kind other */ /* ---- Chrom ---- */ --accent-line-height: 3px; /* @kind other — Signaturlinie in der Oberflaeche */ --accent-line-slide: 6px; /* @kind other — dieselbe Linie auf einer Folie. Eine Folie ist 1920 px breit und wird projiziert; 3 px sind dort ein Haar. Der Wert stand bis zum 2026-08-29 roh in slides/title-slide.html und widersprach der readme.md, die 3 px behauptete. */ /* ---- Stapelfolge ---- */ --z-nav: 100; /* @kind other */ --z-dropdown: 200; /* @kind other */ --z-backdrop: 900; /* @kind other */ --z-modal: 1000; /* @kind other */ --z-toast: 1100; /* @kind other */ } /* Flach im Dunkelregister — Tiefe kommt dort aus der Flaechenleiter. */ [data-register="dunkel"] { --shadow-sm: 0 0 transparent; --shadow-md: 0 0 transparent; --shadow-knopf-haupt: 0 0 transparent; --shadow-over: 0 24px 60px -20px rgba(0, 0, 0, 0.75); --backdrop: rgba(0, 0, 0, 0.6); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; /* @kind other */ --dur-mid: 0ms; /* @kind other */ --dur-enter: 0ms; /* @kind other */ } } /* ── schrift/auslieferung.css ────────────────────────────────────────── */ /* Bulung — Schriften der Auslieferung ========================================================================== Woertlich uebernommen aus bulung-at-dashboard/src/app.css, wo diese acht Bloecke seit dem 10.08.2026 laufen. NICHT dieselbe Datei wie tokens/fonts.css: die traegt 16 OTF-Bloecke samt Basier Circle (kommerziell) und ist fuer die Schaufensterseiten und Penpot. Hier stehen die acht WOFF2, die eine Anwendung laedt — rund ein Zehntel so gross. Jost ist VARIABEL: `font-weight: 400 700` als Bereich auf EINEM Block statt vier identischer. Kein Gewicht wird synthetisch fett gerechnet. IBM Plex Mono ist statisch, dort je Gewicht eine eigene Datei. INTER seit 2026-10-01: die Schrift der ARBEITSFLAECHEN (--font-ui). Auch variabel, `font-weight: 100 900`. Quelle: npm @fontsource-variable/inter 5.3.0 (Inter 4, rsms), Dateien `inter-latin(-ext)-wght-normal.woff2` unveraendert umbenannt. SIL Open Font License 1.1 wie Jost. ========================================================================== */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; /* Variable Font */ font-display: swap; src: url('/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 400 700; /* Variable Font — eine Datei, alle Gewichte echt */ font-display: swap; src: url('/fonts/jost-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/jost-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/plexmono-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/plexmono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/plexmono-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/plexmono-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/plexmono-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/plexmono-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ── basis/reset.css ─────────────────────────────────────────────────── */ /* Bulung — Reset ========================================================================== Bewusst klein. Ein grosser Reset kaempft mit dem, was eine App schon hat. Hier steht nur, was ueberall gleich sein soll. ALLES unter [data-bulung] — ohne den Schalter aendert sich nichts. ========================================================================== */ [data-bulung] *, [data-bulung] *::before, [data-bulung] *::after { box-sizing: border-box; } [data-bulung] body { margin: 0; } [data-bulung] img, [data-bulung] svg { max-width: 100%; } [data-bulung] button, [data-bulung] input, [data-bulung] select, [data-bulung] textarea { font: inherit; color: inherit; } /* ── basis/typografie.css ────────────────────────────────────────────── */ /* Bulung — Grundtypografie ========================================================================== Die ARBEITSFLAECHEN-Skala, nicht die Lesefassung: Portale und Dashboards werden den ganzen Tag gelesen. Wer die Marketing-Skala auf eine Tabelle legt, bekommt halb so viele Zeilen ins Bild. ========================================================================== */ [data-bulung] body { /* Seit 2026-10-01 die Arbeitsschrift, nicht die Markenschrift — siehe --font-ui in tokens/typography.css. `cv11` = einstoeckiges a. */ font-family: var(--font-ui); font-feature-settings: "cv11"; font-size: var(--fs-app-body); line-height: var(--lh-dense); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } /* Ziffern stehen untereinander. Heute ist das dreifach geloest: IBM Plex Mono in den Svelte-Apps, eine NIE GELADENE JetBrains-Kette im LKW-Portal, gar nichts im Order Portal. */ [data-bulung] .bul-zahl { font-family: var(--font-num); font-variant-numeric: var(--num-tabular); } /* ── basis/fokus.css ─────────────────────────────────────────────────── */ /* Bulung — Fokus ========================================================================== Hier waren sich alle vier Apps SCHON einig: 2 px Strich, 2 px Abstand. Verschieden war nur der Farbname (--green / --fokus / --akzent). Der Ring kostet also nichts ausser einem gemeinsamen Namen. --focus-ring traegt hell 7,12 : 1; dunkel ist es die Markenfarbe (9,93 : 1). ========================================================================== */ [data-bulung] :focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); } [data-bulung] :focus:not(:focus-visible) { outline: none; } /* ── bauteile/tabelle.css ────────────────────────────────────────────── */ /* Bulung — Tabelle ========================================================================== GEERNTET, NICHT KOPIERT. Hauptquelle ist `order-portal/static/styles.css` — die durchgearbeitetste Tabelle des Hauses, gegen 70 echte Auftraege aus der Produktions-DB geeicht. Ihre Regeln liegen dort aber verstreut zwischen Zeile 846 und 2469 und sind mit Fachlichem vermischt. Aus jedem Fund wurde einzeln entschieden: allgemein (kommt mit) oder fachlich (bleibt in der App). IM ZWEIFEL BLEIBT ES DRAUSSEN. Was fehlt, kann die App weiter selbst setzen; was zu viel mitkommt, zwingt allen ihre Eigenheit auf. ZWEITE QUELLE fuer genau eine Sache: `bulung-at-dashboard/src/app.css` (`.tafel`, Zeile 1044 ff.). Das Order Portal hat KEINE Zahlenspalte — die Ziel-API verlangt aber `.bul-zahl`. Rechtsbuendig, Monoschrift und `nowrap` stammen deshalb von dort, wo sie gegen echte Betragsspalten eingestellt wurden. ---- ALLGEMEIN: kommt mit ------------------------------------------------- Quelle (order-portal/static/styles.css), Zeilennummer in Klammern: table (855) Breite 100 %, `border-collapse: collapse`, Grundgrad thead (860) klebender Spaltenkopf th (861) Versalien, Sperrung (0.04em), `nowrap`, linksbuendig, deckender Grund. NICHT der Schriftgrad, NICHT die Haarlinie — beides steht unten unter "Neuentscheidungen". td (1049) Zellpolster, Haarlinie, `vertical-align: middle`, `user-select: text` td (1053-1055) `overflow: hidden` + `text-overflow: ellipsis` — hier NUR im nowrap-Zustand, weil ein Auslassungs- zeichen ohne `nowrap` ohnehin nie erscheint tbody tr (1062) weiche Blende beim Wechsel des Zeilengrunds tbody tr.data-row Hover auf der Zeile. Der Klassenteil `.data-row` :hover (1068) bleibt draussen — er trennt im Order Portal die Datenzeile von der aufgeklappten Detailzeile. th, td (1886/1912) engere Polster auf kleinen Schirmen -> als `--dicht` zu einem AUSDRUECKLICHEN Zustand gemacht, nicht an eine Breite gehaengt (s.u.) td (1876) "unter 1279 px darf wieder umgebrochen werden" -> umgekehrt: umbrechen ist hier der Grundzustand, `--nowrap` ist die Ausnahme (s.u.) .col-fk .fk-kz `font-variant-numeric: tabular-nums` als Regel fuer (2248) Ziffern -> geht in `.bul-zahl` .col-timestamp `white-space: nowrap` + tabellarische Ziffern auf (2469) einer Zahlenspalte -> geht in `.bul-zahl` Dazu aus `.tafel` des AT-Dashboards: .tafel .zahl (1100) rechtsbuendig, Monoschrift, `nowrap` tbody tr:last-child die letzte Zeile traegt keine Haarlinie mehr (1096) .tafel td (1084) `overflow-wrap: anywhere`. Dort woertlich "der groesste Einzelhebel des Audits" — ein langer Firmenname schob die Auftragsliste auf ueber 2000 px. Kommt MIT, weil umbrechen hier der Grundzustand ist und ein einziges langes Wort ohne Leerzeichen sonst genau dasselbe tut. Gemessen, siehe messstand/BEFUND.md. ---- NEUENTSCHEIDUNGEN: steht in der Datei, ist aber NICHT geerbt --------- Was hier steht, hat in der Quelle kein Vorbild oder ein gegenteiliges. Es als Ernte auszugeben waere die teurere Luege: die Aufgaben 6 bis 8 richten sich nach dieser Tabelle. Haarlinie unter Die Quelle setzt dort ausdruecklich dem Kopf `border-bottom: none` (styles.css:873). Sie kann das, weil ihr Kopf NAVY ist — die Farbkante trennt schon. Hier steht der Kopf auf `--fl-well` und liegt damit dicht an der ersten Zeile; ohne Linie verschwimmt die Grenze. Die Linie ist also die FOLGE der Kopffarbe, nicht ihre Ernte. Kopf 11 px Die Quelle hat 12 px (`0.75rem`, styles.css:867). Die 11 kommen aus `--fs-app-micro` und aus der Ziel-API dieser Aufgabe. Der Satz "jedes Zehntel kostet Spaltenbreite" ist aus der Quelle geerbt, die ZAHL nicht. Kopf Gewicht 600 Die Quelle hat 500 (styles.css:866) — auf Navy mit weisser Schrift. Auf der hellen `--fl-well` traegt 500 zu wenig; 600 ist der Wert, den das AT-Dashboard fuer denselben hellen Kopf benutzt. Kopffarbe Weder das Weiss der Quelle (Navy-Kopf) noch das --text-secondary naheliegende `--text-muted`: letzteres traegt auf `--fl-well` nur 4,15 : 1 und faellt durch 1.4.3. Gerechnet, siehe unten. Auswahlbalken Die Quelle loest den Zeilenbalken als absolut (box-shadow: inset) gesetztes `::after` an `tr[data-updated]` (styles.css:1282) und braucht dafuer `position: relative` an der Zeile. Hier ein eingesetzter Schatten in der ersten Zelle — die Begruendung steht an der Regel selbst. Zustandsnamen `--dicht` und `--nowrap` als ausdrueckliche Zustaende gibt es in keiner der beiden Quellen; dort haengen dieselben Werte an Media Queries. ---- FACHLICH: bleibt in der App ------------------------------------------ .table-card (846) eine KARTE, kein Tabellenteil. Kommt in Aufgabe 8. .table-wrapper (852) der Rollkasten. Er gehoert dem Layout der App: wer die Tabelle in eine Karte legt, entscheidet selbst, ob und wo gerollt wird. Siehe die Notiz zum klebenden Kopf weiter unten. th:hover (878) die Koepfe des Order Portals SIND Knoepfe (Sortierung). Eine Tabelle ohne Sortierung haette damit einen Kopf, der auf Beruehrung reagiert, ohne dass etwas passiert. th cursor/user-select dito — Folge derselben Sortierung. (871/872) th .sort-icon (879) Sortiersymbol, Bauteil der App. th.sorted (886) dito. th Grund navy (862) EINE Hausfarbe, keine Systemregel: das Order Portal setzt den Kopf auf Navy mit weisser Schrift, das AT-Dashboard auf die helle Flaeche. Das System nimmt `--fl-well` — der Token nennt den Tabellenkopf woertlich als seinen Zweck. .detail-row (1161) aufklappbare Detailzeile — ein Verhalten, kein Aussehen. .detail-row > td (1061) dito. .detail-row td (1162) dito, samt der beiden `!important`. tbody tr.data-row Zebra ueber `4n+1`: die 4 kommt daher, dass auf :nth-child(4n+1) jede Datenzeile eine Detailzeile folgt. Ein (1065) fremder Rhythmus in einer fremden Tabelle. ZEBRA KOMMT AUCH SONST NICHT MIT — die Hausvorgabe fuer Arbeitsflaechen ist die ruhige Flaeche mit Haarlinien, nicht der Streifen. tr[data-updated] … die ganze Statusleiter (1270-1312): elf Auftragszustaende des Order Portals. Fachlich bis in die Farbwerte. tr.data-row.row-updated Blinken nach einer Aktualisierung (1510). .col-fk und Kinder Fraechter/Kennzeichen, zweizeilige Zelle (2220-2258) (2220-2258). #orderTable td die zwei Breitendeckel (2282/2283). Sie sind an .col-frachtraum genau zwei Datenbestaende geeicht. .col-stadt .kopier und Kinder Kopierknopf (2309-2360). .col-timestamp .ts-* Datum/Uhrzeit einer bestimmten Spalte (2476/2481) (2476/2481). Spaltenstaffel `nth-child(3|6|7|8|9)` in fuenf Media Queries (1861-2068) (1861-2068). Sie zaehlt die Spalten des Order Portals ab. In einer fremden Tabelle blendet sie die falsche Spalte aus, und kein Testtor sieht es. .skel-* (1413-1444) Ladeattrappe. ---- ZWEI UMKEHRUNGEN GEGENUEBER DER QUELLE ------------------------------- 1. `nowrap` ist im Order Portal der Grundzustand und wird unter 1280 px zurueckgenommen. Hier ist es umgekehrt: `--nowrap` muss angefordert werden. Grund: `nowrap` traegt nur, solange die Summe der natuerlichen Spaltenbreiten in den Behaelter passt — das Order Portal garantiert das mit seiner Spaltenstaffel, die hier fachlich bleibt. Ohne die Staffel waere `nowrap` als Vorgabe eine waagerechte Rollleiste ab der ersten langen Zelle, und eine Spalte hinter der Kante sieht man nicht. 2. Das engere Polster haengt an `--dicht`, nicht an einer Bildschirm- breite. Eine Media Query im System entschiede fuer alle vier Apps mit, wie dicht ihre Tabellen sind; die Dichte ist aber eine Entscheidung des Bildschirms, auf dem gearbeitet wird, nicht seiner Breite. ========================================================================== */ /* Der KLEBENDE SPALTENKOPF braucht einen Vorfahren, der ihn nicht klippt. `overflow: hidden` oder `overflow: auto` an einer Karte darueber macht genau diesen Kasten zum Bezugsrahmen — dann klebt der Kopf am Kasten statt am Fenster, und bei `hidden` verschwindet er. Wer die Tabelle in eine Karte legt, nimmt dort `overflow: clip`. (Gemessen in bulung-at-dashboard am 17.08.2026.) */ [data-bulung] .bul-tabelle { /* Ein Polster fuer Kopf UND Zelle. Verschiedene WAAGERECHTE Polster wuerden die Textkanten von Kopf und Spalte gegeneinander versetzen. */ --bul-tabelle-polster: var(--pad-cell); width: 100%; border-collapse: collapse; font-size: var(--fs-app-body); font-variant-numeric: var(--num-tabular); } /* ── Spaltenkopf ───────────────────────────────────────────────────────── 11 px kommen aus `--fs-app-micro` und aus der Ziel-API dieser Aufgabe — die Quelle steht auf 12 px (styles.css:867). GEERBT IST DER GRUND, NICHT DIE ZAHL: der Kopf ist der BODEN seiner Spalte, jedes Zehntel Schriftgrad hier kostet Spaltenbreite in der ganzen Tabelle. Im Order Portal sparten `Bereitstellung` statt `Bereitstellungsdatum` und `Auslieferung` statt `Auslieferdatum` zusammen 63 px. Schriftgewicht und Haarlinie sind Neuentscheidungen (Kopfteil oben): die Quelle hat 500 und `border-bottom: none`, aber sie hat auch einen NAVY Kopf. Auf `--fl-well` trennt keine Farbkante mehr. DIE FARBE IST GERECHNET, NICHT GEGRIFFEN. Der naheliegende Griff `--text-muted` traegt auf `--fl-well` nur 4,15 : 1 und faellt damit durch 1.4.3 — 11 px sind kein grosser Text. `--text-secondary` traegt 4,97 : 1 hell und 8,15 : 1 dunkel. */ [data-bulung] .bul-tabelle th { padding: var(--bul-tabelle-polster); text-align: left; /* Satzschreibung seit 2026-09-23: Versalien mit Sperrung ueber jeder Spalte waren die lauteste Zeile der Tabelle — lauter als die Daten. */ font-size: var(--fs-app-caption); font-weight: var(--fw-medium); color: var(--text-secondary); /* Der Kopf bleibt einzeilig. Ein umbrechender Kopf aendert die Hoehe des klebenden Bandes und verschiebt damit den Versatz zur ersten Zeile. */ white-space: nowrap; border-bottom: var(--border-width) solid var(--border); position: sticky; top: 0; /* Der Grund MUSS deckend sein, sonst scheinen die Zeilen beim Rollen durch. `--fl-well` nennt den Tabellenkopf woertlich als seinen Zweck. HAKEN `--tabelle-kopf-flaeche` (seit 2026-09-28, HR-Portal): auf Glas hebt sich `--fl-well` (#f9fafb) nicht mehr ab, das Portal setzt dort `--fl-2`. Wer nichts setzt, bekommt den Kopf von vorher. Der Haken muss DECKEND bleiben (siehe oben) und `--text-secondary` mit 4,5 : 1 tragen (`--fl-2`: 5,40 : 1, nachgerechnet). */ background: var(--tabelle-kopf-flaeche, var(--fl-well)); /* Ohne diese Stufe gewinnt jede Zeile, die die App selbst positioniert (das Order Portal setzt `position: relative` auf jede Statuszeile), und rollt ueber den Kopf. Fuer diese kleine Stufe INNERHALB eines Bauteils gibt es heute keinen Token — als Befund verzeichnet. */ z-index: 2; } /* ── Zelle ─────────────────────────────────────────────────────────────── */ [data-bulung] .bul-tabelle td { padding: var(--bul-tabelle-polster); border-bottom: var(--border-width) solid var(--border-light); vertical-align: middle; /* Wer Text in einer Tabelle markiert, will kopieren. Apps, die den Zeilenklick belegen (Aufklappen, Auswahl), duerfen ihm das nicht wegnehmen. */ -webkit-user-select: text; user-select: text; /* EIN EINZIGES LANGES WORT DARF DIE TABELLE NICHT AUFSCHIEBEN. Umbrechen ist hier der Grundzustand — das hilft aber nur, wo ein Leerzeichen steht. Eine Sammelnummer, eine Adresse ohne Leerzeichen oder ein zusammen- geschriebener Firmenname wirkt sonst genau wie `nowrap`: die Spalte nimmt die Breite ihres breitesten Wortes, und die Tabelle laeuft aus dem Behaelter. Im AT-Dashboard war das "der groesste Einzelhebel des Audits" (app.css:1079) — ein langer Firmenname schob die Auftragsliste auf ueber 2000 px. `anywhere` und nicht `break-word`: nur `anywhere` zaehlt beim Ermitteln der Mindestbreite mit, und genau die entscheidet, wie breit eine Tabellenspalte werden muss. ZAHLEN SIND DAVON AUSGENOMMEN, ohne dass es hier stehen muss: `.bul-zahl` traegt `white-space: nowrap`, und das schlaegt jeden Wortumbruch. Eine Auftragsnummer wird also nie mitten durchgebrochen. Im Zustand `--nowrap` ist die Regel folgenlos — dort bricht ohnehin nichts um. */ overflow-wrap: anywhere; } /* Die letzte Zeile grenzt nach unten an nichts mehr ab. */ [data-bulung] .bul-tabelle tbody tr:last-child > * { border-bottom: none; } /* ── Zeilenzustaende ───────────────────────────────────────────────────── REIHENFOLGE IST PFLICHT: `.bul-zeile--gewaehlt` steht NACH dem Hover und gewinnt nur deshalb. Wer die gewaehlte Zeile nach oben schiebt, verliert sie unter der Maus — ohne dass irgendetwas rot wird. Dieselbe Falle wie bei der Statusleiter des Order Portals (styles.css:1263). */ [data-bulung] .bul-tabelle tbody tr { transition: background var(--dur-fast) var(--ease-standard); } /* Hover eine Stufe leiser als die Auswahl (seit 2026-10-01): `--fl-2` statt `--state-hover`. Eine Liste, die unter der Maus aufblinkt, wirkt unruhig. */ [data-bulung] .bul-tabelle tbody tr:hover { background: var(--fl-2); } [data-bulung] .bul-tabelle tbody tr.bul-zeile--gewaehlt { background: var(--state-selected); } /* ZWEITES SIGNAL neben der Farbe. Vier Zeilenzustaende auf hellem Grund liegen im Kontrast nur 1,0 bis 1,4 auseinander — bei Rot-Gruen-Schwaeche sind das vier gleiche Graustufen (gemessen 17.08.2026, Fleet Map). Der Balken liegt als eingesetzter Schatten IN der ersten Zelle: ein `box-shadow` direkt am `tr` ist bei `border-collapse: collapse` nicht verlaesslich, und ein absolut gesetztes `::after` verlangte `position: relative` an der Zeile — das nimmt der App eine Stelle weg, die sie oft selbst braucht. */ [data-bulung] .bul-tabelle tbody tr.bul-zeile--gewaehlt > *:first-child { box-shadow: inset var(--border-row-accent) 0 0 0 var(--green-deep); } /* ── Zahlenspalte ──────────────────────────────────────────────────────── Monoschrift und tabellarische Ziffern stehen schon in basis/typografie.css an `.bul-zahl`. Hier kommt nur dazu, was die Spalte betrifft. `tabular-nums` allein reicht fuer gleiche BREITEN, nicht fuer gleiche FORMEN: in Jost liegen 1, 7 und 4 geometrisch nah beieinander, und genau in einer Zahlenspalte wird verglichen statt gelesen. */ [data-bulung] .bul-tabelle .bul-zahl { text-align: right; white-space: nowrap; } /* ── Zustand: dicht ────────────────────────────────────────────────────── Engere Zeilen fuer Bildschirme, an denen den ganzen Tag gearbeitet wird. Gesetzt wird nur die eine Variable — Kopf und Zelle ziehen mit, und ihre waagerechten Kanten bleiben deckungsgleich. */ [data-bulung] .bul-tabelle--dicht { --bul-tabelle-polster: var(--space-sm) var(--space-2m); } /* ── Zustand: nowrap ───────────────────────────────────────────────────── Keine Zelle bricht um. Ohne `nowrap` entscheidet die Auto-Verteilung der Tabelle, welche Spalte zu eng wird, und die getroffene Zeile wird doppelt so hoch (im Order Portal 75 statt 53 px, elf von 57 Zeilen). MIT `nowrap` IST DIE SPALTENBREITE DIE BREITE IHRES BREITESTEN WERTES — ein einziger Ausreisser genuegt, um die Tabelle ueber den Behaelter zu schieben. Wer das hier einschaltet, misst gegen den AKTUELLEN Datenbestand nach und deckelt seine Freitextspalten selbst. */ [data-bulung] .bul-tabelle--nowrap th, [data-bulung] .bul-tabelle--nowrap td { white-space: nowrap; /* Nur hier, nicht am Grund-`td`: ein Auslassungszeichen erscheint ohne `nowrap` ohnehin nie, und `overflow: hidden` macht aus der Zelle einen Klippbereich — auch waagerecht. */ overflow: hidden; text-overflow: ellipsis; } /* ── bauteile/knopf.css ──────────────────────────────────────────────── */ /* Bulung — Knopf ========================================================================== GEERNTET, NICHT KOPIERT. Hauptquelle ist `fahrzeug-portal/static/styles.css` (`.btn`, Zeile 2094 ff.), zweite Quelle `order-portal/static/styles.css` (`.dismiss-modal button`, Zeile 1732 ff.) — dort steht die einzige gebaute Knopfgruppe des Hauses: ein bestaetigender und ein abbrechender Knopf nebeneinander. DIE UMBENENNUNG IST DER KERN. Der Bestand heisst nach ZWECK, nicht nach FORM, und ist deshalb nicht wiederverwendbar: .btn -> .bul-knopf .btn-confirm -> .bul-knopf--haupt .btn-cancel -> .bul-knopf--leise .btn-step, .btn-today, .btn-row BLEIBEN DRAUSSEN `.btn-step` (Datumsschritt), `.btn-today` (Sprung auf heute) und `.btn-row` (die Knopfreihe im Modal) sind Bildschirme, keine Formen. Ein System, das sie mitnimmt, liefert drei Apps einen Knopf, den nur die vierte je braucht. ---- ALLGEMEIN: kommt mit ------------------------------------------------- Quelle (fahrzeug-portal/static/styles.css), Zeile in Klammern: .btn (2095-2099) `inline-flex`, mittig in beiden Achsen, Abstand zwischen Symbol und Wort (8 px), `font-family: inherit` .btn (2102) `line-height: 1` — ein Knopf ist eine Zeile, seine Hoehe kommt aus Polster und Mindesthoehe .btn (2105) `border-radius` aus dem Radius-Token .btn (2106) `cursor: pointer` .btn (2109-2111) weiche Blende auf Grund, Versatz und Schatten .btn:hover (2113) Grund wechselt, kleiner Schatten kommt dazu .btn:active (2117) 1 px nach unten. `transform` verschiebt nichts im Layout, kostet also keine Nachbarzeile. .btn--block (2118) Vollbreite -> hier `.bul-knopf--breit` .btn[hidden] (3286) `display: none` — noetig, weil `inline-flex` das Attribut sonst ueberstimmt Aus `order-portal/static/styles.css`: .dismiss-modal gemeinsame Form fuer BEIDE Knoepfe einer Gruppe button (1732) (Polster, Radius, Gewicht, Blende) — genau die Trennung, die dieses Bauteil macht: die Form steht einmal, die Rolle steht als Zusatz daran. .btn-confirm (1744) gruene Flaeche, Navy als Schrift -> `--haupt` .btn-cancel (1737) leiser Knopf mit Kante statt Flaeche -> `--leise` ---- NEUENTSCHEIDUNGEN: steht in der Datei, ist aber NICHT geerbt --------- Mindesthoehe 36 px Die Quelle setzt `padding: 11px 20px` und laesst die Hoehe aus Schriftgrad und Polster entstehen (styles.css:2103) — gerechnet rund 36,7 px. Hier steht die Hoehe als Zahl da, weil Knopf und Feld NEBENEINANDER stehen und ihre Kanten sonst um ein bis zwei Pixel auseinanderlaufen. `bauteile/feld.css` traegt dieselbe Zahl. Grundknopf hat eine Die Quelle kennt nur zwei Rollen: gruen gefuellt eigene Erscheinung und leise. Ein neutraler Knopf ohne Rolle kommt dort nicht vor. Er steht hier, weil in einer Werkzeugleiste die meisten Knoepfe weder Haupt- noch Abbruchhandlung sind. Kante --border-strong Die Quelle hat `border: 0` am gruenen Knopf (styles.css:2104) und `1px solid #e2e8f0` am Abbruchknopf (order-portal:1739) — das sind 1,24 : 1 und faellt durch WCAG 1.4.11. Jede Knopfkante hier traegt `--border-strong` (3,05 : 1 auf --fl-2 hell, 3,08 dunkel). Der gefuellte Knopf setzt sie auf `transparent`: seine FLAECHE ist die Kante. --gefahr ist ein Die Quelle fuellt ihn (`background: #dc2626`, UMRISS, keine Flaeche weisse Schrift, order-portal:1760). Das laesst sich hier NICHT registerneutral bauen: `--danger` kippt zwischen den Registern (hell #c62828, dunkel #fca5a5), und der einzige registerneutrale Wert `--danger-surface` traegt weisse Schrift nur 3,76 : 1. Rot als TINTE traegt in beiden: 5,19 : 1 hell, 8,85 : 1 dunkel. Wer eine gefuellte rote Flaeche will, braucht einen neuen Token — als Befund verzeichnet, nicht hier erfunden. --klein Gibt es in keiner Quelle. 28 px hoch, 12 px Schrift — fuer Knoepfe IN einer Tabellenzeile, deren Zeilenhoehe 36 px nicht traegt. ausgegraut Die Quelle hat dafuer nur einen Sonderfall (`.vp-btn-primary.is-disabled-soft`, ein Knopf, der ABSICHTLICH klickbar bleibt). Hier die gewoehnliche Fassung aus den vorhandenen Token. Schriftgrad 14 px Die Quelle steht auf `0.92rem` = 14,72 px (styles.css:2100). Die 14 kommen aus `--fs-app-body` und aus der Ziel-API — dieselbe Umrechnung wie beim Tabellenkopf. Schriftgewicht Die Quelle hat 500 am `.btn` (styles.css:2101) 500 / haupt 600 und 600 an BEIDEN Modalknoepfen (order-portal:1734). Hier traegt der gewoehnliche Knopf 500 und nur die HANDLUNG 600 — sonst ist in einer Werkzeugleiste jeder Knopf halbfett und keiner faellt mehr auf. Kante und Schrift Die Quelle blendet nur Grund, Versatz und blenden mit Schatten (styles.css:2109-2111). Hier blenden auch `border-color` und `color` — ohne das springt die Kante beim Ueberfahren hart, waehrend die Flaeche darunter weich wechselt. `white-space: nowrap` In keiner Quelle. Ein umbrechender Knopf zieht in einer Werkzeugleiste die ganze Reihe hoeher. ---- FACHLICH: bleibt in der App ------------------------------------------ .btn-step (209) Datumsschritt der Werkzeugleiste, samt `.btn-step--drop` und `--drop-blocked` (1512). .btn-today (322) Sprung auf heute, samt `.is-current` (340). .btn-row (1729) die Knopfreihe des Modals -> steht als `.bul-modal-fuss` in bauteile/modal.css, weil sie dort hingehoert und nicht zum Knopf. .btn--login (2120) ein Aussenabstand fuer genau eine Seite. .modal-icon (1713) Symbolkreis im Bestaetigungsdialog. ========================================================================== */ /* DIE FORM. Alles, was jeder Knopf braucht, egal welche Rolle er spielt. Der Fokusring steht NICHT hier — er kommt einmal aus `basis/fokus.css`. Ein Knopf, der ihn wiederholt, gewinnt die Kaskade gegen die Basis und nimmt einer App die einzige Stelle, an der sie ihn aendern kann. */ [data-bulung] .bul-knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2s); /* Der Knopf erbt die Schrift der Seite. Ohne diese Zeile setzt der Browser seine eigene Systemschrift — der einzige Text der Oberflaeche, der nicht die Arbeitsschrift waere. */ font-family: inherit; font-size: var(--fs-app-body); font-weight: var(--fw-medium); /* Ein Knopf ist EINE Zeile. Seine Hoehe kommt aus `min-height` und dem waagerechten Polster, nicht aus der Zeilenhoehe — sonst verschiebt jede Aenderung an `--lh-dense` alle Knopfhoehen des Hauses. */ line-height: 1; /* 36 px, damit Knopf und Feld auf derselben Kante stehen. 2026-09-27 auf 40 px gehoben, weil Jost bei 36 zu klein wirkte; seit 2026-10-01 mit Inter (groessere x-Hoehe) wieder 36 — das Mass von Enterprise-Apps. Das Polster 14 statt 24 px: ein breiter Knopf wirkt wie ein Banner. */ min-height: 36px; padding: 0 calc(var(--space-2m) + var(--space-2xs)); border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-sm); /* Haken fuer Glas, siehe karte.css: auf Glas ist ein deckend weisser Knopf ein Loch. */ background: var(--knopf-flaeche, var(--fl-1)); color: var(--text); box-shadow: var(--shadow-xs); cursor: pointer; /* Ein Knopf ist nie unterstrichen — auch nicht, wenn er ein ist. Das kam im Pilotdurchgang (HR-Portal, 31.08.2026) heraus: vier Stellen tragen die Knopfform an einem Link, weil sie zu einer anderen Seite fuehren statt etwas abzusenden. Ohne diese Zeile setzt der Browser seinen Standardstrich unter die Beschriftung — an einem