/* leadity-Bibliothek · Prüfpaket 6: Filter und Form-Controls · Figma-Re-Audit 2026-07-21 */

:where(.leadity-form-stack, .goal-form) { min-width: 0; display: grid; gap: var(--leadity-space-5); }
leadity-input-text, leadity-text-area, leadity-dropdown-option, leadity-editor { min-width: 0; display: block; }
.leadity-form-grid, :where(.form-grid) { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--leadity-space-4); }
:where(.leadity-field, .form-field) { min-width: 0; position: relative; display: grid; gap: var(--leadity-space-2); }
:where(.leadity-field, .form-field).full { grid-column: 1 / -1; }

/* Feldschalen: Top Label und Floating Label sind getrennte Varianten. */
.leadity-field-label, :where(.form-field > label) { color: var(--leadity-text-default); font: 600 16px/24px var(--leadity-font-body); }
.leadity-field[data-field-variant="top"] { gap: var(--leadity-space-3); }
.leadity-field[data-field-variant="floating"], .form-field[data-field-variant="floating"] { display: block; }
.leadity-field[data-field-variant="floating"] > .leadity-field-label,
.form-field[data-field-variant="floating"] > label,
.leadity-floating-label {
  position: absolute;
  top: 16px;
  left: 8px;
  z-index: 3;
  max-width: calc(100% - 48px);
  padding-inline: 4px;
  overflow: hidden;
  background: var(--leadity-white);
  color: var(--leadity-text-default);
  font: 400 16px/24px var(--leadity-font-body);
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  transition: top 120ms ease, font-size 120ms ease, line-height 120ms ease, color 120ms ease;
}
.leadity-field[data-field-variant="floating"]:focus-within:not([data-empty-open-centers][data-field-state="empty"]) > .leadity-field-label,
.form-field[data-field-variant="floating"]:focus-within > label,
.leadity-field[data-field-variant="floating"][data-field-state="filled"] > .leadity-field-label,
.form-field[data-field-variant="floating"][data-field-state="filled"] > label,
.leadity-field[data-field-variant="floating"][data-field-state="multiple"] > .leadity-field-label,
.leadity-field[data-field-variant="floating"][data-invalid="true"] > .leadity-field-label {
  top: 3px;
  color: var(--leadity-text-light);
  font-size: 14px;
  line-height: 18px;
}
.leadity-field[data-field-variant="floating"][data-field-state="empty"] > .leadity-field-label,
.form-field[data-field-variant="floating"][data-field-state="empty"] > label {
  color: var(--leadity-text-light);
}
.leadity-field[data-field-variant="floating"][data-empty-open-centers][data-field-state="empty"] > .leadity-field-label {
  top: 20px;
  color: var(--leadity-text-light);
  font-size: 16px;
  line-height: 16px;
}
.leadity-required { color: inherit; }

.leadity-control, :where(.form-control) {
  width: 100%;
  height: var(--leadity-control-default);
  min-width: 0;
  padding: 7px 12px;
  border: var(--leadity-line-xs) solid var(--leadity-neutral-40);
  border-radius: var(--leadity-radius-sm);
  background: var(--leadity-white);
  color: var(--leadity-text-default);
  font: 400 16px/24px var(--leadity-font-body);
  letter-spacing: 0;
}
.leadity-field[data-field-variant="floating"] > .leadity-control,
.form-field[data-field-variant="floating"] > .form-control,
.leadity-field[data-field-variant="floating"] > .leadity-password-shell > .leadity-control {
  height: var(--leadity-control-floating-label);
  padding: 21px 36px 5px 12px;
}
.leadity-field[data-field-variant="floating"][data-field-state="empty"] > .leadity-control,
.form-field[data-field-variant="floating"][data-field-state="empty"] > .form-control { color: transparent; }
:where(.leadity-control, .form-control)::placeholder, .leadity-textarea::placeholder { color: var(--leadity-text-light); opacity: 1; }
:where(.leadity-control, .form-control):hover:not(:disabled):not([readonly]):not([aria-readonly="true"]) { border-color: var(--leadity-neutral-50); }
:where(.leadity-control, .form-control):focus-visible,
.leadity-textarea:focus-visible,
.leadity-search-input:focus-visible,
.leadity-input-group-input:focus-visible {
  border-color: var(--leadity-neutral-80);
  outline: var(--leadity-focus-width) solid var(--leadity-focus-color);
  outline-offset: var(--leadity-focus-offset);
}
:where(.leadity-control, .form-control)[readonly],
:where(.leadity-control, .form-control)[aria-readonly="true"],
.leadity-textarea[readonly],
:where(.form-field.is-readonly .form-control) {
  border-color: var(--leadity-neutral-40);
  background: var(--leadity-neutral-10);
  color: var(--leadity-text-default);
}
.leadity-field[data-field-variant="floating"][data-readonly="true"] > .leadity-field-label,
.leadity-field[data-field-variant="floating"]:has(.leadity-control[readonly]) > .leadity-field-label,
.form-field[data-field-variant="floating"]:has(.form-control[readonly]) > label { background: var(--leadity-neutral-10); }
:where(.leadity-control, .form-control):disabled, .leadity-textarea:disabled {
  border-color: var(--leadity-neutral-40);
  background: var(--leadity-neutral-10);
  color: var(--leadity-text-light);
  cursor: not-allowed;
}
.leadity-field[data-field-variant="floating"]:has(> .leadity-control:disabled) > .leadity-field-label,
.leadity-field[data-field-variant="floating"]:has(> .leadity-textarea:disabled) > .leadity-field-label,
.form-field[data-field-variant="floating"]:has(> .form-control:disabled) > label { background: var(--leadity-neutral-10); }
.leadity-field[data-readonly="true"] > :where(.leadity-control, .leadity-textarea) { padding-right: var(--leadity-space-8); }
.leadity-readonly-icon { width: 16px; height: 16px; position: absolute; top: var(--leadity-space-4); right: var(--leadity-space-4); z-index: 4; display: inline-grid; place-items: center; color: var(--leadity-text-light); font-size: 16px; line-height: 16px; pointer-events: none; }
.leadity-field[data-field-variant="floating"] > .leadity-readonly-icon { top: calc(var(--leadity-space-5) + var(--leadity-space-2)); }
.leadity-field[data-field-variant="top"] > .leadity-readonly-icon { top: calc(var(--leadity-space-8) - var(--leadity-space-2)); }
.leadity-field[data-invalid="true"] :where(.leadity-control, .form-control, .leadity-textarea),
:where(.leadity-control, .form-control, .leadity-textarea)[aria-invalid="true"] { border-color: var(--leadity-state-error-text); color: var(--leadity-state-error-text); }
.leadity-field[data-invalid="true"] > .leadity-field-label { color: var(--leadity-state-error-text) !important; }
.leadity-field-help, .leadity-field-error { color: var(--leadity-text-light); font: 400 14px/20px var(--leadity-font-body); }
.leadity-field-error {
  display: block;
  padding-block: var(--leadity-space-2);
  color: var(--leadity-state-error-text);
}
.leadity-field-error[hidden] { display: none; }

