/* Hohes Kreuz - Tierstimmen
   Ergaenzt style.css um die Bausteine, die nur auf der Tierstimmenseite und
   im Artenverzeichnis vorkommen: die Standzeile, die Artenkarten, das
   Stundenraster und die Verzeichnistabelle.

   Es werden ausschliesslich die Farbrollen und Masse aus style.css benutzt,
   damit die Seite im hellen und im dunklen Modus zum Rest der Website passt.
   Die Gruppen (Voegel, Insekten, ...) tragen bewusst keine eigene Farbe:
   fuenf weitere Farben waeren fuenf weitere Bedeutungen, und der Gruppenname
   steht ohnehin als Text daneben. */

/* --------------------------------------------------------- Stand der Daten
   Wann wurde zuletzt ausgewertet und wie alt ist der Stand. Alter wird
   benannt, statt alte Werte als aktuelle auszugeben. */
.ts-stand {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .9rem;
  margin: 1.5rem 0 0; font-size: var(--step--1); color: var(--ink-3);
}
.ts-stand time { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.ts-stand .ts-alt { color: var(--brand); }

/* ------------------------------------------------------------ Kennzahlen
   Die Karten kommen aus style.css (.stats/.stat). Dort stehen drei feste
   Spalten; hier sind es vier Zahlen, deshalb ein mitwachsendes Raster.
   Auf dem Handy bleiben zwei Spalten - vier Karten untereinander waeren
   eine Kolonne ohne Ende. */
.ts-kennzahlen {
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}
@media (max-width: 34rem) {
  .ts-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .ts-kennzahlen .stat { padding: .9rem 1rem 1rem; }
}

/* ----------------------------------------------------------- Gruppenzeile
   Wie viele Arten je Gruppe an diesem Tag zu hoeren waren - reiner Text,
   keine Farbkodierung. */
.ts-gruppen {
  display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.4rem 0 1rem;
  padding: 0; list-style: none;
}
.ts-gruppen li {
  max-width: none; font-size: var(--step--1); color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: 999px; padding: .2rem .8rem;
}
.ts-gruppen b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ Artenkarten
   Eine Karte je Art: Bild, Name, wissenschaftlicher Name, Anzahl, Zeitraum
   und die hoechste Sicherheit der Erkennung. Das Raster haelt mit min()
   auch auf schmalen Schirmen die Breite ein, sonst entsteht ein
   waagerechter Rollbalken. */
.ts-liste {
  display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
}
.ts-art {
  display: flex; gap: .85rem; align-items: center; min-width: 0;
  max-width: none; padding: .7rem .9rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-1) 65%, transparent);
}
/* Feste Masse gegen Layoutspruenge, auch solange das Bild noch fehlt. */
.ts-art__bild {
  flex: none; width: 64px; height: 48px; border-radius: var(--radius-sm);
  background: var(--surface-2); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.3rem; font-weight: 600;
  color: var(--brand);
}
.ts-art__bild img { display: block; width: 64px; height: 48px; object-fit: cover; }
.ts-art__text { min-width: 0; flex: 1; }
/* Name und wissenschaftlicher Name stehen untereinander - als reine
   Inline-Elemente wuerden sie ineinanderlaufen. */
.ts-art__name, .ts-art__sci { display: block; }
.ts-art__name {
  font-family: var(--serif); font-weight: 600; color: var(--ink);
  line-height: 1.25; overflow-wrap: anywhere;
}
.ts-art__sci { font-style: italic; font-size: .82rem; color: var(--ink-3); overflow-wrap: anywhere; }
.ts-art__meta {
  display: flex; flex-wrap: wrap; gap: .1rem .7rem;
  font-size: .82rem; color: var(--ink-2); margin-top: .15rem;
}
.ts-art__meta time { font-variant-numeric: tabular-nums; }
.ts-art__zahl {
  flex: none; text-align: right; font-family: var(--serif); font-weight: 600;
  font-size: var(--step-1); color: var(--brand); font-variant-numeric: tabular-nums;
}
.ts-art__zahl small {
  display: block; font-family: var(--sans); font-weight: 400;
  font-size: .72rem; color: var(--ink-3);
}

/* ------------------------------------------------------------- Diagramme
   Die Grundform steckt in style.css (.figure, .chart, .tooltip,
   details.datatable). Hier kommen das zweispaltige Raster fuer die beiden
   Verlaufsdiagramme, das Stundenraster und der Hinweis fuer leere
   Zeitraeume dazu. */
