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

/* =====================================================================
   DIE BACKSTAGE-TABELLE (11.09.2026)

   Ein Textfeld, in das eine ganze Tabelle passt -- und eine Vorschau,
   die nicht nur zählt, sondern NAMEN nennt. Wer eine Zeile übersieht,
   hat stillschweigend jemanden ausgelassen; das ist die Sorte Fehler,
   die erst Wochen später auffällt.
   ===================================================================== */
.netz__feld {
  width: 100%;
  min-height: 120px;
  font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
  font-size: .82rem; line-height: 1.5;
  /* Umbrechen AUS: Eine Tabellenzeile soll eine Zeile bleiben, sonst
     sieht man nicht, ob die Spalten sauber getrennt wurden. */
  white-space: pre; overflow-x: auto;
}
.import-vorschau__zeile {
  margin: 0 0 4px;
  font-size: .84rem; line-height: 1.5;
  color: var(--text-leise);
}
.import-vorschau__zeile[data-art="gut"] {
  color: color-mix(in srgb, var(--k-gut, #5fc99a) 45%, #ffffff);
  font-weight: 600;
}
.import-vorschau__zeile[data-art="warn"] {
  color: color-mix(in srgb, var(--k-warn, #e0736b) 42%, #ffffff);
  font-weight: 600;
}
.import-vorschau__zeile[data-art="still"] {
  color: var(--text-still); font-size: .8rem;
}

/* =====================================================================
   DIE ANLEITUNGEN (11.09.2026)

   Filipe: "ich brauch auch eine erklärung immer dabei wo die scouts und
   manager das finden. also eine perfekte beschreibung bitte."

   Zwei Ebenen, weil zwei Fragen dahinterstecken:

     1. WAS IST DAS?  -- zwei Sätze, immer sichtbar unter den Knöpfen.
        Wer davorsitzt und beide Knöpfe zum ersten Mal sieht, weiß sonst
        nicht, welcher für ihn gemeint ist.
     2. WIE GEHT DAS? -- die Schritte, im Fenster, wo man sie braucht.
        Dort stören sie niemanden, der es längst weiß.

   Eine Anleitung, die immer und vollständig auf der Seite steht, liest
   nach dem dritten Mal niemand mehr -- und dann steht sie nur im Weg.
   ===================================================================== */
.quellen-hinweis {
  display: flex; flex-wrap: wrap; gap: 6px 22px;
  margin: 10px 0 0;
  font-size: .8rem; line-height: 1.5;
  color: var(--text-still);
}
.quellen-hinweis > span { flex: 1 1 320px; min-width: 0; }
.quellen-hinweis strong { color: var(--text-leise); }

/* Die Schritte im Fenster. Nummern in der Hausfarbe, damit man sie als
   Reihenfolge liest und nicht als Aufzählung -- bei einer Anleitung ist
   die Reihenfolge die halbe Auskunft. */
.anleitung {
  margin: 10px 0 12px; padding: 0 0 0 1.5em;
  font-size: .83rem; line-height: 1.55;
  color: var(--text-still);
}
.anleitung li { margin: 0 0 6px; }
.anleitung li::marker { color: var(--akzent); font-weight: 700; }
.anleitung strong { color: var(--text-leise); }

.dialog__unter--still { font-size: .8rem; color: var(--text-still); }

/* ---- EINGEKLAPPTE HILFE (11.09.2026) ------------------------------
   Filipe zum Backstage-Fenster: "die sieht so scheisse aus."

   Der Grund war nicht die Farbe, sondern die Reihenfolge: Fuenf lange
   Schritte standen VOR dem Feld, in das man einfuegt. Wer das Fenster
   oft benutzt, scrollte jedes Mal an einer Anleitung vorbei, die er
   laengst kennt.

   Jetzt liegt sie unter einer Zeile, die man aufklappen KANN. Kein
   Kasten, kein Rahmen -- nur ein Pfeil und eine stille Zeile, damit
   sie im geschlossenen Zustand fast nichts vom Fenster wegnimmt. */
.hilfe {
  margin: 14px 0 4px;
  border-top: 1px solid var(--rand);
  padding-top: 10px;
}
.hilfe > summary {
  display: flex; align-items: center; gap: 7px;
  list-style: none; cursor: pointer;
  font-size: .82rem; color: var(--text-still);
  padding: 3px 0;
  transition: color var(--tempo);
}
.hilfe > summary::-webkit-details-marker { display: none; }
/* Der Pfeil wird gedreht statt ausgetauscht -- ein Zeichen, zwei
   Zustaende, und die Drehung sagt von selbst, was passiert. */
.hilfe > summary::before {
  content: ""; flex: none;
  width: 7px; height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--tempo);
}
.hilfe[open] > summary::before { transform: rotate(45deg); }
.hilfe > summary:hover { color: var(--text-leise); }
.hilfe > summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.hilfe__satz {
  margin: 0 0 8px; font-size: .8rem; line-height: 1.55;
  color: var(--text-still);
}
.hilfe__satz strong { color: var(--text-leise); }

/* Der Tag steht neben seinem Hinweis, nicht in der Beschriftung. Vorher
   hing der ganze Erklaersatz in der Ueberschrift des Feldes und machte
   sie zweizeilig -- eine Beschriftung, die man lesen muss, ist keine
   mehr. */
/* `font: inherit` ist hier kein Schoenheitsfehler-Fix, sondern
   Notwendigkeit: Ohne Angabe rendert der Browser ein Datumsfeld in
   SEINER Schrift -- neben dem uebrigen Fenster sieht das aus wie ein
   Rest, den jemand vergessen hat. Die Breite deckelt es auf die
   Laenge, die ein Datum wirklich braucht; volle Breite laesst ein
   fast leeres Feld quer durch den Dialog laufen. */
.neu__zeile--tag input[type="date"] {
  max-width: 190px;
  font: inherit; font-size: .88rem;
}
.feld-hinweis {
  margin: 5px 0 0; font-size: .76rem; color: var(--text-still);
}
/* "… oder direkt die Datei": steht UNTER dem Einfuegefeld und gehoert
   sichtbar dazu, ohne ihm den Rang abzulaufen. Das Dateifeld selbst
   bleibt klein -- es ist der zweite Weg, nicht der erste. */
.feld-hinweis--oder {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 8px;
}
.feld-datei { flex: 1 1 220px; min-width: 0; font-size: .76rem; }

/* Ein Fenster, das laenger ist als der Bildschirm, versteckt seine
   eigenen Knoepfe. Gerollt wird INNEN, damit "Uebernehmen" immer
   erreichbar bleibt. */
.dialog--breit .neu { max-height: min(86vh, 900px); overflow-y: auto; }

/* =====================================================================
   ZEITRÄUME AUS BACKSTAGE — zweite Fassung (14.09.2026)

   Filipe zur ersten: "das muss viel geiler aussehen und viel klarer."

   Er hatte recht. Die erste Fassung war eine Liste kleiner Werte ohne
   Rangfolge: Spanne, Diamanten, LIVE, Follower -- alles gleich groß,
   nichts sprang heraus. Wer draufschaut, will ZWEI Dinge in einer
   halben Sekunde wissen: WELCHER Zeitraum und WIE VIELE Diamanten.
   Genau die sind jetzt groß, alles andere ordnet sich darunter.

   DER RAHMEN IST BEWUSST ANDERS ALS BEI DEN WOCHENKARTEN. Wer einen
   Zeitraum für einen Tageswert hält, rechnet mit ihm weiter -- die
   Karte muss auf den ersten Blick sagen, dass sie etwas anderes ist.
   Deshalb: eigene Farbe an der Kante, die Spanne als Überschrift, die
   Zahl der Tage als Marke daneben.
   ===================================================================== */
.leistung-spannen { margin: 26px 0 0; }
.spannen__satz {
  margin: 4px 0 14px;
  font-size: .82rem; line-height: 1.6;
  color: var(--text-still);
  max-width: 64ch;
}
.spannen {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.spanne {
  position: relative; overflow: hidden;
  border: 1px solid var(--rand); border-radius: 16px;
  padding: 14px 16px 15px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)),
    var(--flaeche-tief, rgba(10, 16, 24, .72));
}
/* Die Kante links: ein Streifen in der Hausfarbe. Er sagt "andere
   Sorte Zahl", ohne dass ein einziges Wort dafür nötig wäre. */
.spanne::before {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--akzent) 75%, transparent),
    color-mix(in srgb, var(--akzent) 15%, transparent));
}