.leadity-textarea, :where(.description-field textarea) {
  width: 100%;
  min-height: 136px;
  padding: 8px 12px;
  border: var(--leadity-line-xs) solid var(--leadity-neutral-40);
  border-radius: var(--leadity-radius-sm);
  background: var(--leadity-white);
  color: var(--leadity-text-default);
  font: 400 16px/24px var(--leadity-font-body);
  resize: vertical;
}
.leadity-field[data-field-variant="top"] > .leadity-textarea { min-height: 136px; }
.leadity-field[data-field-variant="floating"] > .leadity-textarea { min-height: 153px; padding: 25px 12px 8px; }

.leadity-select-shell, :where(.select-field) { position: relative; }
.leadity-select-shell::after, :where(.select-field)::after {
  content: "\f078";
  position: absolute;
  right: 12px;
  top: 50%;
  z-index: 2;
  color: var(--leadity-text-light);
  font: 300 14px/1 "Font Awesome 6 Pro";
  pointer-events: none;
  transform: translateY(-50%);
}
select.leadity-control, select.form-control { appearance: none; cursor: pointer; }
.leadity-custom-select::after { content: none; }
.leadity-select-trigger, .leadity-date-picker-trigger { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 16px; align-items: center; column-gap: var(--leadity-space-3); text-align: left; cursor: pointer; }
.leadity-select-trigger::after { content: "\f078"; width: 16px; height: 16px; position: absolute; top: 50%; right: 11px; color: var(--leadity-text-light); font: 300 14px/16px "Font Awesome 6 Pro"; text-align: center; pointer-events: none; transform: translateY(-50%); }
.leadity-select-shell[data-readonly="true"]::after, .leadity-select-shell[data-readonly="true"] .leadity-select-trigger::after { content: none; }
.leadity-select-shell[data-readonly="true"] :where(select.leadity-control, .leadity-select-trigger) { cursor: default; }
.leadity-select-value, .leadity-date-picker-value { min-width: 0; grid-column: 1; grid-row: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leadity-date-picker-icon { width: 16px; height: 16px; position: absolute; top: 50%; right: 11px; color: var(--leadity-text-light); font-size: 16px; line-height: 16px; text-align: center; pointer-events: none; transform: translateY(-50%); }
.leadity-select-list, .leadity-date-picker-panel {
  position: absolute;
  z-index: 24;
  top: calc(100% + var(--leadity-space-3));
  left: 0;
  overflow: hidden;
  border: var(--leadity-line-xs) solid var(--leadity-neutral-40);
  border-radius: var(--leadity-radius-sm);
  background: var(--leadity-white);
  box-shadow: var(--leadity-shadow-floating);
}
.leadity-select-list {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.leadity-date-picker-panel { width: 280px; max-width: calc(100vw - 32px); }
.leadity-select-list[hidden], .leadity-date-picker-panel[hidden] { display: none; }
.leadity-select-list-search { width: 100%; display: block; padding: var(--leadity-space-4) var(--leadity-space-4) var(--leadity-space-3); }
.leadity-select-list-search .leadity-search { width: 100%; }
.leadity-select-option-group { display: grid; }
.leadity-select-option-group-title { height: 40px; display: flex; align-items: center; margin: 0; padding-inline: var(--leadity-space-4); color: var(--leadity-text-default); font: 600 16px/24px var(--leadity-font-body); }
leadity-dropdown-option { width: 100%; }
.leadity-select-option { width: 100%; height: 40px; display: flex; align-items: center; padding: var(--leadity-space-3) var(--leadity-space-4); overflow: hidden; border: 0; background: var(--leadity-white); color: var(--leadity-text-default); font: 400 16px/20px var(--leadity-font-body); text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.leadity-select-option:hover, .leadity-select-option[data-active="true"] { background: var(--leadity-neutral-20); }
.leadity-select-option[aria-selected="true"] { background: var(--leadity-neutral-10); }
.leadity-select-option:disabled, .leadity-select-option[aria-disabled="true"] { color: var(--leadity-text-light); cursor: not-allowed; }
.leadity-select-option:focus-visible, .leadity-date-picker-nav:focus-visible, .leadity-date-picker-day:focus-visible { position: relative; z-index: 1; outline: var(--leadity-focus-width) solid var(--leadity-focus-color); outline-offset: calc(-1 * var(--leadity-focus-width)); }
.leadity-date-picker-panel { height: 291px; display: grid; grid-template-rows: 40px 24px 1fr; gap: var(--leadity-space-2); padding: var(--leadity-space-3); }
.leadity-date-picker-panel[hidden] { display: none; }
.leadity-date-picker-header { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; border-bottom: var(--leadity-line-xs) solid var(--leadity-neutral-20); }
.leadity-date-picker-nav { width: 40px; height: 40px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: var(--leadity-radius-sm); background: transparent; color: var(--leadity-text-light); cursor: pointer; }
.leadity-date-picker-nav > i { width: 16px; height: 16px; font-size: 16px; line-height: 16px; text-align: center; }
.leadity-date-picker-nav:hover { background: var(--leadity-neutral-20); color: var(--leadity-text-default); }
.leadity-date-picker-period { min-width: 0; display: flex; align-items: center; justify-content: center; gap: var(--leadity-space-6); }
.leadity-date-picker-month, .leadity-date-picker-year { margin: 0; color: var(--leadity-text-default); font: 500 14px/20px var(--leadity-font-body); text-align: center; white-space: nowrap; }
.leadity-date-picker-month { text-transform: capitalize; }
.leadity-date-picker-weekdays, .leadity-date-picker-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: center; text-align: center; }
.leadity-date-picker-weekdays { color: var(--leadity-text-default); font: 500 14px/20px var(--leadity-font-body); }
.leadity-date-picker-grid { align-content: start; row-gap: var(--leadity-space-1); }
.leadity-date-picker-day { min-width: 0; height: 32px; padding: 0; border: 0; border-radius: var(--leadity-radius-full); background: transparent; color: var(--leadity-text-default); font: 400 14px/20px var(--leadity-font-body); cursor: pointer; }
.leadity-date-picker-day[data-current-month="false"] { color: var(--leadity-text-light); }
.leadity-date-picker-day:hover { background: var(--leadity-neutral-20); }
.leadity-date-picker-day[aria-selected="true"] { background: var(--leadity-neutral-80); color: var(--leadity-white); }
.leadity-date-picker-day[data-today="true"]:not([aria-selected="true"]) { background: var(--leadity-neutral-20); }
.leadity-field-icon { width: 18px; height: 18px; position: absolute; left: 12px; bottom: 10px; z-index: 2; object-fit: contain; pointer-events: none; }
.leadity-field:has(.leadity-field-icon) .leadity-control, :where(.dimension-value .form-control) { padding-left: 40px; }
.leadity-field-action { position: absolute; right: 0; bottom: 0; }

/* Checkbox, Radio und Toggle */
leadity-checkbox, leadity-radio { min-width: 0; display: inline-block; }
leadity-choice-group { min-width: 0; display: block; }
.leadity-choice-group { min-width: 0; display: grid; gap: var(--leadity-space-3); padding: 0; border: 0; }
.leadity-choice-legend { margin-bottom: var(--leadity-space-1); color: var(--leadity-text-default); font: 600 16px/24px var(--leadity-font-body); }
.leadity-choice { min-height: var(--leadity-control-default); display: flex; align-items: center; gap: var(--leadity-space-3); color: var(--leadity-text-default); font: 400 16px/24px var(--leadity-font-body); cursor: pointer; }
.leadity-choice-icon-only { width: 20px; height: 40px; position: relative; justify-content: center; gap: 0; }
.leadity-choice-icon-only::before { content: ""; width: 40px; height: 40px; position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); }
.leadity-choice-label { min-width: 0; }
.leadity-choice-meta { color: var(--leadity-text-light); font-size: 14px; }
.leadity-choice input[type="checkbox"], .leadity-choice input[type="radio"] {
  width: 20px;
  height: 20px;
  position: relative;
  flex: 0 0 20px;
  margin: 0;
  appearance: none;
  border: 2px solid var(--leadity-neutral-80);
  background: var(--leadity-white);
  cursor: pointer;
}
.leadity-choice input[type="checkbox"] { border-radius: var(--leadity-radius-sm); }
.leadity-choice input[type="checkbox"]::after {
  content: "";
  width: 9px;
  height: 5px;
  position: absolute;
  top: 5px;
  left: 4px;
  border: solid var(--leadity-white);
  border-width: 0 0 2px 2px;
  opacity: 0;
  transform: rotate(-45deg);
}
.leadity-choice input[type="checkbox"]:checked { border-color: var(--leadity-neutral-80); background: var(--leadity-neutral-80); }
.leadity-choice input[type="checkbox"]:checked::after { opacity: 1; }
.leadity-choice input[type="checkbox"]:indeterminate { border-color: var(--leadity-neutral-80); background: var(--leadity-neutral-80); }
.leadity-choice input[type="checkbox"]:indeterminate::after { width: 10px; height: 2px; top: 50%; left: 50%; border: 0; background: var(--leadity-white); opacity: 1; transform: translate(-50%, -50%); }
.leadity-choice input[type="radio"] { border-radius: var(--leadity-radius-full); }
.leadity-choice input[type="radio"]:checked { border: 4px solid var(--leadity-neutral-80); background: var(--leadity-white); }
.leadity-choice input:hover:not(:disabled) { border-color: var(--leadity-neutral-100); }
.leadity-choice input[type="checkbox"]:checked:hover:not(:disabled), .leadity-choice input[type="checkbox"]:indeterminate:hover:not(:disabled) { background: var(--leadity-neutral-100); }
.leadity-choice input[type="radio"]:checked:hover:not(:disabled) { border-color: var(--leadity-neutral-100); }
.leadity-choice input:focus-visible { outline: var(--leadity-focus-width) solid var(--leadity-focus-color); outline-offset: 2px; }
.leadity-choice[data-invalid="true"] input, .leadity-choice input[aria-invalid="true"] { border-color: var(--leadity-state-error-text); }
.leadity-choice:has(input:disabled) { color: var(--leadity-text-light); cursor: not-allowed; }
.leadity-choice input:disabled { border-color: var(--leadity-neutral-40); background: var(--leadity-neutral-20); cursor: not-allowed; }
.leadity-choice input[type="checkbox"]:checked:disabled, .leadity-choice input[type="checkbox"]:indeterminate:disabled { background: var(--leadity-neutral-40); }
.leadity-choice input[type="radio"]:checked:disabled { border-color: var(--leadity-neutral-40); background: var(--leadity-neutral-20); }
.leadity-choice[data-size="compact"] input { width: 16px; height: 16px; flex-basis: 16px; }
.leadity-choice[data-size="compact"] input[type="checkbox"]::after { width: 7px; height: 4px; top: 3px; left: 3px; }
.leadity-choice[data-size="compact"] input[type="checkbox"]:indeterminate::after { width: 8px; height: 2px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.leadity-choice[data-size="compact"] input[type="radio"]:checked { border-width: 4px; }
.leadity-choice-host[data-tone="inverse"] .leadity-choice-control { border-color: var(--leadity-neutral-10); background: transparent; }
.leadity-choice-host[data-tone="inverse"] .leadity-choice-control:checked,
.leadity-choice-host[data-tone="inverse"] .leadity-choice-control:indeterminate { border-color: var(--leadity-neutral-10); background: var(--leadity-neutral-10); }
.leadity-choice-host[data-tone="inverse"] .leadity-choice-control:checked::after { border-color: var(--leadity-neutral-100); }
.leadity-choice-host[data-tone="inverse"] .leadity-choice-control:indeterminate::after { background: var(--leadity-neutral-100); }

.leadity-toggle-row, :where(.toggle-control) { min-height: var(--leadity-control-default); display: inline-flex; align-items: center; gap: var(--leadity-space-3); }
.leadity-switch, :where(.switch) { width: 40px; height: 40px; position: relative; flex: 0 0 40px; padding: 0; border: 0; border-radius: var(--leadity-radius-full); background: transparent; cursor: pointer; }
.leadity-switch::before, :where(.switch)::before { content: ""; width: 28px; height: 14px; position: absolute; inset: 13px 6px; border-radius: var(--leadity-radius-full); background: var(--leadity-neutral-40); transition: background-color 140ms ease; }
.leadity-switch::after, :where(.switch)::after { content: ""; width: 8px; height: 8px; position: absolute; top: 16px; left: 9px; border-radius: var(--leadity-radius-full); background: var(--leadity-white); transition: left 140ms ease, background-color 140ms ease; }
.leadity-switch:hover:not(:disabled)::before, :where(.switch):hover:not(:disabled)::before { background: var(--leadity-neutral-50); }
.leadity-switch[aria-checked="true"]::before, :where(.switch)[aria-checked="true"]::before { background: var(--leadity-neutral-80); }
.leadity-switch[aria-checked="true"]::after, :where(.switch)[aria-checked="true"]::after { left: 23px; background: var(--leadity-neutral-10); }
.leadity-switch[aria-checked="true"]:hover:not(:disabled)::before, :where(.switch)[aria-checked="true"]:hover:not(:disabled)::before { background: var(--leadity-neutral-100); }
.leadity-switch[aria-checked="true"]:hover:not(:disabled)::after { background: var(--leadity-white); }
.leadity-switch:disabled { cursor: not-allowed; }
.leadity-switch:disabled::before { background: var(--leadity-neutral-40); }
.leadity-switch:disabled::after { background: var(--leadity-neutral-100); }
.leadity-toggle-label, :where(.toggle-label) { font: 400 16px/24px var(--leadity-font-body); }

/* Search, Password und InputGroup */
.leadity-search, .leadity-password-shell, .leadity-input-group { min-width: 0; position: relative; display: flex; align-items: center; }
.leadity-search { width: min(330px, 100%); gap: var(--leadity-space-2); }
.leadity-search-icon { width: 16px; position: absolute; left: var(--leadity-space-6); z-index: 2; color: var(--leadity-text-light); text-align: center; }
.leadity-search-input {
  width: 100%;
  height: var(--leadity-control-default);
  padding: 7px 44px 7px var(--leadity-space-8);
  border: 0;
  border-radius: var(--leadity-radius-full);
  background: var(--leadity-white);
  box-shadow: var(--leadity-shadow-default);
  color: var(--leadity-text-default);
  font: 400 16px/24px var(--leadity-font-body);
}
.leadity-search-input::placeholder { color: var(--leadity-text-light); opacity: 1; }
.leadity-search-input::-webkit-search-cancel-button,
.leadity-search-input::-webkit-search-decoration,
.leadity-search-input::-webkit-search-results-button,
.leadity-search-input::-webkit-search-results-decoration { display: none; -webkit-appearance: none; appearance: none; }
.leadity-search-input::-ms-clear { width: 0; height: 0; display: none; }
.leadity-search-input:disabled { border-color: var(--leadity-neutral-40); background: var(--leadity-neutral-10); color: var(--leadity-text-light); cursor: not-allowed; }
.leadity-search[data-search-variant="outline"] .leadity-search-input { border: var(--leadity-line-xs) solid var(--leadity-neutral-40); border-radius: var(--leadity-radius-sm); box-shadow: none; }
.leadity-search[data-search-variant="outline-pill"] .leadity-search-input { border: var(--leadity-line-xs) solid var(--leadity-neutral-40); border-radius: var(--leadity-radius-full); box-shadow: var(--leadity-shadow-default); }
.leadity-search:focus-within .leadity-search-icon, .leadity-search[data-search-state="filled"] .leadity-search-icon { color: var(--leadity-text-default); }
.leadity-inline-action { width: 40px; height: 40px; display: inline-grid; place-items: center; flex: 0 0 40px; padding: 0; border: 0; border-radius: var(--leadity-radius-full); background: transparent; color: var(--leadity-text-light); cursor: pointer; transition: color 140ms ease; }
.leadity-inline-action > i { width: 16px; height: 16px; display: inline-grid; place-items: center; font-size: 16px; line-height: 16px; }
.leadity-inline-action:hover { background: transparent; color: var(--leadity-text-default); }
.leadity-inline-action:disabled { background: transparent; color: var(--leadity-text-light); cursor: not-allowed; }
.leadity-search .leadity-inline-action, .leadity-password-shell .leadity-inline-action { position: absolute; right: 0; }
.leadity-search .leadity-inline-action[hidden] { display: none; }
.leadity-password-shell .leadity-control { padding-right: 44px; }
.leadity-password-popover {
  width: min(440px, calc(100vw - 32px));
  position: absolute;
  z-index: 30;
  top: calc(100% + var(--leadity-space-2));
  left: 0;
  display: grid;
  gap: var(--leadity-space-3);
  padding: var(--leadity-space-3);
  border: var(--leadity-line-xs) solid var(--leadity-neutral-40);
  border-radius: var(--leadity-radius-md);
  background: var(--leadity-white);
  box-shadow: var(--leadity-shadow-floating);
}
.leadity-password-popover[hidden] { display: none; }
.leadity-password-title { font: 600 16px/24px var(--leadity-font-body); }
.leadity-password-strength { display: grid; gap: var(--leadity-space-3); }
.leadity-strength-line { height: 12px; overflow: hidden; border-radius: var(--leadity-radius-full); background: var(--leadity-neutral-20); }
.leadity-strength-line::before { content: ""; width: var(--strength, 0%); height: 100%; display: block; background: var(--strength-color, var(--leadity-neutral-40)); transition: width 180ms ease; }
.leadity-password-strength[data-strength="weak"] { --strength: 25%; --strength-color: var(--leadity-state-error-background); }
.leadity-password-strength[data-strength="medium"] { --strength: 75%; --strength-color: var(--leadity-state-warning-background); }
.leadity-password-strength[data-strength="strong"] { --strength: 100%; --strength-color: var(--leadity-state-success-background); }
.leadity-strength-copy { color: var(--leadity-text-default); font: 400 14px/20px var(--leadity-font-body); }
.leadity-password-criteria { display: grid; gap: var(--leadity-space-1); margin: 0; padding: var(--leadity-space-2) 0 0; border-top: var(--leadity-line-xs) solid var(--leadity-neutral-20); list-style: none; }
.leadity-password-criterion { display: flex; align-items: center; gap: var(--leadity-space-2); font: 400 14px/20px var(--leadity-font-body); }
.leadity-password-criterion::before { content: ""; width: 6px; height: 6px; margin-inline: 5px; border-radius: var(--leadity-radius-full); background: var(--leadity-text-default); }
.leadity-password-criterion[data-met="true"] { color: var(--leadity-state-success-text); }
.leadity-password-criterion[data-met="true"]::before { content: "\f00c"; width: 16px; height: 16px; margin: 0; background: transparent; font: 300 14px/16px "Font Awesome 6 Pro"; }

.leadity-input-group { width: min(520px, 100%); align-items: stretch; }
.leadity-input-group-addon { min-height: var(--leadity-control-floating-label); display: inline-flex; align-items: center; padding-inline: var(--leadity-space-4); border: var(--leadity-line-xs) solid var(--leadity-neutral-40); background: var(--leadity-white); color: var(--leadity-text-default); white-space: nowrap; }
.leadity-input-group-addon[data-content-tone="light"] { color: var(--leadity-text-light); }
.leadity-input-group-addon:first-child { border-radius: var(--leadity-radius-sm) 0 0 var(--leadity-radius-sm); }
.leadity-input-group-addon:last-child { border-radius: 0 var(--leadity-radius-sm) var(--leadity-radius-sm) 0; }
.leadity-input-group-field { min-width: 0; position: relative; flex: 1 1 auto; }
.leadity-input-group-input { width: 100%; height: var(--leadity-control-floating-label); min-width: 0; padding: 21px var(--leadity-space-4) 5px; border: var(--leadity-line-xs) solid var(--leadity-neutral-40); border-radius: var(--leadity-radius-sm); outline: 0; background: var(--leadity-white); color: var(--leadity-text-default); font: 400 16px/24px var(--leadity-font-body); }
.leadity-input-group-input[readonly], .leadity-input-group-input:disabled { background: var(--leadity-neutral-10); }
.leadity-input-group-input:disabled { color: var(--leadity-text-light); cursor: not-allowed; }
.leadity-input-group:has(.leadity-input-group-input[readonly]) .leadity-input-group-addon,
.leadity-input-group:has(.leadity-input-group-input:disabled) .leadity-input-group-addon { background: var(--leadity-neutral-10); }
.leadity-input-group:has(.leadity-input-group-input:disabled) .leadity-input-group-addon { color: var(--leadity-text-light); }
.leadity-input-group-field:has(.leadity-input-group-input[readonly]) > .leadity-floating-label,
.leadity-input-group-field:has(.leadity-input-group-input:disabled) > .leadity-floating-label { background: var(--leadity-neutral-10); }
.leadity-input-group-field:has(.leadity-readonly-icon) .leadity-input-group-input { padding-right: var(--leadity-space-8); }
.leadity-input-group-field > .leadity-readonly-icon { top: calc(var(--leadity-space-5) + var(--leadity-space-2)); }
.leadity-input-group[data-has-start="true"] .leadity-input-group-input { border-left: 0; border-radius: 0 var(--leadity-radius-sm) var(--leadity-radius-sm) 0; }
.leadity-input-group[data-has-end="true"] .leadity-input-group-input { border-right: 0; border-radius: var(--leadity-radius-sm) 0 0 var(--leadity-radius-sm); }
.leadity-input-group[data-has-start="true"][data-has-end="true"] .leadity-input-group-input { border-radius: 0; }
.leadity-input-group-field > .leadity-floating-label { top: 3px; left: 8px; color: var(--leadity-text-light); font-size: 14px; line-height: 18px; }
.leadity-input-group:focus-within { outline: var(--leadity-focus-width) solid var(--leadity-focus-color); outline-offset: var(--leadity-focus-offset); border-radius: var(--leadity-radius-sm); }
.leadity-input-group-input:focus-visible { outline: 0; }

/* Slider, Multiselect, ListBox und Yearpicker */
.leadity-slider { width: min(440px, 100%); display: grid; gap: var(--leadity-space-5); }
.leadity-slider-field { width: 100%; }
.leadity-slider-values { display: none; }
.leadity-slider-value { width: 100%; height: var(--leadity-control-default); padding: 7px 12px; border: var(--leadity-line-xs) solid var(--leadity-neutral-40); border-radius: var(--leadity-radius-sm); background: var(--leadity-white); color: var(--leadity-text-default); font: 400 16px/24px var(--leadity-font-body); font-variant-numeric: tabular-nums; }
.leadity-range-track { height: 16px; position: relative; }
.leadity-range-track::before { content: ""; height: 4px; position: absolute; top: 6px; right: 0; left: 0; border-radius: var(--leadity-radius-full); background: linear-gradient(to right, var(--leadity-neutral-40) 0 var(--range-start), var(--leadity-neutral-100) var(--range-start) var(--range-end), var(--leadity-neutral-40) var(--range-end) 100%); }
.leadity-range-track[data-slider-variant="complete"]::before { background: var(--leadity-neutral-100); }
.leadity-range-track input[type="range"] { width: 100%; height: 16px; position: absolute; inset: 0; margin: 0; appearance: none; background: transparent; pointer-events: none; }
.leadity-range-track input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.leadity-range-track input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -6px; appearance: none; border: var(--leadity-line-xs) solid var(--leadity-neutral-60); border-radius: 50%; background: var(--leadity-white); box-shadow: none; pointer-events: auto; cursor: grab; }
.leadity-range-track input[type="range"]::-moz-range-track { height: 4px; background: transparent; }
.leadity-range-track input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: var(--leadity-line-xs) solid var(--leadity-neutral-60); border-radius: 50%; background: var(--leadity-white); box-shadow: none; pointer-events: auto; cursor: grab; }

