/* Team app ▸ Dashboard ▸ Teams (25.10.2026, team/teamTeams.js): the modal uses the dashboard's td-dialog / td-knopf /
   td-eingabe rules (team-dashboard.css); these add the team list. Tokens only (td-* map to the Web3 tokens). */

#teamDashboardView .tt-dialog .td-dialog-kopf h3 { display: inline-flex; align-items: center; gap: var(--space-2); }
#teamDashboardView .tt-huelle,
#teamDashboardView .tt-rumpf { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
#teamDashboardView .tt-dialog { height: min(760px, calc(100vh - 2 * var(--space-6))); }
#teamDashboardView .tt-inhalt { gap: var(--space-3); }
#teamDashboardView .tt-intro { margin: 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-normal); }
#teamDashboardView .tt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }

/* Search */
#teamDashboardView .tt-suche-huelle { position: relative; }
#teamDashboardView .tt-suche-sym { position: absolute; left: var(--space-3); top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
#teamDashboardView .tt-suche { padding-left: var(--space-8); }

/* List */
#teamDashboardView .tt-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
#teamDashboardView .tt-team {
  display: flex; flex-direction: column; gap: var(--space-2); min-width: 0;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--td-fuellung); box-shadow: inset 0 0 0 1px var(--border-1);
}
#teamDashboardView .tt-team.tt-dabei { box-shadow: inset 0 0 0 1px var(--td-akzent-rand); }
#teamDashboardView .tt-team-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-width: 0; }
#teamDashboardView .tt-team-titel { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex-wrap: wrap; }
#teamDashboardView .tt-name { margin: 0; font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-1); overflow-wrap: anywhere; }
#teamDashboardView .tt-chip { height: 22px; font-size: var(--fs-11); gap: var(--space-1); }
#teamDashboardView .tt-team-aktionen { display: flex; align-items: center; gap: var(--space-1); flex: none; }
#teamDashboardView :is(.tt-stift, .tt-einladen-knopf) { color: var(--text-2); background: transparent; }
#teamDashboardView :is(.tt-stift, .tt-einladen-knopf):hover { color: var(--text-1); background: var(--td-fuellung-stark); }
#teamDashboardView .tt-einladen-knopf[aria-expanded="true"] { color: var(--td-akzent); background: var(--td-akzent-flaeche); }
#teamDashboardView .tt-beschreibung { margin: 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-normal); overflow-wrap: anywhere; }
#teamDashboardView .tt-team-meta { display: flex; align-items: center; gap: var(--space-2) var(--space-3); flex-wrap: wrap; min-width: 0; }
#teamDashboardView .tt-herkunft { margin-left: auto; }
#teamDashboardView .tt-mitglieder-knopf {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 30px; padding: 0 var(--space-2) 0 var(--space-1);
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-2); font: inherit; font-size: var(--fs-13); cursor: pointer;
}
#teamDashboardView .tt-mitglieder-knopf:hover:not(:disabled) { color: var(--text-1); background: var(--td-fuellung-stark); }
#teamDashboardView .tt-mitglieder-knopf:disabled { cursor: default; color: var(--text-3); padding-left: 0; }
#teamDashboardView .tt-mitglieder-knopf:focus-visible { outline: none; box-shadow: var(--focus-ring); }
#teamDashboardView .tt-pfeil { width: 14px; height: 14px; transition: transform var(--t-fast) ease; }
#teamDashboardView .tt-pfeil-offen { transform: rotate(180deg); }
#teamDashboardView .tt-stapel { display: inline-flex; }
/* The accent fill is translucent: an opaque card colour underneath, so overlapping circles do not show through. */
#teamDashboardView .tt-stapel > .td-avatar,
#teamDashboardView .tt-person > .td-avatar {
  width: 24px; height: 24px; font-size: var(--fs-11);
  background: linear-gradient(var(--td-akzent-flaeche), var(--td-akzent-flaeche)), var(--w3-flaeche, var(--surface-2));
}
#teamDashboardView .tt-stapel > .td-avatar { box-shadow: 0 0 0 2px var(--td-fuellung); }
#teamDashboardView .tt-stapel > .td-avatar + .td-avatar { margin-left: calc(-1 * var(--space-1)); }
#teamDashboardView .tt-stapel > .tt-mehr { background: linear-gradient(var(--td-fuellung-stark), var(--td-fuellung-stark)), var(--w3-flaeche, var(--surface-2)); color: var(--text-2); }
#teamDashboardView .tt-personen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
#teamDashboardView .tt-person {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 30px; padding: 0 var(--space-3) 0 var(--space-1);
  border-radius: var(--radius-pill); background: var(--td-karte); box-shadow: inset 0 0 0 1px var(--border-1); font-size: var(--fs-13); color: var(--text-1);
}

