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); }

/* =====================================================================
   DIE LISTE IST NACH ROLLE GETRENNT — 19.09.2026

   Filipe: „die rechte hand rolle immer zuerst und dan die modis. die
   sollen auch schön getrennt sein und verschieden aussehen also die
   rechte hand viel spezieller."

   ---------------------------------------------------------------------
   WAS „SPEZIELLER" HIER HEISST — UND WAS NICHT

   Nicht: größer, lauter, wichtiger. Die Hausregel gilt weiter —
   DogFather steht nicht über seinem Team, und die rechte Hand auch
   nicht. Was sie unterscheidet, ist die AUFGABE: Sie koordiniert den
   Alltag und schaut mit auf die anderen. Genau das darf man sehen.

   Umgesetzt wird es deshalb über MATERIAL, nicht über Größe:

     Rechte Hand   eigener Farbton als Kante und Schimmer, hellere
                   Fläche, kräftigerer Name, breiterer linker Rand
     Modis         die ruhige Grundform des Hauses

   Beide Karten sind gleich groß und tragen dieselben Zeilen. Wer sie
   nebeneinander sieht, erkennt zwei Sorten Aufgabe — keine Rangfolge.

   DER TON IST DER DER KACHEL. `--ton` steht am <body> (data-ton),
   gesetzt von kopf.js aus derselben Kachelliste, aus der auch die
   Farbe der Kachel kommt. Eine eigene Farbe hier wäre eine zweite
   Quelle, die beim nächsten Farblauf auseinanderfällt.
   ===================================================================== */
.w-liste { display: grid; gap: 0; }

.w-gruppe {
  margin: 26px 0 10px;
  padding-left: 12px;
  border-left: 3px solid var(--rand);
}
/* Die erste Gruppe braucht oben keinen Abstand — darüber steht schon
   die Überschrift der Seite. */
.w-liste > .w-gruppe:first-child { margin-top: 4px; }

.w-gruppe__name {
  margin: 0;
  font-size: .82rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-leise);
}
.w-gruppe__satz {
  margin: 3px 0 0; max-width: 60ch;
  font-size: .84rem; line-height: 1.55; color: var(--text-still);
}

/* Die Leitung bekommt den Ton der Kachel — als Kante und als leiser
   Schimmer, nicht als Fläche. Eine gefüllte Fläche würde den Namen
   darauf schlechter lesbar machen, und das ist der einzige Text, der
   hier wirklich zählt. */
.w-gruppe[data-rolle="hand"] {
  border-left-color: color-mix(in srgb, var(--ton, #8ec9ff) 70%, transparent);
}
.w-gruppe[data-rolle="hand"] .w-gruppe__name {
  color: color-mix(in srgb, var(--ton, #8ec9ff) 72%, #dbe4ef);
}

.w-karte[data-rolle="hand"] {
  border-left-width: 4px;
  border-left-color: color-mix(in srgb, var(--ton, #8ec9ff) 70%, transparent);
  border-color: color-mix(in srgb, var(--ton, #8ec9ff) 26%, var(--rand));
  background:
    linear-gradient(115deg,
      color-mix(in srgb, var(--ton, #8ec9ff) 7%, transparent) 0%,
      transparent 58%),
    color-mix(in srgb, var(--tinte) 91%, #ffffff 9%);
}
.w-karte[data-rolle="hand"]:hover,
.w-karte[data-rolle="hand"]:focus-visible {
  border-color: color-mix(in srgb, var(--ton, #8ec9ff) 46%, var(--rand));
  background:
    linear-gradient(115deg,
      color-mix(in srgb, var(--ton, #8ec9ff) 11%, transparent) 0%,
      transparent 58%),
    color-mix(in srgb, var(--tinte) 87%, #ffffff 13%);
}
.w-karte[data-rolle="hand"] .w-karte__name { font-weight: 700; }
.w-karte[data-rolle="hand"] .w-karte__rolle {
  color: color-mix(in srgb, var(--ton, #8ec9ff) 62%, var(--text-still));
}

/* Im Windows-Kontrastmodus trägt keine Farbe mehr etwas. Dann muss die
   Kante die Unterscheidung allein machen — sonst sehen beide Sorten
   Karte gleich aus und die Trennung ist weg. */
@media (forced-colors: active) {
  .w-karte[data-rolle="hand"] { border-left-width: 4px; border-left-style: double; }
  .w-gruppe[data-rolle="hand"] { border-left-style: double; }
}