dogfather-universe/workspace/assets/css/leistung.css

/* ===================================================================
   Zahlen. Baut auf gate.css, start.css und aufgaben.css auf.

   DER GESTALTERISCHE GRUNDSATZ dieser Seite ist ein anderer als auf den
   uebrigen: Hier steht nicht die Flaeche im Vordergrund, sondern die
   ZAHL. Alles andere -- Rahmen, Beschriftung, Vergleich, Linie --
   ordnet sich ihr unter und wird leiser, je weiter es von ihr weg ist.

   Deshalb:
     * Die Zahl in Tabellenziffern (font-variant-numeric), damit
       untereinanderstehende Werte auf derselben Stelle sitzen. Ohne das
       tanzen 1.240 und 987 gegeneinander, und man vergleicht schlechter.
     * Der Vergleich in GEDECKTEM Gruen/Rot, nicht in Signalfarbe. Ein
       Minus ist eine Auskunft, kein Alarm -- und die Seite soll
       augenschonend bleiben (Dauerregel).
     * Die Verlaufslinie ohne Achsen, Gitter und Beschriftung. Sie
       beantwortet genau eine Frage ("geht es hoch oder runter?"), und
       jede weitere Linie darin macht diese Antwort langsamer.
   =================================================================== */

/* ---------- Kopf ------------------------------------------------------- */

.leistung__wahl { display: grid; gap: 6px; min-width: 220px; }

/* Wie vollstaendig die Woche erfasst ist. Steht neben der Ueberschrift
   und nicht darunter: Wer die Zahlen liest, muss diesen Satz VORHER
   gesehen haben -- eine Woche aus zwei Tagen ist etwas anderes als eine
   aus sieben. */
