DogFatherGitandClaude Opus 5
19e9f471d3
Filipe: "dan perfektionierst du eine neue wo diagramme texte und so zu
jedem modi gemacht wird und diese kategorie kannst du entwicklung nenen."
1. DAS EIGENTLICHE PROBLEM WAR, DASS ES KEINE VERGANGENHEIT GAB.
`entwicklung_stand` hat den Schluessel (person, punkt, beurteiler) und
wird bei jeder Aenderung UEBERSCHRIEBEN -- dort richtig, eine Beobachtung
ueber einen Menschen soll aktuell sein. Nur: Damit existierte nichts,
woraus sich ein Verlauf zeichnen liesse. Nachgemessen: 43 Zeilen Stand,
NULL Zeilen Geschichte. Ein Diagramm ueber einen einzigen Zeitpunkt ist
kein Diagramm, sondern ein Balken.
Neu: `entwicklung_lauf` haengt jede Aenderung an, statt zu ueberschreiben.
Sie steht in workspace-entwicklung.js, bei der Tabelle, zu der sie
gehoert -- die Auswertung liest nur. Andersherum gaebe es einen Ring
zwischen zwei Modulen, und Ringe halten in JavaScript genau so lange,
bis jemand eine Konstante auf oberster Ebene benutzt.
KEIN ANLASS, NIE. Neben jedem "da hakt es" steht ein Satz, woran man es
gemerkt hat -- fuer ein Gespraech aufgeschrieben. Eine Chronik dieser
Saetze waere das Belastendste, was dieses Haus speichern kann. Die Spur
hat gar keine Spalte dafuer, und die Pruefung liest die TABELLE, nicht
die Ausgabe: Eine Spalte, die es gibt, wird eines Tages gefuellt.
Die Startaufnahme uebernimmt den heutigen Stand mit seinen ECHTEN Daten,
damit die Seite am ersten Tag nicht leer ist -- und zaehlt ausdruecklich
NICHT als Bewegung. Der Tag, an dem die Spur entstand, war kein Tag, an
dem 43 Dinge gleichzeitig passiert sind.
2. WAS GEZEIGT WIRD: BEWEGUNG, KEINE NOTE.
Keine Punktzahl, kein Prozentwert, kein Durchschnitt, keine Rangliste,
kein Vergleich zwischen zwei Menschen. Das ist die Recherche, nicht
Vorsicht: Ueberrechtfertigung (Deci), sozialer Vergleich senkt die
Leistung derer, die schlechter dastehen, Schwaechenfokus ebenso.
Stattdessen das progress principle (Amabile/Kramer, ~12 000
Tagebucheintraege): Sichtbarer Fortschritt ist der staerkste einzelne
Treiber. Deshalb Diagramm 1 "Was sich bewegt hat" -- zwei Richtungen um
eine Nulllinie, ein Massstab fuer beide. Diagramm 2 der Streifen (Punkt
x Monat), fortgeschrieben, aber nach 90 Tagen sichtbar verblasst.
Und die Texte in dieser Reihenfolge: was sich bewegt hat, was traegt,
erst danach was liegt.
Selbst gezeichnet, kein Diagrammpaket: 60 kB ueber die Leitung von
jemandem, der mit dem Handy im Stream steht -- und es braechte eigene
Farben neben die Hausfarben. Jede Zelle traegt ihr Zeichen als Text,
jeder Balken seine Zahl, darunter eine Legende: Die Farbe ist nie die
Auskunft.
Zwei Gesichter: Die Leitung sieht die Karten, ein Modi ausschliesslich
die Bewegung in der eigenen -- ohne Namen, ohne Anlass, ohne Streifen.
3. NEBENBEFUND, GROESSER ALS ERWARTET: ELF SEITEN OHNE FARBE.
Der Umbau von heute frueh heisst "Jede Seite traegt die Farbe ihrer
Kachel". Nachgemessen traf das auf 18 von 34 Seiten zu. Elf Seiten mit
echter Kachel gingen leer aus -- ausgerechnet die von Team Dogi:
befinden, bewerben, bewerbungen, entwicklung, hilfe, rechte, talente,
teamlage, teilen, treff-moderation, treff-regeln, unsere-seiten.
Der Grund: `zuSeite()` sucht nur in `Bereiche.GRUPPEN`, und dort stehen
ausschliesslich die Kacheln der Agentur. Die von Team Dogi liefert der
Server (`ich.bereiche`, `ich.bereiche_zusatz`). Auffallen konnte das
nicht -- eine Seite ohne Farbe sieht aus wie eine, die eben keine hat.
kopf.js faerbt jetzt zweimal: sofort aus GRUPPEN (Agenturseiten ohne
Flackern wie bisher), und noch einmal aus den Serverkacheln, sobald
`werZeigen` sie bringt. Nur, wenn beim ersten Mal nichts gefunden wurde.
pruef-buehne misst den Kontrast an echten Bildpunkten und kannte diese
zwoelf Seiten nicht. Jetzt stehen sie in der Liste; ihre Frist waechst
mit der Laenge, statt als feste Zahl irgendwann zu reissen. Gemessen
fuer werdegang.html: 4,83:1 am Computer, 6,22:1 am Handy.
4. TON 38 SAH FREI AUS UND WAR ES NICHT.
Erster Anlauf war Ton 38, weil 37 die hoechste Nummer in workspace.js
ist. Gezaehlt in start.css sind es 39, alle vergeben. Genau davor warnt
das Farbwerkzeug im eigenen Kopf ("Ton 22, weil er frei AUSSAH").
Dabei aufgefallen: Die zwei Kacheln von heute Nacht wurden ohne das
Werkzeug gesetzt. Ton 39 lag 0,0362 von Ton 15 entfernt -- der engste
Abstand im ganzen Haus, zwei praktisch gleiche Cyan-Toene. Filipe dazu
mehrfach: "keine die sich irgendwie aehnlich sind".
Neues Werkzeug `tools/kachel-farbe-einzeln.mjs`: zieht EINE Farbe nach,
ohne die anderen anzufassen. Das grosse Werkzeug haette alle 40 neu
gefaerbt -- jede Kachel im Haus, ungefragt. Es bricht ab, wenn es nicht
alle Toene lesen kann: Der erste Anlauf las 31 von 40, weil einstellige
Nummern mit ZWEI Leerzeichen dastehen, und rechnete froehlich weiter.
Ergebnis: kleinster Abstand 0,0362 -> 0,0840, durch Aendern von zwei
Kacheln, die es erst seit gestern Nacht gibt.
5. anruf-probe.html lud `basis.css` und `kopf.css` -- beide gibt es
nicht. Ausgerechnet dort faellt es nicht auf, weil die Seite ihre eigene
Stilangabe im Kopf hat. pruef-struktur war deshalb rot (5 Befunde) und
ist jetzt gruen.
GEMESSEN: pruef-werdegang 95/0 (neu), pruef-entwicklung 43/0,
pruef-befinden 75/0, pruef-rechtetafel 19/0, pruef-zwischenspeicher 21/0,
pruef-start-ansicht 0 Fehler, pruef-struktur 0 Fehler (vorher 5),
pruef-buehne fuer werdegang.html 0 Fehler.
Co-Authored-By: Claude Opus 5 <[email protected]>
301 lines
12 KiB
CSS
301 lines
12 KiB
CSS
/* =====================================================================
|
|
ENTWICKLUNG — die Auswertung je Person (19.09.2026)
|
|
|
|
Sie erbt die Farben von `entwicklung.css` und hält sich an dessen
|
|
wichtigste Entscheidung: ES GIBT HIER KEIN ROT.
|
|
|
|
kühl-grün #7fb08a läuft · nach vorn
|
|
babyblau #8ec9ff wächst gerade
|
|
bernstein #d8a76a da hakt es · zurückgesetzt
|
|
grau kann ich nicht sagen · noch nichts
|
|
|
|
„Da hakt es" ist eine Beobachtung, kein Alarm. Ein Rückschritt heißt
|
|
oft nur, dass jemand genauer hingesehen hat als beim letzten Mal.
|
|
Rot würde aus einem Gesprächsanlass ein Urteil machen.
|
|
|
|
---------------------------------------------------------------------
|
|
NACHGERECHNET, NICHT GESCHÄTZT (19.09.2026)
|
|
|
|
Die vier Töne wurden gegen die Fläche dieser Seite geprüft
|
|
(#14161c — das ist `color-mix(var(--tinte) 94%, #ffffff 6%)`
|
|
ausgerechnet):
|
|
|
|
Kontrast gegen die Fläche alle vier ≥ 3:1 bestanden
|
|
Unterscheidbarkeit schlechtestes Paar ΔE 16,6 (normal)
|
|
bei Farbsehschwäche ΔE 14,9 (Protan)
|
|
ΔE 11,2 (Tritan)
|
|
|
|
Sie liegen bewusst UNTER der Sättigung, die ein Diagrammwerkzeug
|
|
vorschlagen würde. Das ist die Hausregel „augenschonend, gedeckt
|
|
statt grell" — und sie ist hier vertretbar, weil die Farbe nie
|
|
allein trägt: Jede Zelle hat ihr Zeichen, jeder Balken seine Zahl,
|
|
und unter dem Diagramm steht eine Legende.
|
|
|
|
---------------------------------------------------------------------
|
|
UND WAS ES WEITERHIN NICHT GIBT
|
|
|
|
Keinen Fortschrittsbalken je Person, keinen Prozentwert, keine
|
|
Punktzahl. Eine Zahl über einen Menschen wird gelesen, verglichen und
|
|
weitererzählt.
|
|
|
|
Die Balken hier messen etwas anderes: WIE VIEL SICH BEWEGT HAT. Das
|
|
ist keine Eigenschaft der Person, sondern ein Ereignis zwischen zwei
|
|
Zeitpunkten — und es kann nicht „hoch" oder „niedrig" gut sein.
|
|
===================================================================== */
|
|
|
|
/* ---------------------------------------------------------------------
|
|
Gemeinsam
|
|
------------------------------------------------------------------- */
|
|
.w-hinweis {
|
|
margin: 0 0 18px; max-width: 70ch;
|
|
font-size: .84rem; line-height: 1.6; color: var(--text-still);
|
|
}
|
|
.w-satz {
|
|
margin: 0 0 20px; max-width: 72ch;
|
|
font-size: .95rem; line-height: 1.65; color: var(--text-leise);
|
|
}
|
|
.w-teil { margin: 30px 0 0; }
|
|
.w-teil__satz {
|
|
margin: 0 0 14px; max-width: 72ch;
|
|
font-size: .83rem; line-height: 1.6; color: var(--text-still);
|
|
}
|
|
.w-fuss {
|
|
margin: 34px 0 0; max-width: 72ch;
|
|
font-size: .8rem; line-height: 1.6; color: var(--text-still);
|
|
}
|
|
.w-fuss a { color: var(--text-leise); }
|
|
|
|
/* ---------------------------------------------------------------------
|
|
DIE LISTE
|
|
|
|
Kacheln statt Tabelle: Eine Tabelle mit Zahlenspalten lädt dazu ein,
|
|
die Spalte zu sortieren — und eine sortierte Spalte über Menschen ist
|
|
eine Rangliste, egal wie sie überschrieben ist.
|
|
------------------------------------------------------------------- */
|
|
.w-liste__gitter {
|
|
display: grid; gap: 12px;
|
|
grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
|
|
}
|
|
.w-karte {
|
|
display: grid; gap: 3px; text-align: left;
|
|
padding: 15px 17px;
|
|
background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
|
|
border: 1px solid var(--rand);
|
|
border-left: 3px solid var(--rand-hell, var(--rand));
|
|
border-radius: var(--radius);
|
|
color: inherit; font: inherit; cursor: pointer;
|
|
transition: border-color .15s ease, background .15s ease;
|
|
}
|
|
.w-karte:hover,
|
|
.w-karte:focus-visible {
|
|
background: color-mix(in srgb, var(--tinte) 90%, #ffffff 10%);
|
|
border-left-color: color-mix(in srgb, var(--ton, #8ec9ff) 60%, transparent);
|
|
}
|
|
.w-karte__name { font-size: 1rem; font-weight: 640; color: var(--text); }
|
|
.w-karte__rolle {
|
|
font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
}
|
|
.w-karte__zeilen { display: grid; gap: 2px; margin-top: 7px; }
|
|
.w-karte__zeile { font-size: .82rem; line-height: 1.5; color: var(--text-leise); }
|
|
/* Die einzige Farbe in der Liste — und sie sagt etwas über UNS. */
|
|
.w-karte__zeile[data-alt="ja"] { color: #d8a76a; }
|
|
|
|
.w-name {
|
|
margin: 16px 0 6px; font-size: 1.32rem; font-weight: 650; color: var(--text);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------
|
|
DIAGRAMM 1 — BEWEGUNG
|
|
|
|
Eine Nulllinie, darüber „nach vorn", darunter „zurück". Beide Hälften
|
|
teilen sich denselben Maßstab: Sonst sähe ein einzelner Rückschritt
|
|
so groß aus wie fünf Fortschritte.
|
|
------------------------------------------------------------------- */
|
|
.w-bewegung {
|
|
padding: 16px 16px 12px;
|
|
background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius);
|
|
}
|
|
.w-bewegung__gitter {
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--spalten, 6), 1fr);
|
|
gap: 8px;
|
|
align-items: end;
|
|
}
|
|
.w-bewegung__spalte { display: grid; grid-template-rows: 5.2rem auto 3.4rem auto; }
|
|
|
|
.w-bewegung__halb { display: flex; flex-direction: column; min-height: 0; }
|
|
.w-bewegung__halb--oben { justify-content: flex-end; align-items: center; }
|
|
.w-bewegung__halb--unten { justify-content: flex-start; align-items: center; }
|
|
|
|
/* Die Nulllinie. Zurückhaltend — sie ordnet, sie behauptet nichts. */
|
|
.w-bewegung__null {
|
|
height: 1px; background: var(--rand);
|
|
margin: 3px 0;
|
|
}
|
|
|
|
.w-bewegung__balken {
|
|
width: min(100%, 2.4rem);
|
|
min-height: 3px;
|
|
/* 4px runde Enden am ABGEWANDTEN Ende, das Ende an der Nulllinie
|
|
bleibt eckig: Ein Balken, der an der Achse rund ist, sieht aus, als
|
|
schwebe er. */
|
|
border-radius: 4px 4px 0 0;
|
|
background: color-mix(in srgb, #7fb08a 78%, transparent);
|
|
}
|
|
.w-bewegung__halb--unten .w-bewegung__balken { border-radius: 0 0 4px 4px; }
|
|
.w-bewegung__balken[data-richtung="zurueck"] {
|
|
background: color-mix(in srgb, #d8a76a 78%, transparent);
|
|
}
|
|
.w-bewegung__zahl {
|
|
font-size: .78rem; font-weight: 650; font-variant-numeric: tabular-nums;
|
|
color: var(--text-leise);
|
|
padding: 2px 0;
|
|
}
|
|
.w-bewegung__monat {
|
|
margin-top: 8px; text-align: center;
|
|
font-size: .72rem; color: var(--text-still);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* Die Legende ist Pflicht, nicht Zierde: ohne sie trägt allein die
|
|
Farbe die Bedeutung. */
|
|
.w-legende {
|
|
display: flex; flex-wrap: wrap; gap: 8px 20px;
|
|
margin-top: 14px; padding-top: 12px;
|
|
border-top: 1px solid var(--rand);
|
|
}
|
|
.w-legende__punkt { display: inline-flex; align-items: center; gap: 7px; }
|
|
.w-legende__fleck {
|
|
width: 11px; height: 11px; border-radius: 3px; flex: none;
|
|
background: color-mix(in srgb, #7fb08a 78%, transparent);
|
|
}
|
|
.w-legende__fleck[data-richtung="zurueck"] {
|
|
background: color-mix(in srgb, #d8a76a 78%, transparent);
|
|
}
|
|
.w-legende__text { font-size: .76rem; color: var(--text-still); }
|
|
|
|
/* ---------------------------------------------------------------------
|
|
DIAGRAMM 2 — DER STREIFEN
|
|
|
|
Dieselbe Bauform wie der Befinden-Verlauf. Wer die eine kennt, liest
|
|
die andere ohne Erklärung.
|
|
------------------------------------------------------------------- */
|
|
.w-streifen__gitter {
|
|
display: grid; gap: 4px;
|
|
padding: 14px 16px;
|
|
background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius);
|
|
overflow-x: auto;
|
|
}
|
|
.w-streifen__zeile {
|
|
display: grid;
|
|
grid-template-columns: minmax(14ch, 1fr) repeat(auto-fit, minmax(2.4rem, 2.4rem));
|
|
align-items: center; gap: 6px;
|
|
}
|
|
.w-streifen__zeile--kopf { margin-bottom: 4px; }
|
|
.w-streifen__punkt-name {
|
|
font-size: .79rem; line-height: 1.35; color: var(--text-leise);
|
|
padding-right: 8px;
|
|
}
|
|
.w-streifen__monat {
|
|
font-size: .71rem; color: var(--text-still); text-align: center;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.w-streifen__zelle {
|
|
display: grid; place-items: center;
|
|
width: 2.2rem; height: 1.9rem;
|
|
font-size: .9rem; font-weight: 700;
|
|
border-radius: var(--radius);
|
|
color: var(--text-still);
|
|
background: rgba(0, 0, 0, .25);
|
|
border: 1px solid var(--rand);
|
|
}
|
|
.w-streifen__zelle[data-stufe="laeuft"] { color: #7fb08a; border-color: color-mix(in srgb, #668e6e 55%, transparent); }
|
|
.w-streifen__zelle[data-stufe="waechst"] { color: #8ec9ff; border-color: color-mix(in srgb, #8ec9ff 45%, transparent); }
|
|
.w-streifen__zelle[data-stufe="hakt"] { color: #d8a76a; border-color: color-mix(in srgb, #cc9451 55%, transparent); }
|
|
.w-streifen__zelle[data-stufe="leer"] { opacity: .32; }
|
|
/* Älter als 90 Tage: sichtbar, aber sichtbar alt. Nicht weg — man soll
|
|
sehen, DASS etwas alt ist, statt dass es verschwindet. */
|
|
.w-streifen__zelle[data-alt="ja"] { opacity: .45; border-style: dashed; }
|
|
|
|
/* ---------------------------------------------------------------------
|
|
DIE TEXTE
|
|
------------------------------------------------------------------- */
|
|
.w-texte { display: grid; gap: 12px; }
|
|
.w-text {
|
|
padding: 14px 16px;
|
|
background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
|
|
border: 1px solid var(--rand);
|
|
border-left: 3px solid var(--rand);
|
|
border-radius: var(--radius);
|
|
}
|
|
/* Nur zwei Arten bekommen eine Farbe, und beide sind ruhig. Alles
|
|
einzufärben hieße, dass keine Farbe mehr etwas bedeutet. */
|
|
.w-text[data-art="vor"] { border-left-color: color-mix(in srgb, #7fb08a 70%, transparent); }
|
|
.w-text[data-art="traegt"] { border-left-color: color-mix(in srgb, #7fb08a 70%, transparent); }
|
|
.w-text[data-art="liegt"] { border-left-color: color-mix(in srgb, #cc9451 70%, transparent); }
|
|
.w-text[data-art="alt"] { border-left-color: color-mix(in srgb, #cc9451 70%, transparent); }
|
|
|
|
.w-text__titel {
|
|
margin: 0 0 6px; font-size: .95rem; font-weight: 640; color: var(--text);
|
|
}
|
|
.w-text__satz {
|
|
margin: 0; max-width: 72ch;
|
|
font-size: .86rem; line-height: 1.65; color: var(--text-leise);
|
|
}
|
|
.w-text__liste { margin: 11px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
|
|
.w-text__zeile {
|
|
display: flex; flex-wrap: wrap; align-items: baseline;
|
|
justify-content: space-between; gap: 6px 14px;
|
|
padding: 5px 0;
|
|
border-top: 1px solid color-mix(in srgb, var(--rand) 60%, transparent);
|
|
}
|
|
.w-text__punkt { font-size: .83rem; color: var(--text); flex: 1 1 18ch; }
|
|
.w-text__rechts { display: inline-flex; align-items: baseline; gap: 7px; flex: none; }
|
|
.w-text__stufe { font-size: .76rem; color: var(--text-still); }
|
|
.w-text__stufe[data-stufe="laeuft"] { color: #7fb08a; }
|
|
.w-text__stufe[data-stufe="waechst"] { color: #8ec9ff; }
|
|
.w-text__stufe[data-stufe="hakt"] { color: #d8a76a; }
|
|
.w-text__pfeil { font-size: .76rem; color: var(--text-still); }
|
|
.w-text__tage {
|
|
font-size: .72rem; color: var(--text-still); font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------
|
|
Handy
|
|
|
|
Der Streifen darf schmaler werden, das Bewegungsdiagramm nicht: Unter
|
|
rund 2 rem je Spalte sind sechs Balken nicht mehr unterscheidbar. Er
|
|
rollt dann seitlich, statt unleserlich zu werden.
|
|
------------------------------------------------------------------- */
|
|
@media (max-width: 560px) {
|
|
.w-streifen__zeile {
|
|
grid-template-columns: minmax(10ch, 1fr) repeat(auto-fit, minmax(2rem, 2rem));
|
|
}
|
|
.w-streifen__zelle { width: 1.9rem; }
|
|
.w-bewegung__gitter { gap: 5px; }
|
|
.w-bewegung__spalte { grid-template-rows: 4.4rem auto 2.8rem auto; }
|
|
.w-bewegung__balken { width: min(100%, 1.9rem); }
|
|
.w-text__zeile { justify-content: flex-start; }
|
|
}
|
|
|
|
/* Wer weniger Bewegung möchte, bekommt weniger Bewegung. Hier gibt es
|
|
ohnehin keine Animation — der Übergang an der Karte ist alles, und
|
|
auch der fällt weg. */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.w-karte { transition: none; }
|
|
}
|
|
|
|
/* Erzwungene Farben (Windows-Kontrastmodus): Dort gilt die
|
|
Systemfarbe, und die Zeichen in den Zellen tragen die Auskunft
|
|
allein — genau dafür sind sie da. */
|
|
@media (forced-colors: active) {
|
|
.w-bewegung__balken { background: CanvasText; }
|
|
.w-legende__fleck { background: CanvasText; }
|
|
.w-streifen__zelle { border-color: CanvasText; }
|
|
}
|