.leadity-combobox { width: min(343px, 100%); min-width: 0; position: relative; }
.leadity-combobox-trigger { text-align: left; cursor: pointer; }
.leadity-combobox-trigger::after { content: "\f078"; position: absolute; right: 11px; top: 20px; color: var(--leadity-text-light); font: 300 14px/16px "Font Awesome 6 Pro"; }
.leadity-combobox-list { width: 100%; min-width: 100%; max-width: 100%; box-sizing: border-box; max-height: 320px; position: absolute; z-index: 20; top: calc(100% + var(--leadity-space-2)); left: 0; overflow-y: auto; border: var(--leadity-line-xs) solid var(--leadity-neutral-40); border-radius: var(--leadity-radius-sm); background: var(--leadity-white); box-shadow: var(--leadity-shadow-floating); }
.leadity-combobox-list[hidden] { display: none; }
.leadity-combobox-search-row { min-width: 0; }
.leadity-combobox-search { width: auto; margin: var(--leadity-space-4) var(--leadity-space-4) var(--leadity-space-3); }
.leadity-combobox-search .leadity-search-input { border-radius: var(--leadity-radius-sm); }
.leadity-option-group { display: grid; gap: 0; }
.leadity-option-group-title { margin: 0; padding: 8px 12px; color: var(--leadity-text-default); font: 600 16px/24px var(--leadity-font-body); }
.leadity-option { min-height: 40px; display: flex; align-items: center; gap: var(--leadity-space-3); padding: 8px 12px; cursor: pointer; }
leadity-multiselect:not(.leadity-filter-multiselect) .leadity-option input[type="checkbox"] { width: 20px; height: 20px; position: relative; flex: 0 0 20px; margin: 0; appearance: none; border: var(--leadity-line-xs) solid var(--leadity-neutral-40); border-radius: var(--leadity-radius-sm); background: var(--leadity-white); cursor: pointer; }
leadity-multiselect:not(.leadity-filter-multiselect) .leadity-option input[type="checkbox"]:checked, leadity-multiselect:not(.leadity-filter-multiselect) .leadity-option input[type="checkbox"]:indeterminate { border-color: var(--leadity-neutral-80); background: var(--leadity-neutral-80); }
leadity-multiselect:not(.leadity-filter-multiselect) .leadity-option input[type="checkbox"]:checked::after { content: ""; width: 9px; height: 5px; position: absolute; top: 4px; left: 4px; border-bottom: 2px solid var(--leadity-white); border-left: 2px solid var(--leadity-white); transform: rotate(-45deg); }
leadity-multiselect:not(.leadity-filter-multiselect) .leadity-option input[type="checkbox"]:indeterminate::after { content: ""; width: 10px; height: 2px; position: absolute; top: 50%; left: 50%; background: var(--leadity-white); transform: translate(-50%, -50%); }
.leadity-option:hover, .leadity-option[data-active="true"] { background: var(--leadity-neutral-20); }
.leadity-option[aria-selected="true"] { background: var(--leadity-neutral-10); }
.leadity-option[aria-disabled="true"] { color: var(--leadity-text-light); cursor: not-allowed; }
.leadity-option-copy { min-width: 0; display: grid; }
.leadity-option-subline { color: var(--leadity-text-light); font: 400 14px/20px var(--leadity-font-body); }

