/* Die drei Artenseiten im Design der Vorseite.
 *
 * Gilt fuer voegel.html, pflanzen.html und saeugetiere.html. Sie sehen gleich
 * aus und sind gleich gebaut - Werkzeugleiste, Ortsleiste, Fotoraster - und
 * teilen sich alle Bauteile aus styles.css. Drei Stylesheets waeren drei
 * Dateien, die auseinanderlaufen; dieselbe Begruendung wie bei den drei
 * Dashboard-Seiten.
 *
 * REIHENFOLGE IM HTML: styles.css, vorseite-design.css, app-design.css,
 * arten-design.css. Farbwerte, Kopf, Navigation, Fenster und Fussleiste kommen
 * aus app-design.css und gelten fuer alle App-Seiten; hier steht nur, was es
 * allein auf den Artenseiten gibt.
 *
 * DIE SEITENFARBE SAGT, WELCHE LISTE OFFEN IST. Bisher tat das ein eigener
 * Verlauf im Kopf (gruen / sand-tuerkis / braun-gruen, .app-header-plants und
 * .app-header-mammals). Die sind raus: Der Entwurf kennt keine Verlaufsbaender,
 * und der Kopf ist jetzt auf allen Seiten Papier. Stattdessen faerbt jede
 * Liste ihren Akzent - Voegel Terrakotta, Pflanzen Salbei, Saeugetiere Sand.
 * Das ist dieselbe Zuordnung wie bei den drei Kacheln der Startseite und beim
 * Datensatz-Umschalter des Dashboards: Wer von der Pflanzen-Kachel kommt,
 * bleibt im Salbei, und die Auswertung im Dashboard traegt dieselbe Farbe.
 *
 * WARUM EIGENE KLASSEN UND NICHT data-dataset: styles.css faerbt bei
 * body[data-dataset="pflanzen"] auch den Kopfverlauf - und diese Regel ist
 * staerker als eine mit nur einer Klasse davor. Mit .arten-pflanzen am body
 * gibt es den Wettlauf gar nicht erst.
 *
 * Klassennamen bleiben, wie sie waren: app.js, pflanzen.js, saeugetiere.js,
 * streifzug.js und species-detail.js bauen ihre Elemente mit den Klassen aus
 * styles.css.
 */

/* ---------- Die drei Listen ---------- */

/* Voegel behalten den Grundakzent aus app-design.css (Terrakotta) und brauchen
   deshalb keine eigene Zeile - .arten-voegel steht trotzdem im Markup, damit
   die drei Seiten gleich aussehen und eine spaetere Sonderregel einen Platz
   hat. Stufe 700 traegt auf Creme, 300 ist der Flaechenton; Begruendung und
   Messwerte stehen in app-design.css. */
body.arten-pflanzen {
  --accent: var(--color-accent-2-700);
  --accent-soft: var(--color-accent-2-300);
  --app-tief: var(--color-accent-2-800);
}
body.arten-saeuger {
  --accent: var(--color-neutral-700);
  --accent-soft: var(--color-neutral-300);
  --app-tief: var(--color-neutral-800);
}

/* Nachts geht alles drei ans andere Ende der Rampe. Muss html[data-thema]
   davor tragen, sonst schlaegt die Nachtfassung aus app-design.css diese
   Werte - sie ist mit zwei Klassen die staerkere Regel. */
html[data-thema="dunkel"] body.arten-pflanzen {
  --accent: var(--color-accent-2-400);
  --accent-soft: var(--color-accent-2-900);
  --app-tief: var(--color-accent-2-300);
}
/* Beim Sand eine Stufe frueher: neutral-900 ist nachts die Kartenflaeche
   (--surface), ein Flaechenton in derselben Farbe waere keiner. */
html[data-thema="dunkel"] body.arten-saeuger {
  --accent: var(--color-neutral-400);
  --accent-soft: var(--color-neutral-800);
  --app-tief: var(--color-neutral-300);
}

/* ---------- Werkzeugleiste ---------- */

/* Sie klebt beim Scrollen oben und liegt dann auf dem Fotoraster - der Grund
   muss deckend bleiben, sonst scheinen Karten durch. --bg ist die Creme der
   Seite, das erledigt styles.css schon; hier nur Rhythmus und Form. */
body.arten-body .toolbar-sticky {
  padding: var(--half) 0 calc(0.7 * var(--half));
  margin-bottom: var(--half);
}
body.arten-body .toolbar-sticky input[type="search"] {
  padding: 0.55rem 1rem;
  background: var(--surface);
}
body.arten-body .filter-chips button { padding: 0.4rem 0.9rem; }