/* Inline question (leave as last member, delete) */
#teamDashboardView .tt-frage { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--warning-soft); }
#teamDashboardView .tt-frage p { margin: 0; font-size: var(--fs-13); color: var(--text-1); line-height: var(--lh-normal); }
#teamDashboardView .tt-frage-knoepfe { display: flex; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; }

/* Forms (new team, edit) */
#teamDashboardView .tt-bearbeiten { display: flex; flex-direction: column; gap: var(--space-3); }
#teamDashboardView .tt-bearbeiten-knoepfe { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
#teamDashboardView .tt-luecke { flex: 1 1 auto; }
#teamDashboardView .tt-label-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
#teamDashboardView .tt-zaehler { font-variant-numeric: tabular-nums; }
#teamDashboardView .tt-text { min-height: 76px; }
#teamDashboardView .tt-hinweis { margin: 0; line-height: var(--lh-normal); }
#teamDashboardView .tt-zurueck { align-self: flex-start; margin-left: calc(-1 * var(--space-2)); }

/* Invitations (26.10.2026): „Einladungen“ on top for the invited person, „Einladen“ at a team, invited people in the list */
#teamDashboardView .tt-einladungen { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
#teamDashboardView .tt-einladungen-titel { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-1); }
#teamDashboardView .tt-einladung { background: var(--td-akzent-flaeche); box-shadow: inset 0 0 0 1px var(--td-akzent-rand); }
#teamDashboardView .tt-einladen { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--td-karte); box-shadow: inset 0 0 0 1px var(--border-1); }
#teamDashboardView .tt-einladen .td-klein { margin: 0; }
#teamDashboardView .tt-person-eingeladen { background: transparent; box-shadow: none; outline: 1px dashed var(--border-2); outline-offset: -1px; color: var(--text-2); padding-right: var(--space-1); }
#teamDashboardView .tt-zurueckziehen { width: 24px; height: 24px; min-width: 24px; color: var(--text-3); background: transparent; }
#teamDashboardView .tt-zurueckziehen .td-sym { width: 14px; height: 14px; }
#teamDashboardView .tt-zurueckziehen:hover:not(:disabled) { color: var(--text-1); background: var(--td-fuellung-stark); }

/* Footer */
#teamDashboardView .tt-fuss { display: flex; align-items: center; gap: var(--space-2); }
#teamDashboardView .tt-fuss-text { flex: 1 1 auto; min-width: 0; }

/* Empty and loading */
#teamDashboardView .tt-leer { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-4); text-align: center; }
#teamDashboardView .tt-leer h4 { margin: 0; font-size: var(--fs-15); font-weight: var(--fw-semibold); }
#teamDashboardView .tt-leer p { margin: 0 0 var(--space-2); max-width: 42ch; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-normal); }
#teamDashboardView .tt-leer-klein { padding: var(--space-6) var(--space-4); }
#teamDashboardView .tt-leer-sym { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-pill); background: var(--td-akzent-flaeche); color: var(--td-akzent); }
#teamDashboardView .tt-leer-sym .td-sym { width: 24px; height: 24px; }
#teamDashboardView .tt-skelett { display: flex; flex-direction: column; gap: var(--space-2); }
#teamDashboardView .tt-skelett .td-skel { height: 96px; border-radius: var(--radius-lg); }

@media (max-width: 640px) {
  #teamDashboardView .tt-dialog { height: 100dvh; }
  #teamDashboardView .tt-team { padding: var(--space-3); }
  #teamDashboardView .tt-herkunft { margin-left: 0; flex-basis: 100%; }
  #teamDashboardView .tt-fuss .td-knopf { flex: 1 1 0; height: 44px; }
  #teamDashboardView .tt-fuss-text:empty { display: none; }
  #teamDashboardView .tt-fuss .tt-fuss-text:not(:empty) { flex-basis: 100%; }
  #teamDashboardView .tt-fuss { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  #teamDashboardView .tt-pfeil { transition: none; }
}