/* Filter-Multiselect: Figma 8944:57286 und 8944:57363. */
.leadity-filter-multiselect { width: 280px; }
.leadity-filter-multiselect .leadity-combobox-list { top: calc(100% + var(--leadity-space-3)); max-height: none; padding: var(--leadity-space-3); overflow-x: clip; box-shadow: none; }
.leadity-filter-multiselect-responsibility .leadity-combobox-list { height: 340px; overflow-y: auto; }
.leadity-filter-multiselect-workflow .leadity-combobox-list { height: 188px; overflow-y: hidden; }
.leadity-filter-multiselect .leadity-combobox-search-row { height: 44px; display: flex; align-items: center; gap: var(--leadity-space-3); padding: 0 0 var(--leadity-space-2) var(--leadity-space-3); }
.leadity-filter-multiselect .leadity-combobox-select-all { width: 16px; height: 40px; position: relative; display: grid; place-items: center; flex: 0 0 16px; cursor: pointer; }
.leadity-filter-multiselect .leadity-combobox-search { flex: 1 1 auto; margin: 0; }
.leadity-filter-multiselect .leadity-combobox-search .leadity-search-icon { right: var(--leadity-space-4); left: auto; }
.leadity-filter-multiselect .leadity-combobox-search .leadity-search-input { padding: 7px 36px 7px var(--leadity-space-4); }
.leadity-filter-multiselect .leadity-combobox-options, .leadity-filter-multiselect .leadity-option-group { display: grid; align-content: start; gap: 0; }
.leadity-filter-multiselect .leadity-option-group-title { height: 32px; display: flex; align-items: center; margin: 0; padding: 0 var(--leadity-space-3); color: var(--leadity-text-default); font: 600 16px/24px var(--leadity-font-body); }
.leadity-filter-multiselect .leadity-option { height: 32px; min-height: 32px; gap: var(--leadity-space-3); padding: 0 var(--leadity-space-3); overflow: hidden; color: var(--leadity-text-default); font: 400 16px/24px var(--leadity-font-body); }
.leadity-filter-multiselect .leadity-option:focus-visible { outline: var(--leadity-focus-width) solid var(--leadity-focus-color); outline-offset: calc(-1 * var(--leadity-focus-width)); }
.leadity-filter-multiselect input[type="checkbox"] { width: 16px; height: 16px; position: relative; flex: 0 0 16px; margin: 0; appearance: none; border: var(--leadity-line-xs) solid var(--leadity-neutral-40); border-radius: var(--leadity-radius-sm); background: var(--leadity-white); cursor: pointer; }
.leadity-filter-multiselect input[type="checkbox"]:checked, .leadity-filter-multiselect input[type="checkbox"]:indeterminate { border-color: var(--leadity-neutral-80); background: var(--leadity-neutral-80); }
.leadity-filter-multiselect input[type="checkbox"]:checked::after { content: ""; width: 8px; height: 4px; position: absolute; top: 3px; left: 3px; border-bottom: 2px solid var(--leadity-white); border-left: 2px solid var(--leadity-white); transform: rotate(-45deg); }
.leadity-filter-multiselect input[type="checkbox"]:indeterminate::after { content: ""; width: 8px; height: 2px; position: absolute; top: 50%; left: 50%; background: var(--leadity-white); transform: translate(-50%, -50%); }
.leadity-filter-multiselect .leadity-option-copy { overflow: hidden; }
.leadity-filter-multiselect .leadity-option-copy > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.leadity-listbox { width: min(216px, 100%); display: block; overflow: hidden; border: var(--leadity-line-xs) solid var(--leadity-neutral-40); border-radius: var(--leadity-radius-md); background: var(--leadity-white); box-shadow: var(--leadity-shadow-default); }
.leadity-listbox-header { padding: var(--leadity-space-4) var(--leadity-space-4) var(--leadity-space-2); }
.leadity-listbox-header .leadity-search-input { height: 40px; border: var(--leadity-line-xs) solid var(--leadity-neutral-40); border-radius: var(--leadity-radius-md); box-shadow: var(--leadity-shadow-default); }
.leadity-listbox-options { display: grid; gap: var(--leadity-space-3); padding: var(--leadity-space-2); }
.leadity-listbox-option { min-height: 40px; display: flex; align-items: center; padding: var(--leadity-space-3) var(--leadity-space-4); overflow: hidden; border: 0; border-radius: var(--leadity-radius-sm); background: transparent; color: var(--leadity-text-default); font: 400 16px/16px var(--leadity-font-body); text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.leadity-listbox-option:hover, .leadity-listbox-option[data-active="true"] { background: var(--leadity-neutral-20); }
.leadity-listbox-option[aria-selected="true"] { background: var(--leadity-neutral-80); color: var(--leadity-neutral-10); }
.leadity-listbox-option[data-option-type="group"] { color: var(--leadity-text-light); font-weight: 600; cursor: default; }

.leadity-year-picker { width: min(280px, 100%); position: relative; display: block; }
.leadity-year-trigger { position: relative; display: block; padding-right: 36px; text-align: left; cursor: pointer; }
.leadity-year-trigger-icon { width: 16px; height: 16px; flex: 0 0 16px; color: var(--leadity-text-light); text-align: center; }
.leadity-year-trigger .leadity-year-trigger-icon { position: absolute; top: 50%; right: 11px; line-height: 16px; pointer-events: none; transform: translateY(-50%); }
.leadity-year-popover { width: min(280px, calc(100vw - 32px)); position: absolute; z-index: 20; top: calc(100% + var(--leadity-space-3)); left: 0; padding: var(--leadity-space-4); border: var(--leadity-line-xs) solid var(--leadity-neutral-40); border-radius: var(--leadity-radius-md); background: var(--leadity-white); box-shadow: var(--leadity-shadow-floating); color: var(--leadity-text-default); }
.leadity-year-popover[hidden] { display: none; }
.leadity-year-header { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: var(--leadity-space-2); margin-bottom: var(--leadity-space-3); }
.leadity-year-decade { text-align: center; font: 600 14px/20px var(--leadity-font-body); }
.leadity-year-nav { width: 40px; height: 40px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: var(--leadity-radius-full); background: transparent; color: var(--leadity-text-default); cursor: pointer; }
.leadity-year-nav:hover { background: var(--leadity-neutral-20); }
.leadity-year-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--leadity-space-3); }
.leadity-year-button { min-height: 40px; border: 0; border-radius: var(--leadity-radius-sm); background: transparent; color: var(--leadity-text-default); font: 400 14px/20px var(--leadity-font-body); cursor: pointer; }
.leadity-year-button:hover, .leadity-year-button[data-active="true"] { background: var(--leadity-neutral-20); }
.leadity-year-button[aria-pressed="true"] { background: var(--leadity-neutral-80); color: var(--leadity-white); }
.leadity-header-year-picker { position: relative; }
.leadity-year-picker[data-field-variant="header"] { width: auto; display: inline-block; }
.leadity-year-picker[data-field-variant="header"] .leadity-year-popover { right: 0; left: auto; }
.leadity-header-year-trigger { min-width: 84px; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: var(--leadity-space-2); padding-inline: var(--leadity-space-3); border: 0; border-radius: var(--leadity-radius-sm); background: transparent; color: inherit; font: 400 16px/24px var(--leadity-font-body); cursor: pointer; }
.leadity-header-year-trigger:hover { background: color-mix(in srgb, currentColor 12%, transparent); }

