/* Team app ▸ Nutzer verwalten ▸ Funktionen as tiles (25.10.2026, team/teamFunktionen.js, stamp tf1). Tokens only
   (the --tv-* aliases of team-verwaltung.css map to the Web3 design or the base tokens), light and dark follow them.
   Every rule is scoped to #teamVerwaltungView .tf-*. One grid template for the column heads and every tile, so the
   columns of all tiles in an area line up; the first column has a fixed width and a fixed-height name block, so the
   toggle sits at the same place in every tile. */

#teamVerwaltungView .tf-ansicht { --tf-spalte1: 15rem; --tf-spalten: var(--tf-spalte1) minmax(0, 1fr) minmax(0, 1fr); }
#teamVerwaltungView .tf-gruppe { padding-bottom: var(--space-4); }

/* Column heads once per area (wide screens). */
#teamVerwaltungView .tf-spaltenkopf {
  display: grid; grid-template-columns: var(--tf-spalten); gap: var(--space-5);
  padding: var(--space-3) var(--space-4) var(--space-2);
  color: var(--text-3); font-size: var(--fs-11); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide, .02em); text-transform: uppercase;
}
#teamVerwaltungView .tf-kacheln { display: flex; flex-direction: column; gap: var(--space-2); }

/* ── Tile ── */
#teamVerwaltungView .tf-kachel {
  display: grid; grid-template-columns: var(--tf-spalten); gap: var(--space-5); align-items: start;
  padding: var(--space-4); border-radius: var(--radius-md);
  background: var(--tv-fuellung); box-shadow: inset 0 0 0 1px var(--tv-rand);
  transition: box-shadow var(--t-fast, .12s), background var(--t-fast, .12s);
}
#teamVerwaltungView .tf-kachel.ist-aufklappbar { cursor: pointer; }
#teamVerwaltungView .tf-kachel.ist-aufklappbar:hover { box-shadow: inset 0 0 0 1px var(--tv-akzent-rand); }
#teamVerwaltungView .tf-kachel.ist-offen { background: var(--tv-karte); box-shadow: inset 0 0 0 1px var(--tv-akzent-rand); }

/* Column 1: name (two lines reserved), toggle row, meta, required switches. */
#teamVerwaltungView .tf-steuer { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
#teamVerwaltungView .tf-name {
  display: flex; align-items: flex-start; gap: var(--space-1);
  min-height: calc(2 * 1.35 * var(--fs-14)); /* two title lines: the toggle below never moves */
}
#teamVerwaltungView .tf-titel {
  margin: 0; min-width: 0; font-size: var(--fs-14); font-weight: var(--fw-semibold); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#teamVerwaltungView .tf-name .tv-info-knopf { margin-top: -2px; }
#teamVerwaltungView .tf-schaltzeile { display: flex; align-items: center; gap: var(--space-2); min-height: 24px; }
#teamVerwaltungView .tf-neu { cursor: default; }
#teamVerwaltungView .tf-meta { margin: 0; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-normal, 1.45); }
#teamVerwaltungView .tf-braucht { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; font-size: var(--fs-12); color: var(--text-3); }
#teamVerwaltungView .tf-braucht-label { margin-right: 2px; }
#teamVerwaltungView .tf-chip {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 var(--space-2); border-radius: var(--radius-pill);
  background: var(--tv-fuellung-stark); color: var(--text-2); font-size: var(--fs-11); white-space: nowrap;
}
#teamVerwaltungView .tf-chip::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; opacity: .5; }
#teamVerwaltungView .tf-chip.ist-an::before { background: var(--tv-positiv); opacity: 1; }
#teamVerwaltungView .tf-braucht.ist-warnung .tf-chip.ist-aus { background: var(--warning-soft); color: var(--warning); }
#teamVerwaltungView .tf-hinweis { margin: 0; color: var(--warning); font-size: var(--fs-12); }

