dogfather-universe/workspace/assets/css/werdegang.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;
  /* `var(--monate)` statt `auto-fit` (19.09.2026).
     `auto-fit` legt so viele Spuren an, wie in die BREITE passen --
     nicht so viele, wie Zellen da sind. Bei 390 px waren das sechs;
     die restlichen Monatszellen wanderten in eine zweite,
     unbeschriftete Rasterzeile. Kopf- und Datenzeile rechneten das
     ausserdem unabhaengig voneinander und konnten sich gegenseitig
     verschieben.
     Und das `overflow-x: auto` am Elternteil konnte nie greifen: Ein
     Raster mit `auto-fit` wird nie breiter als sein Kasten, es faltet
     sich um. Der Kommentar daneben beschrieb ein Verhalten, das es
     nicht gab. Jetzt kommt die Zahl aus den Daten -- so wie es das
     Bewegungsdiagramm nebenan schon richtig macht. */
  grid-template-columns: minmax(14ch, 1fr) repeat(var(--monate, 6), 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(var(--monate, 6), 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); }