.spanne__kopf {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 11px;
  border-bottom: 1px solid var(--rand);
}
.spanne__spanne {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 1.06rem; font-weight: 650; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.spanne__strich { color: var(--text-still); font-weight: 400; }
.spanne__tage {
  font-size: .73rem; color: var(--text-leise);
  border: 1px solid color-mix(in srgb, var(--akzent) 30%, var(--rand));
  background: color-mix(in srgb, var(--akzent) 10%, transparent);
  border-radius: 999px;
  padding: 2px 9px 3px;
  white-space: nowrap;
}

/* Die Hauptzahl. Groß, aber nicht grell -- sie soll die erste sein,
   die man liest, nicht die einzige, die man sieht. */
.spanne__haupt {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 9px;
  margin-bottom: 12px;
}
.spanne__haupt-zahl {
  font-size: 1.85rem; font-weight: 700; line-height: 1.05;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.spanne__haupt-name {
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-still);
}
/* Der Durchschnitt steht in derselben Zeile und deutlich kleiner:
   Er ist eine Einordnung, kein zweiter Messwert. */
.spanne__schnitt {
  flex-basis: 100%;
  font-size: .76rem; color: var(--text-still);
  font-variant-numeric: tabular-nums;
}

.spanne__werte {
  display: grid; gap: 8px 14px;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  padding-top: 11px;
  border-top: 1px solid var(--rand);
}
.spanne__wert { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.spanne__name {
  font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-still);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spanne__zahl {
  font-size: .95rem; color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   EINE WOCHE OHNE EINEN EINZIGEN TAG (14.09.2026)

   Filipe: "wieso werden die zahlen oben nicht ausgefüllt von der excel
   datei?" Sieben Karten mit "0" und "wie in der Vorwoche" sehen aus
   wie ein Fehler. Stattdessen steht dort jetzt die Antwort -- und der
   Weg, wie man es ändert.
   ===================================================================== */
.woche-leer {
  border: 1px dashed color-mix(in srgb, var(--akzent) 34%, var(--rand));
  border-radius: 14px;
  padding: 14px 16px 15px;
  background: color-mix(in srgb, var(--akzent) 5%, transparent);
  max-width: 72ch;
}
.woche-leer__satz {
  margin: 0 0 6px;
  font-size: .96rem; font-weight: 600; color: var(--text);
}
.woche-leer__grund {
  margin: 0; font-size: .84rem; line-height: 1.6; color: var(--text-leise);
}
.woche-leer__weg {
  margin: 9px 0 0; padding-top: 9px;
  border-top: 1px solid var(--rand);
  font-size: .82rem; line-height: 1.6; color: var(--text-still);
}