/* Fachliche Select-Kompositionen */
.leadity-language-select { width: 110px; min-width: 0; position: relative; display: block; }
.leadity-language-flag { width: 25.6px; height: 19.2px; position: absolute; z-index: 2; top: 50%; left: var(--leadity-space-4); object-fit: cover; pointer-events: none; transform: translateY(-50%); }
.leadity-language-control { width: 110px; }
.leadity-language-control .leadity-select-trigger { height: 40px; padding-left: calc(var(--leadity-space-6) + var(--leadity-space-6)); }
.leadity-language-control .leadity-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leadity-language-control .leadity-select-list { width: 100%; min-width: 100%; max-width: 100%; }
.leadity-select-composition { width: min(480px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: center; gap: var(--leadity-space-4); }
.leadity-select-composition[data-composition="status"] { width: min(420px, 100%); grid-template-columns: minmax(0, 1fr) 32px; }
.leadity-select-composition > leadity-select { min-width: 0; }
.leadity-select-composition > leadity-chip, .leadity-select-composition > leadity-field-action { justify-self: center; }
.leadity-composite-action { width: 40px; height: 40px; }
leadity-field-action[hidden] { display: none; }

/* Texteditor-Basis; fachliche Schrittkomposition liegt in Task Surfaces. */
.leadity-editor { width: min(1061px, 100%); min-height: 267px; display: grid; grid-template-rows: auto minmax(180px, 1fr); overflow: hidden; border: var(--leadity-line-xs) solid var(--leadity-neutral-40); border-radius: var(--leadity-radius-sm); background: var(--leadity-white); }
.leadity-editor-toolbar { min-height: 48px; display: flex; align-items: center; flex-wrap: wrap; gap: var(--leadity-space-2); padding: var(--leadity-space-2) var(--leadity-space-3); border-bottom: var(--leadity-line-xs) solid var(--leadity-neutral-20); }
.leadity-editor-action { width: 40px; height: 40px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: var(--leadity-radius-sm); background: transparent; color: var(--leadity-text-default); cursor: pointer; }
.leadity-editor-action > i { font-size: 18px; line-height: 1; }
.leadity-editor-action:hover, .leadity-editor-action[aria-pressed="true"] { background: var(--leadity-neutral-20); }
.leadity-editor-content { min-height: 180px; padding: var(--leadity-space-4); outline: 0; color: var(--leadity-text-default); font: 400 16px/24px var(--leadity-font-body); }
.leadity-editor-content:focus-visible { outline: var(--leadity-focus-width) solid var(--leadity-focus-color); outline-offset: calc(-1 * var(--leadity-focus-width)); }
.leadity-editor-content:empty::before { content: attr(data-placeholder); color: var(--leadity-text-light); pointer-events: none; }

/* Filter Card, Filterelemente und Filter-Popover */
.leadity-filter-card, :where(.filter-card) { min-width: 0; display: grid; gap: var(--leadity-space-6); padding: var(--leadity-space-7); border-radius: var(--leadity-radius-xl); background: var(--leadity-white); box-shadow: var(--leadity-shadow-default); container-type: inline-size; }
.leadity-filter-toolbar, :where(.filter-row) { min-width: 0; display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--leadity-space-6); }
.leadity-filter-primary { min-width: 0; display: flex; align-items: flex-start; flex: 1 1 0; flex-wrap: wrap; gap: var(--leadity-space-6); }
.leadity-quick-filters { min-width: 0; display: flex; align-items: center; flex: 1 1 420px; flex-wrap: wrap; gap: var(--leadity-space-3); padding-top: var(--leadity-space-2); }
.leadity-filter-sort-wrap { display: flex; align-items: center; flex: 0 0 auto; gap: var(--leadity-space-4); margin-left: auto; }
.leadity-filter-sort-icon { width: 18px; height: 16px; flex: 0 0 18px; color: var(--leadity-text-light); text-align: center; }
.leadity-filter-sort { width: 260px; min-width: 260px; max-width: 260px; flex: 0 0 260px; }
.leadity-filter-sort .leadity-control { min-width: 0; padding-right: 36px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leadity-filter-sort .leadity-select-list { width: 100%; min-width: 100%; max-width: 100%; }
.leadity-quick-filter, :where(.filter-chip) { min-width: 32px; height: 32px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--leadity-space-3); padding-inline: var(--leadity-space-4); border: 0; border-radius: var(--leadity-radius-full); background: var(--leadity-neutral-10); color: var(--leadity-text-default); font: 400 14px/20px var(--leadity-font-body); cursor: pointer; }
.leadity-quick-filter::before, :where(.filter-chip)::before { content: ""; position: absolute; inset: -4px; }
.leadity-quick-filter:hover, :where(.filter-chip):hover { background: var(--leadity-neutral-20); }
.leadity-quick-filter[aria-pressed="true"], :where(.filter-chip)[aria-pressed="true"] { background: var(--leadity-neutral-10); color: var(--leadity-text-default); }
.leadity-quick-filter[aria-pressed="true"]:hover, :where(.filter-chip)[aria-pressed="true"]:hover { background: var(--leadity-neutral-20); }
.leadity-filter-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--leadity-space-6); }
.leadity-active-filters { min-width: 0; display: flex; align-items: center; flex: 1 1 auto; flex-wrap: wrap; column-gap: var(--leadity-space-6); row-gap: var(--leadity-space-4); }
.leadity-filter-element { width: 320px; height: var(--leadity-control-floating-label); display: grid; grid-template-columns: 280px 32px; align-items: center; gap: var(--leadity-space-3); }
.leadity-filter-element-field { height: var(--leadity-control-floating-label); position: relative; overflow: hidden; border: var(--leadity-line-xs) solid var(--leadity-neutral-40); border-radius: var(--leadity-radius-sm); background: var(--leadity-white); }
.leadity-filter-element-copy { min-width: 0; height: 100%; display: grid; align-content: center; padding: 5px 12px; }
.leadity-filter-element-label { overflow: hidden; color: var(--leadity-text-default); font: 400 16px/24px var(--leadity-font-body); text-overflow: ellipsis; white-space: nowrap; }
.leadity-filter-element-value { display: none; overflow: hidden; color: var(--leadity-text-default); font: 400 16px/24px var(--leadity-font-body); text-overflow: ellipsis; white-space: nowrap; }
.leadity-filter-element[data-filter-state="set"] .leadity-filter-element-copy, .leadity-filter-element[data-filter-state="multiple"] .leadity-filter-element-copy { align-content: stretch; padding-top: 3px; padding-bottom: 3px; }
.leadity-filter-element[data-filter-state="set"] .leadity-filter-element-label, .leadity-filter-element[data-filter-state="multiple"] .leadity-filter-element-label { color: var(--leadity-text-light); font-size: 14px; line-height: 18px; }
.leadity-filter-element[data-filter-state="set"] .leadity-filter-element-value, .leadity-filter-element[data-filter-state="multiple"] .leadity-filter-element-value { display: block; }
.leadity-filter-remove { width: 32px; height: 32px; position: relative; display: inline-grid; place-items: center; border: 0; border-radius: var(--leadity-radius-full); background: var(--leadity-neutral-10); color: var(--leadity-text-default); cursor: pointer; }
.leadity-filter-remove::before { content: ""; position: absolute; inset: -4px; }
.leadity-filter-remove:hover { background: var(--leadity-neutral-20); }
.leadity-filter-reset { width: 159px; flex: 0 0 159px; margin-bottom: var(--leadity-space-4); }
.leadity-filter-reset[hidden], .leadity-active-filters[hidden], .leadity-filter-bottom[hidden] { display: none; }

