/* species.css – Arten-Katalog und Artkarte (S93, Backlog #122 und #74) */ .species-view { padding: var(--space-md); } /* Wie im Bestand-Hub (S91): die Überschrift steht nur im Accessibility-Tree, weil sie sichtbar wortgleich unter der Tab-Beschriftung „Arten" stünde. Die 46 px, die sie kostet, sind hier zusätzlich spürbar — die Liste ist mit 50 Einträgen die längste der App. */ .species-view__title { font-size: var(--font-size-xl); font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--space-lg); } /* ─── Filterzeile ──────────────────────────────────────────────────────────── */ /* Style-Tokens identisch zu .month-chip (plants.css) und .weekday-chip (spaces.css). Das ist die DRITTE Kopie derselben sechs Deklarationen, und der TODO an .month-chip nennt ein generisches .chip in base.css bereits als den richtigen Ort. Er wird hier bewusst NICHT eingelöst: das wäre ein Refactoring an zwei Dateien, die diese Session nicht anfasst. Als Aufräumpunkt geflaggt — mit der dritten Kopie ist der Fall entschieden, nur nicht in dieser Session. Gemessen auf 375 px: die drei Chips belegen 290,2 von 343 px und stehen einzeilig; die Zeile kostet 34 px Höhe. */ .species-filter { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin: var(--space-sm) 0 var(--space-md); } /* Gemeinsame Deklarationen und das Schalten über aria-pressed stehen seit S98 * als .chip in base.css (Backlog #128) — diese Sorte hatte die Schaltform schon * richtig, sie ist dort zur allgemeinen geworden. Eigen bleibt die feste * Ziffernbreite: die Chips tragen ihre Trefferzahl, und ohne sie springt die * Zeile bei jedem Tastendruck. */ .species-filter__chip { font-variant-numeric: tabular-nums; } /* ─── Liste ────────────────────────────────────────────────────────────────── */ /* Trennlinien-Liste statt Kartenliste, und das ist die eine gemessene Entscheidung dieser Ansicht (S93). Gegeneinander gehalten wurden auf 375 × 667 px: zweizeilig (Name + botanisch) als Karte 76 px/Zeile 4548 px 5,0 Zeilen/Bild einzeilig als Karte 56 px/Zeile 3548 px 8,7 Zeilen/Bild einzeilig mit Trennlinie 48 px/Zeile 2714 px 11,6 Zeilen/Bild Der botanische Name ist das teuerste Element der Liste — er verdoppelt die Zeilenhöhe und ist beim Blättern das, was niemand liest. Auf der Artkarte ist er eine Identifikation, hier wäre er Ballast; deshalb steht er dort und nicht hier. */ /* Der Abstand unten ist Platz für den Nach-oben-Knopf (S95, list-top.js). Er ist als `margin` gesetzt und nicht als `padding`, weil `overflow: hidden` den Rahmen mitzöge — der Kasten bekäme eine leere weiße Zone. **Der Katalog ist die einzige Liste, die das braucht**, und der Grund ist ein Fehlen: Aufgaben und Pflanzenliste tragen unter sich eine Legende, die die letzte Zeile aus dem Knopfbereich schiebt. Hier folgt der Fuß direkt. Gemessen auf 375 × 667 lag der Knopf (562,5–606,5) damit auf dem letzten Eintrag der Liste — „Zyperngras" zu 9,4 % verdeckt, Heikos Beobachtung aus dem S95-Gerätedurchgang. **44 px = die Knopfhöhe, und der Wert ist auf Symmetrie gerechnet** (S95, Heikos zweiter Blick am Gerät). Der Knopf hängt mit 8 px Abstand über dem Fuß — das ist `GAP` in list-top.js und gilt für alle drei Listen, also ist der obere Abstand der verstellbare. Mit der ersten Fassung (52 px) standen 16 px über und 8 px unter dem Knopf; mit 44 px sind es 8 und 8, und der Knopf sitzt mittig in der Lücke zwischen letzter Zeile und Fuß. Der Wert ist damit an die Knopfgeometrie gebunden und nicht an die Legendenhöhe der anderen Listen: dass beide ähnlich groß sind, ist Zufall und keine Begründung. Bei kurzer Trefferliste bleibt der Raum leer stehen — der Knopf erscheint dort ohnehin nicht (Schwelle 600 px), und eine an den Knopf gekoppelte Umschaltung wäre eine JS-Abhängigkeit für 44 px Weißraum. */ .species-list { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 44px; } .species-list__row { display: flex; align-items: center; gap: var(--space-sm); width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); background: none; border: 0; text-align: left; } .species-list li + li .species-list__row { border-top: 1px solid var(--color-border); } /* `ellipsis` statt Umbruch: eine umbrechende Zeile macht aus der gleichmäßigen Liste einen Stolperstein, und der einzige Name, der überhaupt in die Nähe kommt, ist „Madagaskar-Kranzschlinge" (24 Zeichen). Mit dem Bestands-Zeichen daneben bleiben ihm 253 px, gebraucht werden rund 200 — gemessen schneidet keiner der 50 Namen ab. Die Regel steht trotzdem, weil das Set wächst. */ .species-list__label { flex: 1; min-width: 0; font-size: var(--font-size-base); font-weight: 500; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Bestands-Zeichen. Bauform aus .plant-card__badge--fertilize übernommen (runde Fläche in --color-primary-bg, 12-px-Zeichen in --color-primary), damit „ich habe das schon" in der App eine Gestalt hat und nicht zwei. Es steht NEBEN der Filterzeile und nicht statt ihrer: der Filter beantwortet „zeig mir nur, was mir fehlt", das Zeichen beantwortet „habe ich die hier schon?" beim Blättern durch alle. Heikos Entscheidung, gegen meine Messung — die galt der Textpille „im Bestand", die bei 26 von 50 Arten auf jeder zweiten Zeile stand und dem längsten Namen sein Ende nahm. Das Zeichen kostet 30 statt 93 px und schneidet nichts ab. Keine Legende, und das ist dieselbe Begründung wie beim ⏸ in S54/S68: der Filter-Chip „Im Bestand" steht im Klartext unmittelbar über der Liste. Ein Legenden-Eintrag wäre die zweite Nennung derselben Sache. S97: „Bauform übernommen" ist keine Kopie mehr — die Form steht in `.glyph-mark` (base.css, Backlog #132), hier bleiben die Farben. Die eigene Icon-Klasse ist dabei ersatzlos entfallen; `.glyph-mark__icon` trägt dieselben 12 px und zusätzlich `fill: currentColor`, was das Häkchen nicht berührt, weil sein `fill="none"` am `` steht (Messung und Begründung dort). */ .species-list__badge { background: var(--color-primary-bg); color: var(--color-primary); } /* `.species-list__chevron` ist in S115 nach base.css gewandert und heißt dort `.row-chevron` (Backlog #151 a) — sie war deklarationsgleich mit `.stock-row__chevron`, und die Zeichnung stand daneben ein zweites Mal. */ /* Trefferzahl über der Liste. Tabellenziffern aus demselben Grund wie bei .species-search__count: die Zeile darf beim Tippen nicht flattern. */ .species-list__count { font-size: var(--font-size-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; margin-bottom: var(--space-sm); } /* Leerlauf eines Filters — kein Fehler, nur nichts drin. Deshalb die gedämpfte Fläche von .species-empty und nicht die Bauform von .plants-empty: der Katalog ist nie leer, es ist immer nur die gewählte Sicht. */ .species-list__none { font-size: var(--font-size-sm); color: var(--color-text-muted); background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-md); } /* ─── Artkarte (#74) ───────────────────────────────────────────────────────── */ /* Gemessen an den drei Randfällen des Sets (längster Name, Art ohne Dünger und ohne Umtopf-Rhythmus, längste careNote): die Karte trägt in allen dreien auf 375 × 667 px ohne Scrollen. */ .species-card { display: flex; flex-direction: column; gap: var(--space-md); } /* Kopfzeile wie in jeder anderen Sub-View der App (.legal-view__header, .space-detail__header): Zurück-Knopf links, Titel daneben. Der Titel ist hier zweizeilig — Volksname über botanischem Namen. Bis S94 stand hier `flex-start` mit der Begründung, bei zentrierter Ausrichtung säße der Knopf „auf Höhe der Lücke zwischen den beiden Zeilen". **Am Bild gemessen tritt das nicht ein**, und der Grund ist eine Proportion, die die Begründung nicht kannte: der Knopf ist 38 px hoch, die beiden Titelzeilen sind 27 und 20 px — er ist höher als jede von ihnen und klammert deshalb beide, statt neben einer zu stehen. Mit `flex-start` lag seine Mitte 6 px über der Mitte des Titelblocks und er hing oben über. Heikos Beobachtung am Gerät, an zwei Screenshots gegeneinander gehalten. */ .species-card__head { display: flex; align-items: center; gap: var(--space-md); } /* --font-size-lg und nicht -xl wie in der Pflanzenliste: neben dem Zurück-Knopf bleiben auf 375 px noch 237 px, und der längste Name des Sets („Madagaskar-Kranzschlinge", 24 Zeichen) bräuchte bei 22 px drei Zeilen. */ .species-card__name { font-size: var(--font-size-lg); font-weight: 700; letter-spacing: -0.02em; } /* Der Pflegewerte-Kasten. Schlüssel links gedämpft, Wert rechts gewichtet — dieselbe Leserichtung wie die Kennzahlen im Auswertung-Tab. Der Wert darf umbrechen (Gießen trägt zwei Angaben), der Schlüssel nicht. */ .species-facts { display: flex; flex-direction: column; gap: var(--space-sm); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-md); } .species-fact { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); font-size: var(--font-size-sm); } .species-fact__key { color: var(--color-text-muted); white-space: nowrap; } .species-fact__value { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; } /* Die Fußnote zur Datenlage sitzt auf der Karte schief, und das ist gemessen: 8 px zwischen ihrer Haarlinie und dem Text, 16 px vom Text bis zum Seitenfuß. Sie steht damit näher an ihrer Linie als am Fuß, obwohl sie zwischen beiden liegt. Vorbild ist `.legend` im Aufgaben-Tab (16 px über der Linie, 16 px darunter) — Heikos Beobachtung am Gerät, und die Legende ist die Stelle, die ihm dort gefällt. **Hier und nicht an `.species-info__foot` selbst** (plants.css): dieselbe Klasse trägt die Fußnote auch im Pflanzen-Formular, wo sie in `.species-info` mit `gap: var(--space-sm)` steht und S58 die Abstände dieser Gruppe teuer gesetzt hat. Die Karte hat mit ihrem `--space-md`-Gap eine andere Nachbarschaft und deshalb eine andere richtige Antwort; eine Änderung an der geteilten Klasse hätte das Formular mitverschoben, ohne dass es jemand verlangt hätte. */ .species-card .species-info__foot { margin-top: 0; padding-top: var(--space-md); } /* ─── Eigene Pflanzen dieser Art (S94, Backlog #130) ───────────────────────── */ /* Trennlinien-Liste wie der Katalog oben in dieser Datei — dieselbe Bauform, damit „Zeile, die woanders hinführt" in der App eine Gestalt hat und nicht zwei. Der einzige Unterschied ist das Bild, und es kostet 12 px: 60 px je Zeile statt der 48 einer Katalog-Zeile, plus 1 px Trennlinie ab der zweiten. Gemessen auf 375 × 667 px gegen den echten Bestand (29 Records auf 23 Arten), Blockhöhe je Pflanzenzahl: 1 Pflanze 62 px (mit Überschrift 90) 2 Pflanzen 123 px (mit Überschrift 151) 3 Pflanzen 184 px (mit Überschrift 212) Die Überschrift kostet also konstant 28 px, die Raumzeile **null** — die 44-px-Foto bestimmt die Zeilenhöhe, zwei Textzeilen haben darunter Platz. Das ist der Grund, warum der Raum unter dem Namen steht und nicht daneben: in derselben Zeile schnitt er bei 5 der 23 Arten den Namen ab. */ .species-mine__title { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: var(--space-sm); } .species-mine__list { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } /* Die Zeile ist das `
  • ` und trägt die Fläche; die beiden Knöpfe darin sind Foto und Weiter. Bis zum Gerätedurchgang war die ganze Zeile ein `