DogFatherGitandClaude Opus 5
273318dd9c
Durchgang durch die Team-Dogi-Seiten aus der Sicht von jemandem, der
sie zum ersten Mal sieht. Alles hier ist am Code belegt und nachgemessen.
1. "KLINGELT NICHTS?" WARF ALLE DREI TEAM-ROLLEN AUF DIE STARTSEITE.
anruf-probe.html erklaert, WARUM das Telefon stumm bleibt. Sie steht in
der Rechtetafel offen, und aus dem Chat zeigen zwei Knoepfe darauf. Nur
hatte sie nie eine Kachel -- absichtlich, sie ist kein Bereich. Seit die
Adressregel vom 15.09. eine Kachel VERLANGT, landete jeder Klick wortlos
auf start.html.
Das ist die schlimmste Sorte Sackgasse: Man ruft sie auf, WEIL schon
etwas nicht geht, und sie wirft einen hinaus.
Mit derselben Zeile geheilt: Die Hinweisleiste wirft jeden Hinweis weg,
dessen Ziel es auf dieser Adresse nicht gibt -- "Bei dir klingelt nichts"
wurde auf crew deshalb NIE angezeigt. Ausgerechnet der Hinweis, der acht
von elf Leuten betrifft.
2. UND DIESE SEITE HATTE GAR KEINE GESTALTETE KOPFLEISTE.
.kopfleiste, __zurueck, __mitte, __titel stehen in KEINER Stilvorlage --
sie leben in start.css, die diese Seite absichtlich nicht laedt. Die
Leiste war nackter Text. Auf einer Seite, die man im Stoerfall aufruft,
sieht unfertig aus wie kaputt. Jetzt im <style>-Block der Seite, aus
demselben Grund wie ihr uebriges CSS.
3. EIN MODI KAM NICHT AN SEINE EIGENE AUSWERTUNG.
entwicklung.html und werdegang.html haben BEIDE eine ausgearbeitete
Eigensicht, und die Rechtetafel laesst ihn hinein. In seiner Kachelliste
stand keine von beiden -- der Weg existierte fuer ihn nicht. Die ganze
Eigensicht war toter Code, ausgerechnet fuer den, fuer den sie ist.
Mein eigener Fehler vom Vortag.
Zwei eigene Kacheln in "Fuer dich", aus den Leitungskacheln abgeleitet.
Sie loesen zugleich eine Namenskollision: Bis heute setzten BEIDE Seiten
fuer ihn die Ueberschrift "Deine Entwicklung".
4. DER KALENDER-LINK WAR FUER DIE COMMUNITY EINE SACKGASSE.
Auf jeder Brettkarte mit Termin stand "Im Kalender am 24.09." als Link.
kalender.html steht auf ALLE -- und ALLE ist ausdruecklich ohne "gast".
Jetzt fragt der SERVER die beiden Schranken (kalender_offen) und die
Karte zeigt den Termin als Text statt als Link. Die Auskunft bleibt, nur
der Weg ins Leere faellt weg. Die Regel im Browser nachzubauen waere die
vierte Stelle fuer dieselbe Frage gewesen.
5. EIN MODI KAM AN DIE TALENTE-NOTIZEN, DIE IHM VERWEHRT SIND.
BRETTER_UEBER_SEITEN war eine feste Liste ("wer die Seite darf, muss
auch dorthin kommen") und fragte nie, WER fragt. Ueber
bereich.html?b=talente kam er an Notizen zu Zuschauern, obwohl
talente.html fuer ihn gesperrt ist -- Begruendung dort: "Hier stehen
Namen von Menschen, die nichts davon wissen."
Aus der Liste wurde eine Zuordnung Brett -> Seite, gefragt wird
darfSeite(). Nachgemessen: modi/talente 404, modi/entwicklung darf,
hand+admin unveraendert.
Dazu stand in workspace-bereiche.js ein Kommentar, der das GEGENTEIL des
Codes behauptete ("entwicklung, talente bleiben 404"). Ein falscher
Kommentar an einer Rechtestelle ist schlimmer als keiner.
6. ZWEI KACHELN "CHAT", BEIDE AUF DIESELBE SEITE.
Seit dem Treff-Chat von gestern sahen Modi und rechte Hand zweimal
"Chat" mit demselben Ziel. Jetzt "Treff-Chat" mit ?raum=treff, das den
Raum direkt oeffnet -- gesucht an denselben zwei Merkmalen, an denen ihn
der Rest der Datei erkennt.
7. VERTRAUEN: "WIE GEHT'S DIR?" VERSPRACH MEHR, ALS ES HALTEN KANN.
Dort stand: "Niemand aus dem Team sieht deine Antworten -- auch
DogFather nicht." Punkt. Fast wahr und deshalb gefaehrlich: Aus
denselben Antworten entsteht eine namenlose Ampel fuer die Leitung.
Der ehrliche Satz war laengst geschrieben und wurde vom Server sogar
mitgeliefert (block.text) -- nur hat ihn nie jemand angezeigt. Er steht
jetzt im HTML, nicht im Skript: Wer die Seite oeffnet, soll ihn lesen,
BEVOR er tippt.
8. DIE NEUE AUSWERTUNG, AUS BENUTZERSICHT NACHGEBESSERT.
- Der Streifen hatte keine Zeichenerklaerung. Im Dateikopf stand "wer
Farben schlecht unterscheidet, liest dasselbe Zeichen" -- das stimmt
nur, wenn irgendwo steht, was die Zeichen heissen. Jetzt eine Legende,
aus `stufen` gebaut statt abgeschrieben.
- "nie gesetzt" war ein Mittelpunkt, "Kann ich nicht sagen" ein
Halbgeviertstrich. Zwei kurze Striche nebeneinander fuer den
Unterschied zwischen "niemand hat hingesehen" und "jemand hat
hingesehen und konnte es nicht sagen". Leer ist jetzt wirklich leer,
mit gestricheltem Rahmen.
- Die Aufschluesselung der Balken stand nur im Mausueberfahren -- am
Handy also nie, und dort steht jemand damit im Stream. Jetzt als Text.
- Die Modi-Sicht bekam Balken ohne Erklaerung, ein "Frag danach" ohne
Adressaten und bei fehlender Bewegung ein LEERES Element. Jetzt
Lesehilfe, ein Leerkasten mit Satz und zwei Wege weiter.
9. NEBENBEFUNDE, DIE DIE PRUEFUNG GEFUNDEN HAT.
pruef-css-klassen war schon VOR dieser Arbeit rot (nachgemessen mit
git stash). Alle drei Befunde behoben:
- hilfe.html und unsere-seiten.html luden ihre Seitendatei NACH
module.css und haus.css und ueberschrieben damit das Haus.
- Zwei Schriftgroessen unter 11,5 px aus dem gestrigen Bau
(.71rem Monatsbeschriftung, .68rem Marke) auf .75 und .72 gehoben.
- Die Pruefung selbst war blind fuer <style>-Bloecke in der Seite und
meldete deshalb dauerhaft drei Fehler an einer Seite, die ihre
Stile mit Absicht selbst traegt. Eine Warnung, die immer kommt, ist
keine Warnung mehr -- jetzt sieht sie hin, statt die Seite
auszunehmen.
Kleinkram nebenbei: "die Antworten sieht nur du" -> "siehst nur du" auf
der Kachel zur empfindlichsten Seite des Hauses. "Bewertet wird dort" ->
"Eingeschaetzt wird dort" in teamlage.html, zwei Zeilen unter "keine
Bewertung von Menschen". "1 Aufgabe(n) angelegt" ausgeschrieben.
GEMESSEN: pruef-css-klassen ALLES IN ORDNUNG (vorher 3 Fehler),
pruef-meldungen 8/0, pruef-rechtetafel 19/0, alle Module laden,
keine doppelten Kachelnamen/-ziele/-farben mehr in allen vier Rollen.
Co-Authored-By: Claude Opus 5 <[email protected]>
412 lines
16 KiB
CSS
412 lines
16 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 {
|
|
/* .75rem statt .71rem (19.09.2026): Die Monatsbeschriftung ist
|
|
kein Schild, sondern etwas, das man liest -- 11,4 px sind dafuer
|
|
zu klein. 12 px ist die Untergrenze, die das Haus fuer Fliesstext
|
|
und Beschriftungen einhaelt. */
|
|
font-size: .75rem; 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); }
|
|
/* LEER IST WIRKLICH LEER (19.09.2026).
|
|
|
|
Vorher stand hier ein Mittelpunkt bei 32 % Deckkraft -- und daneben
|
|
trägt „Kann ich nicht sagen" einen Halbgeviertstrich. Zwei kurze
|
|
waagerechte Striche nebeneinander, und dazwischen liegt der
|
|
Unterschied zwischen „niemand hat hingesehen" und „jemand hat
|
|
hingesehen und konnte es nicht sagen".
|
|
|
|
Jetzt trägt die leere Zelle kein Zeichen, sondern einen
|
|
gestrichelten Rahmen: Man SIEHT das Fehlen, statt es zu lesen --
|
|
und es lässt sich mit keinem Zeichen mehr verwechseln. */
|
|
.w-streifen__zelle[data-stufe="leer"] {
|
|
background: none;
|
|
border-style: dashed;
|
|
border-color: color-mix(in srgb, var(--rand) 70%, transparent);
|
|
}
|
|
.w-streifen__zelle[data-stufe="unklar"] { color: var(--text-still); }
|
|
|
|
/* Die Zeichenerklärung unter dem Streifen. Dieselben Farben wie die
|
|
Zellen -- sie wird daneben gelesen, nicht auswendig gelernt. */
|
|
.w-legende--streifen { margin-top: 12px; }
|
|
.w-legende__zeichen {
|
|
display: grid; place-items: center;
|
|
width: 1.55rem; height: 1.4rem;
|
|
font-size: .82rem; font-weight: 700;
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius);
|
|
color: var(--text-still);
|
|
background: rgba(0, 0, 0, .25);
|
|
}
|
|
.w-legende__zeichen[data-stufe="laeuft"] { color: #7fb08a; border-color: color-mix(in srgb, #668e6e 55%, transparent); }
|
|
.w-legende__zeichen[data-stufe="waechst"] { color: #8ec9ff; border-color: color-mix(in srgb, #8ec9ff 45%, transparent); }
|
|
.w-legende__zeichen[data-stufe="hakt"] { color: #d8a76a; border-color: color-mix(in srgb, #cc9451 55%, transparent); }
|
|
.w-legende__zeichen[data-stufe="leer"] {
|
|
background: none; border-style: dashed;
|
|
border-color: color-mix(in srgb, var(--rand) 70%, transparent);
|
|
}
|
|
|
|
/* DIE ZAHLEN IN WORTEN, unter dem Bewegungsdiagramm.
|
|
|
|
Es gibt sie, weil die Aufschlüsselung vorher nur im Mausüberfahren
|
|
stand -- und wer dieses Haus benutzt, steht oft mit dem Handy im
|
|
Stream. Dort gibt es kein Überfahren. */
|
|
.w-bewegung__worte {
|
|
margin: 14px 0 0;
|
|
display: grid; gap: 4px;
|
|
}
|
|
.w-bewegung__wortzeile {
|
|
margin: 0;
|
|
display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
|
|
font-size: .82rem; line-height: 1.55;
|
|
}
|
|
.w-bewegung__wortmonat {
|
|
min-width: 4.5ch;
|
|
color: var(--text-leise); font-weight: 640;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.w-bewegung__worttext { color: var(--text-still); }
|
|
/* Ä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; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
DIE EIGENE SICHT — Lesehilfe, leerer Zustand, Wege weiter
|
|
(19.09.2026)
|
|
|
|
Alle drei sind dazugekommen, weil beim Durchgehen aus Benutzersicht
|
|
auffiel: Die Seite, die dem Beurteilten etwas geben soll, gab ihm
|
|
weniger als dem Beurteilenden — keine Erklärung zum Diagramm, keinen
|
|
Satz wenn nichts da ist, und eine Aufforderung ohne Ort.
|
|
===================================================================== */
|
|
.w-lesehilfe {
|
|
margin: 0 0 16px;
|
|
max-width: 62ch;
|
|
font-size: .84rem; line-height: 1.6;
|
|
color: var(--text-still);
|
|
}
|
|
|
|
/* Der leere Zustand. Kein Diagramm über nichts — ein Satz.
|
|
Ruhig gesetzt: „noch nichts da" ist keine Warnung. */
|
|
.w-leer {
|
|
padding: 20px 22px;
|
|
border: 1px dashed color-mix(in srgb, var(--rand) 80%, transparent);
|
|
border-radius: var(--radius);
|
|
background: color-mix(in srgb, var(--tinte) 96%, #ffffff 4%);
|
|
}
|
|
.w-leer__titel {
|
|
margin: 0 0 6px;
|
|
font-size: .95rem; font-weight: 640; color: var(--text-leise);
|
|
}
|
|
.w-leer__satz {
|
|
margin: 0; max-width: 58ch;
|
|
font-size: .86rem; line-height: 1.6; color: var(--text-still);
|
|
}
|
|
|
|
/* Die Wege weiter. Zwei, nicht fünf: einer führt zum Katalog, einer
|
|
zum Gespräch. Mehr wäre eine Auswahl statt eines nächsten Schritts. */
|
|
.w-wege {
|
|
margin: 20px 0 0;
|
|
display: flex; flex-wrap: wrap; gap: 10px;
|
|
}
|
|
|
|
/* Der zweite Weg tritt zurück: Der Katalog ist der naheliegende
|
|
nächste Schritt, das Gespräch der zweite. Eine eigene Knopfart
|
|
dafür anzulegen wäre zu viel — es reicht, die Fläche wegzunehmen. */
|
|
.w-weg--leise {
|
|
background: none;
|
|
border: 1px solid var(--rand);
|
|
color: var(--text-leise);
|
|
}
|
|
.w-weg--leise:hover { color: var(--text); border-color: var(--rand-hell); }
|