.leistung__erfassung {
  margin: 0; font-size: 13px; color: var(--text-still);
}
.leistung__erfassung[data-knapp="ja"] { color: #d9a441; }

.leistung__leer {
  margin: 0; padding: 18px; text-align: center;
  color: var(--text-leise); font-size: 14px; line-height: 1.6;
}

.leistung-woche, .leistung-ziele, .leistung-tage { margin: 0 0 30px; }

/* ---------- Die Wochenkarten -------------------------------------------- */

.zahlkarten {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.zahlkarte {
  position: relative; overflow: hidden;
  padding: 16px 16px 12px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  display: grid; gap: 4px;
  /* Alle Karten gleich hoch, auch die ohne Verlaufslinie. Sonst
     entsteht eine Treppe, und eine Treppe liest man als Bedeutung
     ("die kurze Karte ist weniger wichtig"), obwohl sie nur ein
     Nebeneffekt ist. */
  align-content: start; min-height: 132px;
}

/* DIE LEITZAHL. Die Verweildauer ist seit 2026 die Groesse, an der der
   Algorithmus alles aufhaengt -- sie darf nicht eine von sieben
   gleichaussehenden Karten sein. Ein feiner Rand und ein Hauch Farbe
   reichen; ein Kasten in Signalfarbe waere Laerm. */
.zahlkarte[data-leit="ja"] {
  border-color: color-mix(in srgb, var(--akzent) 34%, transparent);
  background:
    radial-gradient(120% 100% at 0% 0%,
      color-mix(in srgb, var(--akzent) 9%, transparent), transparent 70%),
    var(--flaeche);
}

.zahlkarte__name {
  margin: 0; font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-still);
}

.zahlkarte__wert {
  margin: 0; font-size: 30px; line-height: 1.1; font-weight: 650;
  color: var(--text);
  /* Tabellenziffern: gleiche Breite je Ziffer. Damit stehen die Werte
     mehrerer Karten auf derselben senkrechten Linie. */
  font-variant-numeric: tabular-nums;
}

.zahlkarte__wandel {
  margin: 2px 0 0; font-size: 12.5px; line-height: 1.45;
}
/* Gedeckt, nicht grell. Gruen und Rot sind hier Auskunft, nicht Ampel --
   und beide bleiben ueber 4,5:1 gegen die Kachelflaeche. */
.zahlkarte__wandel[data-richtung="hoch"]   { color: #6fc38a; }
.zahlkarte__wandel[data-richtung="runter"] { color: #e08c93; }
.zahlkarte__wandel[data-richtung="gleich"] { color: var(--text-still); }

/* Die kleine Verlaufslinie. Sie sitzt unten in der Karte und laeuft
   ueber die ganze Breite -- als Untergrund, nicht als eigenes Bild. */
.zahlkarte__linie {
  width: 100%; height: 30px; margin-top: 8px; display: block;
  overflow: visible;
}
.zahlkarte__linie polyline {
  fill: none; stroke: var(--akzent); stroke-width: 1.6;
  stroke-linejoin: round; stroke-linecap: round;
  /* Nicht mitskalieren: preserveAspectRatio="none" streckt das Bild in
     die Breite und wuerde die Linie sonst hauchduenn ziehen. */
  vector-effect: non-scaling-stroke;
  opacity: .8;
}
.zahlkarte__linie circle {
  fill: var(--akzent); stroke: none;
  /* Der letzte Punkt ist das Jetzt. Er wird durch die Streckung zum
     Ei -- deshalb bleibt er klein genug, dass es nicht auffaellt. */
}
.zahlkarte[data-leit="ja"] .zahlkarte__linie polyline { opacity: 1; }

/* ---------- Ziele -------------------------------------------------------- */

.zielbalken { display: grid; gap: 16px; }

.zielbalken__zeile {
  padding: 14px 16px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
}
.zielbalken__kopf {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 10px; flex-wrap: wrap;
}
.zielbalken__name { font-size: 14px; color: var(--text); }
.zielbalken__zahl {
  font-size: 14px; color: var(--text-leise); font-variant-numeric: tabular-nums;
}

.zielbalken__spur {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: rgba(150, 186, 220, 0.12);
}
.zielbalken__fuell {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--akzent-tief), var(--akzent));
  transition: width var(--tempo);
}
/* Ein erreichtes Ziel wechselt die Farbe, nicht die Groesse. Ein
   springender Balken waere Bewegung ohne Aussage. */
.zielbalken__fuell[data-voll="ja"] {
  background: linear-gradient(90deg, #2f8f5b, #55c184);
}
.zielbalken__anteil {
  margin: 8px 0 0; font-size: 12.5px; color: var(--text-still);
}

@media (prefers-reduced-motion: reduce) {
  .zielbalken__fuell { transition: none; }
}

/* ---------- Die Tageszeilen ---------------------------------------------- */

.tagetabelle {
  display: grid; gap: 8px;
}

.tagzeile {
  display: grid; align-items: center; gap: 6px 16px;
  grid-template-columns: 74px 1fr auto;
  padding: 12px 16px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
}
/* EIN TAG OHNE EINTRAG BLEIBT SICHTBAR -- er ist selbst die Auskunft.
   Er wird nur leiser, damit die erfassten Tage vorn stehen. */
.tagzeile[data-leer="ja"] {
  background: transparent;
  border-style: dashed;
  border-color: rgba(150, 186, 220, 0.13);
}
/* Woher die Zeile kommt. Ein schmaler Streifen links, kein Etikett:
   Man muss es wissen KOENNEN, nicht bei jedem Blick lesen. */
.tagzeile[data-quelle="import"] {
  border-left: 3px solid color-mix(in srgb, var(--violett) 55%, transparent);
}

.tagzeile__datum { display: grid; gap: 1px; }
.tagzeile__wochentag {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-still);
}
.tagzeile__zahl {
  font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums;
}

.tagzeile__werte {
  display: flex; flex-wrap: wrap; gap: 6px 22px; min-width: 0;
}
.tagzeile__wert { display: grid; gap: 1px; min-width: 0; }
.tagzeile__wertname {
  font-size: 12px; letter-spacing: .05em; color: var(--text-still);
}
.tagzeile__wertzahl {
  font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums;
}
.tagzeile__leer { font-size: 13.5px; color: var(--text-still); }

/* Die Notiz laeuft ueber die ganze Zeilenbreite unter den Werten --
   sie ist der Kontext, ohne den eine eingebrochene Zahl in die Irre
   fuehrt ("krank", "Technik ausgefallen"). */
.tagzeile__notiz {
  grid-column: 2 / -1;
  margin: 2px 0 0; font-size: 13px; line-height: 1.5;
  color: var(--text-leise);
}

.tagzeile__knopf {
  grid-row: 1; grid-column: 3;
  padding: 8px 14px; min-height: 38px;
  font: inherit; font-size: 13px;
  color: var(--text-leise); cursor: pointer;
  background: transparent;
  border: 1px solid var(--rand); border-radius: 999px;
  transition: color var(--tempo), border-color var(--tempo);
}
.tagzeile__knopf:hover, .tagzeile__knopf:focus-visible {
  color: var(--text); border-color: var(--rand-hell);
}

/* ---------- Der Import --------------------------------------------------- */

.dialog--breit { max-width: 720px; }

.import-vorschau {
  margin: 4px 0 14px; padding: 16px;
  background: rgba(150, 186, 220, 0.05);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
}

.import-zahlen { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.import-zahl { display: grid; gap: 2px; }
.import-zahl__wert {
  font-size: 26px; font-weight: 650; line-height: 1.1;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.import-zahl__name { font-size: 12px; color: var(--text-still); }
.import-zahl[data-warn="ja"] .import-zahl__wert { color: #d9a441; }

.import-spalten {
  margin: 14px 0 0; font-size: 13px; line-height: 1.6;
  color: var(--text-leise);
}
.import-probleme {
  margin: 10px 0 0; padding-left: 20px;
  font-size: 12.5px; line-height: 1.7; color: #d9a441;
}

/* ---------- Handy --------------------------------------------------------- */

@media (max-width: 640px) {
  /* Die Wochenkarten werden EINSPALTIG, nicht enger. Zwei Karten
     nebeneinander auf 360 px lassen fuer die Zahl 150 px uebrig -- ein
     vierstelliger Wert bricht dann um, und eine umgebrochene Zahl ist
     keine Zahl mehr. */
  .zahlkarten { grid-template-columns: 1fr; }
  .zahlkarte { min-height: 0; }
  .zahlkarte__wert { font-size: 27px; }

  .leistung__wahl { min-width: 0; width: 100%; }

  /* Die Tageszeile wird zweizeilig: Datum und Knopf oben, die Werte
     darunter. Drei Spalten nebeneinander quetschen den Knopf sonst auf
     unter 44 px -- und darunter trifft man ihn mit dem Daumen nicht
     mehr zuverlaessig. */
  .tagzeile {
    grid-template-columns: 1fr auto;
    gap: 10px 12px;
  }
  .tagzeile__datum { grid-row: 1; grid-column: 1; }
  .tagzeile__knopf { grid-row: 1; grid-column: 2; }
  .tagzeile__werte { grid-row: 2; grid-column: 1 / -1; gap: 8px 18px; }
  .tagzeile__notiz { grid-row: 3; grid-column: 1 / -1; }

  .import-zahl__wert { font-size: 23px; }
}