/* Der Filter-Knopf steht rechts neben den Chips und darf NICHT schrumpfen:
   Er ist ein Flex-Kind ohne eigene Basis, und sobald die Chips daneben breiter
   werden, presst ihn die Zeile zusammen - "Filter ▾" bricht dann auf zwei
   Zeilen und macht die ganze Leiste doppelt so hoch (auf 390px nachgemessen:
   55 statt 34 Pixel). Die Chips duerfen dafuer seitlich rollen, dafuer sind
   sie gebaut (overflow-x in styles.css). */
body.arten-body .filter-toggle {
  flex: none;
  white-space: nowrap;
}

/* Der Fortschritt neben der Suche ist die Zahl, um die es in einer Sammel-App
   geht - gefuellte Flaeche statt Rahmen, wie die Pillen der Navigation. Die
   Schrift geht dafuer eine Stufe tiefer, sonst bleibt sie knapp unter 4,5:1
   (Begruendung bei --app-tief in app-design.css). */
body.arten-body .progress-chip {
  border-color: transparent;
  padding: 0.45rem 0.9rem;
  color: var(--app-tief);
}
body.arten-body .progress-chip small { color: var(--app-still); }

/* ---------- Ortsleiste ---------- */

body.arten-body .ort-bar {
  border-radius: 1.5rem;
  padding: calc(0.7 * var(--half)) 1rem;
  margin-bottom: var(--half);
}
body.arten-body .ort-bar select,
body.arten-body .ort-bar button { background: var(--surface); }
body.arten-body .ort-bar .ort-gps,
body.arten-body .ort-bar .ort-nur.active {
  background: var(--accent);
  color: var(--color-bg);
}
body.arten-body .ort-bar .ort-weg { background: none; }

/* ---------- Zusammenfassung ---------- */

body.arten-body .summary { margin-bottom: var(--half); }

/* ---------- Gruppenkopf ---------- */

/* Die Zwischenueberschrift des Rasters ist ein Kapitel und keine Etikette -
   sie darf deshalb in Caprasimo stehen, anders als die kleinen Grossbuchstaben
   im Dashboard. */
body.arten-body .group-header-name {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 1.05rem;
  line-height: 1.2;
  letter-spacing: 0;
}
body.arten-body .group-header {
  margin-top: var(--leading);
  padding-bottom: 0.4rem;
}
body.arten-body .group-header:first-child { margin-top: 0; }

/* ---------- Das Raster ---------- */

body.arten-body .bird-grid { gap: var(--half); }

/* Eine Artenkarte ist klein - die 2rem der grossen Karten waeren hier fast ein
   Kreis. 1,25rem ist dieselbe Stufe wie die Vorschlagskaesten im Dashboard und
   die Kaesten im Profil. Das Foto sitzt oben in der Karte und folgt der
   Rundung von selbst (.bird-card traegt overflow: hidden). */
body.arten-body .bird-card { border-radius: 1.25rem; }

/* Der Artname ist das, wonach jemand sucht - Caprasimo, wie die Namen im
   Artendetail. Der lateinische Name bleibt in der Textschrift: er steht
   kursiv, und Caprasimo hat keinen Kursivschnitt. */
body.arten-body .bird-name {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 0.95rem;
  line-height: 1.2;
  letter-spacing: 0;
}

/* Die Zaehlmarke auf dem Foto: Grundton auf dem Akzent statt Weiss auf dem
   Akzent, sonst stuende sie nachts weiss auf hellem Orange. Die Marke mit der
   Null behaelt ihren dunklen Schleier - sie liegt direkt auf dem Bild und
   richtet sich nach dem Foto, nicht nach der Seite. */
body.arten-body .count-badge,
body.arten-body .count-float { color: var(--color-bg); }
body.arten-body .count-badge.zero { color: rgba(255, 255, 255, 0.92); }
body.arten-body .count-float.minus { color: rgba(255, 255, 255, 0.92); }

/* ---------- Alles loeschen ---------- */

body.arten-body .reset-zone { margin-top: calc(2 * var(--leading)); }

/* ---------- Foto-Bestimmung (pflanzen.html) ---------- */

body.arten-body .ki-vorschau { border-radius: 0.9rem; }

/* ---------- Telefon ----------
   Muss NACH den Grundregeln stehen: eine Medienabfrage hat keine hoehere
   Spezifitaet, es entscheidet die Reihenfolge. */

@media (max-width: 699.98px) {
  /* Bis zum ersten Foto zaehlt jeder Zentimeter: Der Kopf ist schon knapp
     (app-design.css), die Werkzeugleiste zieht hier nach. */
  body.arten-body .toolbar-sticky { padding-top: calc(0.7 * var(--half)); }
  body.arten-body .group-header { margin-top: var(--half); }
  body.arten-body .bird-card { border-radius: 1rem; }
}