/* Spaltenfilter wie in Excel (js/tabellenfilter.js, Janik 04.11.2026). Keine Inline-Stile (CSP) – die Lage des Menüs setzt das Skript
   über style.setProperty. Farben nur aus den Variablen von app.css, damit Hell, Dunkel und Glas stimmen. */

/* Knopf im Spaltenkopf: immer da wie die Pfeile des Excel-Filters; blau, sobald die Spalte gefiltert ist */
.tf-kopf { display: inline-flex; align-items: center; gap: 4px; }
.tf-knopf {
  display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 6px; flex: none;
  background: var(--hg-4); color: var(--text-3); cursor: pointer;
}
.tf-knopf .ic { width: 13px; height: 13px; }
.tf-knopf:hover { background: var(--hg-3); color: var(--text); }
.tf-knopf:focus-visible { outline: none; box-shadow: var(--fokus); }
.tf-knopf.aktiv { background: var(--akzent-hg-stark); color: var(--akzent-text); }
.tf-knopf[aria-expanded="true"] { background: var(--akzent); color: #fff; }
.tf-sort { color: var(--akzent-text); font-weight: 700; }

/* Leiste über der Liste: nur sichtbar, wenn gefiltert oder sortiert ist – am Handy und auf schmalen Bildschirmen immer (Knopf „Filtern“) */
.tf-leiste { display: none; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; font-size: 13px; }
.tf-leiste.aktiv { display: flex; padding: 8px 12px; border-radius: var(--radius-k); background: var(--akzent-hg); }
.tf-leiste .tf-filtern { display: none; }
.tf-stand { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.tf-stand .ic { width: 15px; height: 15px; color: var(--akzent-text); flex: none; }
@media (max-width: 1100px), (pointer: coarse) {
  .tf-leiste { display: flex; }
  .tf-leiste .tf-filtern { display: inline-flex; }
}

/* Menü einer Spalte (schwebend am Kopf; am Handy im Blatt) */
.tf-menue {
  position: fixed; z-index: 85; width: 312px; max-width: calc(100vw - 16px); display: flex; flex-direction: column; overflow: hidden;
  background: var(--hg-2); color: var(--text); border-radius: var(--radius); box-shadow: var(--schatten-blatt); font-size: 13px;
}
.tf-menue .tf-inhalt { flex: 1 1 auto; min-height: 0; overflow: auto; }
.tf-inhalt { display: flex; flex-direction: column; }
.tf-block { padding: 6px; border-bottom: 0.5px solid var(--linie); }
.tf-block:last-child { border-bottom: 0; }
.tf-zeile {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 6px; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.tf-zeile .ic { width: 15px; height: 15px; flex: none; }
.tf-zeile:hover:not(:disabled) { background: var(--hg-hover); }
.tf-zeile:focus-visible { outline: none; box-shadow: var(--fokus); }
.tf-zeile:disabled { color: var(--text-3); cursor: default; }
.tf-zeile.aktiv { color: var(--akzent-text); font-weight: 600; }
.tf-pfeil { width: 15px; text-align: center; font-weight: 700; flex: none; }
.tf-titel { font-size: 12px; font-weight: 600; color: var(--text-2); padding: 4px 8px; }
.tf-von-bis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 8px 6px; }
.tf-von-bis label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-2); min-width: 0; }
.tf-von-bis .feld { width: 100%; min-width: 0; }
.tf-bereich .fehlertext { text-align: left; padding: 0 8px; min-height: 0; }
.tf-suche { margin: 2px 2px 6px; }
.tf-suche .feld { width: 100%; }
.tf-liste { max-height: 260px; overflow: auto; padding: 2px; }
.blatt .tf-liste { max-height: 45vh; }
.tf-wert { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; cursor: pointer; min-width: 0; }
.tf-wert:hover { background: var(--hg-hover); }
.tf-wert input { width: 16px; height: 16px; margin: 0; accent-color: var(--akzent); flex: none; }
.tf-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-anzahl { flex: none; color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.tf-alle .tf-text { font-weight: 600; }
/* Daten: Jahr › Monat › Tag */
.tf-gruppe { display: flex; align-items: center; gap: 2px; }
.tf-gruppe .tf-wert { flex: 1 1 auto; }
.tf-auf {
  display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px; flex: none;
  background: none; color: var(--text-2); cursor: pointer;
}
.tf-auf:hover { background: var(--hg-hover); }
.tf-auf:focus-visible { outline: none; box-shadow: var(--fokus); }
.tf-auf .ic { width: 13px; height: 13px; }
.tf-ebene-1 { padding-left: 18px; }
.tf-ebene-2 { padding-left: 58px; }
.tf-hinweis { padding: 6px 8px; font-size: 12px; }
.tf-fuss { display: flex; justify-content: flex-end; gap: 8px; padding: 10px; border-top: 0.5px solid var(--linie); }

/* Keine Zeile passt: Hinweis in der Tabelle mit „Alle Filter löschen“ */
.tabelle tr.tf-leer td { text-align: center; color: var(--text-2); padding: 18px 12px; }

/* Am Handy: erst die Spalte wählen */
.tf-wahl { display: flex; flex-direction: column; }
.tf-wahl .tf-zeile { padding: 12px 10px; font-size: 15px; }
.tf-wahl .tf-zeile > .ic:last-child { margin-left: auto; color: var(--text-3); }

@media (max-width: 760px) {
  .tf-wert { padding: 8px 6px; }
  .tf-wert input { width: 22px; height: 22px; }
  .tf-auf { width: 32px; height: 32px; }
  .tf-ebene-2 { padding-left: 72px; }
}