.leadity-filter-popover { width: min(688px, calc(100vw - 32px)); padding: var(--leadity-space-4); overflow: visible; border: 0; border-radius: var(--leadity-radius-md); background: var(--leadity-white); box-shadow: var(--leadity-shadow-floating); }
.leadity-filter-popover-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--leadity-space-6); }
.leadity-filter-column { min-width: 0; display: grid; align-content: start; gap: var(--leadity-space-4); }
.leadity-filter-column-title { color: var(--leadity-text-dark); font: 600 16px/20.8px var(--leadity-font-body); letter-spacing: .08px; }
.leadity-filter-popover-controls { min-width: 0; display: grid; gap: var(--leadity-space-4); }
.leadity-filter-popover-item { min-width: 0; display: grid; grid-template-columns: minmax(0, 280px) 32px; align-items: center; gap: var(--leadity-space-2); }
.leadity-filter-popover-item > .leadity-field { width: 280px; }
.leadity-filter-popover-action-slot { width: 32px; height: 32px; }
.leadity-filter-memory { margin-top: var(--leadity-space-4); }
leadity-filter-remove { display: contents; }

@container (max-width: 760px) {
  .leadity-filter-toolbar,
  .leadity-filter-primary { align-items: stretch; flex-direction: column; }
  .leadity-filter-toolbar > *,
  .leadity-filter-primary > * { width: 100%; }
  .leadity-filter-sort-wrap { width: 100%; margin-left: 0; }
  .leadity-filter-bottom { align-items: stretch; flex-direction: column; }
  .leadity-filter-reset { align-self: flex-end; margin-bottom: 0; }
}