/* Columns 2 and 3: lists. */
#teamVerwaltungView .tf-spalte { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
/* Wide screens: the area head names the columns; the title stays for screen readers. */
#teamVerwaltungView .tf-spalte-titel {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
#teamVerwaltungView .tf-liste { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
#teamVerwaltungView .tf-zeile {
  position: relative; display: flex; flex-direction: column; gap: 1px; min-width: 0;
  padding-left: var(--space-4); color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-normal, 1.45);
}
#teamVerwaltungView .tf-zeile::before {
  content: ""; position: absolute; left: 4px; top: .62em; width: 5px; height: 5px; border-radius: var(--radius-pill); background: var(--text-3);
}
#teamVerwaltungView .tf-zeile-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); min-width: 0; }
#teamVerwaltungView .tf-zeile-text { min-width: 0; overflow-wrap: anywhere; }
#teamVerwaltungView .tf-zeile-recht .tf-zeile-text { color: var(--text-1); }
#teamVerwaltungView .tf-anzahl { flex: 0 0 auto; color: var(--text-1); font-size: var(--fs-12); font-weight: var(--fw-medium); white-space: nowrap; }
#teamVerwaltungView .tf-anzahl.ist-null { color: var(--text-3); font-weight: var(--fw-regular, 400); }
#teamVerwaltungView .tf-namen { color: var(--text-3); font-size: var(--fs-12); overflow-wrap: anywhere; }
#teamVerwaltungView .tf-kachel:not(.ist-offen) .tf-namen { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#teamVerwaltungView .tf-art {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--radius-sm, 4px);
  background: var(--tv-fuellung-stark); color: var(--text-3); font-size: var(--fs-11); vertical-align: 1px;
}
#teamVerwaltungView .tf-punkt { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; color: var(--text-3); font-size: var(--fs-12); }
#teamVerwaltungView .tf-punkt::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; opacity: .5; }
#teamVerwaltungView .tf-punkt.ist-an { color: var(--tv-positiv); }
#teamVerwaltungView .tf-punkt.ist-an::before { opacity: 1; }
#teamVerwaltungView .tf-leer { margin: 0; color: var(--text-3); font-size: var(--fs-13); }

/* Rows beyond the first four only in an expanded tile. */
#teamVerwaltungView .tf-kachel:not(.ist-offen) .tf-extra { display: none; }
#teamVerwaltungView .tf-kachel.ist-offen .tf-extra { animation: tf-auf var(--t-base, .2s) ease both; }
@keyframes tf-auf { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
#teamVerwaltungView .tf-mehr {
  align-self: flex-start; margin: 2px 0 0 calc(var(--space-4) - var(--space-2)); padding: 2px var(--space-2); border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--tv-akzent); font: inherit; font-size: var(--fs-12); font-weight: var(--fw-medium); cursor: pointer;
}
#teamVerwaltungView .tf-mehr:hover { background: var(--tv-akzent-flaeche); }
#teamVerwaltungView .tf-mehr:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Narrower desktops: a slimmer first column. */
@media (max-width: 1100px) {
  #teamVerwaltungView .tf-ansicht { --tf-spalte1: 13rem; }
  #teamVerwaltungView .tf-kachel,
  #teamVerwaltungView .tf-spaltenkopf { gap: var(--space-4); }
}
/* Phones and small tablets: stacked – name + toggle on top, then both lists, each with its own title. */
@media (max-width: 760px) {
  #teamVerwaltungView .tf-spaltenkopf { display: none; }
  #teamVerwaltungView .tf-kachel { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3); }
  #teamVerwaltungView .tf-name { min-height: 0; }
  #teamVerwaltungView .tf-spalte { padding-top: var(--space-3); border-top: 1px solid var(--tv-rand); }
  #teamVerwaltungView .tf-spalte-titel {
    position: static; width: auto; height: auto; margin: 0 0 2px; overflow: visible; clip: auto; white-space: normal;
    color: var(--text-3); font-size: var(--fs-11); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide, .02em); text-transform: uppercase;
  }
}
@media (prefers-reduced-motion: reduce) {
  #teamVerwaltungView .tf-kachel { transition: none; }
  #teamVerwaltungView .tf-kachel.ist-offen .tf-extra { animation: none; }
}

/* „Alarme per Discord“ (28.10.2026, teamFunktionen.js alarmKanalFeld): the channel of the private alarm threads. */
#teamVerwaltungView .tf-alarmkanal { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
#teamVerwaltungView .tf-alarmkanal-titel { margin: 0; font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--text-2); }
#teamVerwaltungView .tf-alarmkanal-zeile { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }