/* tasks – Aufgaben, Tafel, Optionen-Verwaltung, Beteiligte (ab 1.6.0). Touch-Ziele ≥ 44 px; Marken immer mit Text. */

/* Marke einer Option: Hintergrund aus der geprüften Palette, Textfarbe weiss/dunkel (Kontrast ≥ 4,5:1, gesetzt in JS) */
.state-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; line-height: 1.3; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.state-chip.archived { opacity: 0.6; text-decoration: line-through; }
.color-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.option-select { min-width: 0; }
.option-select select { flex: 1; min-width: 0; min-height: 44px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.form-actions { justify-content: flex-end; flex-wrap: wrap; }
.form-actions .btn { min-height: 44px; }

/* Filterzeile mit beschrifteten Gruppen */
.task-toolbar { align-items: flex-end; }
.toolbar-group { display: flex; flex-direction: column; gap: 2px; }
.toolbar-label { font-size: 0.72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.task-toolbar .seg button, .task-toolbar select { min-height: 44px; }
.task-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }

/* Statusmenü (Notion-Art) */
.status-menu-wrap { position: relative; display: inline-block; }
.status-menu-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; color: var(--ink); }
.status-menu-bg { position: fixed; inset: 0; z-index: 40; }
.status-menu { position: absolute; z-index: 41; top: calc(100% + 4px); left: 0; min-width: 260px; max-width: calc(100vw - 32px); max-height: 70vh; overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; }
.status-group-head { font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; padding: 8px 8px 2px; }
.status-item { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 0 8px; background: none; border: 0; border-radius: 8px; cursor: pointer; color: var(--ink); text-align: left; }
.status-item:not(:disabled):hover, .status-item.current { background: var(--bg); }
.status-item:disabled { opacity: 0.45; cursor: not-allowed; }

/* Tafel */
.kb-title-col { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.kb-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.kb-card .kb-next { min-height: 44px; }
.kb-move { display: block; }
.kb-move .option-select select { min-height: 44px; }

/* Optionen-Verwaltung */
.opt-list { list-style: none; margin: 0; padding: 0; }
.opt-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.opt-row:last-child { border-bottom: 0; }
.opt-row.archived { background: transparent; }
.opt-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.opt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.opt-actions .icon-btn { width: 44px; height: 44px; }
.opt-actions .btn { min-height: 44px; }
.opt-group .card-head h2 { margin: 0; }
.option-preview { display: inline-flex; align-items: center; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; }
.swatch { width: 100%; min-height: 44px; border-radius: 10px; border: 2px solid transparent; cursor: pointer; display: grid; place-items: center; }
.swatch.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--card) inset; }

/* Beteiligte */
.member-list { list-style: none; margin: 0; padding: 0; }
.member-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.member-row:last-child { border-bottom: 0; }
.member-main { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 160px; }
.member-role { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.member-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.member-actions .btn { min-height: 44px; }

@media (max-width: 899px) {
	.status-menu { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; max-width: none; }
}