.ts-diagramme {
  display: grid; gap: 1.5rem; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
}
.ts-diagramme > div > .figure { margin: 0; }
.ts-diagramme > div > details.datatable { margin: .5rem 0 0; }
.chart .balken rect { shape-rendering: crispEdges; }
.chart .achsentitel { fill: var(--ink-3); font-size: 11px; }
.ts-leer {
  margin: 0; padding: 2.2rem 1rem; text-align: center;
  font-size: var(--step--1); color: var(--ink-3);
}

/* Stundenraster: eine Zeile je Art, eine Spalte je Stunde. Die Staerke der
   Flaeche steht fuer die Anzahl; die Zahl selbst steht, wo Platz ist, in
   der Zelle - und in jedem Fall in der Tabelle darunter. */
.ts-heat text { font-size: 11px; }
.ts-heat .artname { fill: var(--ink); }
.ts-heat .stunde { fill: var(--ink-3); }
.ts-heat .anzahl { fill: var(--ink); font-variant-numeric: tabular-nums; }
.ts-heat .zelle { shape-rendering: crispEdges; }
.ts-heat .leerzelle { fill: var(--surface-2); }

/* ------------------------------------------------------- Kennzahlschalter
   Zwei Schalter fuer beide Verlaufsdiagramme gemeinsam. Ohne JavaScript
   bleiben sie verborgen, statt wirkungslos herumzustehen. */
.ts-kennzahl {
  display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.4rem;
  padding: .35rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-1); width: fit-content;
}
.ts-kennzahl button {
  font: inherit; font-size: var(--step--1); padding: .45rem .9rem;
  border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--ink-2); cursor: pointer;
}
.ts-kennzahl button:hover { background: var(--surface-2); color: var(--ink); }
.ts-kennzahl button[aria-pressed="true"] {
  background: var(--brand); color: var(--surface-0); font-weight: 600;
}

/* ------------------------------------------------------ Verzeichnistabelle
   Das vollstaendige Artenverzeichnis auf der Unterseite. Breite Tabellen
   bekommen einen eigenen Rollbereich, damit die Seite selbst nicht
   waagerecht rollt. */
.ts-tabelle { margin: 1.4rem 0; }
.ts-tabelle .scroll {
  overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-1);
}
.ts-tabelle table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.ts-tabelle th, .ts-tabelle td {
  padding: .55rem .85rem; text-align: left;
  border-bottom: 1px solid var(--line-soft); white-space: nowrap;
}
.ts-tabelle thead th {
  background: var(--surface-2); color: var(--ink); font-family: var(--serif);
  font-weight: 600; position: sticky; top: 0;
}
.ts-tabelle tbody th { font-weight: 600; color: var(--ink); white-space: normal; }
.ts-tabelle tbody tr:last-child th, .ts-tabelle tbody tr:last-child td { border-bottom: 0; }
.ts-tabelle td { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ts-tabelle td.num { text-align: right; }
.ts-tabelle .ts-sci { font-style: italic; color: var(--ink-3); }

/* ------------------------------------------------------------ Bildnachweis */
.ts-nachweis { margin: 1.6rem 0 0; }
.ts-nachweis ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.ts-nachweis li { font-size: var(--step--1); color: var(--ink-2); }

/* -------------------------------------------------- Bewegung und Druck
   Dieselbe sparsame Einblendung wie auf den anderen Seiten, mit demselben
   Keyframe aus style.css. Wer weniger Bewegung wuenscht, bekommt keine. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ts-kennzahlen, .ts-liste, .ts-tabelle {
      animation: auftauchen linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 20%;
    }
  }
}

@media print {
  .ts-kennzahl { display: none !important; }
  .ts-art { break-inside: avoid; }
}

/* ----------------------------------------------------------- Hinweise
   Kurze Hinweise unter einem Raster laufen über die ganze Breite des
   Rasters. Die Lesebreite aus style.css gilt für Fließtext; hier stünde
   der Satz sonst schmal unter breiten Karten und sähe abgeschnitten aus. */
.vg-hinweis { max-width: none; }

/* Auf dieser Seite spannen sich Karten und Raster über die volle Breite.
   Die Einleitung darüber folgt ihnen, statt in einer schmalen Lesespalte
   zu stehen - nebeneinander wirkte das sonst abgeschnitten. */
main .section__head,
main .section__head p { max-width: none; }