
Für Entwicklung
Styleguide
Alle Bausteine der neuen Website mit ihren Klassennamen. Änderungen an Tokens und Bausteinen wirken global: quellen/entwurf.css (Welt), quellen/neu.css (Unterseiten).
Farben
#ffffffSeitengrund, Karten#f2f4f3Neutrale Zonen, Zweitknöpfe auf Weiss#dcf4ecNur Kontakt-Schluss, Markierungen, Chips#53c1aaFluss, Hauptakzent, aktive Station – nie als Text#1c7360Links, Icons, Mint als Text#0f3a35Titel, Hauptknopf#3d5a56Fliesstext#4d6864Nebentext, min. 4.5:1#c3d9d3Leere Leitung, Ränder#dde8e5Trennlinien#f2c230Nur Staustellen (Formularfehler: eigenes Rot)Phasenfarben
Ein Verlauf entlang des Lebenszyklus: von Blau (Strategie) bis Grün (Monitoring), gleiche Helligkeit und Sättigung (OKLCH 47 % / 0.09, Farbton 262 → 160). Tief für Icon und aktiven Zustand, hell für Flächen. Klassen .ph-strategie … .ph-monitoring; begleitende Leistungen neutral. Mint bleibt Marke und Fluss.
#3e5a8d / #e3efff#1a6286 / #dbf2ff#006877 / #d7f5fa#006b62 / #d8f6f2#216a49 / #ddf6e7#3d5a56 / #eef1f0Schrift
Refresh your processes.
.t-plakat · Titel-Schrift 600 · clamp(2.9rem … 5.75rem)
Fünf Phasen. Ein Kreislauf.
.t-titel · Titel-Schrift 600 · clamp(2.1rem … 3.4rem)
Worum es geht
.t-zwischen · Titel-Schrift 600 · 1.35–1.75rem
Wir bringen Ordnung in gewachsene Abläufe: entlang des BPM-Lebenszyklus, praxisnah und unabhängig.
.t-lead · Grundschrift 400
Fliesstext: Die Prozesse werden in Teilprozesse heruntergebrochen, Verantwortliche benannt und nach BPMN 2.0 modelliert – mit einem Link im Fliesstext.
body · Grundschrift 400 · 1.0625rem/1.6
Dachzeile (nur Unterseiten)
.t-dachzeile · Schild-Schrift 600
Knöpfe
Ohne Kontur. Verhalten nach diffrent.digital (Allgemeines › Motion auf diffrent.digital): Beim Überfahren füllt eine solide Blase den Knopf ab dem Eintrittspunkt (600 ms, ease-out) und zieht sich beim Verlassen zur nächsten Kante zurück; der Knopf federt auf 1.04 (Knopf-Feder 548 ms), der Pfeil holt 4 px aus. Beim Klick 0.95 in 120 ms, der Pfeil fliegt hinaus. Dunkler Knopf füllt Mint-Tief, grauer Knopf Tinte.
.knopf.knopf-tinte (= .knopf-primaer).knopf.knopf-kontur.knopf.knopf-hell.knopf.knopf-text.knopf-gross.knopf mit Icon vorne.knopf-rund.knopf-rund:disabled.auto (aus / an).knopf.knopf-tinte (= .knopf-primaer).knopf.knopf-kontur.knopf.knopf-hell.knopf.knopf-text.knopf-gross.knopf mit Icon vorne.knopf-rund.knopf-rund:disabled.auto (aus / an)Staustelle
.stau .ventil (Stau / gelöst)Links und Navigation
Schilder und Chips
.schild.schild.schild-hell.chip / .chip-mint.schild.schild.schild-hell.chip / .chip-mintIcons: MINT
Einheitliche Linienstärke über ICON_LINIE / ICON_ZIEL in entwurf.py; Stationen als farbige Kreise ohne Kontur.
strategiedokumentationanalyse-optimierungimplementierungmonitoringprojektleitungrequirements-engineeringtimIcons: Bedienung (Lucide, Strich 1.6)
pfeillinksrechtsrunterhakenalarmmailtelefonortlinkedinpluszuLeitung und Stationen
.lz.lz-nav – Schritt-Leiste als Navigation (aktiv: Phase 3).lz-beg-reihe – begleitende Leistungen.knoten (offen / erreicht)Karten
Formular
Bewegung (Federn)
Klicken spielt die Feder ab. Werte in FEDERN (entwurf.py) als CSS linear().