/* ── Nutzer verwalten ▸ Teams (team/teamGruppen.js): overview of the self-made teams, then the categories ── */
#teamGruppenBereich .tg-teil { display: flex; flex-direction: column; min-width: 0; }
#teamGruppenBereich .tg-trenner { margin: var(--space-6) 0 var(--space-5); border: 0; border-top: 1px solid var(--w3-rand, var(--border-1)); }
#teamGruppenBereich .tg-teams { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--space-3); }
#teamGruppenBereich .tg-team {
  display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; padding: var(--space-4);
  border-radius: var(--radius-lg); background: var(--w3-fuellung, var(--surface-2)); box-shadow: inset 0 0 0 1px var(--w3-rand, var(--border-1));
}
#teamGruppenBereich .tg-team-offen { grid-column: 1 / -1; padding: 0; background: transparent; box-shadow: none; }
#teamGruppenBereich .tg-team-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); min-width: 0; }
#teamGruppenBereich .tg-team-text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
#teamGruppenBereich .tg-team-name { margin: 0; font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-1); overflow-wrap: anywhere; }
#teamGruppenBereich .tg-team-beschreibung { margin: 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-normal); overflow-wrap: anywhere; }
#teamGruppenBereich .tg-team-aktionen { display: flex; gap: var(--space-2); flex: none; flex-wrap: wrap; justify-content: flex-end; }
#teamGruppenBereich .tg-personen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
#teamGruppenBereich .tg-person {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 30px; padding: 0 var(--space-1) 0 var(--space-1);
  border-radius: var(--radius-pill); background: var(--w3-karte, var(--surface-1)); box-shadow: inset 0 0 0 1px var(--w3-rand, var(--border-1)); font-size: var(--fs-13); color: var(--text-1);
}
#teamGruppenBereich .tg-av {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: var(--radius-pill);
  background: var(--w3-akzent-flaeche, var(--surface-3)); color: var(--w3-akzent, var(--text-1)); font-size: var(--fs-11); font-weight: var(--fw-semibold);
}
#teamGruppenBereich .tg-person-weg {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-3); font: inherit; font-size: var(--fs-15); line-height: 1; cursor: pointer;
}
#teamGruppenBereich .tg-person-weg:hover:not(:disabled) { color: var(--danger); background: var(--w3-fuellung-stark, var(--surface-3)); }
#teamGruppenBereich .tg-person-weg:focus-visible { outline: none; box-shadow: var(--focus-ring); }
#teamGruppenBereich .tg-frage { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--warning-soft); }
#teamGruppenBereich .tg-frage p { margin: 0; font-size: var(--fs-13); color: var(--text-1); line-height: var(--lh-normal); }
#teamGruppenBereich .tg-feld-breit { flex: 2 1 320px; }
#teamGruppenBereich .tg-text { resize: vertical; min-height: 38px; }
#teamGruppenBereich .lz-knopf.tg-laeuft { opacity: .7; cursor: progress; }
/* Admins manage teams here too (26.10.2026): new team form, „+ Personen“ panel, open invitations of a team. */
#teamGruppenBereich .tg-teams-inhalt { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
#teamGruppenBereich .tg-neu { min-width: 0; }
/* A field straight in the column of the form (Mitglieder) keeps its own height: .tg-feld's flex-basis of 220 px is meant
   for a row and made it 220 px tall here (probe dep175: empty space above the buttons). */
#teamGruppenBereich .tg-editor > .tg-feld { flex: 0 0 auto; }
/* Team cards: the buttons wrap below the name when the card is narrow, the date line keeps its width. */
#teamGruppenBereich .tg-team-kopf { flex-wrap: wrap; }
#teamGruppenBereich .tg-team-text { flex: 1 1 12rem; }
#teamGruppenBereich .tg-personen-panel {
  display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-3); border-radius: var(--radius-md);
  background: var(--w3-karte, var(--surface-1)); box-shadow: inset 0 0 0 1px var(--w3-rand, var(--border-1));
}
#teamGruppenBereich .tg-personen-panel .tg-klein { margin: 0; }
#teamGruppenBereich .tg-eingeladen { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
#teamGruppenBereich .tg-person-eingeladen { background: transparent; box-shadow: none; outline: 1px dashed var(--w3-rand, var(--border-2)); outline-offset: -1px; color: var(--text-2); }
#teamGruppenBereich .tg-segment { max-width: 100%; flex-wrap: wrap; }
@media (max-width: 640px) {
  #teamGruppenBereich .tg-team-kopf { flex-direction: column; }
  /* In the column the 12rem basis would become a height (review: empty space under the date line). */
  #teamGruppenBereich .tg-team-text { flex: 0 0 auto; }
  #teamGruppenBereich .tg-team-aktionen { justify-content: flex-start; }
}