@media (max-width: 760px) {
  .leadity-form-grid, :where(.form-grid) { grid-template-columns: 1fr; }
  .leadity-filter-toolbar, :where(.filter-row), .leadity-filter-primary { align-items: stretch; flex-direction: column; }
  .leadity-filter-toolbar > *, :where(.filter-row) > *, .leadity-filter-primary > * { width: 100%; }
  .leadity-filter-sort-wrap { width: 100%; margin-left: 0; }
  .leadity-filter-sort { width: 260px; min-width: 260px; max-width: 260px; flex: 0 0 260px; }
  .leadity-filter-popover-body { grid-template-columns: 1fr; }
  .leadity-filter-column { width: 100%; }
  .leadity-filter-bottom { align-items: stretch; flex-direction: column; }
  .leadity-filter-reset { align-self: flex-end; margin-bottom: 0; }
}

@media (max-width: 479px) {
  .leadity-filter-card, :where(.filter-card) { padding: var(--leadity-space-5); }
  .leadity-active-filters { align-items: stretch; flex-direction: column; }
  .leadity-filter-element { width: 100%; grid-template-columns: minmax(0, 1fr) 32px; }
  .leadity-filter-element-field { width: 100%; }
  .leadity-filter-popover-item { grid-template-columns: minmax(0, 1fr) 32px; }
  .leadity-filter-popover-item > .leadity-field { width: 100%; }
  .leadity-input-group { flex-wrap: wrap; }
  .leadity-input-group-addon, .leadity-input-group-field { width: 100%; }
  .leadity-input-group-addon:first-child, .leadity-input-group-addon:last-child { border-radius: var(--leadity-radius-sm); }
  .leadity-input-group .leadity-input-group-input,
  .leadity-input-group[data-has-start="true"] .leadity-input-group-input,
  .leadity-input-group[data-has-end="true"] .leadity-input-group-input,
  .leadity-input-group[data-has-start="true"][data-has-end="true"] .leadity-input-group-input { border: var(--leadity-line-xs) solid var(--leadity-neutral-40); border-radius: var(--leadity-radius-sm); }
}

@media (prefers-reduced-motion: reduce) {
  .leadity-switch::before, .leadity-switch::after, :where(.switch)::before, :where(.switch)::after,
  .leadity-field-label, .leadity-strength-line::before { transition-duration: .01ms; }
}