/* =====================================================================
   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; }
}