/* Team app ▸ shared day + time picker (25.10.2026, team/teamZeitWahl.js). Same look as the dashboard's deadline field
   (team-dashboard.css „Date (catalogue picker, single day) + time“), unscoped so every Team tab can use it. Tokens only. */
.tz-zeitwahl {
  --tz-akzent: var(--w3-akzent, var(--text-1));
  --tz-akzent-flaeche: var(--w3-akzent-flaeche, var(--surface-3));
  --tz-akzent-rand: var(--w3-akzent-rand, var(--border-3));
  --tz-fuellung: var(--w3-fuellung, var(--surface-2));
  --tz-fuellung-stark: var(--w3-fuellung-stark, var(--surface-3));
  display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: flex-start; min-width: 0;
}
.tz-sym { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tz-eingabe {
  box-sizing: border-box; min-height: 38px; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--input-border, var(--border-2)); border-radius: var(--radius-md); background: var(--input-bg, var(--tz-fuellung));
  color: var(--text-1); font: inherit; font-size: var(--fs-14);
}
.tz-eingabe::placeholder { color: var(--input-placeholder, var(--text-3)); }
.tz-eingabe:focus, .tz-eingabe:focus-visible { outline: none; border-color: var(--tz-akzent-rand); box-shadow: var(--input-focus-ring, var(--focus-ring)); }
.tz-datumwahl { position: relative; flex: 1 1 200px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; }
.tz-datum-trigger { width: 100%; display: inline-flex; align-items: center; gap: var(--space-2); text-align: left; cursor: pointer; }
.tz-datum-trigger .tz-sym { color: var(--text-2); }
.tz-datum-text.tz-platzhalter { color: var(--input-placeholder, var(--text-3)); }
.tz-uhrzeit { width: 84px; flex: none; text-align: center; font-family: var(--font-mono, monospace); font-variant-numeric: tabular-nums; }
.tz-datum-panel {
  flex: 1 0 100%; margin-top: 6px; box-sizing: border-box; width: 300px; max-width: calc(100vw - 2 * var(--space-6));
  padding: var(--space-3); border-radius: 14px; background: var(--w3-flaeche, var(--surface-2)); box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--border-2);
}
.tz-datum-panel[hidden] { display: none; }
.tz-datum-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); font-size: var(--fs-15); color: var(--text-1); }
.tz-symbol-knopf {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-pill);
  background: var(--tz-fuellung); color: var(--tz-akzent); cursor: pointer;
}
.tz-datum-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.tz-wochentag { padding: var(--space-1) 0; font-size: var(--fs-11); text-align: center; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); }
.tz-tag { height: 34px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-1); font: inherit; font-size: var(--fs-13); font-variant-numeric: tabular-nums; cursor: pointer; }
.tz-tag:hover:not(:disabled) { background: var(--tz-fuellung-stark); }
.tz-tag.tz-fremd { color: var(--text-3); }
.tz-tag.tz-heute { box-shadow: inset 0 0 0 1px var(--border-3); }
.tz-tag[aria-selected="true"] { background: var(--tz-akzent-flaeche); box-shadow: inset 0 0 0 1.5px var(--tz-akzent); color: var(--tz-akzent); font-weight: var(--fw-semibold); }
.tz-tag:disabled { opacity: .3; cursor: default; }
.tz-tag:focus-visible, .tz-symbol-knopf:focus-visible, .tz-datum-trigger:focus-visible { outline: none; box-shadow: var(--focus-ring); }