/* stats.css – Auswertung-Tab (S87, Backlog #81) */ .stats-view { padding: var(--space-md); } .stats-view__title { font-size: var(--font-size-xl); font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--space-lg); } /* Blockabstand über eine Trennlinie statt über Weißraum allein: die vier Blöcke tragen sehr unterschiedliche Zeilenformen (Baumliste, Fließtext, Wertzeilen), und ohne Kante liest sich der Übergang als Fortsetzung. Dieselbe Bauform wie die Abschnitte in settings.css — erster Block ohne Linie, weil darüber die Überschrift steht. */ .stats-block + .stats-block { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-border); } .stats-block__title { font-size: var(--font-size-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: var(--space-sm); } /* Die tragende Zahl eines Blocks. Größer als der Fließtext, aber kleiner als der Seitentitel — sie ist die Antwort auf die Frage des Blocks, nicht die Überschrift der Seite. */ .stats-headline { font-size: var(--font-size-lg); font-weight: 600; color: var(--color-text); } .stats-headline--small { font-size: var(--font-size-base); font-weight: 500; margin-top: var(--space-sm); } .stats-note { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--space-xs); } /* Der einzige Hinweis der Seite mit einer Handlung dahinter: Pflanzen ohne Artzuordnung verlieren Winterwerte, Düngemonate und Gefäß-Warnung. Er nutzt die Ruhefläche aus tasks.css/settings.css und kein eigenes Warnorange — es ist kein Fehler, sondern ein Zustand, den man verbessern kann. Linker Balken wie .form-field__warning, damit die Form im Projekt wiedererkennbar bleibt. */ .stats-note--action { display: block; margin-top: var(--space-md); padding: var(--space-sm) var(--space-md); background: var(--color-primary-bg); border-left: 3px solid var(--color-primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--color-text); } .stats-note__hint { display: block; margin-top: var(--space-xs); font-size: var(--font-size-sm); color: var(--color-text-muted); } /* ─── Baumliste: Standorte mit Räumen, Arten ─────────────────────────────── */ .stats-tree { margin-top: var(--space-sm); } .stats-tree__space, .stats-tree__room { display: flex; align-items: baseline; padding: 6px 0; } /* Der Name schrumpft und kappt, wenn er muss — aber er wächst nicht: die Punktreihe daneben soll den Rest füllen. `flex: 0 1 auto` statt `flex: 1`, sonst nimmt der Name die ganze Zeile und die Punkte hätten keinen Platz. */ .stats-tree__name { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* Die Führungspunkte sind ein EIGENES Element und kein ::after am Namen. Die erste Fassung hatte sie als Pseudo-Element im Namens-Span — und weil der `overflow: hidden` plus `text-overflow: ellipsis` trägt, wurde die Punktlinie gekappt und durch ein Auslassungszeichen ersetzt: aus „Zuhause" wurde „Zuhause…", und die Liste sah aus, als wären alle Namen zu lang. Die DOM-Messung meldete dazu nichts Auffälliges — kein Überlauf, alle Elemente sichtbar. Gefunden hat es erst der Screenshot. Zweck der Punkte: bei einer Liste aus Name-Zahl-Paaren muss das Auge sonst quer über eine leere Fläche springen, um die zugehörige Zahl zu finden. */ .stats-tree__dots { flex: 1 1 auto; min-width: var(--space-md); margin: 0 var(--space-sm); border-bottom: 1px dotted var(--color-border); transform: translateY(-4px); } .stats-tree__count { font-variant-numeric: tabular-nums; font-weight: 600; flex-shrink: 0; } /* Räume rücken ein und werden leiser: sie sind eine Aufschlüsselung ihres Standorts, keine gleichrangige Zeile. Die Liste liegt als Geschwister der Standortzeile in einer .stats-tree__group und nicht in der Zeile selbst — als Kind eines Flex-Containers landete sie sonst RECHTS neben dem Standort statt darunter. Auch das hat erst der Screenshot gezeigt. */ .stats-tree__rooms { margin-left: var(--space-md); } .stats-tree__room { font-size: var(--font-size-sm); color: var(--color-text-muted); padding: 3px 0; } .stats-tree__room .stats-tree__count { font-weight: 500; } /* Die Sammelzeile "Ohne Artangabe" ist keine Art. Sie steht gedämpft und abgesetzt UNTER der Kappungszeile — in der ersten Fassung stand sie zwischen den drei häufigsten Arten und dem „und 9 weitere" und las sich damit als vierter Platz einer Rangliste, zu der sie nicht gehört. */ .stats-tree__space--muted { color: var(--color-text-muted); margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--color-border); } /* ─── Gießvorgänge ───────────────────────────────────────────────────────── */ /* Eigene Bauform statt .stats-row, weil die Rollen hier andere sind: die Wochenzahl ist die Aussage und gehört nach vorn, der Winterwert ist ihr Nachsatz. Über .stats-row gebaut stand die Hauptzahl klein und grau als „Label" und „Im Winter sind es 7,5." fett darunter — die Gewichtung genau verkehrt herum, sichtbar erst im Screenshot. */ .stats-runs__value { display: block; font-size: var(--font-size-lg); font-weight: 600; color: var(--color-text); } .stats-runs__winter { display: block; font-size: var(--font-size-base); color: var(--color-text-muted); margin-top: 2px; } /* ─── Wertzeilen: Pflege und Rekorde ─────────────────────────────────────── */ .stats-rows { display: flex; flex-direction: column; gap: var(--space-md); } /* Jede Zeile ist ein eigener Block mit drei gestapelten Elementen. Das `display: block` auf Label und Wert ist der Kern und kein Beiwerk: in S86 ist an genau dieser Stelle ein Wert mit seinem Hinweis zu einem Absatz zusammengeflossen, weil zwei Spans ohne eigenes display inline bleiben. Die DOM-Messung meldete beide als vorhanden und sichtbar — sichtbar waren sie auch, nur eben in einer Zeile. */ .stats-row { display: flex; flex-direction: column; } .stats-row__label { display: block; font-size: var(--font-size-sm); color: var(--color-text-muted); } .stats-row__value { display: block; font-size: var(--font-size-base); font-weight: 600; color: var(--color-text); margin-top: 2px; } .stats-row__hint { display: block; font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--space-xs); } /* ─── Leerzustand ────────────────────────────────────────────────────────── */ /* Gleiche Bauform wie .plants-empty und .tasks-empty, inklusive der 52 px des Zeichens — der Leerzustand ist hier Normalfall und soll aussehen wie überall sonst in der App, nicht wie ein Sonderfall dieser Seite. Kasten und Zeichen kommen seit S137 aus base.css, Abschnitt „Leerzustand: die gemeinsame Bauform" (Backlog #161); hier bleiben die beiden Regeln, die von den fünf anderen abweichen. Der Satz stimmt seit S115 auch im CSS (Backlog #151). Bis dahin war dieser Block der einzige der fünf ohne `display: flex` und zentrierte per `text-align` — was für Text trägt und für eine Blockbox nicht: die Wortmarke stand in S114 als einzige links neben der Mitte und brauchte dort ein eigenes `margin-inline: auto`, das jetzt entfallen ist. Mitgezogen sind die beiden anderen Abweichungen, weil sie dieselbe Klasse Drift sind: seitliches Polster auf --space-lg, und die drei Kind-Abstände (16/8/24 px) ersetzt das `gap` der Vorlage. Damit gibt es für diese Bauform eine Beschreibung statt vier. */ .stats-empty__headline { font-size: var(--font-size-lg); font-weight: 600; } .stats-empty__text { color: var(--color-text-muted); } /* ─── Friedhofs-Bedienweg (S113, Backlog #119 und #150) ──────────────────── */ /* Die Station steht als erste Zeile der Auswertung, in der Bauform des Bestands-Hubs (stock.css). Sie braucht nur ihren Abstand nach unten — alles andere kommt aus `.stock-row`, und das ist der Zweck: eine Zeile, die in eine Unteransicht führt, sieht in dieser App überall gleich aus. */ .stats-station-list { margin-bottom: var(--space-lg); } /* Der Kennzahlenblock in der Unteransicht steht ohne Überschrift und direkt über der Liste — ohne diesen Abstand kleben Zahlen und Einträge aneinander. */ .archive-head + .stats-block { margin-bottom: var(--space-lg); } /* Kopfzeile der Sub-View: Zurück-Knopf und Titel nebeneinander, mit denselben Werten wie die Artkarte (`.species-card__head`, species.css) — `space-md` und nicht `space-sm`, sonst klebt der Titel am Knopf. In S113 zunächst mit 8 px gebaut und von Heiko am Gerät bemängelt; die Konvention stand die ganze Zeit daneben. Die Titelgröße folgt derselben Regel: `--font-size-lg` wie `.species-card__name`, weil neben dem Knopf weniger Breite bleibt. */ .archive-head { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); } .archive-head .stats-view__title { margin-bottom: 0; font-size: var(--font-size-lg); } /* Umrandete Fläche wie `.species-list` und nicht die flache Trennlinien-Form der Wertzeilen: die Einträge hier sind Objekte mit einem Weg dahinter, keine Kennzahlen. Der Kommentar an `.stock-row` (stock.css) begründet dieselbe Unterscheidung für den Bestands-Hub — stünde beides in derselben Gestalt da, sähe die App Navigation und Statistik gleich an. `overflow: hidden` hält die Ecken sauber, weil die erste und letzte Zeile bis an den Rahmen laufen. */ .archive-list { list-style: none; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .archive-entry + .archive-entry { border-top: 1px solid var(--color-border); } /* Die ganze Zeile ist der Tipp-Bereich — deshalb ein