/* ─── Touch & Safe-Area Foundations ──────────────────────────── */

*,
*::before,
*::after {
	-webkit-tap-highlight-color: transparent;
}

/* Menüs werden ausschließlich per JS-Klasse .is-open geöffnet.
   :focus-within darf nicht als zweiter, widersprüchlicher Öffnungszustand wirken. */
.task-menu-anchor:not(.is-open):focus-within>.task-quick-menus:not(.is-task-menu-portal) {
	opacity: 0 !important;
	transform: translateY(4px) !important;
	pointer-events: none !important;
	visibility: hidden;
}

.shopping-panel-intro {
  margin-bottom: 12px;
}

.shopping-lists-root {
  display: grid;
  gap: 14px;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
}

.shopping-empty-card,
.shopping-list-card {
  background: linear-gradient(180deg, rgba(52, 58, 84, 0.92), rgba(34, 38, 57, 0.96));
  border: 1px solid rgba(129, 142, 199, 0.18);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  padding: 14px;
}

.shopping-empty-title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
}

.shopping-empty-copy {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.45;
}

.shopping-empty-cta {
  min-width: 0;
}

.shopping-list-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.shopping-list-head-main {
  flex: 1 1 auto;
  min-width: 0;
}

.shopping-list-name {
  width: 100%;
  font-weight: 700;
  margin-bottom: 6px;
}

.shopping-list-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.77rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shopping-list-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.shopping-list-tool {
  white-space: nowrap;
}

.shopping-item-form {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(84px, 0.55fr);
  gap: 8px;
  margin-bottom: 12px;
}

.shopping-item-input,
.shopping-item-qty-input,
.shopping-item-note-input,
.shopping-item-store-select {
  min-width: 0;
  line-height: 1.28;
}

.shopping-item-store-select,
.shopping-item-note-input,
.shopping-item-add {
  grid-column: span 1;
}

.shopping-item-store-select,
.shopping-item-note-input {
  width: 100%;
}

.shopping-item-add {
  white-space: nowrap;
}

.shopping-store-groups {
  display: grid;
  gap: 10px;
}

.shopping-store-block {
  border-radius: 14px;
  border: 1px solid rgba(129, 142, 199, 0.14);
  background: rgba(17, 21, 36, 0.3);
  padding: 0;
  overflow: hidden;
}

.shopping-store-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  cursor: pointer;
}

.shopping-store-summary::-webkit-details-marker {
  display: none;
}

.shopping-store-summary-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.shopping-store-summary-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}

.shopping-store-summary-meta {
  font-size: 0.76rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shopping-store-summary-badge {
  font-size: 1rem;
  color: var(--muted);
  flex: 0 0 auto;
}

.shopping-store-block[open] .shopping-store-summary-badge {
  transform: rotate(90deg);
}

.shopping-store-body {
  display: grid;
  gap: 8px;
  padding: 0 10px 10px;
  border-top: 1px solid rgba(129, 142, 199, 0.08);
}

.shopping-store-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.shopping-store-title {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(225, 230, 255, 0.82);
}

.shopping-store-delete {
  font-size: 0.76rem;
}

.shopping-items-stack {
  display: grid;
  gap: 8px;
}

.shopping-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(44, 48, 68, 0.82);
  border: 1px solid rgba(136, 149, 205, 0.12);
}

.shopping-item-row.is-done {
  opacity: 0.68;
}

.shopping-item-main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

.shopping-item-check {
  margin-top: 2px;
  flex: 0 0 auto;
}

.shopping-item-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.shopping-item-text {
  display: block;
  line-height: 1.35;
  word-break: break-word;
}

.shopping-item-row.is-done .shopping-item-text {
  text-decoration: line-through;
}

.shopping-item-note {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.shopping-item-side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.shopping-item-qty {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 11px;
  border: 1px solid rgba(102, 219, 183, 0.26);
  background: rgba(5, 113, 84, 0.14);
  color: #8de7c7;
  font-weight: 700;
  font-size: 0.82rem;
}

.shopping-item-delete {
  min-width: 0;
  font-size: 0.76rem;
}

.shopping-store-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

@media (max-width: 640px) {
  .shopping-list-head {
    flex-direction: column;
    gap: 9px;
  }

  .shopping-list-toolbar {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    justify-content: stretch;
    gap: 7px;
  }

  .shopping-list-tool {
    width: 100%;
    min-height: 38px;
    justify-content: center;
    padding-inline: 8px;
  }

  .shopping-list-card,
  .shopping-empty-card {
    padding: 12px;
    border-radius: 16px;
  }

  .contact-search-card {
    flex-direction: column;
    align-items: stretch;
  }

  .shopping-item-form {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid rgba(129, 142, 199, 0.12);
    background: rgba(19, 22, 36, 0.2);
  }

  .shopping-item-add {
    min-height: 40px;
    justify-content: center;
  }

  .shopping-store-summary {
    min-height: 48px;
    padding: 10px 11px;
  }

  .shopping-store-body {
    padding: 0 10px 10px;
  }

  .shopping-store-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    margin-bottom: 6px;
  }

  .shopping-store-delete {
    width: 100%;
    min-height: 36px;
    justify-content: center;
  }

  .shopping-item-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
  }

  .shopping-item-side {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  .shopping-item-delete {
    min-height: 34px;
    padding-inline: 10px;
  }
}

button,
a,
summary,
[role="button"],
label {
	touch-action: manipulation;
}

:root {
	--font-ui: "Trebuchet MS", "Segoe UI", sans-serif;
	--font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
	--bg: #f1f4fb;
	--bg-accent: #fbfcff;
	--panel: rgba(255, 255, 255, 0.9);
	--border: rgba(86, 98, 128, 0.12);
	--shadow: 0 22px 48px rgba(58, 71, 104, 0.12);
	--text: #22283a;
	--muted: #67708a;
	--mix-base: #ffffff;
	--surface: rgba(255, 255, 255, 0.56);
	--surface-mid: rgba(255, 255, 255, 0.82);
	--surface-strong: rgba(255, 255, 255, 0.8);
	--input-bg: rgba(255, 255, 255, 0.88);
	--ctx01: #56a976;
	--ctx02: #e8945a;
	--ctx03: #d89a44;
	--ctx04: #4c82de;
	--ctx05: #7b6dcf;
	--ctx06: #de6f6a;
	--ctx07: #8a9199;
	--ctx08: #8a9199;
	--ctx09: #8a9199;
	--ctx10: #8a9199;
	--ctx11: #8a9199;
	--ctx12: #8a9199;
	--status-inbox: #7e879e;
	--status-today: #e06f66;
	--status-waiting: #d39c33;
	--status-scheduled: #56a0d7;
	--status-done: #58ad7f;
	--low: #54a774;
	--medium: #d3ad33;
	--high: #e18d42;
	--very-high: #df6762;
	--c-red: #e1736d;
	--c-orange: #e39a4c;
	--c-yellow: #d8b149;
	--c-green: #59b07b;
	--c-teal: #49b8b7;
	--c-blue: #5c92ea;
	--c-indigo: #8b92ee;
	--c-purple: #bb7ce5;
	--c-gray: #8c95aa;
	/* Einheitliche Zeilenhöhe: Buttons, Inputs, Selects, Tab-Leiste */
	--nf-menu-control-height: 32px;
	/* Hero: Board-Hülle & Icon-Leiste — gleiche Außenhöhe (Pad 6+6, Rand 1+1) */
	--hero-chrome-hull-pad-y: 4px;
	--hero-chrome-hull-min-height: calc(var(--nf-menu-control-height) + (2 * var(--hero-chrome-hull-pad-y)) + 2px);
	/* Task-Karte: Tag-Menüs (Inbox / Kontext / Energie) — Referenz für Termin & Wiederholung */
	--task-card-menu-height: 32px;
	/* Einstellungen / Drawer: Hüllen & Steuerelemente — leicht abgerundet, keine Vollpillen */
	--nf-settings-shell-radius: 14px;
	--nf-settings-control-radius: 10px;
	--nf-settings-chip-height: 32px;
	--nf-settings-chip-pill-radius: 10px;
	/* Swipe-Track: Karte komplett deckend — verhindert Durchscheinen des behind-Layer */
	--nf-swipe-card-bg: rgba(244, 246, 252, 1);
}

body[data-theme="dark"] {
	--nf-swipe-card-bg: hsl(230, 26%, 17%);
}

body[data-theme="bw"] {
	--nf-swipe-card-bg: rgba(255, 255, 255, 0.98);
}

html {
	background: linear-gradient(180deg, var(--bg-accent), var(--bg));
	color-scheme: light;
	scrollbar-gutter: stable;
}

.build-badge {
	position: fixed;
	right: 12px;
	bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	z-index: 9999;
	padding: 4px 8px;
	border-radius: 999px;
	font-size: 0.68rem;
	line-height: 1;
	color: rgba(255, 255, 255, 0.72);
	background: rgba(15, 13, 26, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	pointer-events: none;
}

.build-badge.is-hidden {
	display: none;
}

.app-error-banner {
	margin: 10px 0 14px;
	padding: 12px 14px;
	border-radius: 16px;
	border: 1px solid color-mix(in srgb, #e45757 36%, transparent);
	background: color-mix(in srgb, #e45757 12%, var(--panel));
	color: color-mix(in srgb, #e45757 88%, var(--text));
	font-size: 0.82rem;
	line-height: 1.45;
	box-shadow: var(--shadow);
}

.app-error-banner.is-hidden {
	display: none;
}

.admin-impersonation-banner {
	position: sticky;
	top: 10px;
	z-index: 290;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: min(1180px, calc(100% - 28px));
	margin: 12px auto 0;
	padding: 12px 14px;
	border: 1px solid rgba(255, 190, 80, 0.62);
	border-radius: 18px;
	background: linear-gradient(135deg, rgba(48, 34, 18, 0.96), rgba(112, 70, 24, 0.9));
	color: #fff4d8;
	box-shadow: 0 18px 40px rgba(20, 14, 4, 0.28);
}

.admin-impersonation-banner > div {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.admin-impersonation-banner strong {
	font-weight: 900;
	letter-spacing: 0.02em;
}

.admin-impersonation-banner span {
	color: rgba(255, 244, 216, 0.86);
	font-size: 0.86rem;
}

.admin-impersonation-banner form {
	margin: 0;
	flex: 0 0 auto;
}

@media (max-width: 720px) {
	.admin-impersonation-banner {
		position: relative;
		top: auto;
		align-items: stretch;
		flex-direction: column;
		width: calc(100% - 24px);
	}

	.admin-impersonation-banner .settings-tool-btn {
		width: 100%;
	}
}

body[data-theme="default"] .build-badge,
body[data-theme="bw"] .build-badge {
	color: rgba(20, 20, 20, 0.66);
	background: rgba(255, 255, 255, 0.72);
	border-color: rgba(15, 13, 26, 0.08);
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;
	position: relative;
	overflow-x: hidden;
	overflow-y: scroll;
	font-family: var(--font-ui);
	color: var(--text);
	/* Nur undurchsichtige Flächen — keine radialen „Löcher“ (transparent), die mit Layern/Scroll komisch durchscheinen */
	background:
		radial-gradient(circle at 12% 6%, rgba(95, 114, 216, 0.13), transparent 30%),
		radial-gradient(circle at 88% 2%, rgba(179, 106, 214, 0.09), transparent 28%),
		radial-gradient(circle at 88% 88%, rgba(89, 176, 123, 0.07), transparent 30%),
		radial-gradient(circle at 22% 88%, rgba(95, 160, 215, 0.07), transparent 28%),
		linear-gradient(180deg, var(--bg-accent), var(--bg));
}

body.drawer-open {
	overflow: hidden;
	overscroll-behavior: none;
	/* touch-action: none würde Scrollen in Textarea / Schnellnotiz-Vorschau blockieren */
}

body[data-theme="dark"] {
	--bg: hsl(230, 25%, 10%);
	--bg-accent: hsl(234, 28%, 13%);
	--panel: rgba(18, 24, 46, 0.9);
	--border: rgba(255, 255, 255, 0.1);
	--shadow: 0 24px 56px rgba(2, 6, 18, 0.48);
	--text: #edf2ff;
	--muted: #98a3c7;
	--mix-base: #101626;
	--surface: rgba(255, 255, 255, 0.055);
	--surface-mid: rgba(255, 255, 255, 0.085);
	--surface-strong: rgba(255, 255, 255, 0.075);
	--input-bg: rgba(255, 255, 255, 0.08);
	--ctx01: #59d390;
	--ctx02: #f0a572;
	--ctx03: #ffb347;
	--ctx04: #63a4ff;
	--ctx05: #a48de8;
	--ctx06: #ff7e74;
	--ctx07: #9baab3;
	--ctx08: #9baab3;
	--ctx09: #9baab3;
	--ctx10: #9baab3;
	--ctx11: #9baab3;
	--ctx12: #9baab3;
	--status-inbox: #93a0c3;
	--status-today: #ff7a6b;
	--status-waiting: #ffb24d;
	--status-scheduled: #5cc7f7;
	--status-done: #5ad78d;
	--low: #54d087;
	--medium: #f0c94d;
	--high: #ff944a;
	--very-high: #ff6a5f;
	--c-red: #ff7d74;
	--c-orange: #ff9d4d;
	--c-yellow: #f0c54d;
	--c-green: #5ad48f;
	--c-teal: #45d1d1;
	--c-blue: #63a8ff;
	--c-indigo: #8c96ff;
	--c-purple: #c37cff;
	--c-gray: #8c96af;
}

body[data-theme="dark"] {
	background:
		radial-gradient(circle at 12% 6%, rgba(95, 114, 216, 0.14), transparent 30%),
		radial-gradient(circle at 88% 2%, rgba(179, 106, 214, 0.1), transparent 28%),
		radial-gradient(circle at 88% 88%, rgba(89, 176, 123, 0.08), transparent 30%),
		radial-gradient(circle at 22% 88%, rgba(95, 160, 215, 0.08), transparent 28%),
		linear-gradient(180deg, var(--bg-accent), var(--bg));
	color-scheme: dark;
}

body[data-theme="dark"] .board-column {
	background:
		linear-gradient(180deg, rgba(24, 29, 44, 0.98), rgba(18, 22, 35, 0.98));
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow:
		0 28px 58px rgba(2, 6, 18, 0.5),
		0 12px 24px rgba(0, 0, 0, 0.28);
}

body[data-theme="dark"] .board-column::before {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03) 20%, transparent 42%);
	opacity: 0.75;
}

body[data-theme="dark"] .board-column::after {
	background: radial-gradient(closest-side, rgba(0, 0, 0, 0.78), transparent);
	opacity: 0.72;
}

body[data-theme="dark"] .column-body {
	background:
		linear-gradient(180deg, rgba(24, 29, 44, 0.78), rgba(19, 23, 36, 0.96));
}

body[data-theme="dark"] .top-chrome {
	background: linear-gradient(180deg, rgba(15, 20, 36, 0.82), rgba(15, 20, 36, 0.32));
	border-bottom-color: rgba(255, 255, 255, 0.06);
	box-shadow: 0 12px 32px rgba(2, 6, 18, 0.22);
}

body[data-theme="dark"] .hero::before,
body[data-theme="dark"] .panel::before {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 34%),
		radial-gradient(circle at 18% 0%, rgba(95, 114, 216, 0.14), transparent 34%);
}

body[data-theme="dark"] .settings-drawer,
body[data-theme="dark"] .notes-drawer,
body[data-theme="dark"] .sched-drawer {
	background: linear-gradient(180deg, rgba(17, 22, 38, 0.96), rgba(14, 18, 31, 0.97));
	border-left-color: rgba(255, 255, 255, 0.06);
	box-shadow:
		-32px 0 72px rgba(2, 6, 18, 0.42),
		-12px 0 28px rgba(0, 0, 0, 0.22);
}

body[data-theme="dark"] .settings-drawer-head,
body[data-theme="dark"] .sched-drawer-head,
body[data-theme="dark"] .notes-drawer-head {
	background:
		linear-gradient(180deg, rgba(20, 26, 44, 0.98), rgba(16, 21, 36, 0.9)),
		radial-gradient(circle at 20% 0%, rgba(95, 114, 216, 0.14), transparent 38%);
	border-bottom-color: rgba(255, 255, 255, 0.06);
}

body[data-theme="dark"] .settings-tabbar {
	background: linear-gradient(180deg, rgba(17, 22, 38, 0.92), rgba(15, 19, 33, 0.82));
	border-bottom-color: rgba(255, 255, 255, 0.06);
}

body[data-theme="dark"] .settings-tab-btn,
body[data-theme="dark"] .settings-toggle-row,
body[data-theme="dark"] .board-list-row,
body[data-theme="dark"] .settings-info-row,
body[data-theme="dark"] .settings-info-link,
body[data-theme="dark"] .settings-account-info,
body[data-theme="dark"] .theme-picker-row,
body[data-theme="dark"] .settings-collapsible--card,
body[data-theme="dark"] .settings-panel-intro {
	background: linear-gradient(180deg, rgba(25, 31, 49, 0.82), rgba(18, 23, 39, 0.92));
	border-color: rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"] .settings-toggle-row,
body[data-theme="dark"] .board-list-row,
body[data-theme="dark"] .settings-info-row,
body[data-theme="dark"] .settings-info-link,
body[data-theme="dark"] .settings-account-info,
body[data-theme="dark"] .theme-picker-row,
body[data-theme="dark"] .settings-collapsible--card,
body[data-theme="dark"] .settings-panel-intro {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		0 10px 22px rgba(2, 6, 18, 0.18);
}

body[data-theme="dark"] .settings-tab-btn {
	background: rgba(255, 255, 255, 0.05);
}

body[data-theme="dark"] .settings-tab-btn:hover {
	background: rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"] .settings-tab-btn.is-active {
	border-color: rgba(139, 159, 240, 0.24);
	background: linear-gradient(135deg, rgba(95, 114, 216, 0.84), rgba(179, 106, 214, 0.88));
	box-shadow: 0 12px 28px rgba(2, 6, 18, 0.26);
}

body[data-theme="dark"] .settings-close-btn,
body[data-theme="dark"] .hero-action-btn,
body[data-theme="dark"] .hero-icon-btn {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.08);
	color: var(--text);
}

body[data-theme="dark"] .settings-close-btn:hover,
body[data-theme="dark"] .hero-action-btn:hover,
body[data-theme="dark"] .hero-icon-btn:hover {
	background: rgba(255, 255, 255, 0.1);
}

body[data-theme="bw"] {
	--bg: #ececec;
	--bg-accent: #fafafa;
	--panel: rgba(255, 255, 255, 0.94);
	--border: rgba(20, 20, 20, 0.12);
	--shadow: 0 18px 40px rgba(20, 20, 20, 0.12);
	--text: #111111;
	--muted: #4b4b4b;
	--mix-base: white;
	--surface: rgba(255, 255, 255, 0.55);
	--surface-strong: rgba(255, 255, 255, 0.78);
	--ctx01: #5c5c5c;
	--ctx02: #3a3a3a;
	--ctx03: #444444;
	--ctx04: #222222;
	--ctx05: #4d4d4d;
	--ctx06: #111111;
	--ctx07: #777777;
	--ctx08: #777777;
	--ctx09: #777777;
	--ctx10: #777777;
	--ctx11: #777777;
	--ctx12: #777777;
	--status-inbox: #555555;
	--status-today: #111111;
	--status-waiting: #444444;
	--status-scheduled: #333333;
	--status-done: #222222;
	--low: #2d2d2d;
	--medium: #4d4d4d;
	--high: #111111;
	--very-high: #000000;
	--c-red: #111111;
	--c-orange: #333333;
	--c-yellow: #555555;
	--c-green: #444444;
	--c-teal: #666666;
	--c-blue: #222222;
	--c-indigo: #1a1a1a;
	--c-purple: #000000;
	--c-gray: #888888;
}

body[data-theme="bw"] {
	background:
		radial-gradient(circle at 12% 6%, rgba(95, 114, 216, 0.06), transparent 30%),
		radial-gradient(circle at 88% 2%, rgba(179, 106, 214, 0.04), transparent 28%),
		radial-gradient(circle at 88% 88%, rgba(89, 176, 123, 0.035), transparent 30%),
		radial-gradient(circle at 22% 88%, rgba(95, 160, 215, 0.035), transparent 28%),
		linear-gradient(180deg, var(--bg-accent), var(--bg));
	color-scheme: light;
}

:focus-visible {
	outline: 2px solid color-mix(in srgb, #5f72d8 85%, white 5%);
	outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible {
	box-shadow: 0 0 0 4px color-mix(in srgb, #5f72d8 18%, transparent);
}

.top-chrome {
	position: sticky;
	top: 0;
	z-index: 120;
	display: grid;
	gap: 6px;
	padding-top: max(8px, env(safe-area-inset-top, 0px));
	padding-left: env(safe-area-inset-left, 0px);
	padding-right: env(safe-area-inset-right, 0px);
	padding-bottom: 6px;
	width: 100%;
	margin: calc(-1 * max(8px, env(safe-area-inset-top, 0px))) 0 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.3));
	backdrop-filter: blur(18px) saturate(1.08);
	-webkit-backdrop-filter: blur(18px) saturate(1.08);
	border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba(58, 71, 104, 0.08);
	overflow: clip;
}

.app-shell {
	width: min(1280px, calc(100% - 24px));
	margin: 0 auto;
	padding: 28px 0 max(40px, env(safe-area-inset-bottom, 0px));
	padding-left: env(safe-area-inset-left, 0px);
	padding-right: env(safe-area-inset-right, 0px);
	position: relative;
	z-index: 0;
}

.hero,
.panel {
	background: var(--panel);
	border: 1px solid var(--border);
	box-shadow: var(--shadow);
	border-radius: 24px;
	position: relative;
	overflow: hidden;
}

.hero::before,
.panel::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 34%),
		radial-gradient(circle at 18% 0%, rgba(95, 114, 216, 0.08), transparent 34%);
	pointer-events: none;
}

.hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px clamp(18px, 3vw, 26px) 10px;
	background: transparent;
	border: 0;
	box-shadow: none;
	border-radius: 0;
	overflow: hidden;
}

.hero::before {
	display: none;
}

.brand {
	display: inline-flex;
	align-items: center;
	align-self: center;
	gap: 9px;
	min-width: 0;
	flex-shrink: 0;
	flex-wrap: nowrap;
}

.brand-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	overflow: hidden;
	font-family: 'OpenDyslexic', sans-serif;
}

/* Wie Login-Seite: Domain klein neben dem Zeichen (kein „NF“-Titel) */
.brand-domain {
	margin: 0;
	color: var(--muted);
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: lowercase;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.2;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.hero-greeting {
	font-size: 0.6rem;
	color: var(--muted);
	opacity: 0.8;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.3;
}

.brand-tld {
	background: linear-gradient(90deg, #5f72d8, #b36ad6);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-weight: 700;
	letter-spacing: 0.02em;
	opacity: 1;
}

body[data-theme="bw"] .brand-tld {
	background: none;
	-webkit-background-clip: unset;
	-webkit-text-fill-color: var(--text);
	background-clip: unset;
}

.brand-version {
	margin-left: 6px;
	font-size: 0.72em;
	color: var(--muted);
	opacity: 0.55;
	font-weight: 400;
	letter-spacing: 0.04em;
	vertical-align: middle;
}

.brand-mark {
	position: relative;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	background: #18103a;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.12),
		0 6px 16px rgba(24, 16, 58, 0.28);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.brand-mark::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.08), transparent 55%);
	pointer-events: none;
}

body[data-theme="bw"] .brand-mark {
	background: #111111;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.12),
		0 10px 20px rgba(17, 17, 17, 0.2);
}

@keyframes infinity-draw {
	to {
		stroke-dashoffset: 0;
	}
}

.brand-infinity {
	width: 30px;
	height: 18px;
	display: block;
	position: relative;
	z-index: 1;
}

.brand-infinity .infinity-path {
	stroke-dasharray: 140;
	stroke-dashoffset: 140;
	animation: infinity-draw 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
}

body[data-theme="bw"] .brand-infinity .infinity-path {
	stroke: rgba(255, 255, 255, 0.88);
}

h1,
h2,
h3,
p {
	margin: 0;
}

h1 {
	font-size: clamp(1.4rem, 3.4vw, 2.2rem);
	line-height: 1;
	letter-spacing: -0.03em;
	word-break: keep-all;
	white-space: nowrap;
}

.panel-kicker,
.section-kicker {
	margin: 0;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.hero-meta {
	display: flex;
	gap: 8px;
	align-items: stretch;
	z-index: 1;
}

/* ── Hero-Aktionen (Zahnrad + Kalender, rechte Seite) ─────────── */
.hero-trail {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 10px;
	min-width: 0;
	margin-left: auto;
	z-index: 1;
}

.hero-board-switch {
	display: flex;
	align-items: center;
	min-width: 0;
	max-width: min(280px, 42vw);
	z-index: 1;
}

.hero-board-switch.is-hidden,
.hero-board-switch[hidden] {
	display: none !important;
}

.header-board-select {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	height: var(--nf-menu-control-height);
	padding: 0 28px 0 10px;
	border-radius: var(--nf-settings-control-radius);
	border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
	color: var(--text);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	appearance: none;
	background-color: color-mix(in srgb, var(--surface-mid) 55%, transparent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2367708a' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 9px center;
	background-size: 12px 8px;
	box-sizing: border-box;
}

.header-board-select:hover {
	border-color: color-mix(in srgb, var(--ctx03) 32%, var(--border));
	background-color: color-mix(in srgb, var(--surface-mid) 72%, transparent);
}

.header-board-select:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--ctx03) 55%, transparent);
	outline-offset: 2px;
}

body[data-theme="dark"] .header-board-select {
	background-color: rgba(255, 255, 255, 0.07);
	border-color: color-mix(in srgb, var(--border) 55%, transparent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a8b0c4' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
}

body[data-theme="bw"] .header-board-select {
	background-color: var(--input-bg);
	border-color: var(--border);
}

.hero-actions {
	display: flex;
	flex-direction: row;
	gap: 6px;
	align-self: center;
	flex-wrap: wrap;
	justify-content: flex-end;
	flex-shrink: 0;
	z-index: 1;
}

.hero-today-inline {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hero-today-label {
	font-size: 0.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
	line-height: 1;
}

.hero-today-count {
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--text);
	line-height: 1.1;
}

.hero-action-btn {
	position: relative;
	width: 32px;
	height: 32px;
	border-radius: 11px;
	border: 1px solid var(--border);
	background: var(--surface-mid);
	font-size: 1.02rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text);
	box-sizing: border-box;
	transition:
		background 180ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 180ms cubic-bezier(0.22, 1, 0.36, 1);
	flex-shrink: 0;
}

.hero-logout-btn {
	text-decoration: none;
}

.hero-new-btn {
	/* z-index: Nachbar-Button würde sonst die rechte Border subpixel überdecken */
	z-index: 1;
	background: linear-gradient(135deg,
			color-mix(in srgb, #7f93ff 30%, var(--panel)),
			color-mix(in srgb, #cf86ff 28%, var(--panel)));
	border-color: color-mix(in srgb, #8ea0ff 62%, var(--border));
	color: #f4f7ff;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.18),
		0 10px 22px rgba(120, 136, 255, 0.2);
	font-size: 1rem;
	font-weight: 400;
}

.hero-new-btn:hover {
	background: linear-gradient(135deg,
			color-mix(in srgb, #5f72d8 35%, var(--panel)),
			color-mix(in srgb, #b36ad6 35%, var(--panel)));
}

.hero-action-btn:hover {
	background: var(--surface-strong);
	transform: translateY(-2px);
	box-shadow:
		0 12px 24px rgba(10, 14, 30, 0.14),
		0 4px 10px rgba(0, 0, 0, 0.08);
}

.hero-icon-btn {
	width: 32px;
	height: 32px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	border-radius: 10px;
	box-sizing: border-box;
	flex-shrink: 0;
}

.hero-icon-btn.is-active {
	background: linear-gradient(135deg,
			color-mix(in srgb, #5f72d8 22%, var(--panel)),
			color-mix(in srgb, #b36ad6 22%, var(--panel)));
	border-color: color-mix(in srgb, #5f72d8 40%, transparent);
	color: #7c8ff5;
}

.hero-more-btn {
	display: none;
}

.hero-action-btn--desktop-overflow {
	display: inline-flex;
}

.hero-action-btn.has-active-filter::after {
	content: "";
	position: absolute;
	top: 4px;
	right: 4px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #b36ad6;
}

.hero-sched-badge {
	position: absolute;
	top: -5px;
	right: -5px;
	min-width: 17px;
	height: 17px;
	border-radius: 9px;
	background: var(--status-scheduled);
	color: #fff;
	font-size: 0.6rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 3px;
	line-height: 17px;
	pointer-events: none;
}

.hero-sched-badge:empty {
	display: none;
}

/* UI-Symbole: Emoji (.hero-emoji-icon / .ui-emoji-icon); color wirkt je nach OS/Font ggf. nur eingeschränkt */

#toggle-scheduled .hero-emoji-icon,
#sched-drawer .sched-drawer-title .title-icon.ui-emoji-icon,
.sched-toggle-icon .ui-emoji-icon,
label.settings-toggle-row:has(#setting-scheduled-always) .label-icon {
	color: #5f72d8;
}

#toggle-search .hero-emoji-icon {
	color: #3da8c9;
}

#open-settings .hero-emoji-icon,
#settings-drawer .settings-drawer-title .title-icon.ui-emoji-icon {
	color: #7b63d6;
}

#quick-note-drawer .settings-drawer-title .title-icon.ui-emoji-icon {
	color: #c4a35a;
}

#trash-drawer .sched-drawer-title .title-icon.ui-emoji-icon {
	color: #c67b64;
}

.help-drawer-title .title-icon.ui-emoji-icon {
	color: #4d9dd4;
}

.hero-logout-btn .hero-emoji-icon {
	color: #c67b64;
}

.hero-new-btn .hero-emoji-icon {
	font-size: 1.35rem;
	filter: saturate(1.18) brightness(1.28);
	text-shadow: 0 0 12px rgba(232, 238, 255, 0.28);
}

#open-quick-note .hero-emoji-icon {
	color: #c4a35a;
}

#open-contacts .hero-emoji-icon {
	color: #6fb6ff;
}

#open-medications .hero-emoji-icon {
	color: #ea6d9c;
}

#open-help .hero-emoji-icon {
	color: #4d9dd4;
}

#open-mobile-more .hero-emoji-icon {
	color: color-mix(in srgb, var(--text) 72%, var(--border));
}

#setting-notify-email-tasks-row .label-icon,
#invite-send-email-btn .button-icon {
	color: #4d88f0;
}

.hero-action-btn .hero-emoji-icon,
.hero-icon-btn .hero-emoji-icon,
.hero-logout-btn .hero-emoji-icon {
	font-size: 1.08rem;
	line-height: 1;
	min-width: 1.15em;
	min-height: 1.15em;
}

.hero-action-btn .hero-emoji-icon,
.hero-icon-btn .hero-emoji-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.label-emoji {
	display: inline-block;
	margin-right: 6px;
	font-size: 0.95rem;
	vertical-align: -0.12em;
}

.ui-emoji-icon {
	display: inline-block;
	line-height: 1;
}

.title-icon {
	margin-right: 8px;
	vertical-align: -0.18em;
}

.title-icon.ui-emoji-icon {
	width: auto;
	height: auto;
	font-size: 1.15rem;
	line-height: 1;
}

.label-icon {
	margin-right: 6px;
	vertical-align: -0.12em;
}

.label-icon.ui-emoji-icon {
	width: auto;
	height: auto;
	font-size: 0.95rem;
	line-height: 1;
}

.button-icon {
	margin-right: 6px;
}

.button-icon.ui-emoji-icon {
	width: auto;
	height: auto;
	font-size: 0.95rem;
	line-height: 1;
}

.focus-menu-inline-icon {
	width: 14px;
	height: 14px;
	margin-right: 6px;
}

.ui-emoji-icon.focus-menu-inline-icon {
	width: auto;
	height: auto;
	font-size: 0.95rem;
	margin-right: 6px;
	vertical-align: -0.06em;
}

.meta-card {
	display: grid;
	gap: 1px;
	align-content: start;
	padding: 7px 10px;
	background: rgba(255, 255, 255, 0.55);
	border-radius: 11px;
	border: 1px solid var(--border);
	overflow: hidden;
}

.meta-toggle {
	text-align: left;
	cursor: pointer;
	font: inherit;
	color: inherit;
	height: 100%;
	min-height: 58px;
	align-self: stretch;
	margin-left: auto;
	min-width: 96px;
	max-width: 150px;
	background: linear-gradient(135deg,
			color-mix(in srgb, #5f72d8 16%, var(--panel)),
			color-mix(in srgb, #b36ad6 16%, var(--panel)));
	border-color: color-mix(in srgb, #5f72d8 38%, transparent);
}

.meta-toggle:hover {
	background: linear-gradient(135deg,
			color-mix(in srgb, #5f72d8 26%, var(--panel)),
			color-mix(in srgb, #b36ad6 26%, var(--panel)));
}

.meta-toggle .meta-label {
	color: color-mix(in srgb, #5f72d8 70%, var(--muted));
}

.meta-toggle strong {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.meta-toggle strong::after {
	content: "+";
	font-size: 1rem;
	line-height: 1;
	color: var(--muted);
}

.meta-toggle[aria-expanded="true"] strong::after {
	content: "−";
}

.meta-theme-toggle strong::after {
	content: none;
}

.meta-label {
	color: var(--muted);
	font-size: 0.62rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.hint-text {
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.62rem;
	opacity: 0.7;
}

.meta-card strong {
	font-size: 0.84rem;
}

.today-progress {
	height: 4px;
	border-radius: 999px;
	background: var(--border);
	overflow: hidden;
	margin-top: 4px;
}

.today-bar {
	height: 100%;
	border-radius: 999px;
	background: var(--status-today);
	width: 0%;
	transition: width 0.4s ease, background 0.3s ease;
}

.today-bar.is-over {
	background: var(--high);
}

.meta-card strong {
	font-size: 1rem;
}

.meta-board-card {
	min-width: 280px;
	max-width: 340px;
}

.meta-board-switch {
	display: grid;
	margin-top: 4px;
}

.meta-note {
	color: var(--muted);
	font-size: 0.76rem;
	line-height: 1.2;
}

.nf-bot-guard {
	position: absolute !important;
	left: -10000px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}

.meta-tools-inline {
	margin-top: 6px;
	position: relative;
	width: fit-content;
}

.meta-tools-inline summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	list-style: none;
	width: fit-content;
}

.meta-tools-inline summary::-webkit-details-marker {
	display: none;
}

.tools-trigger-label {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--muted);
	background: var(--surface-soft);
	border: 1px solid var(--border);
	border-radius: 20px;
	padding: 3px 10px 3px 8px;
	letter-spacing: 0.02em;
	transition: background 0.15s, color 0.15s;
}

.meta-tools-inline summary:hover .tools-trigger-label,
.meta-tools-inline[open] .tools-trigger-label {
	background: var(--surface-mid);
	color: var(--text);
}

.meta-tools-inline[open] .tools-trigger-label::before {
	content: "✕";
	font-size: 0.7rem;
	opacity: 0.6;
	margin-right: 2px;
}

.tools-section-head {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 2px 0 2px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--border);
}

.meta-tools-panel {
	min-width: 300px;
	display: grid;
	gap: 10px;
	margin-top: 8px;
	padding: 14px;
	border: 1px solid var(--border);
	border-radius: 18px;
	background: color-mix(in srgb, var(--panel) 94%, var(--mix-base));
	box-shadow: var(--shadow);
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 12;
}

.meta-board-select {
	min-width: 0;
	width: 100%;
	padding: 8px 10px;
	border-radius: 12px;
	background: var(--input-bg);
}

.meta-account-card {
	min-width: 280px;
	max-width: 340px;
}

.meta-tool-actions {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.meta-utility-button {
	justify-content: center;
	min-width: 0;
	width: 100%;
	padding-inline: 14px;
	border-radius: var(--nf-settings-control-radius);
	background: var(--surface-soft);
}

.meta-utility-button:hover {
	background: var(--surface-mid);
}

.account-form {
	display: grid;
	gap: 8px;
	margin-top: 0;
}

.account-password-panel {
	display: grid;
	gap: 8px;
}

.account-submit-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

/* Konto: PW ändern links, Profil speichern rechts (unter E-Mail) */
.account-profile-actions-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 10px;
}

.account-password-change-form {
	margin-top: 0;
}

/*
 * Nicht display:none für das Passwort-Panel: einige Browser/WebViews schließen
 * Felder in unsichtbaren Containern vom Form-Submit aus — dann wäre kein Update möglich.
 */
#account-password-panel.account-password-panel.is-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
	display: block !important;
}

.account-password-change-form .account-password-panel:not(.is-hidden) {
	margin-top: 8px;
}

.account-email-display {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 8px 10px;
	border-radius: var(--nf-settings-shell-radius);
	border: 1px solid var(--border);
	background: var(--input-bg);
	color: var(--text);
}

.account-email-value {
	flex: 1 1 160px;
	min-width: 0;
	font: inherit;
	line-height: 1.35;
	word-break: break-word;
}

.account-email-display .ghost-button.settings-inline-btn {
	box-sizing: border-box;
	min-height: 32px;
	height: 32px;
	padding: 0 10px;
	font-size: 0.82rem;
	line-height: 1.15;
	border-radius: var(--nf-settings-control-radius);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Konto-Tab: Felder & Buttons einheitlich 32px hoch */
#settings-panel-account .share-field input:not([type="checkbox"]):not([type="radio"]),
#settings-panel-account .share-field select {
	box-sizing: border-box;
	height: 32px;
	min-height: 32px;
	padding: 0 10px;
	line-height: 1.2;
}

#settings-panel-account .account-email-display {
	min-height: 32px;
	padding: 4px 10px;
	align-items: center;
}

#settings-panel-account .account-email-value {
	line-height: 1.3;
}

#settings-panel-account .account-email-display .ghost-button.settings-inline-btn {
	box-sizing: border-box;
	min-height: 32px;
	height: 32px;
	padding: 0 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	line-height: 1.2;
}

.account-pending-email-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: -2px 0 0;
	padding: 10px 12px;
	border: 1px solid color-mix(in srgb, #f29d38 34%, var(--border));
	border-radius: var(--nf-settings-shell-radius);
	background: color-mix(in srgb, #f29d38 10%, var(--surface-soft));
}

.account-pending-email-row p {
	flex: 1 1 auto;
	min-width: 0;
}

.account-pending-email-row form {
	margin: 0;
	flex: 0 0 auto;
}

#settings-panel-account .ghost-button {
	box-sizing: border-box;
	min-height: 32px;
	height: 32px;
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

#settings-panel-account .settings-tool-btn {
	justify-content: center;
	text-align: center;
	gap: 6px;
	padding: 0 12px;
	min-height: 32px;
	height: 32px;
}

#settings-panel-account .settings-tool-btn.settings-info-link {
	justify-content: flex-start;
	text-align: left;
}

/* E-Mail ändern (Modal): gleiche Zeilenhöhe */
#email-change-form .share-field input {
	box-sizing: border-box;
	height: 32px;
	min-height: 32px;
	padding: 0 10px;
	line-height: 1.2;
}

#email-change-form .ghost-button {
	box-sizing: border-box;
	min-height: 32px;
	height: 32px;
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

#email-change-form .settings-tool-btn {
	justify-content: center;
	text-align: center;
}

.micro-modal-box--email-change {
	width: min(400px, 100%);
}

.danger-button:not(:disabled) {
	border-color: rgba(190, 60, 60, 0.45);
	background: rgba(120, 30, 30, 0.14);
	color: #c94949;
}

.danger-button:not(:disabled):hover,
.danger-button:not(:disabled):focus-visible {
	background: rgba(140, 34, 34, 0.2);
	color: #b92525;
}

.account-delete-confirm-row {
	margin-bottom: 0;
}

.account-delete-confirm-check {
	width: 18px;
	height: 18px;
	accent-color: #b92525;
	flex-shrink: 0;
}

.account-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.success-note {
	color: #2f7d4d;
}

.error-note {
	color: #8f2727;
}

/* .meta-toggle align-self wird oben gesetzt */

.ghost-button:disabled {
	opacity: 0.45;
	cursor: default;
	pointer-events: none;
}

.share-panel {
	display: grid;
	gap: 8px;
	margin-top: 6px;
	padding: 10px;
	border-radius: var(--nf-settings-shell-radius);
	border: 1px solid var(--border);
	background: var(--surface);
}

.share-field {
	display: grid;
	gap: 6px;
}

.share-field input,
.share-field select {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	height: 32px;
	min-height: 32px;
	padding: 0 10px;
	line-height: 1.2;
	border-radius: var(--nf-settings-control-radius);
	border: 1px solid var(--border);
	background: var(--input-bg);
}

.share-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.panel {
	margin-top: 16px;
	padding: 20px;
}

.composer-modal.is-collapsed {
	display: none;
}

/* ─── Micro-Modal (z.B. Board-Name eingeben) ──────────────── */

.micro-modal {
	position: fixed;
	inset: 0;
	/* Über Settings-Backdrop (200) und -Drawer (210), sonst wirkt der Dialog unscharf */
	z-index: 280;
	display: grid;
	place-items: center;
	padding: 16px;
	overscroll-behavior: contain;
}

.micro-modal.is-collapsed {
	display: none;
}

.micro-modal-box {
	position: relative;
	z-index: 1;
	background: var(--mix-base);
	border: 1px solid var(--border);
	border-radius: 18px;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
	padding: 24px 22px 20px;
	width: min(360px, 100%);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

#weekly-review-content {
	width: min(520px, calc(100vw - 32px));
	max-height: min(78vh, 720px);
	padding: 26px 24px 22px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

#task-history-content {
	width: min(520px, calc(100vw - 32px));
	max-height: min(78vh, 720px);
	padding: 24px 22px 20px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.micro-modal-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--text);
	margin: 0;
}

.micro-modal-input {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 14px;
	border-radius: 11px;
	border: 1px solid var(--border);
	background: var(--input-bg, var(--surface-mid));
	color: var(--text);
	font-size: 1rem;
	font-family: inherit;
}

.micro-modal-input:focus {
	outline: none;
	border-color: color-mix(in srgb, var(--text) 35%, transparent);
}

.micro-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}

.task-history-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.task-history-subtitle {
	margin: 6px 0 0;
	color: var(--muted);
	font-size: 0.9rem;
	line-height: 1.4;
}

.task-history-summary {
	display: grid;
	gap: 8px;
	padding: 12px 14px;
	border-radius: 14px;
	border: 1px solid var(--border);
	background: var(--input-bg, var(--surface-mid));
}

.task-history-summary-row,
.task-history-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
}

.task-history-summary-row strong,
.task-history-copy strong {
	color: var(--text);
	font-size: 0.92rem;
}

.task-history-summary-row span,
.task-history-copy span,
.task-history-time {
	color: var(--muted);
	font-size: 0.82rem;
}

.task-history-list {
	display: grid;
	gap: 10px;
}

.task-history-group {
	display: grid;
	gap: 10px;
}

.task-history-group-title {
	margin: 0;
	padding-left: 2px;
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
}

.task-history-group-list {
	display: grid;
	gap: 10px;
}

.trash-date-separator {
	margin-top: 4px;
}

.task-history-row {
	padding: 12px 14px;
	border-radius: 14px;
	border: 1px solid var(--border);
	background: var(--surface-mid);
}

.task-history-copy {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.task-history-time {
	white-space: nowrap;
	text-align: right;
}

.primary-button {
	padding: 9px 18px;
	border-radius: 11px;
	border: none;
	background: var(--accent, #5f72d8);
	color: #fff;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
}

.primary-button:hover {
	background: color-mix(in srgb, var(--accent, #5f72d8) 85%, #000);
}

.primary-button:disabled {
	opacity: 0.5;
	cursor: default;
}

body.modal-open {
	overflow: hidden;
}

.composer-modal {
	position: fixed;
	inset: 0;
	inset: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
	z-index: 208;
	display: flex;
	justify-content: flex-end;
	align-items: stretch;
	padding: 0;
}

.composer-backdrop {
	position: absolute;
	inset: 0;
	border: 0;
	background: rgba(0, 0, 0, 0.35);
	cursor: default;
	backdrop-filter: blur(2px);
}

.composer {
	position: fixed;
	top: 0;
	right: max(12px, env(safe-area-inset-right, 0px));
	bottom: 0;
	z-index: 209;
	width: min(540px, 96vw);
	max-height: none;
	overflow: hidden;
	overflow-x: hidden;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding: 0;
	gap: 0;
	border-radius: 0;
	border-left: 1px solid var(--border);
	background: var(--mix-base);
	box-shadow:
		-24px 0 56px rgba(0, 0, 0, 0.22),
		-10px 0 24px rgba(0, 0, 0, 0.12);
}

.composer-head {
	margin: 0;
	z-index: 2;
}

.panel-head {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.panel-head-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
}

/* Zeichenzähler in Titelleiste (Neu / Bearbeiten): kompakt, rechts bei den Aktionen */
.panel-head-char-counter.nf-char-counter-strip {
	flex-shrink: 0;
	max-width: min(200px, 42vw);
}

.panel-head-char-counter.nf-char-counter-strip .textarea-counter {
	opacity: 0.95;
}

.panel-head-char-counter.nf-char-counter-strip .soft-char-counter.is-over {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	height: 32px;
	max-height: 32px;
	overflow: hidden;
}

.panel-head-char-counter.nf-char-counter-strip .soft-char-counter-pill {
	box-sizing: border-box;
	min-height: 32px;
	height: 32px;
	padding: 0 9px;
	border-radius: 10px;
	font-size: 0.72rem;
}

/* Über Richtwert: gleiche Zeilenhöhe (32px) und neutrale Hülle wie Zurücksetzen / ✕ */
.panel-head-char-counter.nf-char-counter-strip .soft-char-counter.is-over .soft-char-counter-over-pill {
	box-sizing: border-box;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 32px;
	height: 32px;
	max-height: 32px;
	padding: 0 9px;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--border);
	background: var(--surface-mid);
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.panel-head-char-counter.nf-char-counter-strip .soft-char-counter.is-over .soft-char-counter-over-pill .soft-char-counter-infinity {
	font-size: 0.92rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	flex-shrink: 0;
}

.panel-head-char-counter.nf-char-counter-strip .soft-char-counter.is-over .soft-char-counter-over-pill .soft-char-counter-over-num {
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
	padding-bottom: 0;
}

.is-hidden {
	display: none !important;
}

textarea,
select,
button {
	font: inherit;
}

textarea,
select {
	width: 100%;
	border-radius: 16px;
	border: 1px solid var(--border);
	background: var(--input-bg);
	color: var(--text);
}

.textarea-wrap {
	position: relative;
}

.soft-char-counter {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--muted);
	user-select: none;
}

.soft-char-counter.is-warning {
	color: #d97706;
}

.soft-char-counter.is-over .soft-char-counter-value {
	display: inline-flex;
	align-items: center;
	padding: 1px 7px;
	border-radius: 10px;
	background: color-mix(in srgb, #e45757 16%, var(--panel));
	box-shadow: 0 0 0 1px color-mix(in srgb, #e45757 30%, transparent);
	color: #e45757;
}

.soft-char-counter-bonus {
	display: none;
	font-size: 0.82rem;
	font-weight: 900;
	letter-spacing: 0.03em;
	padding: 2px 10px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--panel) 55%, rgba(179, 106, 214, 0.45));
	box-shadow:
		0 0 0 1px color-mix(in srgb, #b36ad6 30%, transparent),
		0 0 14px rgba(179, 106, 214, 0.18);
}

@keyframes nf-neuro-loop-rainbow {
	0% {
		background-position: 0% 50%;
	}

	100% {
		background-position: 200% 50%;
	}
}

/* Über Limit: Regenbogen-Pille + gut lesbares ∞ (Unicode U+221E) */
.soft-char-counter.is-over .soft-char-counter-bonus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin-left: 4px;
	box-sizing: border-box;
	min-height: 32px;
	height: 32px;
	max-height: 32px;
	min-width: 36px;
	padding: 0 8px;
	border-radius: 10px;
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	text-shadow:
		0 0 1px rgba(0, 0, 0, 0.85),
		0 1px 2px rgba(0, 0, 0, 0.45);
	background-image: linear-gradient(90deg,
			#ff006e 0%,
			#ff8500 14%,
			#ffbe0b 28%,
			#38b000 42%,
			#00b4d8 56%,
			#4361ee 70%,
			#9d4edd 84%,
			#ff006e 100%);
	background-size: 220% 100%;
	background-position: 0% 50%;
	animation: nf-neuro-loop-rainbow 5s linear infinite;
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.35),
		0 2px 12px rgba(0, 0, 0, 0.28);
	-webkit-background-clip: border-box;
	background-clip: border-box;
}

.soft-char-counter.is-over .soft-char-counter-infinity {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 2.35rem;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols2", sans-serif;
}

@media (prefers-reduced-motion: reduce) {
	.soft-char-counter.is-over .soft-char-counter-bonus {
		animation: none;
		background-position: 50% 50%;
	}
}

.textarea-counter {
	position: absolute;
	left: 14px;
	bottom: 10px;
	min-width: 40px;
	justify-content: flex-start;
	pointer-events: none;
}

.task-form-under-text-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px;
	margin-top: 12px;
	min-width: 0;
}

.composer-symbol-slot {
	flex: 0 0 auto;
}

.task-form-under-text-row .composer-symbol-picker {
	width: auto;
}

.task-form-under-text-row>.subtask-editor {
	flex: 1 1 200px;
	min-width: 0;
	margin: 0;
}

.task-form-under-text-row .subtask-add-btn {
	width: auto;
	max-width: 100%;
	align-self: flex-start;
}

.composer-text-block {
	display: block;
	min-width: 0;
}

.textarea-wrap textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 14px 14px 36px;
	min-height: 120px;
	border-radius: 18px;
	font: inherit;
	font-size: 0.95rem;
	line-height: 1.5;
	-webkit-appearance: none;
	appearance: none;
	background: color-mix(in srgb, var(--input-bg) 84%, rgba(255, 255, 255, 0.02));
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.03),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

textarea {
	min-height: 124px;
	padding: 14px 16px;
	resize: vertical;
	line-height: 1.5;
}

.textarea-paste-btn {
	position: absolute;
	bottom: 8px;
	right: 8px;
	background: var(--surface-mid);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 4px 8px;
	font-size: 0.85rem;
	line-height: 1;
	cursor: pointer;
	color: var(--muted);
	opacity: 0.6;
	transition: opacity 0.15s, background 0.15s;
}

.textarea-paste-btn:hover {
	opacity: 1;
	background: var(--surface-strong);
	color: var(--text);
}

select {
	padding: 12px 14px;
}

textarea:focus,
select:focus,
button:focus-visible {
	outline: 3px solid rgba(37, 99, 167, 0.18);
	outline-offset: 2px;
}

.composer-grid,
.filter-row {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 14px;
}

.composer-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
}

.composer-grid label,
.composer-choice,
.filter-row label {
	display: grid;
	gap: 8px;
	min-width: 0;
}

.composer-choice>span {
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.composer-row-choice {
	display: grid;
	gap: 8px;
	margin-top: 12px;
}

.estimate-chip-group,
#task-estimate {
	grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(52px, 1fr);
	align-items: stretch;
}

.estimate-minutes-cell {
	min-width: 0;
	display: flex;
	align-items: stretch;
	position: relative;
}

.estimate-minutes-input {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	min-height: var(--nf-menu-control-height);
	padding: 4px 28px 4px 8px;
	border-radius: 10px;
	border: 2px solid color-mix(in srgb, #10b981 30%, transparent);
	background: color-mix(in srgb, #10b981 8%, var(--mix-base));
	color: #10b981;
	font: inherit;
	font-size: 0.73rem;
	font-weight: 700;
	text-align: center;
	-moz-appearance: textfield;
	opacity: 1;
	transition:
		background 160ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 160ms cubic-bezier(0.22, 1, 0.36, 1),
		color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.estimate-minutes-input::-webkit-outer-spin-button,
.estimate-minutes-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.estimate-minutes-input::placeholder {
	color: color-mix(in srgb, #10b981 70%, white 30%);
	opacity: 0.9;
}

.estimate-minutes-input:focus {
	outline: none;
	border-color: #10b981;
	box-shadow:
		0 0 0 2px color-mix(in srgb, #10b981 16%, transparent),
		0 10px 20px rgba(16, 185, 129, 0.12);
}

.estimate-minutes-input:not(.is-active) {
	opacity: 1;
}

.estimate-minutes-input.is-active {
	color: #10b981;
	border-color: #10b981;
	background: color-mix(in srgb, #10b981 22%, var(--mix-base));
	font-weight: 700;
	opacity: 1;
}

.estimate-minutes-suffix {
	position: absolute;
	right: 9px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	font-size: 0.67rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: color-mix(in srgb, #10b981 78%, white 22%);
	opacity: 0.95;
}

.composer-choice-group {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
	gap: 5px;
	align-items: stretch;
}

.composer-choice-group.is-select-menu {
	position: relative;
	display: block;
}

.composer-select-trigger {
	width: 100%;
	min-width: 0;
	min-height: var(--nf-menu-control-height);
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	padding: 7px 28px 7px 12px;
	border-radius: var(--nf-settings-control-radius);
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(29, 31, 54, 0.92);
	color: var(--text);
	cursor: pointer;
	text-align: left;
	font: inherit;
	font-size: 0.82rem;
	font-weight: 500;
	position: relative;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	transition:
		background 180ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.composer-field-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	width: 100%;
	max-width: none;
	border-color: color-mix(in srgb, currentColor 30%, transparent);
	background: color-mix(in srgb, currentColor 12%, var(--mix-base));
}

.composer-select-trigger::after {
	content: "▾";
	position: absolute;
	right: 11px;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0.6;
	font-size: 0.72rem;
}

.composer-select-trigger[aria-expanded="true"]::after {
	content: "▴";
}

.composer-select-trigger:hover {
	background: color-mix(in srgb, currentColor 20%, var(--mix-base));
	transform: translateY(-1px);
	box-shadow:
		0 8px 16px rgba(10, 14, 30, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.composer-select-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	width: min(142px, calc(100vw - 48px));
	z-index: 30;
	display: grid;
	gap: 3px;
	padding: 7px;
	border-radius: 12px;
	border: 1px solid rgba(140, 152, 214, 0.16);
	background: rgba(14, 14, 31, 0.94);
	box-shadow: 0 18px 34px rgba(6, 6, 18, 0.38);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	transform-origin: top left;
	transition:
		opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-card-density="compact"] .composer-select-menu {
	width: max-content;
	min-width: min(120px, calc(100vw - 48px));
	max-width: min(180px, calc(100vw - 48px));
}

.editor-select-group .composer-select-menu {
	width: min(150px, calc(100vw - 56px));
}

.editor-select-trigger {
	min-height: var(--nf-menu-control-height);
	box-sizing: border-box;
	border-radius: var(--nf-settings-control-radius);
}

.edit-panel-body .editor-select-option {
	border-radius: var(--nf-settings-control-radius);
}

.composer-select-menu.is-hidden {
	display: none;
}

.composer-select-option {
	min-height: 32px;
	padding: 6px 12px;
	border-radius: var(--nf-settings-control-radius);
	text-align: left;
	font-size: 0.82rem;
	font-weight: 500;
	background: transparent;
	border: 1px solid transparent;
	transition:
		transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
		background 160ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.composer-select-option:not(.active) {
	opacity: 1;
}

.composer-select-option.active {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: none;
	transform: none;
}

.composer-select-option:hover {
	transform: translateY(-1px);
	background: color-mix(in srgb, currentColor 10%, transparent);
	border-color: color-mix(in srgb, currentColor 16%, transparent);
	box-shadow: 0 8px 16px rgba(10, 14, 30, 0.08);
}

.task-tag-backdrop {
	position: fixed;
	inset: 0;
	z-index: 1400;
	background: transparent;
}

.task-tag-dropdown {
	position: fixed;
	z-index: 1401;
	min-width: 156px;
	background: color-mix(in srgb, var(--bg) 60%, transparent);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid var(--border);
	border-radius: 14px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	opacity: 0;
	transform: scale(0.94) translateY(-4px);
	transform-origin: top left;
	transition:
		opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.task-tag-dropdown.is-open {
	opacity: 1;
	transform: scale(1) translateY(0);
}

.task-tag-dropdown-option {
	width: 100%;
	padding: 7px 12px;
	border: 1px solid transparent;
	border-radius: 9px;
	background: transparent;
	color: var(--text);
	font-size: 0.875rem;
	font-family: inherit;
	font-weight: 500;
	cursor: pointer;
	text-align: left;
	white-space: nowrap;
	transition: background 0.1s, border-color 0.1s;
}

.task-tag-dropdown-option:hover {
	background: var(--surface-mid);
}

.task-tag-dropdown-option.is-active {
	background: color-mix(in srgb, currentColor 14%, var(--mix-base));
	border-color: color-mix(in srgb, currentColor 30%, transparent);
	font-weight: 600;
}

.composer-choice-button {
	width: 100%;
	min-height: var(--nf-menu-control-height);
	box-sizing: border-box;
	padding: 4px 4px;
	border-radius: 8px;
	border: 2px solid transparent;
	background: var(--surface-mid);
	cursor: pointer;
	font-size: 0.73rem;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	white-space: normal;
	overflow: hidden;
	word-break: break-word;
	transition: opacity 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease, background 0.1s ease;
}

/* Nicht ausgewählt: deutlich gedimmt → nur leichter Farbhinweis */
.composer-choice-button:not(.active) {
	opacity: 0.42;
}

.composer-choice-button:not(.active):hover {
	opacity: 0.7;
}

/* Ausgewählt: klar und deutlich sichtbar */
.composer-choice-button.active {
	opacity: 1;
	background: color-mix(in srgb, currentColor 22%, var(--mix-base));
	border-color: currentColor;
	font-weight: 700;
	transform: translateY(-2px);
	box-shadow:
		0 0 0 3px color-mix(in srgb, currentColor 18%, transparent),
		0 4px 12px color-mix(in srgb, currentColor 22%, transparent);
}


#task-recurrence .composer-select-trigger {
	color: #8b6cf7;
	border-color: color-mix(in srgb, #8b6cf7 28%, transparent);
	background: color-mix(in srgb, #8b6cf7 10%, var(--mix-base));
}

.task-tag-dropdown-option.area-ctx01,
.composer-field-tag.area-ctx01 {
	color: var(--ctx01);
}

.task-tag-dropdown-option.area-ctx02,
.composer-field-tag.area-ctx02 {
	color: var(--ctx02);
}

.task-tag-dropdown-option.area-ctx03,
.composer-field-tag.area-ctx03 {
	color: var(--ctx03);
}

.task-tag-dropdown-option.area-ctx04,
.composer-field-tag.area-ctx04 {
	color: var(--ctx04);
}

.task-tag-dropdown-option.area-ctx05,
.composer-field-tag.area-ctx05 {
	color: var(--ctx05);
}

.task-tag-dropdown-option.area-ctx06,
.composer-field-tag.area-ctx06 {
	color: var(--ctx06);
}

.task-tag-dropdown-option.area-ctx07,
.composer-field-tag.area-ctx07 {
	color: var(--ctx07);
}

.task-tag-dropdown-option.area-ctx08,
.composer-field-tag.area-ctx08 {
	color: var(--ctx08);
}

.task-tag-dropdown-option.area-ctx09,
.composer-field-tag.area-ctx09 {
	color: var(--ctx09);
}

.task-tag-dropdown-option.area-ctx10,
.composer-field-tag.area-ctx10 {
	color: var(--ctx10);
}

.task-tag-dropdown-option.area-ctx11,
.composer-field-tag.area-ctx11 {
	color: var(--ctx11);
}

.task-tag-dropdown-option.area-ctx12,
.composer-field-tag.area-ctx12 {
	color: var(--ctx12);
}

.task-tag-dropdown-option.energy-none,
.composer-field-tag.energy-none {
	color: var(--status-inbox);
}

.task-tag-dropdown-option.energy-low,
.composer-field-tag.energy-low {
	color: var(--low);
}

.task-tag-dropdown-option.energy-medium,
.composer-field-tag.energy-medium {
	color: var(--medium);
}

.task-tag-dropdown-option.energy-high,
.composer-field-tag.energy-high {
	color: var(--high);
}

.task-tag-dropdown-option.energy-very-high,
.composer-field-tag.energy-very-high {
	color: var(--very-high);
}

.task-tag-dropdown-option.status-inbox,
.composer-field-tag.status-inbox {
	color: var(--status-inbox);
}

.task-tag-dropdown-option.status-today,
.composer-field-tag.status-today {
	color: var(--status-today);
}

.task-tag-dropdown-option.editor-estimate-trigger,
.composer-field-tag.editor-estimate-trigger {
	color: #10b981;
}

.task-tag-dropdown-option.editor-recurrence-trigger,
.composer-field-tag.editor-recurrence-trigger {
	color: #8b6cf7;
}

.task-tag-dropdown-option.status-waiting,
.composer-field-tag.status-waiting {
	color: var(--status-waiting);
}

.task-tag-dropdown-option.status-done,
.composer-field-tag.status-done {
	color: var(--status-done);
}

.task-tag-dropdown-option.status-scheduled,
.composer-field-tag.status-scheduled {
	color: var(--status-scheduled);
}

label span {
	font-size: 0.9rem;
	color: var(--muted);
}

.checkbox-row {
	grid-column: span 1;
	align-content: end;
}

.checkbox-row input {
	width: 18px;
	height: 18px;
	margin: 0;
}

.checkbox-row span {
	display: inline-block;
	margin-left: 10px;
}

.composer-meta-strip {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	align-items: start;
	margin: 14px 0 18px;
}

.composer-symbol-choice {
	position: relative;
}

.composer-symbol-inline {
	margin: 0;
	gap: 0;
}

.composer-symbol-picker {
	position: relative;
}

.task-form-under-text-row .composer-symbol-trigger,
.task-form-under-text-row .subtask-add-btn {
	height: var(--task-card-menu-height);
	min-height: var(--task-card-menu-height);
	box-sizing: border-box;
	border-radius: var(--nf-settings-control-radius);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.task-form-under-text-row .composer-symbol-trigger {
	width: var(--task-card-menu-height);
	min-width: var(--task-card-menu-height);
	padding: 0;
}

.composer-symbol-trigger {
	width: 100%;
	border: 1px solid var(--border);
	background: var(--surface-mid);
	color: var(--text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	cursor: pointer;
}

.composer-symbol-trigger:hover {
	background: color-mix(in srgb, var(--surface-mid) 70%, var(--mix-base));
}

.composer-icon-panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 32;
	width: 308px;
	padding: 10px;
	border-radius: 16px;
	border: 1px solid rgba(140, 152, 214, 0.16);
	background: rgba(14, 14, 31, 0.94);
	box-shadow: 0 18px 34px rgba(6, 6, 18, 0.38);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

.icon-picker {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	max-width: 100%;
}

.toolbar-spacer {
	width: 20px;
	height: 1px;
	flex: 0 0 20px;
}

.icon-chip,
.ghost-button,
.primary-button,
.task-action {
	border-radius: var(--nf-settings-control-radius);
	border: 1px solid var(--border);
	background: var(--surface-mid);
	color: var(--text);
	transition:
		background 180ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.icon-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1;
	padding: 0;
	cursor: pointer;
	font-size: 1.1rem;
	border-radius: 9px;
	transition:
		transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1),
		background 180ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.composer-symbol-trigger[data-symbol="✉️"] {
	background: color-mix(in srgb, #4d88f0 14%, var(--surface-mid));
	border-color: color-mix(in srgb, #4d88f0 28%, var(--border));
}

.composer-symbol-trigger[data-symbol="✉️"] .ui-emoji-icon {
	color: #4d88f0;
}

.composer-symbol-trigger[data-symbol="☎️"] {
	background: color-mix(in srgb, #c67b64 14%, var(--surface-mid));
	border-color: color-mix(in srgb, #c67b64 28%, var(--border));
}

.composer-symbol-trigger[data-symbol="🗣️"] {
	background: color-mix(in srgb, #3da8c9 14%, var(--surface-mid));
	border-color: color-mix(in srgb, #3da8c9 28%, var(--border));
}

.composer-symbol-trigger[data-symbol="🖊️"] {
	background: color-mix(in srgb, #8f78dd 14%, var(--surface-mid));
	border-color: color-mix(in srgb, #8f78dd 28%, var(--border));
}

.composer-symbol-trigger[data-symbol="💊"] {
	background: color-mix(in srgb, #e45757 14%, var(--surface-mid));
	border-color: color-mix(in srgb, #e45757 28%, var(--border));
}

.composer-symbol-trigger[data-symbol="🛒"] {
	background: color-mix(in srgb, #69b85c 14%, var(--surface-mid));
	border-color: color-mix(in srgb, #69b85c 28%, var(--border));
}

.composer-symbol-trigger[data-symbol="🧠"] {
	background: color-mix(in srgb, #b36ad6 14%, var(--surface-mid));
	border-color: color-mix(in srgb, #b36ad6 28%, var(--border));
}

.composer-symbol-trigger[data-symbol="💰"] {
	background: color-mix(in srgb, #f0cf4f 14%, var(--surface-mid));
	border-color: color-mix(in srgb, #f0cf4f 28%, var(--border));
}

.composer-symbol-trigger[data-symbol="📘"] {
	background: color-mix(in srgb, #5f72d8 14%, var(--surface-mid));
	border-color: color-mix(in srgb, #5f72d8 28%, var(--border));
}

.icon-chip .ui-emoji-icon {
	font-size: 1.05rem;
	line-height: 1;
}

.icon-chip:hover {
	transform: scale(1.18);
	background: color-mix(in srgb, var(--text) 8%, var(--mix-base));
}

body[data-theme="bw"] .icon-chip,
body[data-theme="bw"] .task-symbol {
	filter: grayscale(1) saturate(0) contrast(1.5);
}

body[data-theme="bw"] .task-text-inner {
	background: rgba(232, 232, 232, 0.96);
	border-color: rgba(17, 17, 17, 0.12);
}

body[data-theme="bw"] .task-symbol {
	background: rgba(194, 194, 194, 0.98);
	border-color: rgba(17, 17, 17, 0.22);
}

.icon-chip.active {
	border-color: transparent;
	background: color-mix(in srgb, #b36ad6 18%, var(--mix-base));
	box-shadow: 0 0 0 3px #b36ad6, 0 0 16px rgba(179, 106, 214, 0.5);
	transform: scale(1.08);
}

.quick-icon-chip.active {
	border-color: #5f72d8;
	background: color-mix(in srgb, #5f72d8 10%, transparent);
	box-shadow: 0 0 0 1px #5f72d8;
	transform: scale(1.04);
}

.task-icon-menu .quick-icon-chip {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

.task-icon-menu .quick-icon-chip.active {
	border-color: #5f72d8;
	background: color-mix(in srgb, #5f72d8 10%, transparent);
	box-shadow: 0 0 0 1px #5f72d8;
}

.task-icon-menu .quick-icon-chip:hover {
	transform: scale(1.2);
	background: color-mix(in srgb, var(--text) 7%, transparent);
	border-color: color-mix(in srgb, var(--border) 60%, transparent);
	z-index: 1;
	position: relative;
}

.composer-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 16px;
}

/* Composer: Sektionen wie im Bearbeiten-Panel (task-editor-section) */
#composer-panel>.task-editor-section.composer-form-section {
	margin-bottom: 0;
	border-radius: 14px;
}

#composer-panel>.task-editor-section.composer-form-section:first-of-type {
	margin-top: 10px;
}

#composer-panel .task-editor-section .composer-meta-strip {
	margin: 0;
}

#composer-panel .task-editor-section .composer-row-choice {
	margin-top: 0;
}

#composer-panel .task-editor-section .composer-schedule {
	margin-top: 0;
}

#composer-panel .task-form-under-text-row {
	margin-top: 4px;
}

#composer-panel .composer-actions {
	margin-top: 6px;
}

#composer-panel .sched-expanded {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: stretch;
}

#composer-panel .sched-expanded .sched-vis-wrap {
	margin-top: 0;
}

.composer-close-btn {
	box-sizing: border-box;
	min-height: 32px;
	height: 32px;
	padding: 0 14px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--text);
	background: color-mix(in srgb, var(--surface-mid) 70%, transparent);
}

.sync-row {
	margin-top: 12px;
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	display: none;
}

.sync-panel {
	margin-top: 16px;
	padding-top: 12px;
	padding-bottom: 14px;
	display: none;
}

.sync-panel summary {
	cursor: pointer;
	color: var(--muted);
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	list-style: none;
}

.sync-panel summary::-webkit-details-marker {
	display: none;
}

.sync-panel[open] summary {
	margin-bottom: 10px;
}

.sync-indicator {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.sync-indicator::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: #b0b7be;
	box-shadow: 0 0 0 3px rgba(176, 183, 190, 0.18);
}

.sync-indicator[data-variant="ok"]::before {
	background: #2f7d4d;
	box-shadow: 0 0 0 3px rgba(47, 125, 77, 0.18);
}

.sync-indicator[data-variant="warn"]::before {
	background: #996515;
	box-shadow: 0 0 0 3px rgba(153, 101, 21, 0.18);
}

.sync-indicator[data-variant="error"]::before {
	background: #a43834;
	box-shadow: 0 0 0 3px rgba(164, 56, 52, 0.18);
}

.sync-status {
	font-size: 0.9rem;
	color: var(--muted);
}

.sync-status[data-variant="ok"] {
	color: #21613b;
}

.sync-status[data-variant="warn"] {
	color: #8a5a0f;
}

.sync-status[data-variant="error"] {
	color: #8f2727;
}

.sync-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.ghost-button,
.primary-button,
.task-action {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	height: auto;
	padding: 0 11px;
	cursor: pointer;
	font-size: 0.88rem;
	line-height: 1.1;
	letter-spacing: 0.01em;
}

.link-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.ghost-button:hover,
.primary-button:hover,
.task-action:hover,
.icon-chip:hover {
	border-color: color-mix(in srgb, var(--text) 24%, var(--border));
	background: color-mix(in srgb, var(--surface-mid) 60%, var(--mix-base));
}

.primary-button {
	background: var(--text);
	color: #ffffff;
	border-color: var(--text);
}

.primary-button:hover {
	transform: translateY(-1px);
}

.board {
	display: grid;
	gap: 18px;
	margin-top: 18px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	position: relative;
	isolation: isolate;
}

body.has-task-menu-portal .board {
	z-index: 5060;
}

.demo-mode-banner__test-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 30px;
	padding: 0 10px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.26);
	background: rgba(255, 255, 255, 0.12);
	color: inherit;
	font: inherit;
	font-size: 0.76rem;
	font-weight: 800;
	cursor: pointer;
	white-space: nowrap;
}

.demo-mode-banner__test-btn:hover,
.demo-mode-banner__test-btn:focus-visible {
	background: rgba(255, 255, 255, 0.2);
	outline: none;
}

@keyframes col-appear {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes focus-zoom-in {
	from {
		opacity: 0;
		transform: scale(0.90) translateY(16px);
	}

	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.board.is-focus-mode {
	grid-template-columns: 1fr;
	max-width: 540px;
	margin-inline: auto;
	transition: max-width 0.35s ease;
}

.board.is-focus-mode .board-column {
	animation: focus-zoom-in 0.4s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

.board-column {
	--column-shell-radius: 28px;
	--column-shell-tone: color-mix(in srgb, var(--panel) 90%, var(--bg));
	border-radius: var(--column-shell-radius);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, white) 0%, var(--column-shell-tone) 100%);
	border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
	box-shadow:
		0 24px 52px rgba(58, 71, 104, 0.14),
		0 10px 22px rgba(0, 0, 0, 0.06);
	overflow: visible;
	position: relative;
	isolation: isolate;
	transform: translateZ(0);
}

.board-column::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	z-index: 0;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.05) 22%, transparent 40%);
	opacity: 0.95;
}

.board-column::after {
	content: "";
	position: absolute;
	inset: auto 16px 12px;
	height: 22px;
	border-radius: 999px;
	background: radial-gradient(closest-side, rgba(58, 71, 104, 0.12), transparent);
	filter: blur(8px);
	opacity: 0.7;
	pointer-events: none;
	z-index: 0;
}

.column-head,
.column-body {
	position: relative;
	z-index: 1;
}

.board-column.is-entering {
	animation: col-appear 0.28s ease-out both;
}

/* Offenes Schnellmenü (Kontext/Energie/Status/⋯): ganze Spalte anheben, sonst liegt
   das absolute Dropdown unter nachfolgenden Spalten (z. B. Kopf „Geplant“). */
.board-column:has(.task-menu-anchor.is-open),
.board-column:has(.task-menu-anchor:focus-within) {
	position: relative;
	z-index: 15;
}

.column-head {
	display: grid;
	gap: 4px;
	margin: -1px -1px 0;
	padding: 18px 20px 17px;
	border-radius:
		calc(var(--column-shell-radius, 24px) - 1px) calc(var(--column-shell-radius, 24px) - 1px) 0 0;
	color: #ffffff;
	overflow: hidden;
	background-clip: padding-box;
	backface-visibility: hidden;
	position: relative;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

.column-head .section-kicker {
	color: rgba(248, 238, 216, 0.9);
}

.column-head h3 {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.08rem;
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.03em;
}

.column-head .section-kicker {
	margin: 0;
	font-family: var(--font-display);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
}

body[data-column-kicker="hidden"] .column-head .section-kicker {
	display: none;
}

.column-count {
	font-size: 0.75em;
	opacity: 0.75;
	font-weight: 400;
}

.column-head-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.column-head-row,
.column-head-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 5px 8px;
	min-width: 0;
}

.column-head-colors {
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: nowrap;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
	white-space: nowrap;
	pointer-events: none;
}

.column-head-colors .color-dot {
	width: 11px;
	height: 11px;
	border-width: 1px;
	border-color: rgba(255, 255, 255, 0.28);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.column-head-top--compact-today {
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 10px;
}

.column-head-top--compact-today .column-head-inline {
	flex: 1 1 auto;
	min-width: 0;
}

body[data-card-density="compact"] .column-head {
	padding: 10px 18px 9px;
	gap: 5px;
}

body[data-card-density="compact"] .column-head h3 {
	font-size: 0.84rem;
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.025em;
}

body[data-card-density="compact"] .column-head-inline,
body[data-card-density="compact"] .column-head .section-kicker {
	margin-left: calc(var(--task-card-menu-height) + 12px);
}

body[data-card-density="compact"] .column-head .section-kicker {
	font-size: 0.56rem;
	line-height: 1.2;
	letter-spacing: 0.11em;
}

body[data-card-density="compact"] .column-head .column-count {
	font-size: 0.72em;
}

body[data-card-density="compact"] .column-head-colors {
	gap: 3px;
}

body[data-card-density="compact"] .column-head-colors .color-dot {
	width: 9px;
	height: 9px;
}

body[data-card-density="compact"] .col-today-limit {
	font-size: 0.68rem;
}

body[data-card-density="compact"] .col-today-progress {
	height: 3px;
	margin-top: 2px;
}

.col-today-limit {
	font-size: 0.72rem;
	font-weight: 700;
	opacity: 0.85;
	white-space: nowrap;
}

.col-today-limit.is-over {
	opacity: 1;
	color: #ffe08a;
}

.col-today-progress {
	height: 4px;
	background: rgba(255, 255, 255, 0.22);
	border-radius: 2px;
	overflow: hidden;
	margin-top: 2px;
}

.col-today-bar {
	height: 100%;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 2px;
	transition: width 0.4s ease;
}

.col-today-bar.is-over {
	background: #ffe08a;
}

.trash-summary-card {
	display: grid;
	gap: 4px;
	margin-bottom: 10px;
	padding: 12px 14px;
	border-radius: 16px;
	border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
	background: color-mix(in srgb, var(--surface-mid) 74%, transparent);
}

.trash-summary-card strong {
	font-size: 0.88rem;
	color: var(--text);
}

.trash-summary-card span {
	font-size: 0.78rem;
	line-height: 1.45;
	color: var(--muted);
}

.column-overload .section-kicker::after {
	content: " · Viel auf einmal!";
	color: rgba(255, 255, 255, 0.7);
	font-weight: 400;
}

/* Spaltenkopf: Verlauf aus der Spaltenfarbe (ohne transparentes Overlay). */
.board-column[data-status="inbox"] .column-head {
	--col-head-tone: var(--column-inbox, var(--status-inbox));
	background: linear-gradient(to right,
			var(--col-head-tone),
			color-mix(in srgb, var(--col-head-tone) 78%, black));
}

.board-column[data-status="today"] .column-head {
	--col-head-tone: var(--column-today, var(--status-today));
	background: linear-gradient(to right,
			var(--col-head-tone),
			color-mix(in srgb, var(--col-head-tone) 78%, black));
}

.board-column[data-status="waiting"] .column-head {
	--col-head-tone: var(--column-waiting, var(--status-waiting));
	background: linear-gradient(to right,
			var(--col-head-tone),
			color-mix(in srgb, var(--col-head-tone) 78%, black));
}

.board-column[data-status="scheduled"] .column-head {
	--col-head-tone: var(--column-scheduled, var(--status-scheduled, #5a82b4));
	background: linear-gradient(to right,
			var(--col-head-tone),
			color-mix(in srgb, var(--col-head-tone) 78%, black));
}

.board-column[data-status="done"] .column-head {
	--col-head-tone: var(--column-done, var(--status-done));
	background: linear-gradient(to right,
			var(--col-head-tone),
			color-mix(in srgb, var(--col-head-tone) 78%, black));
}

body[data-theme="bw"] .board-column--scheduled {
	border-color: var(--border);
	background: var(--panel);
}

body[data-theme="bw"] .board-column--scheduled .column-head {
	border-bottom-color: var(--border);
}

body.has-pomodoro-focus .top-chrome,
body.has-pomodoro-focus .board-column.is-pomodoro-dim {
	opacity: 0.28;
	filter: blur(6px) saturate(0.82);
	transition: opacity 180ms ease, filter 180ms ease;
}

body.has-pomodoro-focus .board-column.is-pomodoro-dim {
	pointer-events: none;
}

body.has-pomodoro-focus .board-column.has-pomodoro-task {
	position: relative;
	z-index: 2;
}

body.has-pomodoro-focus .board-column.has-pomodoro-task .column-head,
body.has-pomodoro-focus .board-column.has-pomodoro-task .task-card.pomodoro-active {
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

@media (min-width: 641px) {
	body.has-pomodoro-focus .board-column.has-pomodoro-task {
		position: fixed;
		z-index: 35;
		left: 50%;
		top: 52%;
		width: min(720px, calc(100vw - 56px));
		max-height: none;
		overflow: visible;
		transform: translate(-50%, -50%);
		animation: focus-zoom-in 0.38s cubic-bezier(0.34, 1.4, 0.64, 1) both;
	}

	body.has-pomodoro-focus .board-column.has-pomodoro-task .column-body {
		min-height: 0;
	}
}

/* ── Board-Layout: Geplant erscheint UNTERHALB Warten ───────────────────── */

/* Standard (ohne Geplant): 4 Spalten fließen automatisch */
@media (min-width: 641px) {
	.board-column[data-status="done"] {
		grid-column: 2;
	}
}

/* Mit Geplant: explizite Grid-Platzierung im 2-Spalten-Layout */
@media (min-width: 641px) {
	.board.has-scheduled .board-column[data-status="inbox"] {
		grid-column: 1;
		grid-row: 1;
	}

	.board.has-scheduled .board-column[data-status="today"] {
		grid-column: 2;
		grid-row: 1;
	}

	.board.has-scheduled .board-column[data-status="waiting"] {
		grid-column: 1;
		grid-row: 2;
	}

	.board.has-scheduled .board-column[data-status="done"] {
		grid-column: 2;
		grid-row: 2;
	}

	.board.has-scheduled .board-column[data-status="scheduled"] {
		grid-column: 1;
		grid-row: 3;
	}
}

.column-body {
	display: grid;
	gap: 14px;
	padding: 18px;
	min-height: 92px;
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, white) 0%, color-mix(in srgb, var(--surface) 90%, transparent) 100%);
	border-radius: 0 0 calc(var(--column-shell-radius, 24px) - 1px) calc(var(--column-shell-radius, 24px) - 1px);
	transition:
		background 140ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

.column-body.is-dropzone {
	position: relative;
}

.column-body.is-drop-target {
	border-radius: inherit;
	background: transparent;
	box-shadow: none;
	transition: none;
}

.column-body.is-drop-target[data-has-items="false"]::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
}

body[data-theme="bw"] .column-body.is-drop-target {
	background: transparent;
	box-shadow: none;
}

body[data-theme="bw"] .column-body.is-drop-target[data-has-items="false"]::after {
	opacity: 0;
}

.empty-state {
	display: grid;
	gap: 10px;
	padding: 22px 20px 18px;
	border-radius: 22px;
	border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
	color: var(--muted);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--panel) 72%, transparent), color-mix(in srgb, var(--surface) 84%, transparent));
	box-shadow:
		0 14px 28px rgba(7, 8, 22, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.32);
	position: relative;
	overflow: hidden;
}

.empty-state::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background:
		radial-gradient(circle at 14% 16%, color-mix(in srgb, var(--empty-accent, #5f72d8) 18%, transparent), transparent 42%);
	opacity: 0.9;
}

.empty-state::after {
	content: "";
	position: absolute;
	left: 18px;
	right: 18px;
	top: 0;
	height: 4px;
	border-radius: 0 0 999px 999px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--empty-accent, #5f72d8) 92%, white), transparent);
	opacity: 0.9;
}

.empty-state[data-status="inbox"] {
	--empty-accent: var(--status-inbox);
}

.empty-state[data-status="today"] {
	--empty-accent: var(--status-today);
}

.empty-state[data-status="waiting"] {
	--empty-accent: var(--status-waiting);
}

.empty-state[data-status="scheduled"] {
	--empty-accent: var(--status-scheduled);
}

.empty-state[data-status="done"] {
	--empty-accent: var(--status-done);
}

.empty-state-title {
	color: var(--text);
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.025em;
	position: relative;
	z-index: 1;
}

.empty-state-copy {
	color: var(--text);
	font-size: 0.92rem;
	line-height: 1.55;
	max-width: 32ch;
	position: relative;
	z-index: 1;
}

.empty-state-hint {
	color: var(--muted);
	font-size: 0.82rem;
	line-height: 1.55;
	max-width: 34ch;
	position: relative;
	z-index: 1;
}

.task-card {
	display: grid;
	--task-energy-accent: transparent;
	gap: 14px;
	padding: 14px;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
	box-shadow:
		0 20px 42px rgba(7, 8, 22, 0.16),
		0 8px 18px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(24px) saturate(135%);
	-webkit-backdrop-filter: blur(24px) saturate(135%);
	position: relative;
	z-index: 0;
	transition:
		transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
		background 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* B&W: Karten ohne Glas/Inset-Verlauf (Fenster wirken flacher) */
body[data-theme="bw"] .task-card {
	background: var(--panel);
	border: 1px solid var(--border);
	box-shadow: var(--shadow);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

body[data-theme="bw"] .task-card.is-keyboard-selected {
	border-color: color-mix(in srgb, var(--text) 22%, var(--border));
	box-shadow:
		0 0 0 2px rgba(17, 17, 17, 0.12),
		var(--shadow);
}

body[data-theme="bw"] .task-card.is-editing {
	background: var(--input-bg);
	border-color: var(--border);
	box-shadow: var(--shadow);
}

@media (hover: hover) and (pointer: fine) {
	body[data-theme="bw"] .task-card:not(.is-editing):not(.is-dragging):hover {
		transform: translateY(-2px);
		box-shadow:
			0 22px 44px rgba(20, 20, 20, 0.14),
			0 8px 16px rgba(0, 0, 0, 0.08);
	}
}

.task-card.is-keyboard-selected {
	border-color: color-mix(in srgb, #7a89ff 46%, rgba(255, 255, 255, 0.12));
	box-shadow:
		0 0 0 2px color-mix(in srgb, #7a89ff 28%, transparent),
		0 24px 48px rgba(7, 8, 22, 0.18),
		0 10px 22px rgba(0, 0, 0, 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.task-card.is-editing {
	background: color-mix(in srgb, var(--input-bg) 78%, transparent);
	border-color: rgba(255, 255, 255, 0.14);
	box-shadow:
		0 24px 48px rgba(7, 8, 22, 0.18),
		0 10px 22px rgba(0, 0, 0, 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.task-card:has(.task-menu-anchor.is-open),
.task-card:has(.task-menu-anchor:focus-within),
.task-card:has(.task-quick-menus:hover),
.task-card:has(.task-quick-menus:focus-within) {
	z-index: 90;
}

@media (hover: hover) and (pointer: fine) {
	.task-card:not(.is-editing):not(.is-dragging):hover {
		transform: translateY(-2px);
		box-shadow:
			0 28px 56px rgba(7, 8, 22, 0.2),
			0 10px 24px rgba(0, 0, 0, 0.12),
			inset 0 1px 0 rgba(255, 255, 255, 0.09);
	}

	.ghost-button:hover,
	.primary-button:hover,
	.task-action:hover {
		transform: translateY(-2px);
		box-shadow:
			0 12px 22px rgba(10, 14, 30, 0.12),
			0 4px 8px rgba(0, 0, 0, 0.07);
	}
}

.task-head {
	display: grid;
	grid-template-columns: var(--task-card-menu-height) 1fr;
	grid-template-rows: auto auto;
	column-gap: 12px;
	row-gap: 10px;
	align-items: start;
}

.task-symbol-col {
	grid-column: 1;
	grid-row: 1;
	align-self: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0;
	width: var(--task-card-menu-height);
}

.task-copy {
	grid-column: 2;
	grid-row: 1;
	align-self: stretch;
	display: grid;
	gap: 12px;
	min-width: 0;
	position: relative;
}

.task-symbol {
	box-sizing: border-box;
	width: var(--task-card-menu-height);
	min-width: var(--task-card-menu-height);
	min-height: var(--task-card-menu-height);
	height: var(--task-card-menu-height);
	border-radius: 10px;
	display: grid;
	place-items: center;
	background: var(--surface-mid);
	border: 1px solid var(--border);
	font-size: 0.95rem;
	flex-shrink: 0;
}

.task-symbol .ui-emoji-icon {
	font-size: 1.05rem;
	line-height: 1;
}

.task-symbol-button {
	cursor: default;
}

.task-text-box {
	position: relative;
}

.task-text-inner {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 5px 10px;
	min-height: var(--task-card-menu-height);
	border-radius: 10px;
	border: 1px solid var(--border);
	background: var(--input-bg);
	padding-right: 46px;
}

.task-text {
	line-height: 1.45;
	white-space: pre-wrap;
	min-width: 0;
}

body[data-card-density="compact"] {
	--task-card-menu-height: 30px;
}

body[data-card-density="compact"] .task-card:not(.task-card--comfortable) {
	gap: 5px;
	padding: 6px 7px 5px;
	border-radius: 14px;
	box-shadow:
		0 12px 28px rgba(7, 8, 22, 0.12),
		0 5px 12px rgba(0, 0, 0, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body[data-card-density="compact"] .task-card:not(.task-card--comfortable) .task-head {
	column-gap: 7px;
	row-gap: 4px;
}

body[data-card-density="compact"] .task-card:not(.task-card--comfortable) .task-copy {
	gap: 5px;
}

body[data-card-density="compact"] .task-card:not(.task-card--comfortable) .task-symbol {
	border-radius: 8px;
	font-size: 0.86rem;
}

body[data-card-density="compact"] .task-card:not(.task-card--comfortable) .task-symbol .ui-emoji-icon {
	font-size: 0.95rem;
}

body[data-card-density="compact"] .task-card:not(.task-card--comfortable) .task-text-inner {
	padding: 3px 7px;
	padding-right: 36px;
	min-height: var(--task-card-menu-height);
	border-radius: 8px;
}

body[data-card-density="compact"] .task-card:not(.task-card--comfortable) .task-text {
	line-height: 1.32;
	font-size: 0.9rem;
}

body[data-card-density="compact"] .task-card:not(.task-card--comfortable) .task-footer {
	gap: 5px;
}

body[data-card-density="compact"] .task-card:not(.task-card--comfortable) .task-tags,
body[data-card-density="compact"] .task-card:not(.task-card--comfortable) .task-actions,
body[data-card-density="compact"] .task-card:not(.task-card--comfortable) .task-schedule-row {
	gap: 4px;
}

/* Kompakt: Menüs, Termin/Wiederholung und Aktionen in einer flexiblen Zeile unter dem Text */
body[data-card-density="compact"] .task-card:not(.task-card--comfortable) .task-head {
	grid-template-rows: auto auto;
}

body[data-card-density="compact"] .task-card:not(.task-card--comfortable) .task-footer {
	justify-content: flex-start;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
}

body[data-card-density="compact"] .task-card:not(.task-card--comfortable) .task-footer .task-tags {
	flex: 1 1 auto;
	min-width: 0;
}

body[data-card-density="compact"] .task-card:not(.task-card--comfortable) .task-footer .task-schedule-row {
	flex: 0 1 auto;
	min-width: 0;
	grid-column: unset;
	grid-row: unset;
	margin: 0;
}

body[data-card-density="compact"] .task-card:not(.task-card--comfortable) .task-footer .task-actions {
	margin-left: auto;
	flex: 0 0 auto;
}

body[data-card-density="compact"] .task-card:not(.task-card--comfortable) .task-meta-time {
	margin-top: 2px;
	font-size: 0.66rem;
}

body[data-card-density="compact"] .task-card:not(.task-card--comfortable) .task-tags .task-area-trigger,
body[data-card-density="compact"] .task-card:not(.task-card--comfortable) .task-tags .task-status-trigger,
body[data-card-density="compact"] .task-card:not(.task-card--comfortable) .task-tags .task-energy-trigger {
	min-height: var(--task-card-menu-height);
	min-width: min(108px, 100%);
	padding: 2px 6px 2px 8px;
	font-size: 0.72rem;
	border-radius: 8px;
}

body[data-card-density="compact"] .task-card:not(.task-card--comfortable) .task-pomo-col .task-focus-menu-trigger {
	min-width: var(--task-card-menu-height);
	width: var(--task-card-menu-height);
	min-height: var(--task-card-menu-height);
	height: var(--task-card-menu-height);
	border-radius: 8px;
	font-size: 0.92rem;
}

body[data-card-density="compact"] .task-card:not(.task-card--comfortable) .task-action {
	min-height: 28px;
	padding: 3px 8px;
	font-size: 0.78rem;
	border-radius: 8px;
}

body[data-card-density="comfortable"] .task-card:not(.task-card--compact) {
	gap: 12px;
	padding: 15px 15px 14px;
}

body[data-card-density="comfortable"] .task-card:not(.task-card--compact) .task-text-inner {
	padding: 6px 11px;
	padding-right: 48px;
}

body[data-card-density="comfortable"] .task-card:not(.task-card--compact) .task-footer {
	gap: 14px;
}

body[data-card-density="comfortable"] .task-card:not(.task-card--compact) .task-schedule-row {
	gap: 10px;
}

body[data-card-density="comfortable"] .task-card:not(.task-card--compact) .task-meta-time {
	margin-top: 8px;
}

.copy-button {
	position: absolute;
	top: 50%;
	right: 7px;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	padding: 0;
	border-radius: 0;
	border: 0;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	display: grid;
	place-items: center;
	font-size: 0.95rem;
	line-height: 1;
	opacity: 0.78;
	box-shadow: none;
}

.copy-button {
	transform: translate(-4px, -50%);
}

.copy-button:hover,
.copy-button:focus-visible {
	opacity: 1;
	color: var(--text);
}

.inline-edit-button {
	position: absolute;
	top: 50%;
	right: 40px;
	width: 26px;
	height: 26px;
	transform: translateY(-50%);
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--surface-mid);
	color: var(--muted);
	cursor: pointer;
	font-size: 0.8rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.15s, background 0.15s;
}

.task-text-box:hover .inline-edit-button,
.task-card:hover .inline-edit-button {
	opacity: 1;
}

.inline-edit-button:hover {
	background: var(--surface-strong);
	color: var(--text);
}

/* On touch devices: always visible */
@media (hover: none) {

	/* Touch-Gerät: Edit-Button immer sichtbar */
	.inline-edit-button {
		opacity: 1;
	}
}

/* Touch: gleiche Zeilenhöhe wie Desktop (32px), Inhalt darf bei mehrzeiligen Optionen wachsen.
   „Mehr“-Menüzeilen (.hero-more-action) sind bewusst niedriger — siehe #hero-more-sheet. */
@media (hover: none) and (pointer: coarse) {

	.ghost-button:not(.subtask-add-btn):not(.hero-more-action),
	.primary-button,
	.task-action {
		min-height: 32px;
	}

	.settings-close-btn,
	.sched-close-btn {
		min-width: 32px;
		min-height: 32px;
	}

	.task-menu-toggle {
		min-width: 32px;
		min-height: 32px;
	}

	.task-area-option,
	.task-energy-option,
	.task-status-option {
		min-height: 32px;
	}
}

.task-editor {
	display: grid;
	gap: 12px;
}

.task-editor-top-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	align-items: start;
}

.task-editor-top-row .edit-symbol-trigger,
.task-editor-top-row .subtask-add-btn {
	height: var(--task-card-menu-height);
	min-height: var(--task-card-menu-height);
	box-sizing: border-box;
	border-radius: var(--nf-settings-control-radius);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.edit-task-text {
	min-height: 140px;
	resize: vertical;
}

.task-editor-label {
	display: grid;
	gap: 8px;
}

.task-editor-label span {
	font-size: 0.9rem;
	color: var(--muted);
}

.task-editor-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.task-editor-fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.task-editor-secondary-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.editor-field-row {
	display: grid;
	gap: 5px;
	min-width: 0;
}

.editor-field-label {
	font-size: 0.78rem;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.task-editor-note {
	margin: -2px 0 0;
	color: var(--muted);
	font-size: 0.84rem;
	line-height: 1.35;
}

.task-tags,
.task-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.task-footer {
	display: flex;
	grid-column: 2;
	grid-row: 2;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.task-schedule-row {
	display: flex;
	grid-column: 2;
	grid-row: 3;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	min-height: 0;
	margin-top: 0;
}

.task-pomo-col {
	grid-column: 1;
	grid-row: 2;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: var(--task-card-menu-height);
	min-width: var(--task-card-menu-height);
}

.task-tags {
	flex: 1 1 auto;
	overflow: visible;
	min-width: 0;
}

.task-actions {
	display: flex;
	flex: 0 0 auto;
	justify-content: flex-end;
	align-items: center;
	margin-top: 0;
	padding: 0;
	border: 0;
	background: transparent;
	width: auto;
	margin-left: 0;
	gap: 6px;
}

.task-card:not(.task-card--phone-layout) .task-footer {
	display: grid;
	grid-template-columns: minmax(0, 1fr) max-content;
	align-items: start;
	justify-content: stretch;
	gap: 8px;
	width: 100%;
	min-width: 0;
}

.task-card:not(.task-card--phone-layout) .task-tags {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(116px, 100%), 1fr));
	gap: 8px;
	align-items: stretch;
	width: 100%;
	min-width: 0;
}

.task-card:not(.task-card--phone-layout) .task-tags > .task-menu-anchor,
.task-card:not(.task-card--phone-layout) .task-tags .task-menu-trigger {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;
}

.task-card:not(.task-card--phone-layout) .task-actions {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	align-items: start;
	justify-content: end;
	gap: 6px;
	min-width: 0;
}

.task-card:not(.task-card--phone-layout) .task-actions .estimate-tag {
	width: min(96px, 100%);
	min-width: 86px;
	max-width: 108px;
	justify-content: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.task-card:not(.task-card--phone-layout) .task-schedule-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(136px, 100%), max-content));
	justify-content: start;
	align-items: stretch;
	width: 100%;
	min-width: 0;
}

.task-card:not(.task-card--phone-layout) .task-schedule-row .tag {
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.task-inline-action {
	min-height: 32px;
	padding: 5px 11px;
	border-radius: 10px;
	font-size: 0.82rem;
	background: var(--surface-mid);
	color: var(--muted);
	border-color: var(--border);
}

.task-focus-menu-anchor {
	position: relative;
	overflow: visible;
}

.task-pomo-col .task-focus-menu-trigger {
	min-width: var(--task-card-menu-height);
	width: var(--task-card-menu-height);
	min-height: var(--task-card-menu-height);
	height: var(--task-card-menu-height);
	padding: 0;
	border-radius: 10px;
	display: grid;
	place-items: center;
	justify-content: center;
	background: var(--surface-mid);
	border: 1px solid var(--border);
	color: color-mix(in srgb, var(--muted) 88%, transparent);
	font-size: 1.04rem;
	opacity: 0.72;
	gap: 0;
}

.task-pomo-col .task-focus-menu-trigger::after {
	content: none;
}

.task-pomo-col .task-focus-menu-trigger:hover,
.task-pomo-col .task-focus-menu-trigger:focus-visible {
	background: var(--surface-mid);
	border-color: var(--border);
	color: var(--text);
	opacity: 1;
}

.task-pomo-col .task-focus-menu-trigger.is-active,
.task-card.focus-single .task-pomo-col .task-focus-menu-trigger {
	background: color-mix(in srgb, #5f72d8 14%, var(--mix-base));
	border-color: color-mix(in srgb, #5f72d8 32%, transparent);
	color: #cfd8ff;
	opacity: 1;
}

.task-pomo-col .task-focus-menu-trigger.is-pomodoro-active {
	background: color-mix(in srgb, #f04444 14%, var(--mix-base));
	border-color: color-mix(in srgb, #f04444 34%, transparent);
	color: #ffd6d9;
	opacity: 1;
}

body[data-theme="bw"] .task-pomo-col .task-focus-menu-trigger.is-pomodoro-active {
	background: rgba(17, 17, 17, 0.1);
	border-color: rgba(17, 17, 17, 0.2);
	color: #111;
}

.task-inline-action[data-variant="danger"] {
	color: #8f4a4a;
}

.task-action-menu-trigger {
	min-height: 32px;
	padding: 5px 11px;
	border-radius: 10px;
	font-size: 0.82rem;
	background: var(--surface-mid);
	color: var(--muted);
	border: 1px solid var(--border);
}

.task-action-menu-anchor {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.task-action-popover-anchor {
	display: inline-flex;
	align-items: center;
}

.task-action-edit-trigger {
	min-height: 32px;
	padding: 5px 11px;
	border-radius: 10px;
	font-size: 0.82rem;
	background: var(--surface-mid);
	color: var(--muted);
	border: 1px solid var(--border);
}

.task-action-menu-caret,
.task-action-menu-caret.task-menu-trigger {
	min-width: 42px;
	width: 42px;
	max-width: 42px;
	flex: 0 0 42px;
	min-height: 32px;
	height: 32px;
	padding: 0;
	padding-right: 0;
	border-radius: 10px;
	justify-content: center;
	font-size: 0.96rem;
	letter-spacing: 0.01em;
}

.task-action-menu-caret::after {
	content: none;
}

.task-action-menu {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	width: max-content;
	min-width: 0;
	max-width: min(120px, calc(100vw - 48px));
}

body[data-card-density="compact"] .task-action-menu {
	min-width: 0;
	width: max-content;
	max-width: min(160px, calc(100vw - 24px));
}

.task-action-menu__divider {
	flex-shrink: 0;
	height: 1px;
	margin: 4px 0;
	background: color-mix(in srgb, var(--border) 88%, transparent);
}

.task-action-menu__focus {
	flex-shrink: 0;
	min-width: 0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 6px;
	gap: 6px;
}

body[data-card-density="compact"] .task-action-menu__focus {
	width: max-content;
	max-width: min(240px, calc(100vw - 24px));
}

.task-action-menu__focus .focus-menu-pomo-row {
	max-width: 100%;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
	gap: 4px;
	padding: 5px;
}

.task-action-menu__focus .focus-menu-pomo-btn {
	min-width: 0;
	width: 100%;
	flex: 1 1 auto;
	padding: 0;
}

.task-action-menu-caret.is-active,
.task-card.focus-single .task-action-menu-caret {
	background: color-mix(in srgb, #5f72d8 14%, var(--mix-base));
	border-color: color-mix(in srgb, #5f72d8 32%, transparent);
	color: #cfd8ff;
	opacity: 1;
}

.task-action-menu-caret.is-pomodoro-active {
	background: color-mix(in srgb, #f04444 14%, var(--mix-base));
	border-color: color-mix(in srgb, #f04444 34%, transparent);
	color: #ffd6d9;
	opacity: 1;
}

body[data-theme="bw"] .task-action-menu-caret.is-pomodoro-active {
	background: rgba(17, 17, 17, 0.1);
	border-color: rgba(17, 17, 17, 0.22);
	color: var(--text);
}

.task-focus-popover {
	top: 50%;
	left: calc(100% + 8px);
	right: auto;
	bottom: auto;
	transform: translateY(-50%) translateY(4px);
	width: fit-content;
	min-width: 244px;
	max-width: min(420px, calc(100vw - 72px));
	padding: 8px;
	border-radius: 16px;
	border: 1px solid rgba(140, 152, 214, 0.16);
	background: rgba(14, 14, 31, 0.96);
	box-shadow: 0 18px 34px rgba(6, 6, 18, 0.38);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	z-index: 80;
	visibility: hidden;
}

body[data-card-density="compact"] .task-focus-popover {
	min-width: 0;
	width: max-content;
	max-width: min(240px, calc(100vw - 24px));
}

.task-focus-popover::before {
	content: "";
	position: absolute;
	left: -12px;
	top: 0;
	bottom: 0;
	width: 16px;
}

.task-focus-menu {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 244px;
	width: fit-content;
	max-width: 100%;
	padding: 8px;
	border-radius: 12px;
	background: rgba(9, 9, 23, 0.52);
	box-sizing: border-box;
}

body[data-card-density="compact"] .task-focus-menu {
	min-width: 0;
	width: max-content;
	max-width: min(240px, calc(100vw - 24px));
}

body[data-theme="default"] .task-focus-menu {
	background: rgba(255, 249, 242, 0.9);
	box-shadow:
		0 18px 34px rgba(63, 52, 40, 0.16),
		0 0 0 1px rgba(255, 255, 255, 0.42) inset;
}

body[data-theme="bw"] .task-focus-menu {
	background: rgba(236, 236, 236, 0.95);
	box-shadow:
		0 16px 30px rgba(20, 20, 20, 0.12),
		0 0 0 1px rgba(255, 255, 255, 0.55) inset;
}

.focus-menu-section-label {
	padding: 0;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--muted);
	letter-spacing: 0.05em;
}

.focus-menu-pomo-row {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	width: fit-content;
	min-width: 0;
	align-self: flex-start;
	padding: 6px;
	border-radius: 12px;
	background: rgba(9, 9, 23, 0.46);
	box-sizing: border-box;
}

body[data-card-density="compact"] .focus-menu-pomo-row {
	flex-wrap: wrap;
	width: 100%;
	max-width: min(240px, 100%);
}

body[data-card-density="compact"] .focus-menu-pomo-btn {
	flex: 1 1 46px;
	min-width: 46px;
}

body[data-theme="default"] .focus-menu-pomo-row {
	background: rgba(108, 92, 150, 0.08);
}

body[data-theme="bw"] .focus-menu-pomo-row {
	background: rgba(17, 17, 17, 0.05);
}

.focus-menu-pomo-btn {
	flex: 0 0 36px;
	min-height: 32px;
	padding: 0;
	border-radius: 10px;
	border: 1px solid transparent;
	background: transparent;
	color: rgba(245, 246, 255, 0.88);
	font-size: 0.76rem;
	font-weight: 700;
	justify-content: center;
	white-space: nowrap;
}

body[data-theme="default"] .focus-menu-pomo-btn {
	color: color-mix(in srgb, var(--text) 78%, transparent);
}

body[data-theme="bw"] .focus-menu-pomo-btn {
	color: rgba(17, 17, 17, 0.8);
}

.task-focus-menu-anchor.is-open .task-focus-popover,
.task-focus-menu-anchor:focus-within .task-focus-popover,
.task-focus-popover:hover,
.task-focus-popover:focus-within {
	visibility: visible;
	opacity: 1;
	transform: translateY(-50%);
	pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
	.task-focus-menu-anchor:hover .task-focus-popover {
		visibility: visible;
		opacity: 1;
		transform: translateY(-50%);
		pointer-events: auto;
	}
}

.focus-menu-pomo-btn:hover,
.focus-menu-pomo-btn:focus-visible {
	background: rgba(255, 255, 255, 0.09);
	color: #ffffff;
}

body[data-theme="default"] .focus-menu-pomo-btn:hover,
body[data-theme="default"] .focus-menu-pomo-btn:focus-visible {
	background: rgba(108, 92, 150, 0.12);
	color: var(--text);
}

body[data-theme="bw"] .focus-menu-pomo-btn:hover,
body[data-theme="bw"] .focus-menu-pomo-btn:focus-visible {
	background: rgba(17, 17, 17, 0.08);
	color: #111111;
}

.focus-menu-pomo-btn.is-active {
	background: color-mix(in srgb, #e8505b 16%, var(--mix-base));
	color: #ffdfe2;
	border-color: color-mix(in srgb, #e8505b 34%, transparent);
}

.focus-menu-stop-btn,
.focus-menu-pin-btn {
	display: flex;
	width: 100%;
	min-height: 32px;
	padding: 6px 10px;
	border-radius: 10px;
	justify-content: flex-start;
	border: 1px solid transparent;
	background: rgba(9, 9, 23, 0.22);
	color: rgba(245, 246, 255, 0.84);
	font-size: 0.83rem;
	font-weight: 600;
	box-sizing: border-box;
}

body[data-theme="default"] .focus-menu-stop-btn,
body[data-theme="default"] .focus-menu-pin-btn {
	background: rgba(108, 92, 150, 0.06);
	color: color-mix(in srgb, var(--text) 86%, transparent);
}

body[data-theme="bw"] .focus-menu-stop-btn,
body[data-theme="bw"] .focus-menu-pin-btn {
	background: rgba(17, 17, 17, 0.05);
	color: rgba(17, 17, 17, 0.84);
}

.focus-menu-stop-btn:hover,
.focus-menu-stop-btn:focus-visible,
.focus-menu-pin-btn:hover,
.focus-menu-pin-btn:focus-visible {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

.focus-menu-stop-btn {
	color: #ffb0b6;
}

.focus-menu-pin-btn.is-active {
	color: #cfd8ff;
	background: color-mix(in srgb, #5f72d8 14%, var(--mix-base));
}

.focus-menu-divider {
	height: 1px;
	margin: 0;
	background: rgba(255, 255, 255, 0.08);
}

.task-action-option {
	min-height: 32px;
	padding: 6px 12px;
	border-radius: 10px;
	border: 1px solid transparent;
	background: transparent;
	color: var(--text);
	font: inherit;
	font-size: 0.82rem;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	transition:
		transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
		background 160ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 160ms cubic-bezier(0.22, 1, 0.36, 1);
	width: fit-content;
	white-space: nowrap;
}

.task-action-option:hover {
	background: var(--surface-mid);
	border-color: color-mix(in srgb, currentColor 18%, transparent);
	transform: translateY(-1px);
	box-shadow: 0 8px 16px rgba(10, 14, 30, 0.08);
}

.task-action-option.is-danger {
	color: #f06565;
}

@media (max-width: 640px) {
	.task-inline-action {
		display: none;
	}
}

.task-menu-anchor {
	position: relative;
	display: inline-flex;
	align-items: center;
	overflow: visible;
}

.task-symbol-col>.task-menu-anchor {
	width: var(--task-card-menu-height);
	min-width: var(--task-card-menu-height);
	min-height: var(--task-card-menu-height);
	height: var(--task-card-menu-height);
	display: flex;
	align-items: center;
	justify-content: center;
}

.task-symbol-col>.task-menu-anchor>.task-symbol {
	width: var(--task-card-menu-height);
	min-width: var(--task-card-menu-height);
	min-height: var(--task-card-menu-height);
	height: var(--task-card-menu-height);
	flex: 0 0 auto;
	align-self: center;
	justify-self: center;
	margin: 0;
}

.task-menu-anchor.is-open {
	z-index: 60;
}

.task-menu-anchor:focus-within {
	z-index: 60;
}

.task-menu-trigger,
.task-area-trigger,
.task-energy-trigger,
.task-status-trigger,
.task-schedule-trigger {
	cursor: pointer;
}

.task-quick-menus {
	position: absolute;
	top: calc(100% + 2px);
	left: 0;
	display: grid;
	gap: 3px;
	width: min(210px, 100%);
	max-width: min(100%, 210px);
	padding: 7px;
	border-radius: 16px;
	border: 1px solid rgba(140, 152, 214, 0.16);
	background: rgba(14, 14, 31, 0.94);
	box-shadow: 0 18px 34px rgba(6, 6, 18, 0.38);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	align-self: start;
	z-index: 120;
	opacity: 0;
	transform: translateY(4px);
	pointer-events: none;
	transition:
		opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-card-density="compact"] .task-quick-menus {
	width: max-content;
	min-width: min(160px, calc(100vw - 24px));
	max-width: min(240px, calc(100vw - 24px));
}

body[data-theme="default"] .task-quick-menus {
	border-color: rgba(108, 92, 150, 0.14);
	background: rgba(255, 250, 244, 0.96);
	box-shadow:
		0 18px 34px rgba(63, 52, 40, 0.16),
		0 0 0 1px rgba(255, 255, 255, 0.42) inset;
}

body[data-theme="bw"] .task-quick-menus {
	border-color: rgba(20, 20, 20, 0.12);
	background: rgba(238, 238, 238, 0.98);
	box-shadow:
		0 16px 30px rgba(20, 20, 20, 0.12),
		0 0 0 1px rgba(255, 255, 255, 0.55) inset;
}

body[data-theme="bw"] .task-menu-anchor.is-open>.task-menu-trigger,
body[data-theme="bw"] .task-menu-anchor:focus-within>.task-menu-trigger,
body[data-theme="bw"] .task-menu-anchor:hover>.task-menu-trigger {
	background: rgba(17, 17, 17, 0.08);
	border-color: rgba(17, 17, 17, 0.16);
}

.task-quick-menus::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -8px;
	height: 10px;
}

.task-menu-anchor.is-open .task-quick-menus,
.task-menu-anchor:focus-within .task-quick-menus,
.task-quick-menus.is-task-menu-portal,
.task-quick-menus:hover,
.task-quick-menus:focus-within {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.task-menu-anchor:not(.is-open):focus-within>.task-quick-menus:not(.is-task-menu-portal) {
	opacity: 0;
	transform: translateY(4px);
	pointer-events: none;
}

.task-menu-anchor.is-open>.task-menu-trigger,
.task-menu-anchor:focus-within>.task-menu-trigger {
	background: color-mix(in srgb, currentColor 12%, var(--mix-base));
	border-color: color-mix(in srgb, currentColor 34%, transparent);
	box-shadow: 0 8px 18px rgba(10, 14, 30, 0.08);
}

.task-menu-anchor:hover>.task-menu-trigger {
	background: color-mix(in srgb, currentColor 10%, var(--mix-base));
	border-color: color-mix(in srgb, currentColor 28%, transparent);
	box-shadow: 0 8px 18px rgba(10, 14, 30, 0.06);
}

/* Desktop-Action-Popover soll nur so breit werden wie sein Inhalt. */
.task-action-popover-anchor>.task-quick-menus {
	left: auto;
	right: 0;
	width: max-content;
	min-width: 0;
	max-width: min(100vw - 32px, 120px);
}

.task-focus-popover.task-quick-menus {
	width: fit-content;
	min-width: 244px;
	max-width: min(420px, calc(100vw - 72px));
}

.task-schedule-anchor>.task-quick-menus {
	width: min(248px, calc(100vw - 48px));
	max-width: min(248px, calc(100vw - 48px));
}

.task-area-menu {
	display: grid;
	gap: 4px;
	grid-template-columns: 1fr;
}

.task-schedule-menu,
.task-energy-menu,
.task-status-menu {
	display: grid;
	gap: 4px;
	grid-template-columns: 1fr;
}

.task-schedule-menu {
	width: min(248px, calc(100vw - 48px));
}

body[data-card-density="compact"] .task-schedule-anchor>.task-quick-menus {
	width: max-content;
	min-width: 0;
	max-width: min(180px, calc(100vw - 24px));
}

.task-schedule-field {
	display: grid;
	gap: 8px;
}

.task-schedule-input {
	min-width: 0;
}

.task-schedule-quick-row {
	margin-top: 0;
}

.task-schedule-actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
	margin-top: 2px;
}

.task-schedule-save {
	min-height: 32px;
	padding: 5px 11px;
	border-radius: 10px;
	font-size: 0.82rem;
	background: color-mix(in srgb, #5f72d8 18%, var(--mix-base));
	color: #dbe1ff;
	border: 1px solid rgba(95, 114, 216, 0.34);
}

.editor-area-menu,
.editor-energy-menu,
.editor-status-menu,
.editor-estimate-menu,
.editor-recurrence-menu {
	display: grid;
	gap: 4px;
	grid-template-columns: 1fr;
}

.task-area-option {
	min-height: 32px;
	padding: 7px 12px;
	border-radius: 10px;
	border: 0;
	cursor: pointer;
	font-size: 0.88rem;
	line-height: 1.1;
	transition: opacity 120ms ease, background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
	text-align: left;
	background: transparent;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.task-quick-menus .task-area-option:not(.active),
.task-quick-menus .task-energy-option:not(.active),
.task-quick-menus .task-status-option:not(.active) {
	opacity: 0.62;
	background: transparent;
	border-color: transparent;
}

.task-quick-menus .task-area-option:hover,
.task-quick-menus .task-energy-option:hover,
.task-quick-menus .task-status-option:hover {
	opacity: 1;
	background: color-mix(in srgb, currentColor 10%, transparent);
}

.task-quick-menus .task-area-option.active,
.task-quick-menus .task-energy-option.active,
.task-quick-menus .task-status-option.active {
	font-weight: 700;
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

.task-energy-option,
.task-status-option {
	display: flex;
	align-items: center;
	min-height: 32px;
	width: 100%;
	min-width: 0;
	padding: 7px 12px;
	border-radius: 8px;
	border: 0;
	cursor: pointer;
	background: transparent;
	transition: opacity 120ms ease, background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
	font-size: 0.88rem;
	line-height: 1.1;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.task-option-main,
.task-option-hint {
	display: block;
}

.task-option-hint {
	display: none;
}

.task-area-option {
	display: flex;
	align-items: center;
	width: 100%;
	min-width: 0;
	border-radius: 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.task-area-option.active,
.task-energy-option.active,
.task-status-option.active {
	opacity: 1;
}

.task-quick-menus .task-area-option.area-ctx01,
.task-quick-menus .task-area-option.area-ctx02,
.task-quick-menus .task-area-option.area-ctx03,
.task-quick-menus .task-area-option.area-ctx04,
.task-quick-menus .task-area-option.area-ctx05,
.task-quick-menus .task-area-option.area-ctx06,
.task-quick-menus .task-area-option.area-ctx07,
.task-quick-menus .task-area-option.area-ctx08,
.task-quick-menus .task-area-option.area-ctx09,
.task-quick-menus .task-area-option.area-ctx10,
.task-quick-menus .task-area-option.area-ctx11,
.task-quick-menus .task-area-option.area-ctx12,
.task-quick-menus .task-energy-option.energy-none,
.task-quick-menus .task-energy-option.energy-low,
.task-quick-menus .task-energy-option.energy-medium,
.task-quick-menus .task-energy-option.energy-high,
.task-quick-menus .task-energy-option.energy-very-high,
.task-quick-menus .task-status-option.status-inbox,
.task-quick-menus .task-status-option.status-today,
.task-quick-menus .task-status-option.status-waiting,
.task-quick-menus .task-status-option.status-done {
	background: transparent;
	border-color: transparent;
}

.task-area-option.area-ctx01 {
	color: var(--ctx01);
	border-color: color-mix(in srgb, var(--ctx01) 28%, transparent);
	background: color-mix(in srgb, var(--ctx01) 10%, var(--mix-base));
}

.task-area-option.area-ctx02 {
	color: var(--ctx02);
	border-color: color-mix(in srgb, var(--ctx02) 28%, transparent);
	background: color-mix(in srgb, var(--ctx02) 10%, var(--mix-base));
}

.task-area-option.area-ctx03 {
	color: var(--ctx03);
	border-color: color-mix(in srgb, var(--ctx03) 28%, transparent);
	background: color-mix(in srgb, var(--ctx03) 10%, var(--mix-base));
}

.task-area-option.area-ctx04 {
	color: var(--ctx04);
	border-color: color-mix(in srgb, var(--ctx04) 28%, transparent);
	background: color-mix(in srgb, var(--ctx04) 10%, var(--mix-base));
}

.task-area-option.area-ctx05 {
	color: var(--ctx05);
	border-color: color-mix(in srgb, var(--ctx05) 28%, transparent);
	background: color-mix(in srgb, var(--ctx05) 10%, var(--mix-base));
}

.task-area-option.area-ctx06 {
	color: var(--ctx06);
	border-color: color-mix(in srgb, var(--ctx06) 28%, transparent);
	background: color-mix(in srgb, var(--ctx06) 10%, var(--mix-base));
}

.task-area-option.area-ctx07 {
	color: var(--ctx07);
	border-color: color-mix(in srgb, var(--ctx07) 28%, transparent);
	background: color-mix(in srgb, var(--ctx07) 10%, var(--mix-base));
}

.task-area-option.area-ctx08 {
	color: var(--ctx08);
	border-color: color-mix(in srgb, var(--ctx08) 28%, transparent);
	background: color-mix(in srgb, var(--ctx08) 10%, var(--mix-base));
}

.task-area-option.area-ctx09 {
	color: var(--ctx09);
	border-color: color-mix(in srgb, var(--ctx09) 28%, transparent);
	background: color-mix(in srgb, var(--ctx09) 10%, var(--mix-base));
}

.task-area-option.area-ctx10 {
	color: var(--ctx10);
	border-color: color-mix(in srgb, var(--ctx10) 28%, transparent);
	background: color-mix(in srgb, var(--ctx10) 10%, var(--mix-base));
}

.task-area-option.area-ctx11 {
	color: var(--ctx11);
	border-color: color-mix(in srgb, var(--ctx11) 28%, transparent);
	background: color-mix(in srgb, var(--ctx11) 10%, var(--mix-base));
}

.task-area-option.area-ctx12 {
	color: var(--ctx12);
	border-color: color-mix(in srgb, var(--ctx12) 28%, transparent);
	background: color-mix(in srgb, var(--ctx12) 10%, var(--mix-base));
}

.composer-choice-button.area-ctx01 {
	color: var(--ctx01);
	border-color: color-mix(in srgb, var(--ctx01) 28%, transparent);
	background: color-mix(in srgb, var(--ctx01) 10%, var(--mix-base));
}

.composer-choice-button.area-ctx02 {
	color: var(--ctx02);
	border-color: color-mix(in srgb, var(--ctx02) 28%, transparent);
	background: color-mix(in srgb, var(--ctx02) 10%, var(--mix-base));
}

.composer-choice-button.area-ctx03 {
	color: var(--ctx03);
	border-color: color-mix(in srgb, var(--ctx03) 28%, transparent);
	background: color-mix(in srgb, var(--ctx03) 10%, var(--mix-base));
}

.composer-choice-button.area-ctx04 {
	color: var(--ctx04);
	border-color: color-mix(in srgb, var(--ctx04) 28%, transparent);
	background: color-mix(in srgb, var(--ctx04) 10%, var(--mix-base));
}

.composer-choice-button.area-ctx05 {
	color: var(--ctx05);
	border-color: color-mix(in srgb, var(--ctx05) 28%, transparent);
	background: color-mix(in srgb, var(--ctx05) 10%, var(--mix-base));
}

.composer-choice-button.area-ctx06 {
	color: var(--ctx06);
	border-color: color-mix(in srgb, var(--ctx06) 28%, transparent);
	background: color-mix(in srgb, var(--ctx06) 10%, var(--mix-base));
}

.composer-choice-button.area-ctx07 {
	color: var(--ctx07);
	border-color: color-mix(in srgb, var(--ctx07) 28%, transparent);
	background: color-mix(in srgb, var(--ctx07) 10%, var(--mix-base));
}

.composer-choice-button.area-ctx08 {
	color: var(--ctx08);
	border-color: color-mix(in srgb, var(--ctx08) 28%, transparent);
	background: color-mix(in srgb, var(--ctx08) 10%, var(--mix-base));
}

.composer-choice-button.area-ctx09 {
	color: var(--ctx09);
	border-color: color-mix(in srgb, var(--ctx09) 28%, transparent);
	background: color-mix(in srgb, var(--ctx09) 10%, var(--mix-base));
}

.composer-choice-button.area-ctx10 {
	color: var(--ctx10);
	border-color: color-mix(in srgb, var(--ctx10) 28%, transparent);
	background: color-mix(in srgb, var(--ctx10) 10%, var(--mix-base));
}

.composer-choice-button.area-ctx11 {
	color: var(--ctx11);
	border-color: color-mix(in srgb, var(--ctx11) 28%, transparent);
	background: color-mix(in srgb, var(--ctx11) 10%, var(--mix-base));
}

.composer-choice-button.area-ctx12 {
	color: var(--ctx12);
	border-color: color-mix(in srgb, var(--ctx12) 28%, transparent);
	background: color-mix(in srgb, var(--ctx12) 10%, var(--mix-base));
}

.task-energy-option.energy-none,
.composer-choice-button.energy-none,
.tag.energy-none {
	color: var(--status-inbox);
	border-color: color-mix(in srgb, var(--status-inbox) 28%, transparent);
	background: color-mix(in srgb, var(--status-inbox) 10%, var(--mix-base));
}

.task-energy-option.energy-low,
.composer-choice-button.energy-low,
.tag.energy-low {
	color: var(--low);
	border-color: color-mix(in srgb, var(--low) 28%, transparent);
	background: color-mix(in srgb, var(--low) 10%, var(--mix-base));
}

.task-energy-option.energy-medium,
.composer-choice-button.energy-medium,
.tag.energy-medium {
	color: var(--medium);
	border-color: color-mix(in srgb, var(--medium) 30%, transparent);
	background: color-mix(in srgb, var(--medium) 12%, var(--mix-base));
}

.task-energy-option.energy-high,
.composer-choice-button.energy-high,
.tag.energy-high {
	color: var(--high);
	border-color: color-mix(in srgb, var(--high) 28%, transparent);
	background: color-mix(in srgb, var(--high) 10%, var(--mix-base));
}

.task-energy-option.energy-very-high,
.composer-choice-button.energy-very-high,
.tag.energy-very-high {
	color: var(--very-high);
	border-color: color-mix(in srgb, var(--very-high) 28%, transparent);
	background: color-mix(in srgb, var(--very-high) 10%, var(--mix-base));
}

.task-quick-menus .task-energy-option.active,
.task-quick-menus .task-energy-option.active:hover {
	border-color: transparent;
	background: transparent;
	box-shadow: none;
}

.tag.task-energy-trigger.energy-none {
	color: var(--status-inbox);
	border-color: color-mix(in srgb, var(--status-inbox) 28%, transparent);
	background: color-mix(in srgb, var(--status-inbox) 10%, var(--mix-base));
}

.tag.task-energy-trigger.energy-low {
	color: var(--low);
	border-color: color-mix(in srgb, var(--low) 28%, transparent);
	background: color-mix(in srgb, var(--low) 10%, var(--mix-base));
}

.tag.task-energy-trigger.energy-medium {
	color: var(--medium);
	border-color: color-mix(in srgb, var(--medium) 30%, transparent);
	background: color-mix(in srgb, var(--medium) 12%, var(--mix-base));
}

.tag.task-energy-trigger.energy-high {
	color: var(--high);
	border-color: color-mix(in srgb, var(--high) 28%, transparent);
	background: color-mix(in srgb, var(--high) 10%, var(--mix-base));
}

.tag.task-energy-trigger.energy-very-high {
	color: var(--very-high);
	border-color: color-mix(in srgb, var(--very-high) 28%, transparent);
	background: color-mix(in srgb, var(--very-high) 10%, var(--mix-base));
}

.tag.status-inbox,
.composer-choice-button.status-inbox,
.task-status-option.status-inbox {
	color: var(--status-inbox);
	border-color: color-mix(in srgb, var(--status-inbox) 28%, transparent);
	background: color-mix(in srgb, var(--status-inbox) 10%, var(--mix-base));
}

.tag.status-today,
.composer-choice-button.status-today,
.task-status-option.status-today {
	color: var(--status-today);
	border-color: color-mix(in srgb, var(--status-today) 28%, transparent);
	background: color-mix(in srgb, var(--status-today) 10%, var(--mix-base));
}

.tag.status-waiting,
.composer-choice-button.status-waiting,
.task-status-option.status-waiting {
	color: var(--status-waiting);
	border-color: color-mix(in srgb, var(--status-waiting) 28%, transparent);
	background: color-mix(in srgb, var(--status-waiting) 12%, var(--mix-base));
}

.tag.status-done,
.composer-choice-button.status-done,
.task-status-option.status-done {
	color: var(--status-done);
	border-color: color-mix(in srgb, var(--status-done) 28%, transparent);
	background: color-mix(in srgb, var(--status-done) 10%, var(--mix-base));
}

.quick-icon-picker {
	position: static;
	top: auto;
	left: auto;
	display: grid;
	grid-template-columns: repeat(5, 40px);
	gap: 5px;
	width: 230px;
	max-width: min(230px, calc(100vw - 56px));
	padding: 6px;
	border-radius: 10px;
	border: none;
	background: transparent;
	z-index: auto;
}

.quick-icon-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	aspect-ratio: 1;
	padding: 0;
	border-radius: 7px;
	border: 1px solid transparent;
	background: transparent;
	cursor: pointer;
	font-size: 1.22rem;
	transition: transform 140ms ease, background 120ms ease, border-color 120ms ease;
}

.task-icon-menu .quick-icon-chip {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

.quick-icon-chip .ui-emoji-icon {
	font-size: 1.05rem;
	line-height: 1;
}

.quick-icon-chip:hover {
	transform: scale(1.2);
	background: color-mix(in srgb, var(--text) 7%, transparent);
	border-color: color-mix(in srgb, var(--border) 60%, transparent);
	z-index: 1;
	position: relative;
}

.quick-icon-chip.active {
	border-color: #5f72d8;
	background: transparent;
	box-shadow: 0 0 0 1px #5f72d8;
	transform: scale(1.04);
}

.task-icon-menu .quick-icon-chip.active {
	border-color: #5f72d8;
	background: color-mix(in srgb, #5f72d8 10%, transparent);
	box-shadow: 0 0 0 1px #5f72d8;
}

body[data-theme="default"] .quick-icon-picker {
	background: rgba(255, 250, 244, 0.96);
	border-color: rgba(108, 92, 150, 0.14);
	box-shadow:
		0 18px 34px rgba(63, 52, 40, 0.16),
		0 0 0 1px rgba(255, 255, 255, 0.42) inset;
}

body[data-theme="default"] .quick-icon-chip.active {
	background: rgba(255, 250, 244, 0.96);
}

body[data-theme="bw"] .quick-icon-picker {
	background: rgba(228, 228, 228, 0.98);
	border-color: rgba(17, 17, 17, 0.14);
	box-shadow:
		0 16px 30px rgba(20, 20, 20, 0.12),
		0 0 0 1px rgba(255, 255, 255, 0.55) inset;
}

body[data-theme="bw"] .quick-icon-chip.active {
	background: rgba(228, 228, 228, 0.98);
}

body[data-theme="bw"] .quick-icon-chip {
	filter: grayscale(1) saturate(0) contrast(1.5);
}

body[data-theme="bw"] .hero-action-btn,
body[data-theme="bw"] .hero-icon-btn,
body[data-theme="bw"] .help-drawer-title,
body[data-theme="bw"] .help-section-title,
body[data-theme="bw"] .settings-drawer-title,
body[data-theme="bw"] .sched-drawer-title,
body[data-theme="bw"] .sched-toggle-icon {
	filter: grayscale(1) saturate(0) contrast(1.35);
}

body[data-theme="bw"] .task-schedule-trigger,
body[data-theme="bw"] .estimate-trigger,
body[data-theme="bw"] .task-focus-menu-trigger,
body[data-theme="bw"] .focus-menu-section-label,
body[data-theme="bw"] .focus-menu-stop-btn,
body[data-theme="bw"] .focus-menu-pin-btn,
body[data-theme="bw"] .sched-preview-edit-icon,
body[data-theme="bw"] .sched-time-icon,
body[data-theme="bw"] .settings-toggle-label strong,
body[data-theme="bw"] .theme-pick-btn,
body[data-theme="bw"] .font-pick-btn,
body[data-theme="bw"] .font-size-btn,
body[data-theme="bw"] .notes-font-mode-btn,
body[data-theme="bw"] .card-density-btn,
body[data-theme="bw"] #invite-create-btn,
body[data-theme="bw"] #invite-send-email-btn,
body[data-theme="bw"] #private-mode-start,
body[data-theme="bw"] #toggle-password-form,
body[data-theme="bw"] #open-weekly-review,
body[data-theme="bw"] .private-mode-badge,
body[data-theme="bw"] .sched-close-btn,
body[data-theme="bw"] #weekly-review-content h3 {
	filter: grayscale(1) saturate(0) contrast(1.35);
}

body[data-theme="bw"] .theme-pick-btn.is-active,
body[data-theme="bw"] .font-pick-btn.is-active,
body[data-theme="bw"] .font-size-btn.is-active,
body[data-theme="bw"] .notes-font-mode-btn.is-active,
body[data-theme="bw"] .card-density-btn.is-active {
	background: rgba(17, 17, 17, 0.12);
	border-color: rgba(17, 17, 17, 0.22);
	box-shadow: none;
	color: #111;
}

body[data-theme="bw"] .private-mode-badge,
body[data-theme="bw"] .private-mode-badge.is-active {
	background: rgba(17, 17, 17, 0.08);
	border-color: rgba(17, 17, 17, 0.18);
	box-shadow: none;
	color: #111;
}

body[data-theme="bw"] .weekly-area-bar-bg {
	background: rgba(17, 17, 17, 0.12);
}

body[data-theme="bw"] .weekly-area-bar-fill {
	background: linear-gradient(90deg, rgba(17, 17, 17, 0.48), rgba(17, 17, 17, 0.72));
}

.tag {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 4px 10px;
	border-radius: 10px;
	font-size: 0.84rem;
	border: 1px solid var(--border);
	background: var(--surface-mid);
	transition:
		transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
		background 160ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

button.tag {
	appearance: none;
	font: inherit;
	color: inherit;
}

.task-menu-trigger {
	gap: 6px;
	min-width: 128px;
	justify-content: space-between;
	padding-right: 8px;
}

.task-tags .task-menu-trigger {
	min-width: 124px;
}

.task-tags .task-area-trigger,
.task-tags .task-status-trigger,
.task-tags .task-energy-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	min-width: 124px;
	min-height: var(--task-card-menu-height);
	padding: 5px 8px 5px 11px;
	border-radius: 8px;
	box-sizing: border-box;
	line-height: 1.1;
}

.task-tags .tag {
	white-space: nowrap;
}

.task-menu-trigger::after {
	content: "▾";
	font-size: 0.72em;
	opacity: 0.72;
	transform: translateY(-0.02em);
}

.task-menu-trigger[aria-expanded="true"] {
	background: color-mix(in srgb, currentColor 12%, var(--mix-base));
	border-color: color-mix(in srgb, currentColor 34%, transparent);
}

.task-menu-trigger[aria-expanded="true"]::after {
	content: "▴";
	opacity: 0.88;
}

.task-menu-trigger.task-energy-trigger.energy-none {
	color: var(--status-inbox);
	border-color: color-mix(in srgb, var(--status-inbox) 28%, transparent);
	background: var(--surface-mid);
}

.task-menu-trigger.task-energy-trigger.energy-low {
	color: var(--low);
	border-color: color-mix(in srgb, var(--low) 28%, transparent);
	background: var(--surface-mid);
}

.task-menu-trigger.task-energy-trigger.energy-medium {
	color: var(--medium);
	border-color: color-mix(in srgb, var(--medium) 30%, transparent);
	background: var(--surface-mid);
}

.task-menu-trigger.task-energy-trigger.energy-high {
	color: var(--high);
	border-color: color-mix(in srgb, var(--high) 28%, transparent);
	background: var(--surface-mid);
}

.task-menu-trigger.task-energy-trigger.energy-very-high {
	color: var(--very-high);
	border-color: color-mix(in srgb, var(--very-high) 28%, transparent);
	background: var(--surface-mid);
}

@media (hover: hover) and (pointer: fine) {

	.task-tags .tag:hover,
	.task-tags .task-menu-trigger:hover {
		transform: translateY(-1px);
		box-shadow: 0 8px 16px rgba(10, 14, 30, 0.08);
	}
}

@media (max-width: 640px) {
	.task-quick-menus {
		width: min(180px, 100%);
		max-width: min(100%, 180px);
	}
}

.tag.area-ctx01 {
	color: var(--ctx01);
	border-color: color-mix(in srgb, var(--ctx01) 28%, transparent);
	background: color-mix(in srgb, var(--ctx01) 10%, var(--mix-base));
}

.tag.area-ctx02 {
	color: var(--ctx02);
	border-color: color-mix(in srgb, var(--ctx02) 28%, transparent);
	background: color-mix(in srgb, var(--ctx02) 10%, var(--mix-base));
}

.tag.area-ctx03 {
	color: var(--ctx03);
	border-color: color-mix(in srgb, var(--ctx03) 28%, transparent);
	background: color-mix(in srgb, var(--ctx03) 10%, var(--mix-base));
}

.tag.area-ctx04 {
	color: var(--ctx04);
	border-color: color-mix(in srgb, var(--ctx04) 28%, transparent);
	background: color-mix(in srgb, var(--ctx04) 10%, var(--mix-base));
}

.tag.area-ctx05 {
	color: var(--ctx05);
	border-color: color-mix(in srgb, var(--ctx05) 28%, transparent);
	background: color-mix(in srgb, var(--ctx05) 10%, var(--mix-base));
}

.tag.area-ctx06 {
	color: var(--ctx06);
	border-color: color-mix(in srgb, var(--ctx06) 28%, transparent);
	background: color-mix(in srgb, var(--ctx06) 10%, var(--mix-base));
}

.tag.area-ctx07 {
	color: var(--ctx07);
	border-color: color-mix(in srgb, var(--ctx07) 28%, transparent);
	background: color-mix(in srgb, var(--ctx07) 10%, var(--mix-base));
}

.tag.area-ctx08 {
	color: var(--ctx08);
	border-color: color-mix(in srgb, var(--ctx08) 28%, transparent);
	background: color-mix(in srgb, var(--ctx08) 10%, var(--mix-base));
}

.tag.area-ctx09 {
	color: var(--ctx09);
	border-color: color-mix(in srgb, var(--ctx09) 28%, transparent);
	background: color-mix(in srgb, var(--ctx09) 10%, var(--mix-base));
}

.tag.area-ctx10 {
	color: var(--ctx10);
	border-color: color-mix(in srgb, var(--ctx10) 28%, transparent);
	background: color-mix(in srgb, var(--ctx10) 10%, var(--mix-base));
}

.tag.area-ctx11 {
	color: var(--ctx11);
	border-color: color-mix(in srgb, var(--ctx11) 28%, transparent);
	background: color-mix(in srgb, var(--ctx11) 10%, var(--mix-base));
}

.tag.area-ctx12 {
	color: var(--ctx12);
	border-color: color-mix(in srgb, var(--ctx12) 28%, transparent);
	background: color-mix(in srgb, var(--ctx12) 10%, var(--mix-base));
}

.task-action {
	font-size: 0.86rem;
	padding: 5px 9px;
	min-height: 28px;
	border-radius: 10px;
}

.icon-only-button {
	min-width: 32px;
	width: 32px;
	padding: 0;
	font-size: 1rem;
}

.task-action[data-variant="danger"] {
	color: #8f2727;
}

.task-meta-time {
	margin-top: 10px;
	padding-top: 4px;
	color: var(--muted);
	font-size: 0.64rem;
	opacity: 0.58;
	letter-spacing: 0.01em;
}

.warning-text {
	margin-top: 10px;
	color: #8f2727;
	font-size: 0.92rem;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

@media (max-width: 860px) {

	.hero,
	.board,
	.filter-row {
		grid-template-columns: 1fr;
	}

	.hero-meta,
	.task-quick {
		grid-template-columns: 1fr;
		display: grid;
	}

	.composer-icon-panel {
		width: min(304px, calc(100vw - 40px));
	}

	.panel-head {
		flex-direction: column;
	}

	/* Neue Aufgabe: ✕ ganz rechts, Zurücksetzen direkt links daneben */
	.composer-head .panel-head-actions {
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-end;
		align-items: center;
		gap: 8px;
		width: 100%;
	}

	.edit-panel-head .panel-head-actions {
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-end;
		align-items: center;
		gap: 8px;
		width: 100%;
	}

	.checkbox-row span {
		margin-left: 8px;
	}
}

@media (max-width: 640px) {

	.top-chrome {
		gap: 8px;
		padding-top: max(8px, env(safe-area-inset-top, 0px));
		padding-bottom: 6px;
		background: color-mix(in srgb, var(--bg) 92%, var(--panel));
		border-color: color-mix(in srgb, var(--border) 76%, transparent);
		box-shadow:
			0 10px 28px rgba(8, 10, 24, 0.14),
			inset 0 1px 0 rgba(255, 255, 255, 0.04);
	}

	/* Unterkante des sticky top-chrome (Padding + Hero mit Board-Zeile) — Heute-Kopf klebt darunter, nicht darunter weg. */
	:root {
		--nf-sticky-chrome-bottom: max(8.125rem,
				calc(env(safe-area-inset-top, 0px) + 8px + 10px + 40px + 8px + 44px + 9px + 6px));
	}

	.build-badge {
		display: none;
	}

	/* ── App Shell ─────────────────────────────────────────── */
	.app-shell {
		width: min(100%, calc(100% - 12px));
		padding: 8px 0 max(24px, env(safe-area-inset-bottom, 0px));
	}

	/* ── Panels & Cards: abgerundeter ──────────────────────── */
	.hero,
	.panel {
		border-radius: 10px;
	}

	.board-column {
		--column-shell-radius: 18px;
		border-radius: var(--column-shell-radius);
	}

	/* ── Hero: kompakte Kopfzeile ──────────────────────────── */
	.hero {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"brand actions"
			"board board";
		gap: 10px 8px;
		row-gap: 8px;
		padding: 11px 12px 10px;
		align-items: center;
	}

	.brand {
		grid-area: brand;
		gap: 7px;
		flex-shrink: 1;
		min-width: 0;
	}

	.hero-trail {
		display: contents;
	}

	.hero-board-switch {
		grid-area: board;
		max-width: none;
		width: 100%;
		justify-content: stretch;
		box-sizing: border-box;
		min-height: calc(var(--nf-menu-control-height) + 12px + 2px);
		padding: 6px 10px;
		border-radius: 16px;
		border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
		background: color-mix(in srgb, var(--surface) 84%, transparent);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	}

	.hero-board-switch.is-hidden,
	.hero-board-switch[hidden] {
		display: none !important;
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
	}

	.hero-actions {
		grid-area: actions;
	}

	.brand-mark {
		width: 36px;
		height: 36px;
		border-radius: 11px;
		flex-shrink: 0;
	}

	.brand-copy {
		overflow: hidden;
		max-width: min(118px, 34vw);
	}

	.brand-domain {
		font-size: clamp(0.58rem, 3.1vw, 0.65rem);
		letter-spacing: 0.05em;
	}

	/* ── Header-Buttons: einzeilig auf Mobile ─────────────────────────────── */
	.hero-actions {
		display: flex;
		flex-wrap: nowrap;
		gap: 6px;
		flex-shrink: 0;
		justify-content: flex-end;
		align-items: center;
	}

	/* Overflow-Buttons gehören auf Phone ins „Mehr"-Menü (Schnellnotiz: ➕ und 📅 dazwischen sichtbar) */
	#focus-mode-btn,
	#open-help,
	#open-trash-header,
	#open-settings,
	.hero-logout-btn {
		display: none !important;
	}

	/* „Mehr“-Menü aktiv (Einstellung): nur ➕ und 🔽 bleiben direkt im Kopf. */
	body.nf-hero-phone-minimal #open-quick-note,
	body.nf-hero-phone-minimal #open-shopping-list,
	body.nf-hero-phone-minimal #open-contacts,
	body.nf-hero-phone-minimal #open-medications,
	body.nf-hero-phone-minimal #toggle-scheduled,
	body.nf-hero-phone-minimal #toggle-search {
		display: none !important;
	}

	#open-quick-note {
		display: inline-flex !important;
	}

	.settings-drawer,
	.notes-drawer,
	.help-drawer,
	.sched-drawer,
	.edit-panel,
	.composer {
		width: 100vw;
		max-width: 100vw;
	}

	.hero-action-btn {
		width: 36px;
		height: 36px;
		border-radius: 11px;
		font-size: 0.95rem;
	}

	.hero-new-btn {
		font-size: 1rem;
	}

	.hero-new-btn .hero-emoji-icon {
		font-size: 1.22rem;
	}

	.hero-sched-badge {
		top: -4px;
		right: -4px;
		min-width: 18px;
		height: 18px;
		border-radius: 10px;
		line-height: 18px;
	}

	/* ⏰ Auf Phone immer sichtbar – unabhängig vom »Mehr«-Menü-Setting */
	#open-mobile-more:not(.is-hidden) {
		display: inline-flex !important;
	}

	/* ── h1 (Panel-Titel etc.) ─────────────────────────────── */
	h1 {
		font-size: clamp(1.3rem, 7vw, 2rem);
		line-height: 1;
	}

	/* ── Hero Meta (Board-Info, Account) ───────────────────── */
	.hero-meta {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		width: 100%;
	}

	.meta-board-card,
	.meta-account-card {
		min-width: 0;
		max-width: none;
	}

	.meta-tools-panel {
		min-width: 0;
		position: static;
		box-shadow: none;
		padding: 10px 0 0;
		border: 0;
		border-top: 1px solid var(--border);
		border-radius: 0;
		background: transparent;
	}

	.meta-tool-actions {
		grid-template-columns: 1fr;
	}

	.meta-card {
		min-width: 0;
		padding: 10px 12px;
	}

	/* ── Panel (Sync, etc.) ────────────────────────────────── */
	.panel {
		margin-top: 8px;
		padding: 12px;
	}

	.panel-head {
		gap: 10px;
		margin-bottom: 12px;
	}

	.panel-head-actions,
	.sync-actions,
	.task-actions {
		width: 100%;
	}

	.panel-head-actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	/* Composer-Kopf: Titel links, Buttons rechts in einer Zeile */
	.composer-head.panel-head {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.composer-head .panel-head-actions {
		display: flex;
		flex-direction: row;
		grid-template-columns: unset;
		width: auto;
		gap: 8px;
		flex-shrink: 0;
	}

	/* Bearbeiten-Panel: wie Composer — Zähler + Buttons in einer Zeile, nicht 100%-Grid */
	.edit-panel-head .panel-head-actions {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		grid-template-columns: unset;
		width: auto;
		gap: 8px;
		flex-shrink: 0;
		justify-content: flex-end;
	}

	.composer-head .composer-reset-btn {
		width: auto;
	}

	.toolbar-spacer {
		display: none;
	}

	.sync-actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Einheitliche 32px-Zeile (mehrzeilige Optionen wachsen mit Inhalt) */
	.ghost-button:not(.subtask-add-btn),
	.primary-button,
	.task-action {
		min-height: 32px;
		height: auto;
		padding: 0 12px;
		font-size: 0.88rem;
		border-radius: 12px;
	}

	/* „Mehr“-Sheet: kompakte Zeilen (Touch-32px-Regel + Basis-.ghost-button aushebeln) */
	#hero-more-sheet.hero-more-sheet .hero-more-sheet-body {
		grid-auto-rows: min-content;
		align-content: start;
		gap: 1px;
	}

	#hero-more-sheet.hero-more-sheet .ghost-button.hero-more-action,
	#hero-more-sheet.hero-more-sheet a.hero-more-action.link-button {
		min-height: 0 !important;
		height: auto !important;
		max-height: none !important;
		padding: 0 8px !important;
		border-radius: 8px;
		font-size: 0.78rem !important;
		line-height: 1.08 !important;
		justify-content: flex-start !important;
	}

	.hero-more-sheet .hero-more-sheet-head {
		min-height: 0 !important;
		padding-top: 6px !important;
		padding-bottom: 4px !important;
		align-items: center;
	}

	/* ⋮ Drei-Punkt-Menü */
	.task-menu-toggle {
		width: 32px;
		height: 32px;
		flex: 0 0 32px;
		border-radius: 10px;
		font-size: 1.05rem;
	}

	/* Option-Buttons (Bereich / Energie / Status) */
	.task-area-option,
	.task-energy-option,
	.task-status-option {
		min-height: 0;
		padding: 6px 10px;
		font-size: 0.86rem;
		border-radius: 10px;
	}

	/* Über top-chrome (z=120) und task-menu-backdrop (z=200), sonst liegt das Sheet
     visuell *hinter* dem Backdrop und wirkt oben abgeschnitten / eckig. */
	.task-card-wrap:has(.task-menu-anchor.is-open),
	.task-card-wrap:has(.task-menu-anchor:focus-within) {
		position: relative;
		z-index: 5020;
		overflow: visible;
	}

	.task-menu-anchor.is-open {
		z-index: 5030;
	}

	/* backdrop-filter auf der Karte = neuer Bezugsrahmen für position:fixed → Sheet
     klebt an der Karte statt am Viewport; Filter kurz aus, solange ein Menü offen ist. */
	.task-card:has(.task-menu-anchor.is-open),
	.task-card:has(.task-menu-anchor:focus-within) {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	/* Position: per JS --task-menu-vp-* am .task-menu-anchor (nah am Trigger), Fallback = Bottom-Sheet */
	.task-menu-anchor.is-open>.task-quick-menus,
	.task-menu-anchor:focus-within>.task-quick-menus,
	.task-quick-menus.is-task-menu-portal {
		position: fixed;
		left: var(--task-menu-vp-left, 50%);
		right: auto;
		top: var(--task-menu-vp-top, auto);
		bottom: var(--task-menu-vp-bottom, 0);
		display: flex;
		flex-direction: column;
		align-items: stretch;
		box-sizing: border-box;
		width: fit-content;
		max-width: calc(100vw - 24px);
		min-width: min(248px, calc(100vw - 24px));
		transform: var(--task-menu-vp-transform, translateX(-50%));
		max-height: var(--task-menu-vp-max-height, min(62svh, 62vh));
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		/* Mehr Luft rechts: dunkle Hülle klar hinter dem Text, optisch nach rechts erweitert */
		padding: 12px max(22px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) 14px;
		gap: 8px;
		pointer-events: auto;
		z-index: 5040;
		border-radius: 20px 20px 0 0;
		border: 1px solid var(--border);
		border-bottom: 0;
		background: color-mix(in srgb, var(--mix-base) 98%, #070914);
		background-clip: padding-box;
		box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.task-menu-anchor.is-open>.task-quick-menus.task-quick-menus--vp-anchor,
	.task-menu-anchor:focus-within>.task-quick-menus.task-quick-menus--vp-anchor,
	.task-quick-menus.is-task-menu-portal.task-quick-menus--vp-anchor {
		padding-bottom: 14px;
		padding-right: max(26px, calc(env(safe-area-inset-right, 0px) + 10px));
		border-radius: 16px;
		border-bottom: 1px solid var(--border);
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
	}

	/* ⋯-Menü: schmale Hülle (nur wenig Luft zu den Zeilen), kein 300px-Mindestbreite */
	.task-menu-anchor.task-action-popover-anchor.is-open>.task-quick-menus,
	.task-menu-anchor.task-action-popover-anchor:focus-within>.task-quick-menus,
	.task-quick-menus.is-task-menu-portal:has(.task-action-menu) {
		min-width: 0;
		width: min(164px, calc(100vw - 24px));
		max-width: min(calc(100vw - 24px), 164px);
		padding: 10px max(14px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
		min-width: min(148px, calc(100vw - 24px));
	}

	.task-menu-anchor.task-action-popover-anchor.is-open>.task-quick-menus.task-quick-menus--vp-anchor,
	.task-menu-anchor.task-action-popover-anchor:focus-within>.task-quick-menus.task-quick-menus--vp-anchor,
	.task-quick-menus.is-task-menu-portal.task-quick-menus--vp-anchor:has(.task-action-menu) {
		padding-bottom: 12px;
		padding-right: max(14px, calc(env(safe-area-inset-right, 0px) + 4px));
		padding-left: max(14px, env(safe-area-inset-left, 0px));
	}

	.task-menu-anchor.is-open>.task-quick-menus::before,
	.task-menu-anchor:focus-within>.task-quick-menus::before {
		display: none;
	}

	.task-focus-popover.task-quick-menus,
	.task-schedule-anchor>.task-quick-menus {
		width: auto;
		max-width: calc(100vw - 24px);
		min-width: 0;
	}

	/* Desktop-Fokus-Popover nutzt translateY(-50%) — höhere Spezifität würde sonst das
     Bottom-Sheet nach oben schieben / verzerren. */
	.task-menu-anchor.task-focus-menu-anchor.is-open>.task-quick-menus.task-focus-popover,
	.task-menu-anchor.task-focus-menu-anchor:focus-within>.task-quick-menus.task-focus-popover {
		transform: var(--task-menu-vp-transform, translateY(0));
		top: var(--task-menu-vp-top, auto);
		bottom: var(--task-menu-vp-bottom, 0);
	}

	.task-menu-anchor.is-open>.task-quick-menus.task-focus-popover .task-focus-menu,
	.task-menu-anchor:focus-within>.task-quick-menus.task-focus-popover .task-focus-menu,
	.task-quick-menus.is-task-menu-portal.task-focus-popover .task-focus-menu {
		background: transparent;
		box-shadow: none;
		border-radius: 0;
		min-width: 0;
		width: 100%;
	}

	.task-menu-anchor.is-open>.task-quick-menus .task-action-menu .task-focus-menu.task-action-menu__focus,
	.task-menu-anchor:focus-within>.task-quick-menus .task-action-menu .task-focus-menu.task-action-menu__focus {
		background: transparent;
		box-shadow: none;
		border-radius: 0;
		min-width: 0;
		width: 100%;
		padding: 4px 0 2px;
	}

	.task-area-menu,
	.task-energy-menu,
	.task-status-menu {
		gap: 0;
		align-content: start;
	}

	.task-mobile-menu-title {
		margin: 0 0 12px;
		color: var(--muted);
		font-size: 0.7rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.task-menu-anchor.is-open>.task-quick-menus .task-mobile-menu-title,
	.task-menu-anchor:focus-within>.task-quick-menus .task-mobile-menu-title,
	.task-quick-menus.is-task-menu-portal .task-mobile-menu-title {
		text-align: left;
	}

	/* Aktionen-Menü: volle Breite der Hülle, Text wie bei Bereich/Energie linksbündig */
	.task-menu-anchor.is-open>.task-quick-menus .task-action-menu,
	.task-menu-anchor:focus-within>.task-quick-menus .task-action-menu,
	.task-quick-menus.is-task-menu-portal .task-action-menu {
		width: 100%;
		min-width: 0;
		max-width: 100%;
		box-sizing: border-box;
		flex-shrink: 0;
	}

	.task-menu-anchor.task-action-popover-anchor.is-open>.task-quick-menus .task-action-menu,
	.task-menu-anchor.task-action-popover-anchor:focus-within>.task-quick-menus .task-action-menu,
	.task-quick-menus.is-task-menu-portal .task-action-menu {
		width: 100%;
		min-width: 0;
		max-width: 100%;
	}

	.task-menu-anchor.is-open>.task-quick-menus .task-action-menu .task-action-option,
	.task-menu-anchor:focus-within>.task-quick-menus .task-action-menu .task-action-option,
	.task-quick-menus.is-task-menu-portal .task-action-menu .task-action-option {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		text-align: left;
		width: 100%;
		box-sizing: border-box;
	}

	.task-menu-anchor.task-action-popover-anchor.is-open>.task-quick-menus .task-action-menu .task-action-option,
	.task-menu-anchor.task-action-popover-anchor:focus-within>.task-quick-menus .task-action-menu .task-action-option,
	.task-quick-menus.is-task-menu-portal .task-action-menu .task-action-option {
		width: 100%;
		min-width: 100%;
	}

	.task-menu-anchor.is-open>.task-quick-menus .task-area-option,
	.task-menu-anchor.is-open>.task-quick-menus .task-energy-option,
	.task-menu-anchor.is-open>.task-quick-menus .task-status-option,
	.task-menu-anchor:focus-within>.task-quick-menus .task-area-option,
	.task-menu-anchor:focus-within>.task-quick-menus .task-energy-option,
	.task-menu-anchor:focus-within>.task-quick-menus .task-status-option,
	.task-quick-menus.is-task-menu-portal .task-area-option,
	.task-quick-menus.is-task-menu-portal .task-energy-option,
	.task-quick-menus.is-task-menu-portal .task-status-option {
		/* Breite durch Inhalt treiben, nicht durch Container aufblähen */
		width: 100%;
		box-sizing: border-box;
		align-items: center;
		justify-content: flex-start;
		text-align: left;
	}

	.task-area-option,
	.task-energy-option,
	.task-status-option {
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		white-space: nowrap;
		line-height: 1.2;
		min-height: 0;
		padding: 7px 10px;
		margin: 0;
	}

	.task-option-main {
		font-weight: 700;
	}

	/* Subtexte in den Quick-Menüs ausgeblendet — nur Überschrift */
	.task-option-hint {
		display: none;
	}

	.task-quick-menus .task-area-option:not(.active),
	.task-quick-menus .task-energy-option:not(.active),
	.task-quick-menus .task-status-option:not(.active) {
		opacity: 0.92;
	}

	/* Choice-Buttons im Composer */
	.composer-choice-button {
		min-height: 32px;
		height: auto;
		padding: 4px 4px;
		font-size: 0.78rem;
	}

	/* Schließen-Buttons in Drawers */
	.settings-close-btn,
	.sched-close-btn {
		width: 32px;
		height: 32px;
		border-radius: 10px;
		font-size: 0.95rem;
	}

	/* Copy / Inline-Edit in Karten: größere Tippfläche ───── */
	.copy-button {
		display: none;
	}

	.inline-edit-button {
		top: 6px;
		right: 8px;
		width: 32px;
		height: 32px;
	}

	/* ── Drawers: vollbreite + Safe Area ───────────────────── */
	.settings-drawer,
	.notes-drawer,
	.help-drawer,
	.edit-panel,
	.sched-drawer {
		width: 100%;
	}

	.settings-drawer-body,
	.notes-drawer-body,
	.help-drawer-body,
	.edit-panel-body,
	.sched-drawer-body {
		padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));
	}

	/* ── Composer: Bottom-Sheet statt zentriertes Modal ────── */
	.composer-modal {
		padding: 0;
		align-items: flex-end;
	}

	.composer {
		width: 100%;
		max-height: min(96dvh, 96vh);
		border-radius: 24px 24px 0 0;
		overflow: auto;
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	/* Composer-Grid: 1 Spalte für Stabilität ─────────────── */
	.composer-grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	#task-recurrence {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#task-estimate,
	.estimate-chip-group {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.edit-panel-body .task-editor-fields {
		grid-template-columns: 1fr;
	}

	/* Kontext / Status / Energie: 3 gleiche Spalten nebeneinander */
	.composer-meta-strip {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px;
		margin: 6px 0 10px;
	}

	.composer-meta-strip .composer-choice-group {
		grid-template-columns: 1fr;
		gap: 3px;
	}

	.composer-meta-strip .composer-choice>span {
		font-size: 0.66rem;
	}

	.composer-meta-strip .composer-choice-button {
		font-size: 0.74rem;
		padding: 5px 2px;
		min-height: 30px;
	}

	.task-form-under-text-row {
		flex-direction: column;
		align-items: stretch;
	}

	/* Etwas kompakter, damit „Wöchentlich“ neben den anderen Adverbien oft in eine Zeile passt */
	#task-recurrence .composer-choice-button {
		font-size: 0.7rem;
		padding-inline: 3px;
	}

	/* ── Texteingaben: ≥16px verhindert iOS-Auto-Zoom ──────── */
	textarea,
	select,
	input[type="text"],
	input[type="email"],
	input[type="search"],
	input[type="password"],
	input[type="datetime-local"],
	input[type="time"],
	input[type="number"] {
		font-size: max(1rem, 16px) !important;
	}

	textarea {
		min-height: 88px;
		padding: 12px 14px;
	}

	.textarea-wrap textarea {
		min-height: 88px;
		padding: 12px 12px 32px;
	}

	/* ── Symbol-Picker ─────────────────────────────────────── */
	.icon-picker,
	.quick-icon-picker,
	.task-area-menu {
		gap: 6px;
	}

	.icon-picker {
		max-width: 100%;
		padding-bottom: 2px;
	}

	.quick-icon-picker {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	/* Icon-Chips: Höhe wie Karten-Symbolspalte (--task-card-menu-height) */
	.icon-chip,
	.quick-icon-chip {
		width: 32px;
		height: 32px;
		flex: 0 0 32px;
		padding: 0;
		font-size: 1.05rem;
	}

	/* ── Board: Einzelspalte auf dem Phone ─────────────────── */
	.board {
		gap: 8px;
		margin-top: 8px;
		grid-template-columns: 1fr;
	}

	/* Geplant-Layout: alle Spalten in Einzelspalte ─────────── */
	.board-column[data-status="done"] {
		grid-column: 1;
	}

	.board.has-scheduled .board-column {
		grid-column: 1 !important;
		grid-row: auto !important;
	}

	.column-head,
	.column-body {
		padding-left: 12px;
		padding-right: 12px;
	}

	.column-body {
		padding-top: 10px;
		padding-bottom: 10px;
		min-height: 52px;
		gap: 8px;
	}

	/* ── Aufgaben-Karten ───────────────────────────────────── */
	.task-card {
		gap: 8px;
		padding: 10px;
		border-radius: 15px;
		background: color-mix(in srgb, var(--surface-strong) 84%, transparent);
		backdrop-filter: blur(16px) saturate(125%);
		-webkit-backdrop-filter: blur(16px) saturate(125%);
	}

	.task-head {
		grid-template-columns: var(--task-card-menu-height) 1fr;
		column-gap: 9px;
		row-gap: 10px;
	}

	.task-symbol-col {
		width: var(--task-card-menu-height);
	}

	.task-text {
		font-size: 0.92rem;
	}

	.task-text-inner {
		box-sizing: border-box;
		min-height: var(--task-card-menu-height);
		padding: 5px 8px;
		padding-right: 10px;
		border-radius: 10px;
	}

	.task-symbol-col>.task-menu-anchor,
	.task-symbol-col>.task-menu-anchor>.task-symbol,
	.task-symbol {
		width: var(--task-card-menu-height);
		min-width: var(--task-card-menu-height);
		min-height: var(--task-card-menu-height);
		height: var(--task-card-menu-height);
	}

	.icon-chip,
	.quick-icon-chip {
		width: 32px;
		height: 32px;
		flex: 0 0 32px;
		padding: 0;
		font-size: 1.05rem;
	}

	/* ── Tags ──────────────────────────────────────────────── */
	.task-tags {
		gap: var(--nf-phone-task-control-gap, 6px);
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-content: stretch;
		align-items: stretch;
	}

	.task-tags>.task-menu-anchor {
		min-width: 0;
		width: 100%;
		max-width: 100%;
	}

	.task-tags .task-area-trigger,
	.task-tags .task-status-trigger {
		width: 100%;
		min-width: 0;
		max-width: 100%;
		box-sizing: border-box;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.task-card.task-card--phone-layout .task-tags:has(> :only-child) {
		grid-template-columns: minmax(0, 1fr);
	}

	.tag {
		min-height: 26px;
		padding: 4px 8px;
		font-size: 0.74rem;
	}

	.task-actions {
		width: 100%;
		justify-content: flex-end;
		margin-left: 0;
		gap: 4px;
	}

	.task-footer {
		grid-column: 1 / -1;
		grid-row: 2;
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
		padding-left: calc(var(--task-card-menu-height) + 9px);
	}

	.task-pomo-col {
		display: none;
	}

	.task-head>.task-schedule-row {
		grid-column: 1 / -1;
		grid-row: 3;
		padding-left: calc(var(--task-card-menu-height) + 9px);
		gap: 5px;
		flex-wrap: wrap;
	}

	body[data-card-density="compact"] .task-footer {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	body[data-card-density="compact"] .task-footer .task-tags {
		width: auto;
		max-width: 100%;
	}

	body[data-card-density="compact"] .task-footer .task-schedule-row {
		grid-column: unset;
		grid-row: unset;
		padding-left: 0;
	}

	.task-menu-toggle {
		margin-left: auto;
	}

	.task-meta-time {
		margin-top: 6px;
		margin-left: calc(var(--task-card-menu-height) + 9px);
	}

	.task-schedule-row .tag,
	.task-actions .tag {
		min-height: var(--task-card-menu-height);
		padding: 5px 10px;
		font-size: 0.82rem;
		line-height: 1.15;
		box-sizing: border-box;
	}

	/* ── Zeit-Schnellwahl (Chips) ──────────────────────────── */
	.time-quick-btn {
		min-height: var(--nf-menu-control-height);
		padding: 0 10px;
		font-size: 0.78rem;
	}

	/* ── Sched-Toggle-Zeile ────────────────────────────────── */
	.sched-toggle-row {
		min-height: var(--nf-menu-control-height);
		padding: 8px 14px;
	}

	/* ── Sched-Vis-Chips ───────────────────────────────────── */
	.sched-vis-chip {
		min-height: var(--nf-menu-control-height);
		padding: 0 12px;
		font-size: 0.8rem;
	}

	/* ── Composer: svh berücksichtigt fixe Browser-UI ──────── */
	.composer {
		max-height: 94svh;
	}

	/* ── Safe Area: Seiten (Notch / Dynamic Island) ─────────── */
	.app-shell {
		padding-left: max(6px, env(safe-area-inset-left, 6px));
		padding-right: max(6px, env(safe-area-inset-right, 6px));
	}

	/* ── iOS Momentum Scrolling in Spalten ──────────────────── */
	.board-column {
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-y: contain;
	}

	/* ── Meta-Karten kompakter ──────────────────────────────── */
	.meta-label {
		font-size: 0.65rem;
	}

	.meta-card strong,
	.meta-card .meta-board-select {
		font-size: 0.9rem;
	}

	.meta-tool-actions,
	.panel-head-actions,
	.sync-actions {
		gap: 8px;
	}

	.settings-tool-grid,
	.drawer-filter-grid,
	.invite-token-code-row,
	.invite-redeem-row,
	.settings-inline-row,
	.settings-board-toolbar-row,
	.account-submit-row,
	.account-profile-actions-row,
	.account-pending-email-row {
		display: grid;
		grid-template-columns: 1fr;
	}

	.invite-redeem-row {
		overflow: visible;
	}

	.invite-redeem-row .invite-token-input {
		width: 100%;
		flex: none;
	}

	.settings-board-toolbar-row--end {
		justify-content: stretch;
	}

	.settings-tool-btn,
	.settings-inline-btn,
	.account-submit-row>*,
	.account-profile-actions-row>*,
	.account-pending-email-row .settings-inline-btn {
		width: 100%;
	}

	/* Pomodoro-Aktionsleiste: Buttons in einer Zeile, kein full-width */
	.field-editor-actions--pomodoro>.ghost-button {
		width: auto;
		flex: 1 1 auto;
	}

	.search-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 220;
		margin: 0;
		border-radius: 16px;
		background: var(--mix-base);
		box-shadow:
			0 14px 28px rgba(7, 8, 22, 0.12);
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
		border-top: 1px solid var(--border);
		border-top-left-radius: 22px;
		border-top-right-radius: 22px;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		transform: translateY(100%);
		transform-origin: bottom center;
		pointer-events: none;
	}

	.search-bar.is-open {
		max-height: min(56svh, 56vh);
		padding: 14px 12px max(16px, env(safe-area-inset-bottom, 0px));
		transform: translateY(0);
		pointer-events: auto;
	}

	.search-bar.is-hidden {
		transform: translateY(100%);
		padding: 0 12px;
		pointer-events: none;
	}

	#search-input {
		height: 32px;
		min-height: 32px;
		padding: 0 12px;
		border-radius: 11px;
		font-size: 0.92rem;
	}

	.search-filter-row {
		grid-template-columns: 1fr;
		gap: 7px;
		margin-top: 8px;
	}

	.search-filter-label .meta-label {
		font-size: 0.6rem;
		letter-spacing: 0.08em;
	}

	.search-filter-select {
		height: var(--nf-menu-control-height);
		min-height: var(--nf-menu-control-height);
		border-radius: 11px;
		font-size: 0.88rem;
	}

	.search-filter-reset {
		height: var(--nf-menu-control-height);
		min-height: var(--nf-menu-control-height);
		margin-top: 0;
		border-radius: 11px;
		font-size: 0.82rem;
	}
}

@media (max-width: 860px) {
	.top-chrome {
		margin-left: -8px;
		margin-right: -8px;
		padding-left: max(10px, env(safe-area-inset-left, 0px));
		padding-right: max(10px, env(safe-area-inset-right, 0px));
		background:
			linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, transparent), color-mix(in srgb, var(--bg) 68%, transparent) 72%, transparent);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
	}

	.composer-modal {
		align-items: flex-end;
	}

	.settings-drawer,
	.notes-drawer,
	.help-drawer,
	.sched-drawer,
	.edit-panel,
	.composer {
		top: auto;
		right: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		/* Feste Höhe: sonst schrumpft das Panel auf den Inhalt und wirkt wie ein schmales
       Streifenfenster unten (z. B. Bearbeiten nach Swipe „Mehr“). */
		height: min(96dvh, 96svh, 96vh);
		max-height: min(96dvh, 96svh, 96vh);
		border-left: 0;
		border-top: 1px solid var(--border);
		border-radius: 24px 24px 0 0;
		box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.22);
	}

	.settings-drawer,
	.notes-drawer,
	.help-drawer,
	.sched-drawer,
	.edit-panel {
		transform: translateY(100%);
	}

	.settings-drawer.is-open,
	.notes-drawer.is-open,
	.help-drawer.is-open,
	.sched-drawer.is-open,
	.edit-panel.is-open {
		transform: translateY(0);
	}

	.settings-drawer-head,
	.notes-drawer-head,
	.help-drawer-head,
	.sched-drawer-head,
	.edit-panel-head,
	.composer-head {
		padding-top: 16px;
	}

	.settings-drawer-body,
	.notes-drawer-body,
	.help-drawer-body,
	.sched-drawer-body,
	.edit-panel-body,
	.composer {
		padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));
	}
}

@media (min-width: 641px) and (max-width: 1024px) {
	.hero {
		gap: 12px;
	}

	.hero-actions {
		display: grid;
		grid-template-columns: repeat(3, 40px);
		grid-auto-rows: 40px;
	}
}

/* ─── iPad Portrait (641–860px) ─────────────────────────────── */

@media (min-width: 641px) and (max-width: 860px) {
	.board {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	.hero {
		grid-template-columns: auto 1fr auto;
		align-items: start;
		gap: 16px;
		padding: 14px 20px 12px;
	}

	.hero-meta {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px;
	}

	.meta-toggle {
		margin-left: 0;
		max-width: none;
	}

	.brand-copy {
		max-width: 180px;
	}

	.column-body {
		gap: 12px;
	}

	.task-card {
		padding: 16px 16px 14px;
	}
}

/* ─── iPad Landscape / Rotation-Safe ────────────────────────── */

@media (min-width: 861px) and (max-width: 1180px) {
	.hero {
		grid-template-columns: auto 1fr auto;
		align-items: start;
		gap: 18px;
		padding: 16px 22px 14px;
	}

	.hero-meta {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px;
		justify-items: stretch;
	}

	.meta-toggle {
		margin-left: 0;
		max-width: none;
	}

	.brand-mark {
		width: 50px;
		height: 50px;
		border-radius: 15px;
		flex-shrink: 0;
	}

	.brand {
		flex-wrap: nowrap;
		overflow: visible;
		min-width: 0;
	}

	.brand-copy {
		min-width: 0;
		overflow: hidden;
		max-width: 220px;
	}

	.brand-domain {
		font-size: 0.7rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.board {
		gap: 16px;
	}

	.settings-drawer,
	.notes-drawer,
	.help-drawer,
	.sched-drawer,
	.edit-panel {
		width: min(480px, 44vw);
	}

	.notes-drawer {
		width: min(760px, 50vw);
	}
}

/* iPad Hochformat → Portrait */
@media (min-width: 641px) and (max-width: 860px) {
	.hero {
		grid-template-columns: auto 1fr auto;
		align-items: start;
		gap: 12px;
	}

	.brand {
		flex-wrap: nowrap;
		min-width: 0;
	}

	.brand-domain {
		font-size: 0.7rem;
		white-space: nowrap;
	}
}

@media (min-width: 1181px) {
	.app-shell {
		width: min(1500px, calc(100% - 40px));
	}

	.top-chrome {
		gap: 9px;
	}

	.hero {
		padding: 14px 24px 12px;
		gap: 16px;
	}

	.hero-actions {
		gap: 10px;
	}

	.board {
		gap: 18px;
	}

	.column-head {
		padding: 20px 22px 16px;
	}

	body[data-card-density="compact"] .column-head {
		padding: 8px 12px;
	}

	.column-body {
		gap: 14px;
		padding: 18px;
	}

	.task-card {
		padding: 18px 18px 16px;
	}

	.task-title {
		font-size: 1.08rem;
	}

	.settings-drawer,
	.notes-drawer,
	.help-drawer,
	.sched-drawer,
	.edit-panel {
		width: min(520px, 34vw);
	}

	.notes-drawer {
		width: min(880px, 50vw);
	}
}


/* ─── Dark-Mode Surface Overrides ─────────────────────────────── */

body[data-theme="dark"] .meta-card {
	background: var(--surface);
}

body[data-theme="dark"] .meta-board-select {
	background: rgba(255, 255, 255, 0.07);
	color: var(--text);
	color-scheme: dark;
}

body[data-theme="dark"] .meta-utility-button {
	background: var(--surface-soft);
}

body[data-theme="dark"] .meta-tools-panel {
	background: color-mix(in srgb, var(--panel) 96%, var(--mix-base));
}

body[data-theme="dark"] .composer-panel,
body[data-theme="dark"] .filters-panel {
	background: var(--panel);
}

body[data-theme="dark"] .task-editor-field,
body[data-theme="dark"] .task-editor-textarea {
	background: var(--input-bg);
	color: var(--text);
	border-color: var(--border);
}

body[data-theme="dark"] .empty-state {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow:
		0 16px 32px rgba(2, 6, 18, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"] .quick-icon-picker,
body[data-theme="dark"] .quick-area-picker,
body[data-theme="dark"] .quick-energy-picker,
body[data-theme="dark"] .quick-status-picker {
	background: var(--panel);
	border-color: var(--border);
}

body[data-theme="dark"] .quick-icon-chip {
	background: transparent;
}

body[data-theme="dark"] .quick-icon-chip.active {
	background: var(--panel);
}

body[data-theme="dark"] .tag {
	background: rgba(255, 255, 255, 0.07);
}

body[data-theme="dark"] .primary-button {
	background: #7356c4;
	color: #f0eaff;
	border-color: #8a6ed4;
}

body[data-theme="dark"] .primary-button:hover {
	background: #8466d4;
	border-color: #9a7ee4;
}

body[data-theme="dark"] .column-head .section-kicker {
	color: rgba(255, 255, 255, 0.7);
}

body[data-theme="dark"] .column-head-colors .color-dot {
	border-color: rgba(255, 255, 255, 0.18);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14);
}

body[data-theme="dark"] .column-meta-colors .color-dot {
	border-color: rgba(255, 255, 255, 0.18);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14);
}

.undo-toast {
	position: fixed;
	bottom: max(24px, env(safe-area-inset-bottom, 24px));
	left: 50%;
	transform: translateX(-50%) translateY(0);
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: var(--text);
	color: var(--bg);
	border-radius: 16px;
	font-size: 0.88rem;
	font-weight: 500;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	z-index: 500;
	animation: toast-in 0.25s ease-out both;
}

.undo-toast--error {
	background: rgba(120, 31, 45, 0.96);
	color: #fff4f6;
}

.undo-toast--success {
	background: rgba(18, 104, 78, 0.96);
	color: #effff9;
}

.undo-toast--warn {
	background: rgba(132, 82, 24, 0.96);
	color: #fff6e8;
}

.undo-toast-btn {
	background: rgba(255, 255, 255, 0.2);
	border: none;
	border-radius: 8px;
	padding: 4px 10px;
	font-size: 0.84rem;
	font-weight: 700;
	color: inherit;
	cursor: pointer;
}

@keyframes toast-in {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(16px);
	}

	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

.nf-confirm-backdrop {
	position: fixed;
	inset: 0;
	z-index: 12000;
	display: grid;
	place-items: center;
	padding: max(18px, env(safe-area-inset-top, 18px)) max(16px, env(safe-area-inset-right, 16px)) max(18px, env(safe-area-inset-bottom, 18px)) max(16px, env(safe-area-inset-left, 16px));
	background: rgba(7, 10, 22, 0.54);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	animation: nf-confirm-fade 0.16s ease-out both;
}

.nf-confirm-dialog {
	width: min(100%, 420px);
	display: grid;
	gap: 12px;
	padding: 18px;
	border-radius: 22px;
	border: 1px solid rgba(129, 142, 199, 0.26);
	background: linear-gradient(180deg, rgba(37, 43, 65, 0.98), rgba(20, 24, 39, 0.98));
	color: var(--text);
	box-shadow: 0 28px 80px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body[data-theme="default"] .nf-confirm-dialog,
body:not([data-theme]) .nf-confirm-dialog {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 255, 0.98));
}

.nf-confirm-dialog h2 {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 800;
}

.nf-confirm-dialog p {
	margin: 0;
	color: var(--muted);
	font-size: 0.92rem;
	line-height: 1.45;
}

.nf-confirm-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 4px;
}

.nf-confirm-accept.is-danger {
	border-color: rgba(234, 109, 109, 0.46);
	background: rgba(234, 109, 109, 0.16);
	color: rgba(255, 218, 218, 0.98);
	font-weight: 800;
}

@keyframes nf-confirm-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes confetti-fly {
	from {
		opacity: 1;
		transform: translate(-50%, -50%) rotate(0deg);
	}

	to {
		opacity: 0;
		transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--r));
	}
}

.task-card[data-energy="none"] {
	border-left: 3px solid color-mix(in srgb, var(--status-inbox) 70%, transparent);
	--task-energy-accent: color-mix(in srgb, var(--status-inbox) 70%, transparent);
}

.task-card[data-energy="low"] {
	border-left: 3px solid color-mix(in srgb, var(--low) 65%, transparent);
	--task-energy-accent: color-mix(in srgb, var(--low) 65%, transparent);
}

.task-card[data-energy="medium"] {
	border-left: 3px solid color-mix(in srgb, var(--medium) 65%, transparent);
	--task-energy-accent: color-mix(in srgb, var(--medium) 65%, transparent);
}

.task-card[data-energy="high"] {
	border-left: 3px solid color-mix(in srgb, var(--high) 65%, transparent);
	--task-energy-accent: color-mix(in srgb, var(--high) 65%, transparent);
}

.task-card[data-energy="very-high"] {
	border-left: 3px solid color-mix(in srgb, var(--very-high) 70%, transparent);
	--task-energy-accent: color-mix(in srgb, var(--very-high) 70%, transparent);
}

.task-card[data-status="done"][data-energy="none"] {
	border-left-color: color-mix(in srgb, var(--status-inbox) 45%, var(--panel));
	--task-energy-accent: color-mix(in srgb, var(--status-inbox) 45%, var(--panel));
}

.task-card[data-status="done"][data-energy="low"] {
	border-left-color: color-mix(in srgb, var(--low) 42%, var(--panel));
	--task-energy-accent: color-mix(in srgb, var(--low) 42%, var(--panel));
}

.task-card[data-status="done"][data-energy="medium"] {
	border-left-color: color-mix(in srgb, var(--medium) 42%, var(--panel));
	--task-energy-accent: color-mix(in srgb, var(--medium) 42%, var(--panel));
}

.task-card[data-status="done"][data-energy="high"] {
	border-left-color: color-mix(in srgb, var(--high) 42%, var(--panel));
	--task-energy-accent: color-mix(in srgb, var(--high) 42%, var(--panel));
}

.task-card[data-status="done"][data-energy="very-high"] {
	border-left-color: color-mix(in srgb, var(--very-high) 45%, var(--panel));
	--task-energy-accent: color-mix(in srgb, var(--very-high) 45%, var(--panel));
}

.task-card.is-paused {
	opacity: 0.72;
	filter: saturate(0.68);
}

.task-card.is-paused .task-text-inner,
.task-card.is-paused .tag,
.task-card.is-paused .task-action,
.task-card.is-paused .task-symbol-button {
	background: color-mix(in srgb, var(--surface-mid) 72%, var(--panel));
}

.task-card.is-paused .task-menu-trigger,
.task-card.is-paused .estimate-trigger,
.task-card.is-paused .task-focus-menu-trigger {
	background: color-mix(in srgb, var(--surface-mid) 74%, var(--panel));
	border-color: color-mix(in srgb, var(--border) 82%, transparent);
	color: color-mix(in srgb, var(--muted) 88%, transparent);
	opacity: 0.68;
}

.task-card.is-paused .task-action-popover-anchor>.task-menu-trigger,
.task-card.is-paused .task-action-menu-caret {
	background: color-mix(in srgb, var(--surface-mid) 86%, var(--panel));
	border-color: color-mix(in srgb, var(--border) 95%, transparent);
	color: color-mix(in srgb, var(--text) 82%, transparent);
	opacity: 0.94;
}

.task-card.is-paused .task-action-popover-anchor>.task-menu-trigger:hover,
.task-card.is-paused .task-action-popover-anchor>.task-menu-trigger:focus-visible {
	opacity: 1;
}

.task-card.is-paused .task-symbol-button,
.task-card.is-paused .task-schedule-trigger {
	cursor: default;
}

.task-card.is-paused .task-menu-anchor:not(.task-action-popover-anchor):hover .task-quick-menus,
.task-card.is-paused .task-menu-anchor:not(.task-action-popover-anchor):focus-within .task-quick-menus,
.task-card.is-paused .task-menu-anchor:not(.task-action-popover-anchor).is-open .task-quick-menus,
.task-card.is-paused .task-menu-anchor:not(.task-action-popover-anchor) .task-quick-menus:hover,
.task-card.is-paused .task-menu-anchor:not(.task-action-popover-anchor) .task-quick-menus:focus-within {
	opacity: 0;
	transform: translateY(4px);
	pointer-events: none;
}

.task-card.is-paused .task-text,
.task-card.is-paused .task-meta-time,
.task-card.is-paused .copy-button {
	opacity: 0.86;
}

.task-card.is-paused[data-energy="none"] {
	border-left-color: color-mix(in srgb, var(--status-inbox) 30%, var(--panel));
	--task-energy-accent: color-mix(in srgb, var(--status-inbox) 30%, var(--panel));
}

.task-card.is-paused[data-energy="low"] {
	border-left-color: color-mix(in srgb, var(--low) 30%, var(--panel));
	--task-energy-accent: color-mix(in srgb, var(--low) 30%, var(--panel));
}

.task-card.is-paused[data-energy="medium"] {
	border-left-color: color-mix(in srgb, var(--medium) 30%, var(--panel));
	--task-energy-accent: color-mix(in srgb, var(--medium) 30%, var(--panel));
}

.task-card.is-paused[data-energy="high"] {
	border-left-color: color-mix(in srgb, var(--high) 30%, var(--panel));
	--task-energy-accent: color-mix(in srgb, var(--high) 30%, var(--panel));
}

.task-card.is-paused[data-energy="very-high"] {
	border-left-color: color-mix(in srgb, var(--very-high) 30%, var(--panel));
	--task-energy-accent: color-mix(in srgb, var(--very-high) 30%, var(--panel));
}

body[data-theme="dark"] .sync-panel {
	background: var(--panel);
	border-color: var(--border);
}

body[data-theme="dark"] input[type="text"],
body[data-theme="dark"] input[type="password"],
body[data-theme="dark"] select,
body[data-theme="dark"] textarea {
	color-scheme: dark;
}

/* ─── Mobile Action Sheet ──────────────────────────────────── */

.task-action-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 200;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.task-action-sheet {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 201;
	padding: 8px 12px max(24px, env(safe-area-inset-bottom, 16px));
	background: var(--panel);
	border-radius: 24px 24px 0 0;
	border-top: 1px solid var(--border);
	box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2);
	display: grid;
	gap: 8px;
	transform: translateY(100%);
	transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
	/* Bis fast unter die Statusleiste – bei vielen Einträgen (z. B. ⋯ Mehr) scrollen */
	max-height: min(92vh, calc(100vh - env(safe-area-inset-top, 0px) - 8px));
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	align-content: start;
}

.task-action-sheet::before {
	content: "";
	display: block;
	width: 36px;
	height: 4px;
	border-radius: 2px;
	background: var(--border);
	margin: 4px auto 8px;
}

.task-action-sheet.is-open {
	transform: translateY(0);
}

.action-sheet-btn {
	width: 100%;
	min-height: 52px;
	padding: 12px 16px;
	border-radius: 16px;
	border: 1px solid var(--border);
	background: var(--surface-mid);
	color: var(--text);
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	text-align: left;
	transition: background 0.12s;
}

.action-sheet-btn:active {
	background: var(--surface-strong);
}

@media (max-width: 640px) {
	.action-sheet-btn {
		text-align: center;
	}
}

.task-card.can-drag {
	cursor: grab;
	will-change: transform, box-shadow, opacity, filter;
}

.settings-toggle-row--reorderable,
.board-list-row.is-reorderable,
.field-editor-row.is-draggable,
.subtask-editor-row.is-draggable {
	cursor: grab;
}

.task-card.is-drag-armed {
	box-shadow: 0 0 0 1px color-mix(in srgb, #7585ff 16%, transparent);
}

.task-card.is-dragging {
	opacity: 0.08;
	transform: scale(0.99);
	cursor: grabbing;
	border-color: color-mix(in srgb, #7585ff 26%, rgba(255, 255, 255, 0.12));
	box-shadow: none;
	filter: saturate(0.94) brightness(0.98);
}

@keyframes nf-drop-spring {
	0% {
		transform: translateY(4px) scale(0.985);
		filter: saturate(1.05) brightness(1.02);
	}

	55% {
		transform: translateY(-2px) scale(1.018);
		filter: saturate(1.08) brightness(1.03);
	}

	78% {
		transform: translateY(1px) scale(0.996);
	}

	100% {
		transform: translateY(0) scale(1);
		filter: saturate(1) brightness(1);
	}
}

.task-card.is-drop-spring,
.column-body.is-drop-spring,
.header-quick-actions-sortable .settings-toggle-row--reorderable.is-drop-spring,
.board-list-row.is-reorderable.is-drop-spring,
.field-editor-row.is-draggable.is-drop-spring,
.subtask-editor-row.is-draggable.is-drop-spring {
	animation: nf-drop-spring 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.is-task-dragging .task-card.can-drag:not(.is-dragging) {
	opacity: 0.84;
	transform: none;
	filter: saturate(0.96);
	transition:
		opacity 160ms cubic-bezier(0.22, 1, 0.36, 1),
		filter 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.is-task-dragging,
body.is-task-dragging * {
	cursor: grabbing !important;
}

@keyframes nf-magnet-slot-glow {
	0% {
		opacity: 0.55;
		transform: scaleX(0.62);
		filter: brightness(1.05);
	}

	18% {
		opacity: 1;
		transform: scaleX(1);
		filter: brightness(1.12);
	}

	55% {
		opacity: 0.9;
		transform: scaleX(0.96);
		filter: brightness(1.06);
	}

	100% {
		opacity: 1;
		transform: scaleX(1);
		filter: brightness(1);
	}
}

.task-card.is-drop-before,
.task-card.is-drop-after,
.task-card-wrap.is-drop-before,
.task-card-wrap.is-drop-after {
	position: relative;
	overflow: visible;
	z-index: 2;
	transition: none;
}

.task-card.is-drop-neighbor-before,
.task-card.is-drop-neighbor-after {
	transform: none;
}

.task-card.is-drop-neighbor-before {
	opacity: 0.99;
}

.task-card.is-drop-neighbor-after {
	opacity: 0.99;
}

.task-card.is-drop-neighbor-before,
.task-card.is-drop-neighbor-after {
	filter: none;
	transition: none;
}

.task-card.is-drop-before::before,
.task-card.is-drop-after::after {
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	height: 5px;
	border-radius: 999px;
	transform-origin: center;
	background:
		linear-gradient(90deg,
			rgba(228, 87, 87, 0.18) 0%,
			rgba(242, 157, 56, 0.96) 14%,
			rgba(240, 207, 79, 0.98) 30%,
			rgba(105, 184, 92, 0.98) 50%,
			rgba(61, 168, 201, 0.96) 70%,
			rgba(95, 114, 216, 0.92) 86%,
			rgba(179, 106, 214, 0.12) 100%);
	box-shadow:
		0 0 0 1px rgba(22, 20, 44, 0.48),
		0 0 18px rgba(95, 114, 216, 0.24),
		0 0 28px rgba(179, 106, 214, 0.16),
		0 0 34px rgba(105, 184, 92, 0.12);
	pointer-events: none;
	animation: nf-magnet-slot-glow 1.35s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.task-card.is-drop-before::before,
.task-card.is-drop-after::after {
	opacity: 0.98;
}

.task-card.is-drop-before::before {
	top: -10px;
}

.task-card.is-drop-after::after {
	bottom: -10px;
}

.task-card.is-drop-before,
.task-card.is-drop-after,
.task-card-wrap.is-drop-before,
.task-card-wrap.is-drop-after {
	box-shadow: none;
}

.task-drop-placeholder {
	height: 0;
	opacity: 0;
	margin: 0;
	border-radius: 22px;
	border: 1px solid rgba(117, 133, 255, 0.24);
	background:
		linear-gradient(180deg, rgba(117, 133, 255, 0.18), rgba(179, 106, 214, 0.18) 48%, rgba(110, 224, 203, 0.14));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.26),
		inset 0 0 0 1px rgba(117, 133, 255, 0.14),
		0 12px 28px rgba(10, 10, 28, 0.08),
		0 0 22px rgba(117, 133, 255, 0.14);
	backdrop-filter: blur(14px) saturate(145%);
	-webkit-backdrop-filter: blur(14px) saturate(145%);
	overflow: hidden;
	pointer-events: none;
	transform: scaleY(0.9);
	transform-origin: center;
	will-change: height, opacity, transform;
	transition:
		height 180ms cubic-bezier(0.16, 1, 0.3, 1),
		opacity 140ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.task-drop-placeholder.is-visible {
	height: var(--task-drop-placeholder-height, 18px);
	opacity: 1;
	transform: scaleY(1);
}

.task-drop-placeholder::before {
	content: "";
	position: absolute;
	inset: 50% 16px auto;
	height: 4px;
	border-radius: inherit;
	transform: translateY(-50%) scaleX(0.94);
	background: linear-gradient(90deg,
			rgba(228, 87, 87, 0.86) 0%,
			rgba(242, 157, 56, 0.96) 15%,
			rgba(240, 207, 79, 0.98) 30%,
			rgba(105, 184, 92, 0.98) 50%,
			rgba(61, 168, 201, 0.96) 70%,
			rgba(95, 114, 216, 0.9) 86%,
			rgba(179, 106, 214, 0.84) 100%);
	box-shadow:
		0 0 0 1px rgba(22, 20, 44, 0.28),
		0 0 12px rgba(242, 157, 56, 0.18),
		0 0 16px rgba(61, 168, 201, 0.14),
		0 0 20px rgba(179, 106, 214, 0.12);
	opacity: 0.92;
	animation: nf-magnet-slot-glow 1.35s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.task-drop-placeholder::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 42%),
		linear-gradient(90deg, rgba(117, 133, 255, 0.08), transparent 18%, transparent 82%, rgba(110, 224, 203, 0.08));
	opacity: 0.46;
}

.nf-task-drag-preview {
	border-radius: var(--nf-task-drag-radius, 20px);
	overflow: hidden;
	clip-path: inset(0 round var(--nf-task-drag-radius, 20px));
	background: transparent !important;
	opacity: 1;
	transform: scale(1.045) rotate(-0.6deg);
	box-shadow:
		0 34px 72px rgba(7, 8, 22, 0.28),
		0 14px 30px rgba(0, 0, 0, 0.16),
		inset 0 1px 0 rgba(255, 255, 255, 0.12);
	filter: saturate(1.08) brightness(1.02);
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

.nf-task-drag-preview.task-card {
	border-color: color-mix(in srgb, var(--task-energy-accent, #7585ff) 46%, rgba(255, 255, 255, 0.16));
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--task-energy-accent, #7585ff) 34%, transparent),
		0 18px 38px rgba(7, 8, 22, 0.18),
		0 8px 18px rgba(0, 0, 0, 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.nf-task-drag-preview.task-card[data-energy] {
	border-left-color: transparent;
	overflow: hidden;
}

.nf-task-drag-preview.task-card[data-energy]::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--task-energy-accent, transparent);
	border-radius: inherit;
	pointer-events: none;
}

.nf-task-drag-preview.task-card-wrap {
	border-radius: var(--nf-task-drag-radius, 20px);
	clip-path: inset(0 round var(--nf-task-drag-radius, 20px));
	overflow: hidden;
	background: transparent;
}

.nf-task-drag-preview.task-card-wrap>.task-swipe-track {
	border-radius: inherit;
	overflow: hidden;
	background: transparent;
}

.nf-task-drag-preview.task-card-wrap>.task-swipe-track>.task-card {
	border-radius: inherit;
	clip-path: inset(0 round var(--nf-task-drag-radius, 20px));
	overflow: hidden;
}

.nf-task-drag-preview .task-card,
.nf-task-drag-preview .task-head,
.nf-task-drag-preview .task-copy,
.nf-task-drag-preview .task-text,
.nf-task-drag-preview .task-tags,
.nf-task-drag-preview .task-menu-toggle,
.nf-task-drag-preview .task-inline-action {
	opacity: 1;
	filter: none;
}

.nf-task-drag-preview .task-card {
	border-color: color-mix(in srgb, var(--task-energy-accent, #7585ff) 46%, rgba(255, 255, 255, 0.16));
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--task-energy-accent, #7585ff) 34%, transparent),
		0 18px 38px rgba(7, 8, 22, 0.18),
		0 8px 18px rgba(0, 0, 0, 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.nf-task-drag-preview .task-card[data-energy] {
	border-left-color: transparent;
	overflow: hidden;
}

.nf-task-drag-preview .task-card[data-energy]::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--task-energy-accent, transparent);
	border-radius: inherit;
	pointer-events: none;
}

.nf-task-drag-preview .task-swipe-behind,
.nf-task-drag-preview .task-swipe-actions,
.nf-task-drag-preview .task-swipe-bg-spacer {
	opacity: 0 !important;
	pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {

	.task-card.can-drag,
	.task-card.is-dragging,
	body.is-task-dragging .task-card.can-drag:not(.is-dragging),
	.task-card.is-drop-before,
	.task-card.is-drop-after,
	.task-card.is-drop-before::before,
	.task-card.is-drop-after::after,
	.task-card.is-drop-spring,
	.column-body.is-drop-spring,
	.header-quick-actions-sortable .settings-toggle-row--reorderable.is-drop-spring,
	.board-list-row.is-reorderable.is-drop-spring,
	.field-editor-row.is-draggable.is-drop-spring,
	.subtask-editor-row.is-draggable.is-drop-spring {
		transition: none !important;
		animation: none !important;
	}
}

body[data-theme="bw"] .task-card.is-drop-before::before,
body[data-theme="bw"] .task-card.is-drop-after::after {
	background: linear-gradient(90deg, rgba(40, 40, 40, 0.72), rgba(96, 96, 96, 0.9));
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.28),
		0 0 12px rgba(24, 24, 24, 0.16);
}

body[data-theme="bw"] .task-card.is-drop-before,
body[data-theme="bw"] .task-card.is-drop-after {
	box-shadow:
		0 0 0 1px rgba(24, 24, 24, 0.18),
		0 14px 32px rgba(24, 24, 24, 0.12);
}

.action-sheet-danger {
	color: #c85858;
	border-color: color-mix(in srgb, #c85858 20%, transparent);
	background: color-mix(in srgb, #c85858 6%, var(--mix-base));
}

.action-sheet-title {
	padding: 4px 4px 8px;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
	text-align: center;
}

.action-sheet-pomo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	gap: 8px;
}

.action-sheet-pomo-btn {
	text-align: center;
	font-size: 1.05rem;
	font-weight: 600;
	min-height: 56px;
}

.action-sheet-cancel {
	margin-top: 4px;
	color: var(--muted);
	font-weight: 600;
}

/* ─── Schedule / Geplant Feature ────────────────────────────── */

.board-toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 2px 6px;
}

.schedule-toggle-btn {
	font-size: 0.85rem;
	padding: 6px 14px;
	border-radius: 20px;
	border: 1px solid var(--border);
	background: var(--surface-soft);
	color: var(--text);
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}

.schedule-toggle-btn:hover {
	background: var(--surface-mid);
	border-color: var(--border);
}

.schedule-count-badge {
	background: #5f72d8;
	color: white;
	font-size: 0.72rem;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 12px;
	min-width: 20px;
	text-align: center;
}

.board-column--scheduled {
	border: 1px solid rgba(95, 114, 216, 0.3);
	background: color-mix(in srgb, #5f72d8 5%, var(--mix-base));
}

.board-column--scheduled .column-head {
	--col-head-tone: color-mix(in srgb, #5f72d8 10%, var(--mix-base));
	background: linear-gradient(to right,
			var(--col-head-tone),
			color-mix(in srgb, var(--col-head-tone) 78%, black));
	border-bottom: 1px solid rgba(95, 114, 216, 0.2);
}

/* Kalender-Datumstrennlinie */
.sched-date-separator {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #5f72d8;
	padding: 14px 2px 6px;
	border-bottom: 1px solid rgba(95, 114, 216, 0.25);
	margin-bottom: 2px;
}

.sched-date-separator:first-child {
	padding-top: 4px;
}

/* Uhrzeit-Chip über jeder Karte */
.sched-time-chip {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85rem;
	font-weight: 700;
	color: #5f72d8;
	padding: 6px 4px 3px;
	margin-top: 4px;
}

body[data-theme="dark"] .sched-time-chip {
	color: #8b9ff0;
}

.sched-time-icon {
	font-size: 1rem;
}

.sched-vis-badge {
	margin-left: auto;
	font-size: 0.68rem;
	font-weight: 600;
	padding: 2px 7px;
	border-radius: 8px;
	background: rgba(95, 114, 216, 0.15);
	color: #5f72d8;
	white-space: nowrap;
}

.sched-vis-always {
	background: rgba(74, 170, 110, 0.15);
	color: #4aaa6e;
}

body[data-theme="dark"] .sched-vis-badge {
	color: #8b9ff0;
	background: rgba(95, 114, 216, 0.18);
}

body[data-theme="dark"] .sched-vis-always {
	color: #5abf82;
	background: rgba(74, 170, 110, 0.15);
}

body[data-theme="bw"] .sched-date-separator {
	color: rgba(17, 17, 17, 0.72);
	border-bottom-color: rgba(17, 17, 17, 0.18);
}

body[data-theme="bw"] .sched-time-chip {
	color: rgba(17, 17, 17, 0.88);
}

body[data-theme="bw"] .sched-vis-badge {
	background: rgba(17, 17, 17, 0.08);
	color: rgba(17, 17, 17, 0.76);
}

body[data-theme="bw"] .sched-vis-always {
	background: rgba(17, 17, 17, 0.08);
	color: rgba(17, 17, 17, 0.76);
}

body[data-theme="bw"] .sched-drawer-head {
	background: color-mix(in srgb, #111111 6%, var(--mix-base));
}

body[data-theme="bw"] .sched-close-btn {
	color: rgba(17, 17, 17, 0.82);
	border-color: rgba(17, 17, 17, 0.2);
	background: rgba(17, 17, 17, 0.06);
}

body[data-theme="bw"] .sched-close-btn:hover {
	background: rgba(17, 17, 17, 0.11);
}

body[data-theme="bw"] .sched-chip-energy {
	color: rgba(17, 17, 17, 0.78);
	background: rgba(17, 17, 17, 0.06);
	border-color: rgba(17, 17, 17, 0.14);
}

body[data-theme="bw"] .sched-preview-edit-icon {
	filter: grayscale(1) saturate(0);
}

/* Schedule tags on task cards — gleiche Höhe/Padding wie Menü-Tags (.task-tags .task-*-trigger) */
.schedule-tag {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	min-height: var(--task-card-menu-height);
	padding: 5px 10px;
	border-radius: 10px;
	font-size: 0.82rem;
	line-height: 1.15;
	box-sizing: border-box;
	max-width: max-content;
}

.schedule-future {
	background: color-mix(in srgb, #5f72d8 15%, var(--mix-base));
	color: #5f72d8;
	border: 1px solid rgba(95, 114, 216, 0.3);
}

body[data-theme="dark"] .schedule-future {
	color: #8b9ff0;
	background: rgba(95, 114, 216, 0.15);
	border-color: rgba(95, 114, 216, 0.3);
}

.schedule-past {
	background: color-mix(in srgb, #4aaa6e 12%, var(--mix-base));
	color: #4aaa6e;
	border: 1px solid rgba(74, 170, 110, 0.3);
}

.task-schedule-row .tag.schedule-tag.task-action {
	min-height: var(--task-card-menu-height);
	padding: 5px 10px;
	font-size: 0.82rem;
	line-height: 1.15;
	box-sizing: border-box;
}

body[data-theme="bw"] .schedule-future,
body[data-theme="bw"] .schedule-past {
	background: rgba(17, 17, 17, 0.06);
	color: rgba(17, 17, 17, 0.86);
	border-color: rgba(17, 17, 17, 0.16);
	filter: grayscale(1) saturate(0);
}

/* Wiederholungs-Vorschau: gleiche Außenmaße wie Menü-Tags */
.task-schedule-row .tag.recurrence-preview-tag {
	min-height: var(--task-card-menu-height);
	padding: 5px 10px;
	font-size: 0.82rem;
	line-height: 1.15;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	color: var(--muted);
	border-color: color-mix(in srgb, var(--muted) 18%, transparent);
	background: color-mix(in srgb, var(--surface-mid) 78%, transparent);
}

.task-schedule-row .tag.recurrence-tag {
	min-height: var(--task-card-menu-height);
	padding: 5px 10px;
	font-size: 0.82rem;
	line-height: 1.15;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
}

/* Composer schedule UI */
.composer-schedule {
	padding: 14px 16px;
	margin-top: 14px;
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: color-mix(in srgb, var(--surface-soft) 80%, rgba(255, 255, 255, 0.02));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.schedule-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 6px;
}

.schedule-label {
	font-size: 0.8rem;
	color: var(--muted);
	font-weight: 500;
	cursor: pointer;
}

.schedule-clear-btn {
	background: none;
	border: none;
	color: var(--muted);
	cursor: pointer;
	font-size: 0.85rem;
	padding: 2px 6px;
	border-radius: 6px;
	transition: color 0.15s, background 0.15s;
}

.schedule-clear-btn:hover {
	color: var(--text);
	background: var(--surface-mid);
}

.schedule-datetime {
	width: 100%;
	min-height: var(--nf-menu-control-height);
	padding: 7px 12px;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: var(--input-bg);
	color: var(--text);
	font-size: 0.9rem;
	font-family: inherit;
	line-height: 1.25;
	box-sizing: border-box;
	cursor: pointer;
	transition: border-color 0.15s;
}

.schedule-datetime:focus {
	outline: none;
	border-color: #5f72d8;
}

.schedule-datetime::-webkit-calendar-picker-indicator {
	filter: var(--calendar-icon-filter, none);
	cursor: pointer;
	opacity: 0.6;
}

body[data-theme="dark"] .schedule-datetime::-webkit-calendar-picker-indicator {
	filter: invert(1);
	opacity: 0.5;
}

.schedule-datetime-hidden {
	display: none;
}

.schedule-picker {
	display: grid;
	gap: 8px;
	position: relative;
}

/* Composer „Neu“: Kalender als aufklappbares Overlay (Bearbeiten-Panel bleibt eingebettet + scrollbar) */
.schedule-picker--popover {
	position: relative;
	z-index: 4;
}

.schedule-picker--popover .schedule-picker-calendar:not(.is-hidden) {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 30;
	max-height: min(62vh, 440px);
	overflow-y: auto;
	box-shadow: 0 20px 44px rgba(6, 6, 18, 0.35);
}

body[data-theme="default"] .schedule-picker--popover .schedule-picker-calendar:not(.is-hidden) {
	box-shadow: 0 18px 36px rgba(63, 52, 40, 0.14);
}

body[data-theme="bw"] .schedule-picker--popover .schedule-picker-calendar:not(.is-hidden) {
	box-shadow: 0 16px 32px rgba(20, 20, 20, 0.14);
}

body[data-theme="bw"] .schedule-picker-day.is-de-holiday:not(.is-active):not(.is-oh-school) {
	box-shadow: inset 0 -2px 0 rgba(17, 17, 17, 0.42);
}

body[data-theme="bw"] .schedule-picker-day.is-de-holiday.is-active {
	box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.35);
}

body[data-theme="bw"] .schedule-picker-day.is-oh-school:not(.is-active):not(.is-de-holiday) {
	box-shadow: inset 3px 0 0 rgba(17, 17, 17, 0.38);
}

body[data-theme="bw"] .schedule-picker-day.is-de-holiday.is-oh-school:not(.is-active) {
	box-shadow: inset 3px 0 0 rgba(17, 17, 17, 0.38), inset 0 -2px 0 rgba(17, 17, 17, 0.42);
}

body[data-theme="bw"] .schedule-picker-day.is-oh-school.is-active:not(.is-de-holiday) {
	box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.45);
}

body[data-theme="bw"] .schedule-picker-day.is-de-holiday.is-oh-school.is-active {
	box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.45), inset 0 -2px 0 rgba(255, 255, 255, 0.35);
}

/* Nachbar-Monat im Gitter: dezenter als der aktuelle Monat */
body[data-theme="bw"] .schedule-picker-day.is-outside.is-de-holiday:not(.is-active):not(.is-oh-school) {
	box-shadow: inset 0 -2px 0 rgba(17, 17, 17, 0.13);
}

body[data-theme="bw"] .schedule-picker-day.is-outside.is-oh-school:not(.is-active):not(.is-de-holiday) {
	box-shadow: inset 3px 0 0 rgba(17, 17, 17, 0.12);
}

body[data-theme="bw"] .schedule-picker-day.is-outside.is-de-holiday.is-oh-school:not(.is-active) {
	box-shadow: inset 3px 0 0 rgba(17, 17, 17, 0.12), inset 0 -2px 0 rgba(17, 17, 17, 0.13);
}

.schedule-picker-summary {
	width: 100%;
	display: flex;
	align-items: center;
	min-height: var(--nf-menu-control-height);
	border-radius: 12px;
	border: 1px solid var(--border);
	background: color-mix(in srgb, var(--input-bg) 88%, transparent);
	color: var(--text);
	font: inherit;
	text-align: left;
	padding: 7px 40px 7px 12px;
	box-sizing: border-box;
	cursor: pointer;
}

.schedule-picker-summary-wrap {
	position: relative;
	width: 100%;
}

.schedule-picker-summary.is-empty {
	color: var(--muted);
}

.schedule-picker-clear {
	position: absolute;
	top: 50%;
	right: 8px;
	width: 22px;
	height: 22px;
	border: 0;
	border-radius: 8px;
	background: color-mix(in srgb, var(--surface-strong) 62%, transparent);
	color: var(--muted);
	font: inherit;
	cursor: pointer;
	z-index: 2;
	transform: translateY(-50%);
}

.schedule-picker-clear.is-hidden {
	display: none;
}

.schedule-picker-calendar {
	display: grid;
	gap: 10px;
	padding: 10px 10px 12px;
	border-radius: 16px;
	border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
	background: color-mix(in srgb, var(--surface-soft) 74%, transparent);
}

.schedule-picker.is-compact .schedule-picker-calendar {
	padding: 8px;
	gap: 8px;
}

.schedule-picker-controls {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	align-items: center;
}

.schedule-picker.is-compact .schedule-picker-controls {
	grid-template-columns: 1fr;
}

.schedule-picker-time-controls {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	min-width: 0;
}

.schedule-picker-step-controls {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.schedule-picker.is-compact .schedule-picker-step-controls {
	grid-template-columns: 1fr;
}

.schedule-picker-input {
	width: 100%;
	min-height: var(--nf-menu-control-height);
	border-radius: 12px;
	border: 1px solid var(--border);
	background: color-mix(in srgb, var(--input-bg) 90%, transparent);
	color: var(--text);
	font: inherit;
	padding: 7px 12px;
	line-height: 1.25;
	box-sizing: border-box;
}

select.schedule-picker-input {
	appearance: none;
	-webkit-appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--muted) 50%),
		linear-gradient(135deg, var(--muted) 50%, transparent 50%);
	background-position:
		calc(100% - 16px) calc(50% - 2px),
		calc(100% - 11px) calc(50% - 2px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding: 7px 28px 7px 12px;
}

.schedule-picker-preset-select {
	margin-top: -2px;
}

.schedule-picker-step-group {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
}

.schedule-picker-step-btn {
	min-height: var(--nf-menu-control-height);
	box-sizing: border-box;
	border-radius: 10px;
	border: 1px solid var(--border);
	background: color-mix(in srgb, var(--surface-mid) 82%, transparent);
	color: var(--text);
	font: inherit;
	font-size: 0.74rem;
	opacity: 0.88;
	cursor: pointer;
}

.schedule-picker-head {
	display: grid;
	grid-template-columns: 28px 1fr 28px;
	align-items: center;
	gap: 10px;
	margin-top: 2px;
}

.schedule-picker-nav {
	width: 28px;
	height: 28px;
	border-radius: 9px;
	border: 1px solid var(--border);
	background: var(--surface-mid);
	color: var(--text);
	font: inherit;
	cursor: pointer;
}

.schedule-picker-month {
	text-align: center;
	font-size: 0.92rem;
	font-weight: 700;
	text-transform: capitalize;
}

.schedule-picker-weekdays,
.schedule-picker-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 5px;
}

.schedule-picker-weekdays span {
	text-align: center;
	font-size: 0.68rem;
	color: color-mix(in srgb, var(--muted) 88%, transparent);
}

.schedule-picker-weekdays span.is-weekend {
	color: color-mix(in srgb, #d99b7a 62%, var(--muted));
}

.schedule-picker-day {
	min-height: 32px;
	border-radius: 10px;
	border: 1px solid transparent;
	background: color-mix(in srgb, var(--surface-mid) 60%, transparent);
	color: var(--text);
	font: inherit;
	font-size: 0.8rem;
	cursor: pointer;
}

.schedule-picker.is-compact .schedule-picker-day {
	min-height: 30px;
	font-size: 0.78rem;
}

.schedule-picker-day.is-outside {
	color: color-mix(in srgb, var(--muted) 96%, transparent);
	background: color-mix(in srgb, var(--surface-mid) 24%, transparent);
	font-size: 0.76rem;
}

.schedule-picker.is-compact .schedule-picker-day.is-outside {
	font-size: 0.74rem;
}

.schedule-picker-day.is-weekend:not(.is-active) {
	background: color-mix(in srgb, #c7876b 10%, var(--surface-mid));
}

.schedule-picker-day.is-outside.is-weekend:not(.is-active) {
	background: color-mix(in srgb, #c7876b 3%, color-mix(in srgb, var(--surface-mid) 24%, transparent));
	color: color-mix(in srgb, var(--muted) 97%, transparent);
}

.schedule-picker-day.is-today {
	border-color: color-mix(in srgb, #5f72d8 32%, transparent);
}

/* Bundeseinheitliche DE-Feiertage (Kalender-Hinweis) */
.schedule-picker-day.is-de-holiday:not(.is-active):not(.is-oh-school) {
	box-shadow: inset 0 -2px 0 color-mix(in srgb, #b8860b 55%, var(--text));
}

/* Schulferien (OpenHolidays): linker Akzent (auch auf Nachbar-Monatstagen im Gitter) */
.schedule-picker-day.is-oh-school:not(.is-active):not(.is-de-holiday) {
	box-shadow: inset 3px 0 0 color-mix(in srgb, #5f72d8 58%, var(--text));
}

.schedule-picker-day.is-de-holiday.is-oh-school:not(.is-active) {
	box-shadow: inset 3px 0 0 color-mix(in srgb, #5f72d8 58%, var(--text)),
		inset 0 -2px 0 color-mix(in srgb, #b8860b 55%, var(--text));
}

.schedule-picker-day.is-outside.is-de-holiday:not(.is-active):not(.is-oh-school) {
	box-shadow: inset 0 -2px 0 color-mix(in srgb, #b8860b 22%, var(--muted));
}

.schedule-picker-day.is-outside.is-oh-school:not(.is-active):not(.is-de-holiday) {
	box-shadow: inset 3px 0 0 color-mix(in srgb, #5f72d8 26%, var(--muted));
}

.schedule-picker-day.is-outside.is-de-holiday.is-oh-school:not(.is-active) {
	box-shadow: inset 3px 0 0 color-mix(in srgb, #5f72d8 26%, var(--muted)),
		inset 0 -2px 0 color-mix(in srgb, #b8860b 22%, var(--muted));
}

.schedule-picker-day.is-active {
	background: color-mix(in srgb, #5f72d8 22%, var(--surface-mid));
	border-color: color-mix(in srgb, #8c9cff 42%, transparent);
	color: #fff;
}

.schedule-picker-day.is-de-holiday.is-active:not(.is-oh-school) {
	box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.4);
}

.schedule-picker-day.is-oh-school.is-active:not(.is-de-holiday) {
	box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.45);
}

.schedule-picker-day.is-de-holiday.is-oh-school.is-active {
	box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.45), inset 0 -2px 0 rgba(255, 255, 255, 0.4);
}

.schedule-picker-quick-row {
	display: none !important;
}

.sched-expanded>.time-quick-row,
.task-schedule-field>.time-quick-row {
	display: none !important;
}

.schedule-picker-quick-row .time-quick-btn {
	min-height: var(--nf-menu-control-height);
	width: 100%;
	padding: 0 8px;
	border-radius: 12px;
	font-size: 0.72rem;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--surface-mid) 55%, transparent);
	opacity: 0.88;
}

.schedule-picker-quick-row .time-quick-btn.is-active {
	opacity: 1;
}

.schedule-visibility {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 8px;
	padding: 10px 12px;
	background: var(--surface-soft);
	border-radius: 10px;
	border: 1px solid var(--border);
}

.schedule-vis-option {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 0.84rem;
	color: var(--text);
}

.schedule-vis-option input[type="radio"] {
	accent-color: #5f72d8;
	cursor: pointer;
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

/* Task editor schedule section — collapsible */
.task-editor-schedule-details {
	border-radius: 12px;
	border: 1px solid var(--border);
	background: var(--surface-soft);
	overflow: hidden;
}

.task-editor-schedule-summary {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	font-size: 0.86rem;
	color: var(--muted);
	cursor: pointer;
	list-style: none;
	user-select: none;
	transition: background 0.15s;
}

.task-editor-schedule-summary::-webkit-details-marker {
	display: none;
}

.task-editor-schedule-summary::after {
	content: "›";
	margin-left: auto;
	font-size: 1.1rem;
	transition: transform 0.2s;
	opacity: 0.5;
}

.task-editor-schedule-details[open] .task-editor-schedule-summary::after {
	transform: rotate(90deg);
}

.task-editor-schedule-summary:hover {
	background: var(--surface-mid);
}

.task-editor-schedule-details[open] .task-editor-schedule-summary {
	color: #5f72d8;
	border-bottom: 1px solid var(--border);
}

body[data-theme="dark"] .task-editor-schedule-details[open] .task-editor-schedule-summary {
	color: #8b9ff0;
}

.task-editor-schedule-summary strong {
	color: #5f72d8;
	font-weight: 700;
}

body[data-theme="dark"] .task-editor-schedule-summary strong {
	color: #8b9ff0;
}

.sched-opt-hint {
	font-size: 0.76rem;
	opacity: 0.6;
}

.task-editor-schedule-body {
	display: grid;
	gap: 10px;
	padding: 12px 14px;
}

/* Notification request banner (if needed) */
.notif-banner {
	background: color-mix(in srgb, #5f72d8 12%, var(--mix-base));
	border: 1px solid rgba(95, 114, 216, 0.3);
	border-radius: 12px;
	padding: 10px 14px;
	font-size: 0.83rem;
	color: var(--text);
	display: flex;
	align-items: center;
	gap: 10px;
}

.notif-banner button {
	background: #5f72d8;
	color: white;
	border: none;
	border-radius: 8px;
	padding: 5px 12px;
	font-size: 0.8rem;
	cursor: pointer;
	font-weight: 600;
	white-space: nowrap;
}

/* ─── Settings Drawer ──────────────────────────────────────── */

.settings-backdrop,
.sched-backdrop,
.notes-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	z-index: 200;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	transition: opacity 0.25s ease;
}

.settings-backdrop.is-hidden,
.sched-backdrop.is-hidden,
.notes-backdrop.is-hidden {
	display: none;
}

/* Über .demo-mode-banner (262): Abdunkeln greift bis oben */
#quick-note-backdrop:not(.is-hidden),
#settings-backdrop:not(.is-hidden),
#help-backdrop:not(.is-hidden),
#sched-backdrop:not(.is-hidden),
#trash-backdrop:not(.is-hidden),
#edit-panel-backdrop:not(.is-hidden) {
	z-index: 265;
}

.settings-drawer,
.notes-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(500px, calc(100vw - max(28px, env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px))));
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(244, 247, 253, 0.96));
	border-left: 1px solid var(--border);
	box-shadow:
		-32px 0 72px rgba(10, 10, 28, 0.22),
		-12px 0 28px rgba(0, 0, 0, 0.12);
	z-index: 210;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
	overflow: hidden;
	backdrop-filter: blur(18px) saturate(1.08);
	-webkit-backdrop-filter: blur(18px) saturate(1.08);
}

.notes-drawer {
	width: clamp(360px, 50vw, 960px);
}

.settings-drawer.is-open,
.notes-drawer.is-open {
	transform: translateX(0);
	/* Über Demo-Banner (262) / PWA-Hinweis (260) — Schließen im Kopf bedienbar */
	z-index: 268;
}

.settings-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px clamp(20px, 5vw, 30px) 16px;
	border-bottom: 1px solid var(--border);
	flex-shrink: 0;
	position: sticky;
	top: 0;
	z-index: 2;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 252, 255, 0.88));
	backdrop-filter: blur(16px) saturate(1.04);
	-webkit-backdrop-filter: blur(16px) saturate(1.04);
}

.settings-tabbar {
	display: flex;
	gap: 8px;
	padding: 12px clamp(20px, 5vw, 30px) 12px;
	border-bottom: 1px solid var(--border);
	overflow-x: auto;
	flex-shrink: 0;
	background: linear-gradient(180deg, rgba(248, 250, 255, 0.92), rgba(245, 247, 253, 0.82));
	scrollbar-width: none;
}

.settings-tabbar::-webkit-scrollbar {
	display: none;
}

.settings-tab-btn {
	flex-shrink: 0;
	min-height: var(--nf-menu-control-height);
	box-sizing: border-box;
	padding: 0 14px;
	border-radius: var(--nf-settings-control-radius);
	border: 1px solid transparent;
	background: color-mix(in srgb, var(--surface-mid) 48%, transparent);
	color: var(--muted);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
	transition:
		background 0.16s ease,
		color 0.16s ease,
		border-color 0.16s ease,
		box-shadow 0.16s ease,
		transform 0.16s ease;
}

.settings-tab-btn:hover {
	color: var(--text);
	background: color-mix(in srgb, var(--surface-mid) 92%, transparent);
	transform: translateY(-1px);
}

.settings-tab-btn.is-active {
	color: #fff;
	border-color: rgba(179, 106, 214, 0.18);
	background: linear-gradient(135deg, rgba(95, 114, 216, 0.92), rgba(179, 106, 214, 0.94));
	box-shadow: 0 12px 28px rgba(95, 114, 216, 0.2);
}

.settings-tab-btn:focus-visible {
	outline-offset: 2px;
}

.settings-drawer-title {
	display: inline-flex;
	align-items: center;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--text);
	margin: 0;
	letter-spacing: -0.02em;
	font-family: var(--font-display);
}

.settings-close-btn {
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	border-radius: var(--nf-settings-control-radius);
	border: 1px solid var(--border);
	background: var(--surface-mid);
	color: var(--muted);
	cursor: pointer;
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s;
}

.settings-close-btn:hover {
	background: var(--surface-strong);
	color: var(--text);
}

.settings-drawer-body,
.notes-drawer-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 18px clamp(20px, 5vw, 30px) 22px;
	padding-left: max(clamp(20px, 5vw, 30px), env(safe-area-inset-left, 0px));
	padding-right: max(clamp(20px, 5vw, 30px), env(safe-area-inset-right, 0px));
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.settings-tab-panel {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.settings-tab-panel[hidden] {
	display: none;
}

.settings-panel-intro {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px;
	border-radius: var(--nf-settings-shell-radius);
	border: 1px solid var(--border);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(245, 247, 253, 0.74));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.55),
		0 12px 24px rgba(58, 71, 104, 0.06);
}

.settings-panel-title {
	margin: 0;
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--text);
}

.settings-panel-copy {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--muted);
}

.settings-panel-hint {
	margin: 2px 0 0;
	font-size: 0.76rem;
	line-height: 1.45;
	color: var(--muted);
}

/* Einstellungs-Intro: immer linker Flattersatz, nie optisch wie Blocksatz */
.settings-panel-intro .settings-panel-copy,
.settings-panel-intro .settings-panel-hint {
	text-align: start;
}

.settings-tab-end-note {
	margin: 6px 0 0;
	opacity: 0.9;
}

.notes-text-block {
	margin: 0;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.notes-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	padding: 10px 14px;
	margin: 0 -4px 0;
	border-radius: var(--nf-settings-shell-radius);
	border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
	background: color-mix(in srgb, var(--surface-mid) 88%, rgba(95, 114, 216, 0.04));
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.45) inset,
		0 8px 22px rgba(40, 48, 90, 0.06);
}

.notes-toolbar-spacer {
	flex: 1 1 auto;
}

.notes-toolbar-cluster {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.notes-toolbar-cluster--actions {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.notes-toolbar-cluster--notes {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 6px;
	flex: 0 1 auto;
	min-width: 0;
}

.notes-note-select {
	min-width: 160px;
	max-width: 260px;
	height: 32px;
	padding-top: 0;
	padding-bottom: 0;
}

/* ── Search panel (collapsible, below toolbar) ────────────────────────────── */
.notes-search-panel {
	display: none;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 10px;
	padding: 8px 12px;
	margin: 4px -4px 0;
	border-radius: var(--nf-settings-control-radius, 10px);
	border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
	background: color-mix(in srgb, var(--surface-mid) 88%, rgba(95, 114, 216, 0.04));
	box-shadow: 0 4px 14px rgba(40, 48, 90, 0.06);
}

.notes-search-panel.is-open {
	display: flex;
}

/* Toggle button active state */
.notes-search-toggle-btn[aria-expanded="true"] {
	background: color-mix(in srgb, var(--text) 10%, transparent);
	color: var(--text);
}

.notes-toolbar-label,
.notes-search-label {
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
}

.notes-toolbar-cluster--modes {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px 10px;
}

.notes-search-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.notes-segmented {
	display: inline-flex;
	align-items: stretch;
	border-radius: var(--nf-settings-control-radius);
	border: 1px solid var(--border);
	overflow: hidden;
	background: color-mix(in srgb, var(--surface-mid) 70%, transparent);
	height: var(--nf-settings-chip-height);
	box-sizing: border-box;
}

.notes-segment-btn {
	box-sizing: border-box;
	margin: 0;
	height: 32px;
	min-height: 32px;
	padding: 0 12px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--muted);
	font: inherit;
	font-size: 0.78rem;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.12s ease, color 0.12s ease;
}

.notes-segment-btn+.notes-segment-btn {
	border-left: 1px solid var(--border);
}

.notes-segment-btn.is-active {
	background: color-mix(in srgb, var(--text) 12%, var(--surface-strong));
	color: var(--text);
}

.notes-search-input {
	flex: 1 1 140px;
	min-width: 120px;
	max-width: 100%;
	box-sizing: border-box;
	height: 32px;
	min-height: 32px;
	padding: 0 10px;
	border-radius: 10px;
	border: 1px solid color-mix(in srgb, #5f72d8 22%, var(--border));
	background: var(--mix-base);
	color: var(--text);
	font: inherit;
	font-size: 0.82rem;
	line-height: 1.2;
}

.notes-search-input:focus {
	outline: none;
	border-color: color-mix(in srgb, #5f72d8 55%, var(--border));
	box-shadow: 0 0 0 3px color-mix(in srgb, #5f72d8 18%, transparent);
}

.notes-search-nav {
	display: inline-flex;
	gap: 4px;
}

.notes-icon-btn {
	box-sizing: border-box;
	width: 32px;
	min-width: 32px;
	height: 32px;
	min-height: 32px;
	padding: 0;
	font-size: 0.72rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.notes-search-meta {
	font-size: 0.72rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: color-mix(in srgb, var(--text) 72%, var(--muted));
	white-space: nowrap;
	min-width: 3.2em;
}

.notes-stamp-btn {
	box-sizing: border-box;
	height: 32px;
	min-height: 32px;
	padding: 0 12px;
	font-size: 0.78rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Notiz-Toolbar: explizit 32px (falls später spezifischere Regeln dazwischenfunktionieren) */
.notes-toolbar .ghost-button.notes-icon-btn,
.notes-toolbar .ghost-button.notes-stamp-btn {
	box-sizing: border-box;
	min-height: 32px;
	height: 32px;
	padding-top: 0;
	padding-bottom: 0;
	line-height: 1;
	flex: 0 0 auto;
	align-self: center;
	border-radius: var(--nf-settings-control-radius);
}

.notes-toolbar .ghost-button.notes-stamp-btn {
	padding-left: 12px;
	padding-right: 12px;
}

.notes-toolbar .notes-segmented,
.notes-toolbar .notes-segment-btn,
.notes-toolbar .notes-note-select {
	box-sizing: border-box;
	height: 32px;
	min-height: 32px;
	align-self: center;
}

/* ── Toolbar: vertical separator between clusters ─────────────────────────── */
.notes-toolbar-sep {
	width: 1px;
	height: 20px;
	background: color-mix(in srgb, var(--border) 80%, transparent);
	flex-shrink: 0;
	align-self: center;
}

/* ── Toolbar: format/insert cluster ──────────────────────────────────────── */
.notes-toolbar-cluster--format {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
	flex-wrap: nowrap;
}

.notes-fmt-btn {
	font-size: 0.82rem;
	letter-spacing: 0;
}

.notes-fmt-btn strong {
	font-size: 0.95em;
	font-weight: 800;
	line-height: 1;
}

.notes-fmt-italic em {
	font-style: italic;
	font-size: 0.95em;
	line-height: 1;
}

.notes-fmt-strike s {
	font-size: 0.95em;
	line-height: 1;
	text-decoration: line-through;
}

.notes-fmt-code {
	font-family: var(--font-mono, ui-monospace, 'Cascadia Code', 'Menlo', monospace);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	opacity: 0.85;
}

.notes-fmt-ol {
	font-size: 0.72rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	padding-left: 8px;
	padding-right: 8px;
}

.notes-fmt-divider {
	font-family: var(--font-mono, ui-monospace, 'Cascadia Code', 'Menlo', monospace);
	font-size: 0.7rem;
	letter-spacing: -0.04em;
	padding-left: 8px;
	padding-right: 8px;
}

/* ── Markdown help: toggle button lives in toolbar as icon btn ────────────── */
.notes-md-hint-wrap {
	display: flex;
	flex-direction: column;
	gap: 0;
	flex-shrink: 0;
}

/* Active state when panel is open */
.notes-toolbar .notes-md-hint-toggle[aria-expanded="true"] {
	background: color-mix(in srgb, var(--text) 10%, transparent);
	color: var(--text);
}

.notes-md-hint-panel {
	display: block;
}

.notes-md-hint {
	margin: 0;
	padding: 10px 12px;
	border-radius: 12px;
	font-size: 0.72rem;
	line-height: 1.5;
	color: var(--muted);
	background: color-mix(in srgb, var(--surface-soft) 90%, transparent);
	border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}

.notes-md-hint-wrap:not(.is-open) .notes-md-hint-panel {
	display: none;
}

.notes-md-hint-wrap.is-open .notes-md-hint-panel {
	display: block;
	margin-top: 4px;
}

.notes-md-hint-line {
	display: block;
}

.notes-md-hint-line+.notes-md-hint-line {
	margin-top: 0.38em;
}

.notes-md-hint code {
	font-size: 0.68em;
	padding: 1px 4px;
	border-radius: 4px;
	background: color-mix(in srgb, var(--surface-mid) 80%, transparent);
}

.notes-md-hint .notes-kbd,
.notes-kbd {
	display: inline-block;
	padding: 1px 5px;
	margin: 0 1px;
	border-radius: 4px;
	border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
	background: color-mix(in srgb, var(--surface-mid) 70%, transparent);
	font-size: 0.72em;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-weight: 600;
	line-height: 1.2;
	vertical-align: 0.05em;
}

.notes-wordstat {
	margin: -8px 0 0;
	font-size: 0.72rem;
	color: var(--muted);
}

.notes-editor-wrap {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	position: relative;
}

.notes-textarea-wrap {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	position: relative;
}

.notes-textarea-wrap textarea#quick-note-text {
	flex: 1 1 auto;
	min-height: min(320px, 42vh);
	max-height: min(64vh, 640px, calc(100dvh - 220px));
	overflow-y: auto;
	overscroll-behavior: contain;
	resize: vertical;
	padding: 16px 16px 42px;
	border-radius: 14px;
	font-size: 1.02rem;
	line-height: 1.68;
	max-width: 42rem;
	margin-inline: auto;
}

/* Schnellnotiz: Editor füllt die Sidebar; Zähler/Loop unten links, Wortstat & Speichern rechts */
#quick-note-drawer .notes-drawer-body {
	overflow: hidden;
	gap: 12px;
}

#quick-note-drawer .notes-toolbar,
#quick-note-drawer .notes-search-panel,
#quick-note-drawer .notes-md-hint-wrap {
	flex-shrink: 0;
	min-width: 0;
}

/* Toolbar darf die Sheet-Breite nicht sprengen; bei Bedarf horizontal wischen */
#quick-note-drawer .notes-toolbar {
	max-width: 100%;
	box-sizing: border-box;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

#quick-note-drawer .notes-toolbar::-webkit-scrollbar {
	display: none;
}

#quick-note-drawer .notes-quick-note-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px 16px;
	flex-shrink: 0;
	margin-top: 6px;
}

#quick-note-drawer .notes-quick-note-footer-left {
	flex: 0 0 auto;
	min-width: 0;
}

#quick-note-drawer .notes-quick-note-footer-right {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	gap: 2px;
}

#quick-note-drawer .notes-quick-note-footer-right .notes-wordstat,
#quick-note-drawer .notes-quick-note-footer-right .notes-save-state {
	margin: 0;
}

#quick-note-drawer .notes-text-block {
	flex: 1 1 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	touch-action: auto;
}

/* ── Hidden sync textarea (CM6 active) ───────────────────────────────────── */
textarea.cm-nf-hidden-sync {
	display: none !important;
}

/* ── CM6 editor mount ─────────────────────────────────────────────────────── */
.cm-nf-mount {
	flex: 1 1 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.cm-nf-mount .cm-editor {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	background: var(--surface-soft);
	border-radius: 14px;
	border: 1.5px solid color-mix(in srgb, var(--border) 55%, transparent);
	transition: border-color 0.18s;
}

.cm-nf-mount .cm-editor.cm-focused {
	border-color: color-mix(in srgb, var(--accent, #6366f1) 70%, var(--border));
	outline: none;
}

.cm-nf-mount .cm-scroller {
	border-radius: 14px;
}

/* Original textarea rule kept for non-CM6 state */
#quick-note-drawer .notes-textarea-wrap textarea#quick-note-text {
	min-height: 0;
	max-height: none;
	flex: 1 1 0;
	flex-shrink: 1;
	width: 100%;
	align-self: stretch;
	resize: none;
	padding: 16px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

#quick-note-drawer .notes-editor-wrap {
	flex: 1 1 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

#quick-note-drawer .notes-textarea-wrap {
	flex: 1 1 0;
	min-height: 0;
	width: 100%;
	max-width: none;
}

#quick-note-drawer.notes-fallback-edit .notes-textarea-wrap {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

#quick-note-drawer.notes-fallback-edit #quick-note-editor-mount {
	display: none !important;
}

#quick-note-drawer.notes-fallback-edit .notes-textarea-wrap textarea#quick-note-text:not(.cm-nf-hidden-sync) {
	display: block !important;
	flex: 1 1 auto;
	min-height: 100%;
	max-height: none;
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

@media (max-width: 860px) {
	#quick-note-drawer.notes-fallback-edit .notes-textarea-wrap {
		flex: 1 1 auto;
		min-height: 0;
	}

	#quick-note-drawer.notes-fallback-edit .notes-textarea-wrap textarea#quick-note-text:not(.cm-nf-hidden-sync) {
		min-height: max(320px, 48vh);
		height: 100%;
		padding: 16px;
		border-radius: 14px;
		background: var(--surface-soft);
		border: 1.5px solid color-mix(in srgb, var(--border) 55%, transparent);
		color: var(--text) !important;
		-webkit-text-fill-color: var(--text);
		caret-color: var(--text);
		opacity: 1 !important;
		appearance: none;
	}
}

#quick-note-drawer .notes-editor-wrap .notes-preview-pane {
	flex: 1 1 0;
	min-height: 0;
	flex-shrink: 1;
	max-height: none;
	width: 100%;
	align-self: stretch;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	border-radius: 14px;
	border: 1.5px solid color-mix(in srgb, var(--border) 55%, transparent);
	background: var(--surface-soft);
}

#quick-note-drawer .notes-preview-content {
	box-sizing: border-box;
	min-height: 100%;
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding: 16px 16px 42px;
	border-radius: 14px;
}

.nf-char-counter-strip .textarea-counter {
	position: static;
	left: auto;
	bottom: auto;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	z-index: 0;
	opacity: 0.85;
	pointer-events: none;
}

.nf-char-counter-strip .soft-char-counter {
	gap: 0;
}

.nf-char-counter-strip .soft-char-counter.is-over {
	overflow: visible;
}

.nf-char-counter-strip .soft-char-counter-pill,
.nf-char-counter-strip .soft-char-counter.is-over .soft-char-counter-value {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	height: 32px;
	padding: 0 11px;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: color-mix(in srgb, var(--surface-mid) 52%, transparent);
	color: var(--muted);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	backdrop-filter: blur(12px) saturate(140%);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.07),
		0 2px 10px rgba(0, 0, 0, 0.06);
}

.nf-char-counter-strip .soft-char-counter.is-warning:not(.is-over) .soft-char-counter-num {
	color: #d97706;
	border-color: color-mix(in srgb, #d97706 38%, var(--border));
	background: color-mix(in srgb, #d97706 11%, var(--surface-mid));
}

/* Über Richtwert (Pill-Modus): eine Hülle, großes ∞ + Zahl, beide Regenbogen-Text */
.nf-char-counter-strip .soft-char-counter.is-over .soft-char-counter-over-pill {
	box-sizing: border-box;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	padding: 2px 12px 2px 10px;
	border-radius: 12px;
	overflow: visible;
	border: 1px solid color-mix(in srgb, #e45757 42%, var(--border));
	background: color-mix(in srgb, #e45757 10%, var(--surface-mid));
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.06),
		0 0 0 1px color-mix(in srgb, #e45757 18%, transparent);
	backdrop-filter: blur(12px) saturate(140%);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
}

.nf-char-counter-strip .soft-char-counter.is-over .soft-char-counter-over-pill .soft-char-counter-infinity,
.nf-char-counter-strip .soft-char-counter.is-over .soft-char-counter-over-pill .soft-char-counter-over-num {
	background-image: linear-gradient(90deg,
			#ff006e 0%,
			#ff8500 14%,
			#ffbe0b 28%,
			#38b000 42%,
			#00b4d8 56%,
			#4361ee 70%,
			#9d4edd 84%,
			#ff006e 100%);
	background-size: 220% 100%;
	background-position: 0% 50%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	animation: nf-neuro-loop-rainbow 5s linear infinite;
}

.nf-char-counter-strip .soft-char-counter.is-over .soft-char-counter-over-pill .soft-char-counter-infinity {
	font-size: 2.5rem;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.04em;
	flex-shrink: 0;
	font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols2", sans-serif;
}

.nf-char-counter-strip .soft-char-counter.is-over .soft-char-counter-over-pill .soft-char-counter-over-num {
	font-size: 0.76rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.01em;
	padding-bottom: 1px;
}

@media (prefers-reduced-motion: reduce) {

	.nf-char-counter-strip .soft-char-counter.is-over .soft-char-counter-over-pill .soft-char-counter-infinity,
	.nf-char-counter-strip .soft-char-counter.is-over .soft-char-counter-over-pill .soft-char-counter-over-num {
		animation: none;
		background-position: 50% 50%;
	}
}

.notes-preview-pane {
	flex: 1 1 auto;
	min-height: clamp(280px, calc(100vh - 220px), 880px);
	min-height: clamp(280px, calc(100dvh - 220px), 880px);
	overflow: auto;
	border-radius: 14px;
	border: 1px solid var(--border);
	cursor: text;
	background: color-mix(in srgb, var(--input-bg) 88%, rgba(255, 255, 255, 0.02));
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.03),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.notes-preview-content {
	box-sizing: border-box;
	max-width: 42rem;
	margin-inline: auto;
	padding: 16px 18px 24px;
	font-size: 1.02rem;
	line-height: 1.68;
	color: var(--text);
	word-wrap: break-word;
}

.notes-preview-content .notes-md-p {
	margin: 0 0 0.75em;
}

.notes-preview-content .notes-md-p:last-child {
	margin-bottom: 0;
}

.notes-preview-content .notes-md-h4,
.notes-preview-content .notes-md-h5,
.notes-preview-content .notes-md-h6 {
	margin: 1.1em 0 0.45em;
	font-weight: 700;
	line-height: 1.25;
}

.notes-preview-content .notes-md-h4 {
	font-size: 1.12rem;
}

.notes-preview-content .notes-md-h5 {
	font-size: 1.04rem;
}

.notes-preview-content .notes-md-h6 {
	font-size: 0.98rem;
}

.notes-preview-content .notes-md-h4:first-child,
.notes-preview-content .notes-md-h5:first-child,
.notes-preview-content .notes-md-h6:first-child {
	margin-top: 0;
}

.notes-preview-content .notes-md-hr {
	border: 0;
	height: 0;
	margin: 1rem 0;
	padding: 0;
	border-top: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
	background: none;
}

.notes-preview-content .notes-md-ul,
.notes-preview-content .notes-md-ol {
	margin: 0 0 0.75em;
	padding-left: 1.35em;
}

.notes-preview-content .notes-md-li {
	margin: 0.2em 0;
}

.notes-preview-content .notes-md-pre {
	margin: 0.65em 0;
	padding: 10px 12px;
	border-radius: 10px;
	overflow-x: auto;
	background: color-mix(in srgb, var(--surface-mid) 90%, transparent);
	border: 1px solid var(--border);
	font-size: 0.86rem;
	line-height: 1.45;
}

.notes-preview-content .notes-md-code {
	font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.88em;
	padding: 0.1em 0.35em;
	border-radius: 5px;
	background: color-mix(in srgb, var(--surface-mid) 88%, transparent);
	border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.notes-preview-content .notes-md-pre .notes-md-code {
	padding: 0;
	border: 0;
	background: transparent;
	font-size: inherit;
}

.notes-calc-block {
	margin: 0.85em 0 1em;
	padding: 12px;
	border-radius: 14px;
	border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--surface-mid) 88%, transparent), color-mix(in srgb, var(--surface-soft) 78%, transparent));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		0 12px 24px rgba(10, 14, 32, 0.12);
	overflow-x: auto;
	font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.92rem;
	line-height: 1.45;
}

.notes-calc-row {
	display: grid;
	grid-template-columns: 22px minmax(92px, max-content) minmax(0, 128px) minmax(120px, 1fr);
	gap: 10px;
	align-items: baseline;
	min-width: 430px;
	padding: 2px 0;
}

.notes-calc-op {
	color: var(--muted);
	font-weight: 800;
	text-align: center;
}

.notes-calc-row--plus .notes-calc-op {
	color: color-mix(in srgb, var(--low, #4cd7a2) 82%, var(--text) 18%);
}

.notes-calc-row--minus .notes-calc-op {
	color: color-mix(in srgb, var(--high, #ea6d6d) 84%, var(--text) 16%);
}

.notes-calc-row--multiply .notes-calc-op {
	color: color-mix(in srgb, #f6c453 86%, var(--text) 14%);
}

.notes-calc-row--divide .notes-calc-op {
	color: color-mix(in srgb, #7aa8ff 86%, var(--text) 14%);
}

.notes-calc-row--percent .notes-calc-result {
	color: color-mix(in srgb, var(--accent) 78%, var(--text) 22%);
}

.notes-calc-value,
.notes-calc-result {
	color: var(--text);
	font-weight: 800;
	text-align: right;
	white-space: nowrap;
}

.notes-calc-result {
	color: color-mix(in srgb, var(--accent) 72%, var(--text) 28%);
}

.notes-calc-pipe {
	color: var(--muted);
	padding-right: 8px;
}

.notes-calc-comment {
	color: color-mix(in srgb, var(--muted) 88%, var(--text) 12%);
	min-width: 0;
}

.notes-calc-divider {
	min-width: 430px;
	height: 1px;
	margin: 7px 0;
	background: color-mix(in srgb, var(--border) 92%, transparent);
}

.notes-calc-total {
	padding-top: 2px;
}

.notes-calc-total .notes-calc-op,
.notes-calc-total .notes-calc-value {
	color: var(--text);
	font-size: 1.04em;
}

.notes-calc-total .notes-calc-comment {
	font-weight: 800;
	color: color-mix(in srgb, var(--muted) 72%, var(--text) 28%);
}

.notes-calc-text {
	grid-template-columns: minmax(0, 1fr);
	min-width: 430px;
}

.notes-calc-empty {
	color: var(--muted);
	font-style: italic;
}

/* Alle Treffer (Vorschau); aktueller Treffer: .notes-search-hit-current */
.notes-search-hit {
	background: color-mix(in srgb, #fbbf24 35%, transparent);
	color: inherit;
	padding: 0.1em 0.18em;
	margin: 0 -0.02em;
	border-radius: 4px;
	box-shadow: 0 0 0 1px color-mix(in srgb, #d97706 35%, transparent);
}

.notes-search-hit-current {
	background: linear-gradient(180deg,
			color-mix(in srgb, #f0b429 88%, #fff) 0%,
			color-mix(in srgb, #f59e0b 75%, #f0b429) 100%);
	color: #1a1508;
	padding: 0.12em 0.22em;
	border-radius: 5px;
	box-shadow:
		0 0 0 2px color-mix(in srgb, #5f72d8 70%, #b36ad6),
		0 0 0 4px color-mix(in srgb, #5f72d8 22%, transparent),
		0 2px 8px rgba(95, 114, 216, 0.35);
}

body[data-theme="dark"] .notes-search-hit {
	background: color-mix(in srgb, #fbbf24 22%, transparent);
	color: inherit;
	box-shadow: 0 0 0 1px color-mix(in srgb, #fbbf24 40%, transparent);
}

body[data-theme="dark"] .notes-search-hit-current {
	color: #0f172a;
	background: linear-gradient(180deg, #fcd34d 0%, #fbbf24 100%);
	box-shadow:
		0 0 0 2px rgba(167, 139, 250, 0.95),
		0 0 0 5px rgba(167, 139, 250, 0.22),
		0 2px 12px rgba(251, 191, 36, 0.35);
}

.notes-font-mode-btns {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}

.notes-font-mode-btn {
	box-sizing: border-box;
	height: var(--nf-settings-chip-height);
	min-height: var(--nf-settings-chip-height);
	padding: 0 12px;
	border-radius: var(--nf-settings-control-radius);
	border: 1.5px solid var(--border);
	background: var(--surface-mid);
	color: var(--text);
	font: inherit;
	font-size: 0.76rem;
	font-weight: 700;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.12s, border-color 0.12s, transform 0.12s, box-shadow 0.12s, color 0.12s;
}

.notes-font-mode-btn:hover {
	background: var(--surface-strong);
	transform: translateY(-1px);
}

.notes-font-mode-btn.is-active {
	background: linear-gradient(135deg, #5f72d8, #b36ad6);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 2px 8px rgba(95, 114, 216, 0.35);
}

.notes-font-mode-btn--dyslexic {
	font-family: "OpenDyslexic", sans-serif;
	font-size: 0.9rem;
}

.notes-drawer.notes-font-system-only #quick-note-text,
.notes-drawer.notes-font-system-only .notes-preview-content {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
}

body.font-dyslexic .notes-drawer.notes-font-system-only #quick-note-text,
body.font-dyslexic .notes-drawer.notes-font-system-only .notes-preview-content {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
}

.notes-drawer.notes-font-dyslexic-only #quick-note-text,
.notes-drawer.notes-font-dyslexic-only .notes-preview-content {
	font-family: "OpenDyslexic", sans-serif;
}

.notes-save-state {
	margin-top: -4px;
}

/* Schnellnotiz: Speichern gut sichtbar */
#quick-note-drawer .notes-save-state.success-note {
	display: inline-block;
	align-self: flex-end;
	margin-top: 0;
	padding: 6px 12px;
	border-radius: 10px;
	font-weight: 700;
	color: #14532d;
	background: color-mix(in srgb, #22c55e 22%, var(--surface-soft));
	border: 1px solid color-mix(in srgb, #22c55e 35%, transparent);
	box-shadow: 0 1px 0 color-mix(in srgb, #14532d 12%, transparent);
}

#quick-note-drawer .notes-save-state.notes-save-synced {
	display: inline-block;
	align-self: flex-end;
	margin-top: 0;
	font-weight: 600;
	color: #1b6b3a;
}

body[data-theme="dark"] #quick-note-drawer .notes-save-state.success-note {
	color: #86efac;
	background: color-mix(in srgb, #22c55e 18%, var(--surface-mid, rgba(255, 255, 255, 0.08)));
	border-color: color-mix(in srgb, #86efac 28%, transparent);
	box-shadow: none;
}

body[data-theme="dark"] #quick-note-drawer .notes-save-state.notes-save-synced {
	color: #86efac;
}

body[data-theme="bw"] #quick-note-drawer .notes-save-state.success-note {
	color: #0f3d22;
	background: color-mix(in srgb, #16a34a 16%, #f0f0f0);
	border-color: color-mix(in srgb, #0f3d22 22%, transparent);
}

body[data-theme="bw"] #quick-note-drawer .notes-save-state.notes-save-synced {
	color: #14532d;
}

.notes-drawer-head-actions {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.notes-undo-btn {
	box-sizing: border-box;
	height: 32px;
	min-height: 32px;
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.settings-section {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* ── Filter im Drawer ─────────────────────────────── */
.drawer-filter-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 6px;
}

.drawer-filter-label {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.drawer-filter-select {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	height: var(--nf-settings-chip-height);
	min-height: var(--nf-settings-chip-height);
	padding: 0 30px 0 10px;
	line-height: 1.2;
	border-radius: var(--nf-settings-control-radius);
	border: 1px solid var(--border);
	background: var(--input-bg);
	color: var(--text);
	font: inherit;
	font-size: 0.88rem;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
}

.drawer-filter-select:focus {
	outline: none;
	border-color: color-mix(in srgb, var(--text) 30%, transparent);
}

/* Optionen-Button leuchtet wenn Filter aktiv → jetzt über .hero-action-btn::after */

.settings-section-label {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--muted);
	margin: 0 0 8px;
}

/* ── Einklappbare Settings-Sektion ────────────────── */
.settings-collapsible {
	border: none;
	padding: 0;
}

.settings-collapsible-summary {
	cursor: pointer;
	user-select: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: 4px 0;
	list-style: none;
}

.settings-collapsible-summary::-webkit-details-marker {
	display: none;
}

.settings-collapsible-summary::marker {
	display: none;
}

.settings-collapsible-summary::after {
	content: '›';
	font-size: 1rem;
	font-weight: 400;
	opacity: 0.45;
	transition: transform 0.18s ease;
	display: inline-block;
	line-height: 1;
}

.settings-collapsible[open]>.settings-collapsible-summary::after {
	transform: rotate(90deg);
}

.settings-collapsible-summary--section {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--muted);
}

.settings-collapsible--spaced {
	margin-bottom: 8px;
}

.settings-collapsible--spaced:last-child {
	margin-bottom: 0;
}

.settings-collapsible-body {
	padding: 2px 0 4px;
}

.field-editor-collapsible .field-editor-group {
	margin-top: 6px;
}

/* ── Anpassen: Abstand + einklappbare Karten ───────── */
.settings-customize-stack {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.settings-customize-header .settings-section-label {
	margin: 0 0 6px;
}

.settings-customize-header .meta-note {
	margin: 0;
}

.settings-field-editor-mount {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.field-editor-actions--customize {
	margin: 0;
}

.settings-collapsible--card {
	border: 1px solid var(--border);
	border-radius: var(--nf-settings-shell-radius);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(246, 248, 254, 0.76));
	overflow: hidden;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.42),
		0 10px 22px rgba(58, 71, 104, 0.04);
}

.settings-collapsible--card>.settings-collapsible-summary {
	padding: 12px 14px;
}

.settings-collapsible-summary--stacked .settings-collapsible-summary-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	flex: 1 1 auto;
	text-align: start;
}

.settings-collapsible-summary--stacked .settings-collapsible-summary-main {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--muted);
}

.settings-collapsible-summary--stacked .settings-collapsible-summary-hint {
	font-size: 0.82rem;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0.02em;
	color: color-mix(in srgb, var(--text) 76%, var(--muted));
}

.settings-collapsible--card>.settings-collapsible-summary::after {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	margin-left: 8px;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1;
	opacity: 1;
	border-radius: 10px;
	background: color-mix(in srgb, var(--text) 11%, transparent);
	color: var(--text);
	transition: transform 0.18s ease, background 0.15s ease;
}

.settings-collapsible--card:hover>.settings-collapsible-summary::after {
	background: color-mix(in srgb, var(--text) 17%, transparent);
}

.settings-collapsible--card .settings-collapsible-body {
	padding: 12px 14px 14px;
	border-top: 1px solid var(--border);
}

.settings-collapsible--card.field-editor-collapsible .field-editor-group {
	margin-top: 4px;
}

.field-editor-group-copy--flush {
	margin-top: 0;
}

.settings-inline-stack--pomodoro {
	margin-top: 0;
}

/* ── Theme Picker ─────────────────────────────────── */
.theme-picker-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 8px 14px;
	border-radius: var(--nf-settings-shell-radius);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(248, 250, 255, 0.76));
	border: 1px solid var(--border);
	margin-bottom: 6px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		0 10px 20px rgba(58, 71, 104, 0.04);
}

.theme-picker-row .meta-label {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	text-align: end;
}

.theme-picker-row .theme-picker-row-note {
	flex: 1 1 100%;
	width: 100%;
}

.theme-picker-btns {
	display: flex;
	gap: 6px;
}

.font-picker-btns {
	display: flex;
	gap: 6px;
}

.theme-pick-btn {
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: var(--nf-settings-control-radius);
	border: 1px solid var(--border);
	background: var(--surface-mid);
	color: var(--text);
	font-size: 1.1rem;
	cursor: pointer;
	transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.theme-pick-btn:hover {
	background: var(--surface-strong);
	transform: translateY(-1px);
}

.theme-pick-btn.is-active {
	background: linear-gradient(135deg, #5f72d8, #b36ad6);
	border-color: transparent;
	box-shadow: 0 2px 8px rgba(95, 114, 216, 0.35);
}

/* ── Font Size Picker ─────────────────────────────── */
.font-size-btns {
	display: flex;
	gap: 4px;
}

.card-density-btns {
	display: flex;
	gap: 6px;
}

/* When font-size-btns is inline with font-picker-btns, add a subtle divider */
.font-picker-btns+.font-size-btns {
	padding-left: 8px;
	border-left: 1px solid var(--border);
	margin-left: 2px;
}

.font-size-btns+.card-density-btns,
.font-picker-btns+.card-density-btns {
	padding-left: 8px;
	border-left: 1px solid var(--border);
	margin-left: 2px;
}

.font-size-btn {
	width: 32px;
	height: 32px;
	border-radius: var(--nf-settings-control-radius);
	border: 1.5px solid var(--border);
	background: var(--surface-mid);
	color: var(--text);
	font-size: 0.78rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s;
}

.font-size-btn:hover {
	background: var(--surface-strong);
	transform: translateY(-1px);
}

.font-size-btn.is-active {
	background: linear-gradient(135deg, #5f72d8, #b36ad6);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 2px 8px rgba(95, 114, 216, 0.35);
}

.card-density-btn {
	min-width: 94px;
	height: var(--nf-settings-chip-height);
	padding: 0 12px;
	border-radius: var(--nf-settings-control-radius);
	border: 1.5px solid var(--border);
	background: var(--surface-mid);
	color: var(--text);
	font-size: 0.76rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s, transform 0.12s, box-shadow 0.12s;
}

.card-density-btn:hover {
	background: var(--surface-strong);
	transform: translateY(-1px);
}

.card-density-btn.is-active {
	background: linear-gradient(135deg, #5f72d8, #b36ad6);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 2px 8px rgba(95, 114, 216, 0.35);
}

/* Font size classes: html drives rem-based UI, body stays in sync for older em-based areas */
html.font-size-small,
body.font-size-small {
	font-size: 13px;
}

html.font-size-medium,
body.font-size-medium {
	font-size: 15px;
}

html.font-size-large,
body.font-size-large {
	font-size: 18px;
}

/* ── Schedule Toggle UI ───────────────────────────── */
.sched-section {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.sched-toggle-row {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: var(--nf-menu-control-height);
	padding: 8px 14px;
	box-sizing: border-box;
	border-radius: var(--nf-settings-shell-radius);
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: color-mix(in srgb, var(--surface-soft) 82%, rgba(255, 255, 255, 0.02));
	cursor: pointer;
	width: 100%;
	text-align: left;
	transition: border-color 0.15s, background 0.15s;
}

.sched-toggle-row:hover {
	background: var(--surface-mid);
}

.sched-toggle-row.is-on {
	border-color: #5f72d8;
	background: color-mix(in srgb, #5f72d8 8%, var(--surface-soft));
}

.sched-toggle-icon {
	font-size: 1rem;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.sched-toggle-icon .ui-emoji-icon {
	font-size: 1.05rem;
	line-height: 1;
}

.sched-toggle-lbl {
	flex: 1;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--text);
}

.sched-pill {
	position: relative;
	width: 40px;
	height: 22px;
	border-radius: 11px;
	background: var(--border);
	flex-shrink: 0;
	transition: background 0.2s;
}

.sched-pill-thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s;
}

.sched-toggle-row.is-on .sched-pill {
	background: #5f72d8;
}

.sched-toggle-row.is-on .sched-pill-thumb {
	transform: translateX(18px);
}

.sched-expanded {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sched-expanded.is-hidden {
	display: none;
}

.sched-vis-wrap {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sched-vis-title {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--muted);
}

.sched-vis-chips {
	display: flex;
	gap: 6px;
}

.sched-vis-chip {
	flex: 1;
	min-height: var(--nf-menu-control-height);
	padding: 0 10px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	border: 1.5px solid var(--border);
	background: var(--surface-mid);
	color: var(--muted);
	font-size: 0.8rem;
	cursor: pointer;
	text-align: center;
	transition: background 0.1s, border-color 0.1s, color 0.1s;
}

.sched-vis-chip:hover {
	background: var(--surface-strong);
	color: var(--text);
}

.sched-vis-chip.is-active {
	border-color: #5f72d8;
	background: color-mix(in srgb, #5f72d8 14%, var(--surface-mid));
	color: #5f72d8;
	font-weight: 700;
}

/* ── Font Picker ───────────────────────────────────── */

@font-face {
	font-family: 'OpenDyslexic';
	src: url('fonts/OpenDyslexic-Regular.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

body.font-dyslexic,
body.font-dyslexic input,
body.font-dyslexic textarea,
body.font-dyslexic select {
	font-family: 'OpenDyslexic', sans-serif;
	letter-spacing: 0;
	/* „normal“ = Browser-Standard zwischen Wörtern. 0.02em global wirkte in Fließtext
     (z. B. Einstellungs-Hüllen) oft wie Blocksatz, obwohl nur normale Leerzeichen im HTML stehen. */
	word-spacing: normal;
	line-height: 1.5;
}

/* UI chrome looks cramped and overly spaced in OpenDyslexic on small screens.
   Keep the reading/content areas dyslexic-friendly, but render controls and
   compact labels in the system UI font for a cleaner responsive layout. */
body.font-dyslexic .brand-domain,
body.font-dyslexic .panel-kicker,
body.font-dyslexic .section-kicker,
body.font-dyslexic .meta-label,
body.font-dyslexic .hero-today-label,
body.font-dyslexic .hero-action-btn,
body.font-dyslexic .hero-icon-btn,
body.font-dyslexic .ghost-button,
body.font-dyslexic .primary-button,
body.font-dyslexic .tag,
body.font-dyslexic .task-inline-action,
body.font-dyslexic .task-menu-toggle,
body.font-dyslexic .composer-choice-button,
body.font-dyslexic .font-pick-btn,
body.font-dyslexic .font-size-btn,
body.font-dyslexic .sched-vis-chip,
body.font-dyslexic .sched-toggle-lbl,
body.font-dyslexic .editor-field-label {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	letter-spacing: 0;
	word-spacing: 0;
	line-height: 1.35;
}

/* Hero-Kacheln: OpenDyslexic rendert ~20% größer → Größen anpassen */
body.font-dyslexic .meta-label {
	font-size: 0.52rem;
	line-height: 1.2;
}

body.font-dyslexic .meta-card strong {
	font-size: 0.72rem;
	line-height: 1.2;
}

body.font-dyslexic .meta-card,
body.font-dyslexic button.meta-card {
	padding: 5px 8px;
	gap: 0;
	line-height: 1.2;
}

/* Composer: OpenDyslexic-Anpassungen für Auswahl-Buttons und Labels */
body.font-dyslexic .composer-choice-button {
	font-size: 0.72rem;
	padding: 4px 5px;
	min-height: 32px;
	line-height: 1.2;
}

body.font-dyslexic .task-area-option,
body.font-dyslexic .task-energy-option,
body.font-dyslexic .task-status-option {
	font-size: 0.62rem;
	padding: 2px 5px;
}

body.font-dyslexic .composer-choice-group {
	gap: 4px;
}

body.font-dyslexic .composer-icon-row>.meta-label,
body.font-dyslexic .composer-choice>.meta-label,
body.font-dyslexic .composer-choice>label>.meta-label {
	font-size: 0.62rem;
}

body.font-dyslexic .task-text,
body.font-dyslexic .task-text-inner,
body.font-dyslexic .edit-task-text,
body.font-dyslexic textarea,
body.font-dyslexic input[type="text"],
body.font-dyslexic input[type="email"],
body.font-dyslexic input[type="search"],
body.font-dyslexic input[type="password"] {
	letter-spacing: 0;
	word-spacing: 0.03em;
}

@media (max-width: 640px) {

	body.font-dyslexic .column-head h3,
	body.font-dyslexic .task-text,
	body.font-dyslexic .task-text-inner {
		line-height: 1.35;
	}

	body.font-dyslexic .section-kicker,
	body.font-dyslexic .hero-today-label,
	body.font-dyslexic .meta-label {
		letter-spacing: 0.02em;
	}

	body.font-dyslexic .tag {
		font-size: 0.74rem;
	}
}

.font-pick-btn {
	box-sizing: border-box;
	width: 44px;
	height: var(--nf-settings-chip-height);
	min-height: var(--nf-settings-chip-height);
	padding: 0;
	border-radius: var(--nf-settings-control-radius);
	border: 1px solid var(--border);
	background: var(--surface-mid);
	color: var(--text);
	font-size: 0.92rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.font-pick-dyslexic {
	font-family: 'OpenDyslexic', sans-serif;
	font-size: 0.8rem;
}

.font-pick-btn:hover {
	background: var(--surface-strong);
	transform: translateY(-1px);
}

.font-pick-btn.is-active {
	background: linear-gradient(135deg, #5f72d8, #b36ad6);
	border-color: transparent;
	box-shadow: 0 2px 8px rgba(95, 114, 216, 0.35);
	color: #fff;
}

/* ── Account Info ──────────────────────────────────── */
.settings-account-info {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-radius: var(--nf-settings-shell-radius);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(248, 250, 255, 0.76));
	border: 1px solid var(--border);
	margin-bottom: 10px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		0 10px 20px rgba(58, 71, 104, 0.04);
}

.settings-account-info .meta-label {
	flex-shrink: 0;
	margin: 0;
}

.settings-account-name {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.settings-toggle-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 16px;
	row-gap: 6px;
	padding: 12px 16px;
	border-radius: var(--nf-settings-shell-radius);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(248, 250, 255, 0.76));
	border: 1px solid var(--border);
	cursor: pointer;
	margin-bottom: 6px;
	box-sizing: border-box;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		0 10px 22px rgba(58, 71, 104, 0.04);
}

.header-quick-actions-sortable {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 6px;
}

.settings-toggle-row--reorderable {
	grid-template-columns: auto minmax(0, 1fr) auto;
	cursor: default;
	margin-bottom: 0;
}

/* Gemeinsamer Sortiergriff: drei horizontale Balken (statt Textsymbol) */
.drag-handle-bars {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	gap: 3px;
	width: 14px;
	height: 12px;
	pointer-events: none;
}

.drag-handle-bar {
	display: block;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
	opacity: 0.45;
	transition: opacity 0.15s ease;
}

.header-quick-action-drag-handle,
.field-editor-drag-handle,
.subtask-editor-drag-handle {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border);
	background: color-mix(in srgb, var(--panel-hi) 82%, transparent);
	color: var(--muted);
	cursor: grab;
	padding: 0;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.header-quick-action-drag-handle {
	border-radius: var(--nf-settings-control-radius);
}

.field-editor-drag-handle {
	border-radius: 7px;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.header-quick-action-drag-handle:hover .drag-handle-bar,
.field-editor-drag-handle:hover .drag-handle-bar,
.subtask-editor-drag-handle:hover .drag-handle-bar {
	opacity: 0.95;
}

.header-quick-action-drag-handle:hover {
	color: var(--text);
	border-color: color-mix(in srgb, var(--text) 20%, transparent);
	background: color-mix(in srgb, var(--panel-hi) 92%, transparent);
}

.header-quick-action-drag-handle:active {
	cursor: grabbing;
}

.settings-toggle-row--reorderable.is-dragging {
	opacity: 0.55;
}

.header-quick-actions-sortable .settings-toggle-row--reorderable.is-dragging,
.board-list-row.is-reorderable.is-dragging,
.field-editor-row.is-draggable.is-dragging,
.subtask-editor-row.is-draggable.is-dragging {
	opacity: 0.7;
	transform: translateY(-1px) scale(1.01);
	border-radius: 18px;
	box-shadow:
		0 20px 44px rgba(7, 8, 22, 0.18),
		0 8px 18px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
	filter: saturate(1.04) brightness(1.02);
	cursor: grabbing;
}

/* Einheitliche D&D-Einfügemarke: Schnellaktionen, Board-Liste, Kontexte, Teilaufgaben (wie Task-Karten) */
.header-quick-actions-sortable .settings-toggle-row--reorderable,
.board-list-row.is-reorderable,
.field-editor-row.is-draggable,
.subtask-editor-row.is-draggable {
	position: relative;
	overflow: visible;
}

.header-quick-actions-sortable .settings-toggle-row--reorderable.is-drop-target::before,
.board-list-row.is-reorderable.is-drop-target::before,
.field-editor-row.is-draggable.is-drop-target::before,
.subtask-editor-row.is-draggable.is-drop-target::before {
	content: "";
	position: absolute;
	z-index: 2;
	left: 8px;
	right: 8px;
	height: 5px;
	border-radius: 999px;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(117, 133, 255, 0.18), rgba(117, 133, 255, 0.92) 20%, rgba(110, 224, 203, 0.92) 80%, rgba(110, 224, 203, 0.18));
	box-shadow:
		0 0 0 1px rgba(22, 20, 44, 0.58),
		0 0 18px rgba(117, 133, 255, 0.34),
		0 0 28px rgba(110, 224, 203, 0.12);
	animation: nf-magnet-slot-glow 1.35s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

.header-quick-actions-sortable .settings-toggle-row--reorderable.is-drop-target[data-drop-position="before"]::before,
.board-list-row.is-reorderable.is-drop-target[data-drop-position="before"]::before,
.field-editor-row.is-draggable.is-drop-target[data-drop-position="before"]::before,
.subtask-editor-row.is-draggable.is-drop-target[data-drop-position="before"]::before {
	top: -9px;
}

.header-quick-actions-sortable .settings-toggle-row--reorderable.is-drop-target[data-drop-position="after"]::before,
.board-list-row.is-reorderable.is-drop-target[data-drop-position="after"]::before,
.field-editor-row.is-draggable.is-drop-target[data-drop-position="after"]::before,
.subtask-editor-row.is-draggable.is-drop-target[data-drop-position="after"]::before {
	bottom: -9px;
}

.header-quick-actions-sortable .settings-toggle-row--reorderable.is-drop-target[data-drop-position="before"],
.board-list-row.is-reorderable.is-drop-target[data-drop-position="before"],
.field-editor-row.is-draggable.is-drop-target[data-drop-position="before"],
.subtask-editor-row.is-draggable.is-drop-target[data-drop-position="before"] {
	margin-top: 0;
}

.header-quick-actions-sortable .settings-toggle-row--reorderable.is-drop-target[data-drop-position="after"],
.board-list-row.is-reorderable.is-drop-target[data-drop-position="after"],
.field-editor-row.is-draggable.is-drop-target[data-drop-position="after"],
.subtask-editor-row.is-draggable.is-drop-target[data-drop-position="after"] {
	margin-bottom: 0;
}

.header-quick-actions-sortable .settings-toggle-row--reorderable.is-drop-target,
.board-list-row.is-reorderable.is-drop-target,
.field-editor-row.is-draggable.is-drop-target,
.subtask-editor-row.is-draggable.is-drop-target {
	transform: translateY(-1px) scale(1.01);
	box-shadow:
		0 0 0 2px color-mix(in srgb, #7585ff 28%, transparent),
		0 18px 36px rgba(10, 10, 28, 0.18);
	transition:
		box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Kontexte + Board-Liste: nur Einfügemarker, keine zusätzliche Zeilen-Umrandung
   (reduziert visuelles „Doppelziel“-Zappeln beim Hover zwischen zwei Reihen). */
.board-list-row.is-reorderable.is-drop-target,
.field-editor-row.is-draggable.is-drop-target {
	transform: none;
	box-shadow: none;
}

/* Board-Liste in den Einstellungen: kein zusätzlicher Spring-Effekt beim Einfügen,
   damit nur der Marker wirkt und kein "Platz machen" wahrgenommen wird. */
.board-list-row.is-reorderable.is-drop-spring {
	animation: none;
}

body[data-theme="bw"] .header-quick-actions-sortable .settings-toggle-row--reorderable.is-drop-target::before,
body[data-theme="bw"] .board-list-row.is-reorderable.is-drop-target::before,
body[data-theme="bw"] .field-editor-row.is-draggable.is-drop-target::before,
body[data-theme="bw"] .subtask-editor-row.is-draggable.is-drop-target::before {
	background: linear-gradient(90deg, rgba(40, 40, 40, 0.72), rgba(96, 96, 96, 0.9));
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.28),
		0 0 12px rgba(24, 24, 24, 0.16);
}

.nf-settings-drag-preview {
	border-radius: 22px;
	overflow: hidden;
	clip-path: inset(0 round 22px);
	opacity: 1;
	transform: scale(1.025) rotate(-0.35deg);
	box-shadow:
		0 24px 56px rgba(7, 8, 22, 0.24),
		0 10px 20px rgba(0, 0, 0, 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
	filter: saturate(1.05) brightness(1.02);
}

.nf-settings-drag-preview .toggle-switch,
.nf-settings-drag-preview .toggle-thumb,
.nf-settings-drag-preview .header-quick-action-drag-handle,
.nf-settings-drag-preview .field-editor-drag-handle,
.nf-settings-drag-preview .subtask-editor-drag-handle,
.nf-settings-drag-preview .board-list-radio {
	opacity: 1;
	filter: none;
}

.settings-toggle-label {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	padding-right: 4px;
}

.settings-toggle-label strong {
	font-size: 0.88rem;
	color: var(--text);
	font-weight: 600;
}

.settings-toggle-label small {
	font-size: 0.76rem;
	color: var(--muted);
}

/* Toggle Switch */
.toggle-switch {
	position: relative;
	width: 44px;
	height: 26px;
	border-radius: 13px;
	border: none;
	background: var(--surface-strong);
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.2s ease;
	padding: 0;
}

.toggle-switch.is-on {
	background: linear-gradient(135deg, #5f72d8, #b36ad6);
}

body[data-theme="bw"] .toggle-switch.is-on {
	background: #111;
}

.toggle-thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: white;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.toggle-switch.is-on .toggle-thumb {
	transform: translateX(18px);
}

.settings-board-toolbar {
	display: grid;
	gap: 8px;
	margin-bottom: 10px;
}

.settings-board-toolbar-row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 8px;
	justify-content: space-between;
}

.settings-board-toolbar-row--end {
	justify-content: flex-end;
}

.board-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 10px;
}

.board-list-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 10px 12px;
	padding: 10px 12px;
	border-radius: var(--nf-settings-shell-radius);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(248, 250, 255, 0.76));
	border: 1px solid var(--border);
	box-sizing: border-box;
	cursor: pointer;
	text-align: start;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.45),
		0 10px 20px rgba(58, 71, 104, 0.04);
}

.board-list-row.is-reorderable {
	grid-template-columns: auto auto minmax(0, 1fr) auto auto;
}

.board-list-row.is-active {
	border-color: color-mix(in srgb, #5f72d8 38%, var(--border));
	box-shadow: 0 0 0 1px color-mix(in srgb, #5f72d8 22%, transparent);
}

.board-list-row.is-dragging {
	opacity: 0.55;
}

.board-list-drag-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.board-list-radio {
	margin: 0;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	accent-color: #5f72d8;
	cursor: pointer;
}

.board-list-name {
	min-width: 0;
}

.board-list-name .field-editor-input {
	width: 100%;
	box-sizing: border-box;
}

.field-editor-input-wrap.board-list-name-wrap>.field-editor-input {
	padding-right: 56px;
}

.board-list-name-readonly {
	display: block;
	padding: 4px 6px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--text);
	line-height: 1.35;
}

.board-list-share {
	font-size: 0.76rem;
	line-height: 1.3;
	color: var(--muted);
	max-width: min(200px, 38vw);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	justify-self: end;
}

.board-list-del-wrap {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-width: 32px;
}

.board-list-del-spacer {
	display: inline-block;
	width: 32px;
	height: 32px;
}

.settings-tool-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 10px;
}

.settings-tool-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	height: 32px;
	font-size: 0.88rem;
	padding: 0 12px;
	text-align: center;
	border-radius: var(--nf-settings-control-radius);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.2;
}

#open-trash-drawer {
	border-radius: var(--nf-settings-control-radius);
}

/* Volle Zeilen-Karten (Hilfe, Impressum, …): große Hülle, variable Höhe */
.settings-tool-btn.settings-info-link {
	height: auto;
	min-height: 0;
	justify-content: flex-start;
	text-align: left;
	border-radius: var(--nf-settings-control-radius);
}

.settings-info-row {
	display: flex;
	justify-content: space-between;
	padding: 10px 14px;
	border-radius: var(--nf-settings-shell-radius);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(248, 250, 255, 0.76));
	border: 1px solid var(--border);
	font-size: 0.84rem;
	color: var(--muted);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		0 10px 20px rgba(58, 71, 104, 0.04);
}

.settings-info-list {
	display: grid;
	gap: 12px;
}

.admin-stats-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-users-list {
	display: grid;
	gap: 12px;
}

.admin-users-list--drawer {
	padding-top: 2px;
}

.admin-user-search-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.admin-user-search-input {
	flex: 1 1 280px;
	min-width: min(100%, 240px);
}

.admin-user-result-summary,
.admin-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	color: var(--muted);
	font-size: 0.88rem;
}

.admin-user-result-summary {
	margin: 0 0 10px;
}

.admin-pagination {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--border);
}

.admin-pagination-actions {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.admin-pagination-status {
	font-weight: 800;
	color: var(--text);
}

.settings-tool-btn.is-disabled {
	opacity: 0.45;
	pointer-events: none;
}

#admin-users-drawer.notes-drawer {
	width: clamp(520px, 58vw, 920px);
}

#admin-invites-drawer.notes-drawer {
	width: min(1080px, calc(100vw - 24px));
	max-width: calc(100vw - 24px);
}

#admin-users-drawer.notes-drawer.is-open,
#admin-invites-drawer.notes-drawer.is-open {
	z-index: 276;
}

#admin-users-backdrop:not(.is-hidden),
#admin-invites-backdrop:not(.is-hidden) {
	z-index: 274;
}

.admin-user-card {
	display: grid;
	gap: 10px;
	padding: 14px;
	border: 1px solid var(--border);
	border-radius: 18px;
	background: color-mix(in srgb, var(--surface-mid) 88%, transparent);
}

.admin-user-card--collapsible {
	padding: 0;
	overflow: hidden;
}

.admin-user-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 14px;
	cursor: pointer;
	list-style: none;
}

.admin-user-card-head::-webkit-details-marker {
	display: none;
}

.admin-user-card-head::after {
	content: "▾";
	color: var(--muted);
	font-size: 0.8rem;
	flex: 0 0 auto;
	transition: transform 0.16s ease;
}

.admin-user-card--collapsible[open] .admin-user-card-head::after {
	transform: rotate(180deg);
}

.admin-user-card--collapsible[open] .admin-user-card-head {
	border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.admin-user-card-body {
	display: grid;
	gap: 10px;
	padding: 12px 14px 14px;
}

.admin-user-main {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.admin-user-compact-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
	color: var(--muted);
	font-size: 0.78rem;
	font-weight: 700;
	white-space: nowrap;
}

.admin-user-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
}

.admin-user-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.admin-user-actions-wrap {
	display: grid;
	gap: 10px;
}

.admin-user-password-input {
	min-width: min(100%, 260px);
	flex: 1 1 240px;
}

.admin-impersonate-btn {
	border-color: rgba(255, 190, 80, 0.48);
	color: #ffe2a5;
	background: rgba(255, 190, 80, 0.09);
}

.admin-registration-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px;
	border-radius: var(--nf-settings-shell-radius);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(248, 250, 255, 0.76));
	border: 1px solid var(--border);
}

.admin-registration-main {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.admin-registration-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

.admin-registration-extend-form,
.admin-invite-create-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.settings-info-link {
	width: 100%;
	justify-content: flex-start;
	padding: 12px 14px;
	border-radius: var(--nf-settings-control-radius);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(248, 250, 255, 0.76));
	border: 1px solid var(--border);
	color: var(--text);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		0 10px 20px rgba(58, 71, 104, 0.04);
}

.settings-info-link:hover {
	background: color-mix(in srgb, var(--surface-soft) 78%, white 22%);
}

.settings-version-trigger {
	width: 100%;
	align-items: center;
	cursor: pointer;
	font-family: inherit;
	text-align: left;
}

.settings-version-trigger:hover {
	color: var(--text);
	background: color-mix(in srgb, var(--surface-soft) 78%, white 22%);
}

body[data-theme="dark"] .settings-version-trigger:hover {
	background: color-mix(in srgb, var(--surface-soft) 92%, white 8%);
}

/* ─── Invite Token ─────────────────────────────────────────── */

.invite-block {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.invite-redeem-block {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--border);
}

.invite-redeem-label,
.invite-token-label {
	font-size: 0.82rem;
	color: var(--muted);
	margin: 0;
}

.invite-token-code-row {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.invite-token-code-wrap {
	flex: 1;
	position: relative;
	min-width: 0;
}

.invite-token-code {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 10px 42px 10px 14px;
	border-radius: var(--nf-settings-control-radius);
	background: var(--surface-mid);
	border: 1px solid var(--border);
	font-family: ui-monospace, monospace;
	font-size: 1.15rem;
	letter-spacing: 0.12em;
	color: var(--text);
	font-weight: 700;
	text-align: center;
}

.invite-copy-btn {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	padding: 5px 7px;
	border-radius: 7px;
	font-size: 1rem;
	cursor: pointer;
	color: var(--muted);
	line-height: 1;
}

.invite-copy-btn:hover {
	background: color-mix(in srgb, var(--text) 8%, transparent);
	color: var(--text);
}

.invite-revoke-btn {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 11px;
	border-radius: 10px;
	font-size: 1rem;
	cursor: pointer;
	background: transparent;
	border: 1px solid var(--border);
	color: var(--muted);
	line-height: 1;
}

.invite-revoke-btn:hover {
	background: color-mix(in srgb, var(--high, #c85858) 10%, transparent);
	border-color: color-mix(in srgb, var(--high, #c85858) 30%, transparent);
	color: var(--high, #c85858);
}

.invite-token-hint {
	font-size: 0.78rem;
	color: var(--muted);
	opacity: 0.7;
	margin: 0;
}

.invite-redeem-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: stretch;
	overflow: hidden;
}

.settings-inline-row {
	display: flex;
	align-items: stretch;
	gap: 8px;
	flex-wrap: wrap;
}

.settings-inline-stack {
	display: grid;
	gap: 8px;
	margin-top: 10px;
}

.private-mode-card {
	display: grid;
	gap: 12px;
	padding: 14px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: color-mix(in srgb, var(--surface-soft) 88%, rgba(120, 98, 214, 0.06));
}

.private-mode-board-scope {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--text);
}

.private-mode-status-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.private-mode-copy {
	display: grid;
	gap: 4px;
}

.private-mode-copy strong {
	font-size: 0.92rem;
	color: var(--text);
}

.private-mode-copy small {
	color: var(--muted);
	line-height: 1.45;
}

.private-mode-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 54px;
	height: 28px;
	padding: 0 10px;
	border-radius: 999px;
	border: 1px solid rgba(128, 112, 214, 0.24);
	background: color-mix(in srgb, var(--surface-mid) 82%, rgba(128, 112, 214, 0.14));
	color: #b9afff;
	font-size: 0.75rem;
	font-weight: 700;
	flex-shrink: 0;
}

.private-mode-badge.is-active {
	border-color: rgba(67, 214, 151, 0.28);
	background: color-mix(in srgb, var(--surface-mid) 78%, rgba(67, 214, 151, 0.18));
	color: #74e8b4;
}

.private-mode-note {
	display: grid;
	gap: 4px;
	padding: 12px 13px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	background: rgba(10, 11, 26, 0.18);
}

.private-mode-note strong {
	font-size: 0.82rem;
	color: #f3efff;
}

.private-mode-note p {
	margin: 0;
	font-size: 0.8rem;
	color: var(--muted);
	line-height: 1.45;
}

.private-mode-recovery {
	display: grid;
	gap: 8px;
}

.private-mode-top-actions {
	display: flex;
	justify-content: flex-start;
}

.private-mode-verify-row {
	grid-template-columns: minmax(0, 1fr) auto;
}

.private-mode-key-display-row {
	grid-template-columns: minmax(0, 1fr);
}

.private-mode-action-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.private-mode-action-row>.ghost-button {
	min-width: 0;
}

.private-mode-activate {
	display: grid;
	gap: 8px;
}

.private-mode-confirm-panel {
	margin-top: 0;
}

.private-mode-key-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto auto;
	gap: 8px;
	align-items: center;
}

.private-mode-key-input {
	min-width: 0;
	letter-spacing: 0.06em;
	font-weight: 600;
}

@media (max-width: 520px) {
	.private-mode-key-row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.private-mode-key-input {
		grid-column: 1 / -1;
	}

	.private-mode-key-display-row {
		grid-template-columns: minmax(0, 1fr);
	}
}

.pomodoro-settings-editor {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pomodoro-settings-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	padding: 8px 12px;
	margin-bottom: 0;
	border-radius: 14px;
	border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
	background: color-mix(in srgb, var(--surface-mid) 42%, var(--mix-base));
	box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}

.pomodoro-settings-stepper {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border-radius: 12px;
	border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
	background: var(--input-bg);
}

.pomodoro-settings-input {
	width: 3.1rem;
	min-width: 3.1rem;
	max-width: 4rem;
	flex: 0 0 auto;
	text-align: center;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	appearance: textfield;
	-moz-appearance: textfield;
	padding: 5px 4px;
	border-radius: 8px;
	border: 1px solid transparent;
	background: transparent;
}

.pomodoro-settings-stepper .pomodoro-settings-input:focus {
	outline: none;
	border-color: color-mix(in srgb, #5f72d8 45%, transparent);
	background: color-mix(in srgb, var(--mix-base) 70%, transparent);
}

.pomodoro-settings-input::-webkit-outer-spin-button,
.pomodoro-settings-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.pomodoro-settings-suffix {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

.pomodoro-settings-step {
	width: 30px;
	height: 30px;
	border-radius: 9px;
	border: 0;
	background: color-mix(in srgb, var(--surface-strong) 55%, transparent);
	color: var(--text);
	font: inherit;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	flex-shrink: 0;
}

.pomodoro-settings-step--wide {
	width: auto;
	min-width: 36px;
	height: 36px;
	min-height: 36px;
	padding: 0 8px;
	font-size: 0.8rem;
	align-self: stretch;
}

.pomodoro-settings-step:hover {
	background: color-mix(in srgb, #5f72d8 22%, var(--surface-mid));
	color: var(--text);
}

.pomodoro-settings-step:active {
	transform: scale(0.96);
}

.pomodoro-settings-row .pomodoro-settings-del-btn {
	margin-left: auto;
	flex-shrink: 0;
}

.settings-collapsible--card .field-editor-actions--pomodoro {
	justify-content: flex-start;
	flex-wrap: wrap;
}

.settings-collapsible--card .field-editor-actions--pomodoro>.ghost-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	height: 32px;
	padding: 0 12px;
	margin-top: 0;
	line-height: 1;
}

.pomodoro-settings-del-btn:disabled {
	opacity: 0.28;
	cursor: default;
}

.settings-inline-input {
	box-sizing: border-box;
	flex: 1 1 220px;
	min-width: 0;
	height: auto;
	min-height: 36px;
	padding: 8px 12px;
	line-height: 1.28;
	border-radius: var(--nf-settings-control-radius);
	border: 1px solid var(--border);
	background: var(--input-bg);
	color: var(--text);
	font: inherit;
	font-size: 0.88rem;
}

.settings-inline-select {
	box-sizing: border-box;
	flex: 1 1 220px;
	min-width: 0;
	height: auto;
	min-height: 36px;
	padding: 8px 34px 8px 12px;
	line-height: 1.28;
	border-radius: var(--nf-settings-control-radius);
	border: 1px solid var(--border);
	background: var(--input-bg);
	color: var(--text);
	font: inherit;
	font-size: 0.88rem;
}

.settings-inline-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	height: auto;
	padding: 7px 12px;
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1;
	border-radius: var(--nf-settings-control-radius);
}

.invite-token-input {
	box-sizing: border-box;
	flex: 1 1 180px;
	/* < 180px → umbrechen in eigene Zeile */
	min-width: 0;
	height: 32px;
	min-height: 32px;
	padding: 0 12px;
	line-height: 1.25;
	border-radius: var(--nf-settings-control-radius);
	border: 1px solid var(--border);
	background: var(--input-bg);
	color: var(--text);
	font-family: ui-monospace, monospace;
	font-size: 0.88rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.invite-token-input:focus {
	outline: none;
	border-color: color-mix(in srgb, var(--text) 30%, transparent);
}

.invite-fb-error {
	color: var(--high, #c85858) !important;
	opacity: 1;
}

.invite-fb-success {
	color: var(--low, #5a9068) !important;
	opacity: 1;
}

/* ─── Geplant Drawer ───────────────────────────────────────── */

.sched-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(520px, 96vw);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(244, 247, 253, 0.96));
	border-left: 1px solid var(--border);
	box-shadow:
		-32px 0 72px rgba(10, 10, 28, 0.22),
		-12px 0 28px rgba(0, 0, 0, 0.12);
	z-index: 210;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
	overflow: hidden;
	backdrop-filter: blur(18px) saturate(1.08);
	-webkit-backdrop-filter: blur(18px) saturate(1.08);
}

.sched-drawer.is-open {
	transform: translateX(0);
	z-index: 268;
}

.sched-drawer-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 20px 20px 16px;
	border-bottom: 1px solid var(--border);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 252, 255, 0.88)),
		radial-gradient(circle at 20% 0%, rgba(95, 114, 216, 0.08), transparent 38%);
	flex-shrink: 0;
	position: sticky;
	top: 0;
	z-index: 2;
	backdrop-filter: blur(16px) saturate(1.04);
	-webkit-backdrop-filter: blur(16px) saturate(1.04);
}

.sched-drawer-title {
	display: inline-flex;
	align-items: center;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--text);
	margin: 0 0 2px;
}

.sched-drawer-sub {
	font-size: 0.78rem;
	color: var(--muted);
	margin: 0;
}

.sched-close-btn {
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	border: 1px solid rgba(95, 114, 216, 0.25);
	background: rgba(95, 114, 216, 0.1);
	color: #5f72d8;
	cursor: pointer;
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.15s;
}

.sched-close-btn:hover {
	background: rgba(95, 114, 216, 0.2);
}

body[data-theme="dark"] .sched-close-btn {
	color: #8b9ff0;
	border-color: rgba(139, 159, 240, 0.25);
	background: rgba(139, 159, 240, 0.1);
}

.sched-drawer-body {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 12px 16px 24px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sched-drawer-empty {
	padding: 32px 16px;
	text-align: center;
	color: var(--muted);
	font-size: 0.9rem;
	line-height: 1.6;
}

/* ── Aufgabe bearbeiten Panel ─────────────────────── */
.edit-panel-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	z-index: 208;
	backdrop-filter: blur(2px);
	transition: opacity 0.25s;
}

.edit-panel-backdrop.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.edit-panel {
	position: fixed;
	top: 0;
	right: max(12px, env(safe-area-inset-right, 0px));
	bottom: 0;
	width: min(540px, 96vw);
	background: var(--mix-base);
	border-left: 1px solid var(--border);
	box-shadow:
		-24px 0 56px rgba(0, 0, 0, 0.22),
		-10px 0 24px rgba(0, 0, 0, 0.12);
	z-index: 209;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
	overflow: hidden;
}

.edit-panel.is-open {
	transform: translateX(0);
	z-index: 268;
}

.edit-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px 14px;
	border-bottom: 1px solid var(--border);
	background: color-mix(in srgb, #5f72d8 10%, var(--mix-base));
	flex-shrink: 0;
	position: sticky;
	top: 0;
	z-index: 2;
}

.edit-panel-head-main {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.edit-panel-head-actions {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}

.edit-panel-title {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--text);
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.edit-panel-title-icon {
	flex: 0 0 auto;
	font-size: 1rem;
	line-height: 1;
}

.edit-panel-title-label {
	min-width: 0;
}

.edit-panel-undo-btn {
	box-sizing: border-box;
	min-height: 32px;
	height: 32px;
	padding: 0 12px;
	border-radius: 10px;
	font-size: 0.84rem;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.edit-panel-mode-picker {
	position: relative;
}

.edit-panel-mode-trigger {
	box-sizing: border-box;
	min-height: 32px;
	height: 32px;
	padding: 0 12px;
	border-radius: 10px;
	font-size: 0.84rem;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.edit-panel-mode-trigger::after {
	content: " ▾";
	opacity: 0.72;
}

.edit-panel-mode-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 4;
	min-width: 148px;
	padding: 6px;
	border-radius: 14px;
	border: 1px solid rgba(140, 152, 214, 0.16);
	background: rgba(14, 14, 31, 0.94);
	box-shadow: 0 18px 34px rgba(6, 6, 18, 0.38);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	display: grid;
	gap: 4px;
}

.edit-panel-mode-option {
	min-height: 32px;
	padding: 6px 12px;
	border-radius: 10px;
	border: 1px solid transparent;
	background: transparent;
	color: var(--text);
	font: inherit;
	font-size: 0.84rem;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
}

.edit-panel-mode-option:hover {
	background: var(--surface-mid);
}

.edit-panel-mode-option.is-active {
	background: color-mix(in srgb, #5f72d8 16%, var(--mix-base));
	border-color: color-mix(in srgb, #5f72d8 30%, transparent);
	font-weight: 600;
}

.edit-panel-mode-option.is-danger {
	color: #f06565;
}

.edit-panel-body {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 26px 20px 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.edit-panel-body .task-editor-section[data-section="content"] {
	margin-top: 10px;
}

.task-editor-section {
	display: grid;
	gap: 8px;
	padding: 12px 14px 14px;
	border-radius: 18px;
	border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
	/* mix-base statt transparent — sonst scheint der Seiten-Verlauf durch (Streifen im Panel) */
	background: color-mix(in srgb, var(--surface-mid) 72%, var(--mix-base));
}

/* Bearbeiten-Panel: Sektionskarten etwas weniger rund als im Composer-Kontext */
.edit-panel-body .task-editor-section {
	border-radius: 14px;
}

.task-editor-section-head {
	display: grid;
	gap: 4px;
}

/* Bearbeiten „Inhalt“: Titel links, Symbol rechts in einer Zeile */
.edit-panel-body .task-editor-section[data-section="content"] .task-editor-section-head {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.edit-panel-body .task-editor-section-head-text {
	display: grid;
	gap: 4px;
	min-width: 0;
	flex: 1;
}

.edit-panel-body .edit-panel-icon-in-section-head {
	flex: 0 0 auto;
	margin-top: 2px;
}

.edit-panel-body .edit-panel-icon-in-section-head .edit-icon-panel {
	left: auto;
	right: 0;
}

.edit-panel-body .edit-panel-icon-in-section-head .edit-symbol-trigger {
	width: var(--task-card-menu-height);
	min-width: var(--task-card-menu-height);
	min-height: var(--task-card-menu-height);
	height: var(--task-card-menu-height);
	padding: 0;
	box-sizing: border-box;
	border-radius: var(--nf-settings-control-radius);
}

.task-editor-section-title {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--text);
}

.task-editor-section-copy {
	margin: 0;
	font-size: 0.78rem;
	line-height: 1.4;
	color: var(--muted);
}

.recurrence-info-card {
	display: grid;
	gap: 6px;
	padding: 12px 14px;
	border-radius: 14px;
	border: 1px solid color-mix(in srgb, #8b6cf7 20%, var(--border));
	background: color-mix(in srgb, #8b6cf7 8%, var(--mix-base));
	box-sizing: border-box;
}

.recurrence-info-card strong {
	font-size: 0.78rem;
	color: var(--text);
}

.recurrence-info-card span {
	font-size: 0.78rem;
	line-height: 1.45;
	color: var(--muted);
}

.task-editor-actions-wrap {
	padding-top: 4px;
	display: flex;
	justify-content: flex-end;
	width: 100%;
}

.edit-panel-body .task-editor {
	display: contents;
}

.edit-panel-body .task-editor-label {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.edit-panel-body .task-editor-label span {
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
}

.edit-panel-body .edit-task-text {
	width: 100%;
	min-height: 200px;
	padding: 18px 16px 16px;
	border-radius: 18px;
	border: 1px solid var(--border);
	box-sizing: border-box;
	display: block;
	-webkit-appearance: none;
	appearance: none;
	background: color-mix(in srgb, var(--input-bg) 84%, rgba(255, 255, 255, 0.02));
	color: var(--text);
	font: inherit;
	font-size: 0.95rem;
	resize: vertical;
	line-height: 1.5;
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.03),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.edit-panel-body .edit-task-text:focus {
	outline: none;
	border-color: color-mix(in srgb, #5f72d8 50%, transparent);
	box-shadow: 0 0 0 2px color-mix(in srgb, #5f72d8 18%, transparent);
}

.edit-panel-body .task-editor-fields {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.edit-panel-body .task-editor-secondary-fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.edit-panel-body .editor-estimate-menu,
.edit-panel-body .editor-recurrence-menu {
	display: grid;
	gap: 8px;
}

.edit-panel-body .editor-estimate-menu {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.edit-panel-body .editor-recurrence-menu {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.edit-panel-body .task-actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding-top: 0;
	width: auto;
	margin-left: auto;
}

.edit-panel-body .task-action {
	flex: 0 0 auto;
}

.edit-panel-body .edit-save-btn {
	flex: 0 0 auto;
	min-width: 200px;
}

/* Active field button: prominent glow, inactive: dimmed */
.edit-panel-body .task-area-option:not(.active),
.edit-panel-body .task-energy-option:not(.active),
.edit-panel-body .task-status-option:not(.active),
.edit-panel-body .estimate-chip:not(.active),
.edit-panel-body .recurrence-chip:not(.active) {
	opacity: 0.45;
}

.edit-panel-body .task-area-option.active,
.edit-panel-body .task-energy-option.active,
.edit-panel-body .task-status-option.active,
.edit-panel-body .estimate-chip.active,
.edit-panel-body .recurrence-chip.active {
	opacity: 1;
	font-weight: 700;
}

.edit-panel-body .editor-estimate-menu .estimate-chip {
	min-height: var(--nf-menu-control-height);
	box-sizing: border-box;
	padding: 7px 4px;
	border-radius: 10px;
	border: 2px solid transparent;
	background: var(--surface-mid);
	font-size: 0.73rem;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition:
		transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
		background 160ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 160ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.edit-panel-body .editor-recurrence-menu .recurrence-chip {
	min-height: var(--nf-menu-control-height);
	box-sizing: border-box;
	padding: 7px 4px;
	border-radius: 10px;
	border: 2px solid transparent;
	background: var(--surface-mid);
	font-size: 0.73rem;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition:
		transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
		background 160ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 160ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {

	.edit-panel-body .editor-estimate-menu .estimate-chip:hover,
	.edit-panel-body .editor-recurrence-menu .recurrence-chip:hover,
	.edit-panel-body .task-area-option:hover,
	.edit-panel-body .task-energy-option:hover,
	.edit-panel-body .task-status-option:hover {
		transform: translateY(-1px);
		box-shadow: 0 8px 16px rgba(10, 14, 30, 0.08);
	}
}

.edit-panel-body .editor-estimate-menu .estimate-chip {
	color: #10b981;
}

.edit-panel-body .editor-recurrence-menu .recurrence-chip {
	color: #8b6cf7;
}

.edit-panel-body .editor-estimate-menu .estimate-chip:not(.active),
.edit-panel-body .editor-recurrence-menu .recurrence-chip:not(.active) {
	opacity: 0.72;
}

.edit-panel-body .editor-estimate-menu .estimate-chip:not(.active) {
	border-color: color-mix(in srgb, #10b981 30%, transparent);
	background: color-mix(in srgb, #10b981 8%, var(--mix-base));
}

.edit-panel-body .editor-recurrence-menu .recurrence-chip:not(.active) {
	border-color: color-mix(in srgb, #8b6cf7 30%, transparent);
	background: color-mix(in srgb, #8b6cf7 8%, var(--mix-base));
}

.edit-panel-body .editor-estimate-menu .estimate-chip.active {
	border-color: #10b981;
	background: color-mix(in srgb, #10b981 22%, var(--mix-base));
}

.edit-panel-body .editor-recurrence-menu .recurrence-chip.active {
	border-color: #8b6cf7;
	background: color-mix(in srgb, #8b6cf7 22%, var(--mix-base));
}

/* Icon picker section in edit panel */
.edit-panel-icon-section {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.edit-panel-body .task-form-under-text-row>.edit-panel-icon-section.edit-under-text-symbol {
	flex: 0 0 auto;
	width: auto;
	max-width: 100%;
}

.edit-panel-body .task-form-under-text-row.edit-panel-subtasks-only {
	margin-top: 8px;
}

.edit-panel-body .task-form-under-text-row.edit-panel-subtasks-only>.subtask-editor {
	flex: 0 1 auto !important;
	width: 100%;
}

.edit-panel-body .task-form-under-text-row .edit-symbol-trigger {
	width: var(--task-card-menu-height);
	min-width: var(--task-card-menu-height);
	min-height: var(--task-card-menu-height);
	height: var(--task-card-menu-height);
	padding: 0;
	box-sizing: border-box;
	border-radius: var(--nf-settings-control-radius);
}

.edit-panel-icon-label {
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
}

.edit-panel-icon-inline {
	gap: 0;
}

.edit-symbol-picker {
	position: relative;
}

.edit-symbol-trigger {
	width: 100%;
	justify-content: center;
	padding-inline: 12px;
	font-size: 1rem;
}

.edit-symbol-current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4rem;
	font-size: 1.15rem;
	line-height: 1;
}

.edit-icon-panel {
	top: calc(100% + 6px);
	left: 0;
	width: min(248px, calc(100vw - 56px));
}

.edit-panel-icon-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
}

.task-card.is-editing {
	outline: 2px solid color-mix(in srgb, #5f72d8 55%, transparent);
	outline-offset: 2px;
}

/* ── Read-only Vorschau-Karten im Geplant-Drawer ───── */
.sched-preview-card {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 6px 10px;
	padding: 12px 14px;
	border-radius: 14px;
	background: var(--surface-soft);
	border: 1px solid var(--border);
	margin-bottom: 8px;
}

.sched-preview-text {
	grid-column: 1;
	font-size: 0.95rem;
	line-height: 1.45;
	color: var(--text);
}

.sched-preview-meta {
	grid-column: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.sched-preview-chip {
	font-size: 0.75rem;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 30px;
	padding: 0 11px;
	border-radius: var(--nf-settings-control-radius);
	background: var(--surface-mid);
	border: 1px solid var(--border);
	color: var(--muted);
	line-height: 1;
}

.trash-card {
	display: grid;
	gap: 10px;
	padding: 14px;
	border-radius: 16px;
	background: var(--surface-soft);
	border: 1px solid var(--border);
	margin-bottom: 10px;
}

.trash-card-preview {
	display: grid;
	grid-template-columns: var(--task-card-menu-height) minmax(0, 1fr);
	gap: 10px;
	align-items: start;
}

.trash-card-symbol {
	flex: 0 0 auto;
}

.trash-card-text-wrap {
	min-width: 0;
}

.trash-card-text-inner {
	min-height: var(--task-card-menu-height);
}

.trash-card-subtasks {
	display: grid;
	gap: 4px;
	margin-top: 8px;
}

.trash-card-subtask {
	font-size: 0.82rem;
	line-height: 1.35;
	color: var(--muted);
}

.trash-action-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.trash-meta-text,
.trash-restore-info {
	font-size: 0.8rem;
	line-height: 1.35;
	color: var(--muted);
}

#trash-drawer .trash-action-row > .ghost-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 30px;
	height: 30px;
	padding: 0 11px;
	border-radius: var(--nf-settings-control-radius);
	font-size: 0.76rem;
	font-weight: 600;
	line-height: 1;
	background: var(--surface-mid);
	border: 1px solid var(--border);
}

#trash-drawer .trash-action-row > .ghost-button:not(.trash-delete-btn) {
	color: var(--text);
}

#trash-drawer .trash-action-row > .trash-delete-btn {
	color: #8f2727;
}

.sched-chip-energy {
	color: var(--status-scheduled);
	background: color-mix(in srgb, var(--status-scheduled) 12%, var(--mix-base));
	border-color: color-mix(in srgb, var(--status-scheduled) 25%, transparent);
}

.sched-preview-edit-btn {
	align-self: start;
	font-size: 0.82rem;
	padding: 6px 12px;
	border-radius: 10px;
}

.sched-preview-edit-icon {
	grid-column: 2;
	grid-row: 1 / 3;
	align-self: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	border: 1px solid var(--border);
	background: var(--surface-mid);
	font-size: 0.9rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: inherit;
	transition: background 0.12s;
}

.sched-preview-edit-icon:hover {
	background: var(--surface-strong);
}

/* .sched-count-inline entfernt — Badge jetzt über .hero-sched-badge */

/* Suppress the default + / − pseudo on the new toggle buttons */
#toggle-scheduled strong::after,
#open-settings strong::after {
	content: none !important;
}

/* ── Benutzerdefinierte Farbpalette ───────────────────────────── */
.color-red {
	--_cc: var(--c-red);
}

.color-orange {
	--_cc: var(--c-orange);
}

.color-yellow {
	--_cc: var(--c-yellow);
}

.color-green {
	--_cc: var(--c-green);
}

.color-teal {
	--_cc: var(--c-teal);
}

.color-blue {
	--_cc: var(--c-blue);
}

.color-indigo {
	--_cc: var(--c-indigo);
}

.color-purple {
	--_cc: var(--c-purple);
}

.color-gray {
	--_cc: var(--c-gray);
}

/* Apply color variable to all tag/button contexts */
.tag.color-red,
.tag.color-orange,
.tag.color-yellow,
.tag.color-green,
.tag.color-teal,
.tag.color-blue,
.tag.color-indigo,
.tag.color-purple,
.tag.color-gray,
.composer-choice-button.color-red,
.composer-choice-button.color-orange,
.composer-choice-button.color-yellow,
.composer-choice-button.color-green,
.composer-choice-button.color-teal,
.composer-choice-button.color-blue,
.composer-choice-button.color-indigo,
.composer-choice-button.color-purple,
.composer-choice-button.color-gray,
.task-area-option.color-red,
.task-area-option.color-orange,
.task-area-option.color-yellow,
.task-area-option.color-green,
.task-area-option.color-teal,
.task-area-option.color-blue,
.task-area-option.color-indigo,
.task-area-option.color-purple,
.task-area-option.color-gray,
.task-energy-option.color-red,
.task-energy-option.color-orange,
.task-energy-option.color-yellow,
.task-energy-option.color-green,
.task-energy-option.color-teal,
.task-energy-option.color-blue,
.task-energy-option.color-indigo,
.task-energy-option.color-purple,
.task-energy-option.color-gray,
.task-status-option.color-red,
.task-status-option.color-orange,
.task-status-option.color-yellow,
.task-status-option.color-green,
.task-status-option.color-teal,
.task-status-option.color-blue,
.task-status-option.color-indigo,
.task-status-option.color-purple,
.task-status-option.color-gray,
.composer-field-tag.color-red,
.composer-field-tag.color-orange,
.composer-field-tag.color-yellow,
.composer-field-tag.color-green,
.composer-field-tag.color-teal,
.composer-field-tag.color-blue,
.composer-field-tag.color-indigo,
.composer-field-tag.color-purple,
.composer-field-tag.color-gray {
	color: var(--_cc);
	border-color: color-mix(in srgb, var(--_cc) 28%, transparent);
	background: color-mix(in srgb, var(--_cc) 10%, var(--mix-base));
}

/* Floating Dropdown (Composer „Neu“): Optionen nutzen oft color-*-Token — ohne Regel fällt Text auf var(--text) (z. B. „Sehr hoch“ weißlich) */
.task-tag-dropdown-option.color-red,
.task-tag-dropdown-option.color-orange,
.task-tag-dropdown-option.color-yellow,
.task-tag-dropdown-option.color-green,
.task-tag-dropdown-option.color-teal,
.task-tag-dropdown-option.color-blue,
.task-tag-dropdown-option.color-indigo,
.task-tag-dropdown-option.color-purple,
.task-tag-dropdown-option.color-gray {
	color: var(--_cc);
}

/* ── Feld-Editor im Einstellungs-Drawer ──────────────────────── */
.field-editor-group {
	margin-bottom: 12px;
	padding: 12px 12px 10px;
	border-radius: 16px;
	border: 1px solid var(--border);
	background: color-mix(in srgb, var(--surface-mid) 70%, transparent);
}

.field-editor-group-label {
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
	margin: 0 0 6px;
}

.field-editor-group-copy {
	margin: 0 0 10px;
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--muted);
}

.field-preview-grid {
	display: grid;
	gap: 10px;
}

.field-preview-card {
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 12px 14px;
	background: color-mix(in srgb, var(--surface-mid) 72%, transparent);
	display: grid;
	gap: 10px;
}

.field-preview-card--task {
	gap: 10px;
}

.field-preview-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.field-preview-title {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--text);
}

.field-preview-copy {
	margin: 0;
	font-size: 0.68rem;
	color: var(--muted);
}

.field-preview-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.field-preview-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 9px;
	border-radius: 8px;
	border: 1px solid color-mix(in srgb, var(--_chip-color, var(--muted)) 30%, transparent);
	background: color-mix(in srgb, var(--_chip-color, var(--muted)) 14%, var(--mix-base));
	color: var(--_chip-color, var(--text));
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.field-preview-chip-dot {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: currentColor;
	box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);
}

.field-preview-task {
	display: grid;
	gap: 8px;
	padding: 10px;
	border-radius: 14px;
	border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
	background: color-mix(in srgb, var(--surface-strong) 78%, transparent);
	box-shadow: inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
}

.field-preview-task-title {
	margin: 0;
	font-size: 0.84rem;
	font-weight: 700;
	color: var(--text);
}

.field-preview-task-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.field-preview-task-note {
	margin: 0;
	font-size: 0.7rem;
	line-height: 1.35;
	color: var(--muted);
}

.field-editor-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 5px;
}

.field-editor-row.is-draggable {
	position: relative;
	padding: 2px 0;
	transition: transform 0.14s ease, opacity 0.14s ease, margin 0.14s ease;
}

.field-editor-row.is-draggable:hover .field-editor-input {
	border-color: color-mix(in srgb, var(--text) 16%, transparent);
}

.field-editor-row.is-draggable.is-dragging {
	opacity: 0.45;
	transform: scale(0.992);
}

.subtask-editor-row.is-draggable.is-dragging {
	opacity: 0.45;
	transform: scale(0.992);
}

.field-editor-drag-handle:hover {
	color: var(--text);
	border-color: color-mix(in srgb, var(--text) 20%, transparent);
	background: color-mix(in srgb, var(--panel-hi) 92%, transparent);
	transform: translateY(-1px);
}

.field-editor-drag-handle:active {
	cursor: grabbing;
	transform: translateY(0);
}

.field-editor-input {
	flex: 1;
	min-width: 0;
	min-height: 30px;
	padding: 6px 8px;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--input-bg);
	color: var(--text);
	font: inherit;
	font-size: 0.72rem;
}

.field-editor-input-wrap {
	position: relative;
	flex: 1;
	min-width: 0;
}

.field-editor-input-wrap>.field-editor-input {
	width: 100%;
	padding-right: 42px;
}

.field-editor-input:focus {
	outline: none;
	border-color: color-mix(in srgb, var(--text) 30%, transparent);
}

.pomodoro-settings-stepper .field-editor-input.pomodoro-settings-input {
	flex: 0 0 auto;
}

.field-editor-group-hint {
	margin: -2px 0 8px;
	font-size: 0.69rem;
	line-height: 1.4;
	color: color-mix(in srgb, var(--muted) 90%, transparent);
}

.field-color-picker {
	display: flex;
	gap: 4px;
	flex-shrink: 0;
}

.color-dot {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 0.12s, box-shadow 0.12s;
	flex-shrink: 0;
	padding: 0;
}

.color-dot.color-red {
	background: var(--c-red);
}

.color-dot.color-orange {
	background: var(--c-orange);
}

.color-dot.color-yellow {
	background: var(--c-yellow);
}

.color-dot.color-green {
	background: var(--c-green);
}

.color-dot.color-teal {
	background: var(--c-teal);
}

.color-dot.color-blue {
	background: var(--c-blue);
}

.color-dot.color-indigo {
	background: var(--c-indigo);
}

.color-dot.color-purple {
	background: var(--c-purple);
}

.color-dot.color-gray {
	background: var(--c-gray);
}

.color-dot.is-active {
	border-color: var(--text);
	transform: scale(1.25);
	box-shadow: 0 0 0 1px var(--panel);
}

.color-dot:hover:not(.is-active) {
	transform: scale(1.15);
}

.field-editor-del-btn {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	border: 1px solid var(--border);
	background: transparent;
	color: var(--muted);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background 0.12s, color 0.12s;
}

.field-editor-save-btn {
	position: absolute;
	top: 50%;
	right: 5px;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--text) 14%, var(--border));
	background: color-mix(in srgb, var(--surface-mid) 70%, transparent);
	color: color-mix(in srgb, var(--status-done) 76%, var(--text));
	font-size: 0.68rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	opacity: 0.92;
	transition: background 0.12s, border-color 0.12s, opacity 0.12s;
}

.field-editor-undo-btn {
	position: absolute;
	top: 50%;
	right: 26px;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--text) 10%, var(--border));
	background: color-mix(in srgb, var(--surface-mid) 62%, transparent);
	color: var(--muted);
	font-size: 0.68rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	opacity: 0.9;
	transition: background 0.12s, border-color 0.12s, opacity 0.12s, color 0.12s;
}

.field-editor-undo-btn:hover {
	opacity: 1;
	color: var(--text);
	background: color-mix(in srgb, var(--text) 7%, var(--surface-mid));
	border-color: color-mix(in srgb, var(--text) 22%, var(--border));
}

.field-editor-undo-btn.is-hidden {
	display: none;
}

.field-editor-save-btn:hover {
	opacity: 1;
	background: color-mix(in srgb, var(--status-done) 10%, var(--surface-mid));
	border-color: color-mix(in srgb, var(--status-done) 38%, var(--border));
}

.field-editor-save-btn.is-hidden {
	display: none;
}

.field-editor-del-btn:hover {
	background: color-mix(in srgb, var(--status-today) 15%, transparent);
	color: var(--status-today);
	border-color: var(--status-today);
}

.field-editor-add-btn {
	font-size: 0.78rem;
	padding: 4px 10px;
	margin-top: 4px;
}

.field-editor-add-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.field-editor-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 8px;
}

.column-color-editor {
	display: grid;
	gap: 12px;
}

.column-color-row {
	margin-bottom: 5px;
}

.column-color-label {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	min-height: 30px;
	padding: 4px 6px;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--text);
	cursor: default;
}

.column-meta-card {
	gap: 10px;
	padding: 20px 14px 12px;
	background: color-mix(in srgb, var(--panel-hi) 84%, transparent);
	box-shadow: inset 0 1px 0 color-mix(in srgb, white 5%, transparent);
}

.column-meta-card .field-editor-group-label {
	margin-bottom: 0;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
}

.column-meta-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-width: 0;
	margin-bottom: 2px;
}

.column-meta-colors {
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: nowrap;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
	white-space: nowrap;
}

.column-meta-colors .color-dot {
	width: 11px;
	height: 11px;
	border-width: 1px;
	border-color: rgba(255, 255, 255, 0.28);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.column-meta-input {
	width: 100%;
	background: var(--input-bg);
}

.column-meta-input-row {
	display: block;
}

.column-meta-input-row:first-of-type {
	margin-top: -2px;
}

.column-meta-input-row+.column-meta-input-row {
	margin-top: 4px;
}

#save-column-meta {
	justify-content: center;
	min-width: 0;
}

.field-editor-feedback {
	font-size: 0.76rem;
	color: var(--muted);
}

.field-editor-feedback.is-ok {
	color: var(--status-done);
}

.field-editor-feedback.is-error {
	color: var(--status-today);
}

@media (max-width: 640px) {
	.field-preview-head {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ── Celebration Animation ───────────────────────────────────────────────── */
@keyframes celebration-fly {
	from {
		opacity: 1;
		transform: translate(-50%, 50%) rotate(0deg);
	}

	to {
		opacity: 0;
		transform: translate(calc(-50% + var(--ctx)), calc(50% + var(--cty))) rotate(var(--cr));
	}
}

.celebration-burst {
	position: fixed;
	pointer-events: none;
	z-index: 9999;
}

.celebration-particle {
	position: absolute;
	border-radius: 50%;
	opacity: 0.96;
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.08),
		0 0 10px rgba(255, 255, 255, 0.12),
		0 0 16px currentColor;
	filter: saturate(1.12);
}

/* ── Keyboard Shortcut Hint ──────────────────────────────────────────────── */
.shortcut-hint {
	position: fixed;
	bottom: 80px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(15, 13, 26, 0.88);
	color: #e4ddf2;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 14px;
	padding: 16px 24px;
	z-index: 10000;
	font-family: "Trebuchet MS", "Segoe UI", sans-serif;
	font-size: 0.88rem;
	min-width: 220px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
	animation: shortcut-hint-in 0.2s ease-out both;
	pointer-events: none;
}

.shortcut-hint.is-hiding {
	animation: shortcut-hint-out 0.2s ease-in both;
}

@keyframes shortcut-hint-in {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

@keyframes shortcut-hint-out {
	from {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}

	to {
		opacity: 0;
		transform: translateX(-50%) translateY(6px);
	}
}

.shortcut-hint-title {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(228, 221, 242, 0.55);
	margin-bottom: 10px;
}

.shortcut-hint-row {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 5px 0;
}

.shortcut-hint-key {
	font-family: monospace;
	font-size: 0.82rem;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 5px;
	padding: 2px 7px;
	min-width: 36px;
	text-align: center;
	flex-shrink: 0;
	color: #fff;
}

.shortcut-hint-label {
	color: rgba(228, 221, 242, 0.85);
}

/* ── Search Bar ──────────────────────────────────────────────────────────── */
.search-bar {
	max-height: 0;
	overflow: hidden;
	transition:
		max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
		padding 0.42s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.24s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.24s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.24s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
	background: color-mix(in srgb, var(--panel) 92%, transparent);
	border: 1px solid var(--border);
	border-radius: 18px;
	box-shadow: var(--shadow);
	opacity: 0;
	transform: translateY(-4px);
	transform-origin: top center;
}

.search-sheet-head {
	display: none;
}

.search-command-strip {
	display: none;
}

.hero-more-sheet {
	position: fixed;
	left: max(12px, env(safe-area-inset-left, 0px));
	right: max(12px, env(safe-area-inset-right, 0px));
	/*
   * Gleichzeitig top + bottom setzen → sichere Zone.
   * Etwas knappere Ränder als früher = mehr sichtbare Höhe für die Liste.
   */
	top: max(calc(env(safe-area-inset-top, 0px) + 6px), 60px);
	bottom: max(calc(env(safe-area-inset-bottom, 0px) + 8px), 10px);
	z-index: 5600;
	display: none;
	flex-direction: column;
	gap: 12px;
	padding: 14px;
	border-radius: 22px;
	border: 1px solid var(--border);
	background: var(--mix-base);
	box-shadow:
		0 24px 54px rgba(7, 8, 22, 0.26),
		0 10px 22px rgba(0, 0, 0, 0.14);
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	pointer-events: auto;
}

.hero-more-sheet:not(.is-hidden) {
	display: flex;
}

.hero-more-sheet.is-open {
	display: flex !important;
	opacity: 1;
	visibility: visible;
}

.hero-more-sheet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-shrink: 0;
	position: sticky;
	top: 0;
	z-index: 2;
	padding-bottom: 4px;
	background: var(--mix-base);
}

#hero-more-backdrop:not(.is-hidden) {
	z-index: 5590;
}

#task-menu-mobile-backdrop:not(.is-hidden) {
	z-index: 5010;
}

.hero-more-sheet-head h3 {
	font-size: 1rem;
	font-weight: 700;
}

.hero-more-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.hero-more-brand-mark {
	width: 38px;
	height: 38px;
	border-radius: 12px;
	flex: 0 0 auto;
}

.hero-more-brand-copy {
	overflow: visible;
}

.hero-more-brand-copy .brand-domain {
	font-size: 0.74rem;
	color: var(--muted);
}

.hero-more-sheet-body {
	display: grid;
	gap: 8px;
}

.hero-more-action {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
}

@media (min-width: 641px) {
	.hero {
		position: relative;
	}

	.hero-chrome-hull {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		min-height: var(--hero-chrome-hull-min-height);
		padding: var(--hero-chrome-hull-pad-y) 12px;
		border-radius: 10px;
		overflow: visible;
		background: color-mix(in srgb, var(--surface) 84%, transparent);
		border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	}

	.hero-board-switch.hero-chrome-hull:not(.is-hidden):not([hidden]) {
		display: flex;
		align-items: center;
		max-width: min(260px, 36vw);
	}

	.hero-actions.hero-chrome-hull {
		gap: 10px;
		flex-wrap: wrap;
		align-content: center;
	}

	.hero-more-btn {
		display: inline-flex;
	}

	.hero-action-btn--desktop-overflow,
	.hero-logout-btn {
		display: none !important;
	}

	body.nf-hero-inline-actions .hero-more-btn {
		display: none !important;
	}

	body.nf-hero-inline-actions .hero-action-btn--desktop-overflow:not(.is-hidden) {
		display: inline-flex !important;
	}

	body.nf-hero-inline-actions .hero-logout-btn {
		display: inline-flex !important;
	}

	.hero-more-sheet {
		left: auto;
		right: 20px;
		top: max(94px, calc(env(safe-area-inset-top, 0px) + 72px));
		bottom: auto;
		width: min(280px, calc(100vw - 40px));
		/* Ohne min-height schrumpft die Karte auf die wenigen sichtbaren Zeilen — mehr „Hülle“ für die Liste. */
		min-height: min(48svh,
				400px,
				calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 108px));
		max-height: min(calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 80px),
				76vh);
		border-radius: 22px;
		padding: 14px;
		gap: 12px;
	}

	.hero-more-sheet-head {
		padding-bottom: 2px;
		border-bottom: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
	}

	.hero-more-sheet-body {
		gap: 10px;
	}

	.search-bar.is-open {
		max-height: 260px;
		padding: 16px 18px 18px;
	}

	.search-command-strip {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-top: 12px;
		margin-bottom: 12px;
	}

	.search-command-pill {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 6px 10px;
		border-radius: 999px;
		border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
		background: color-mix(in srgb, var(--surface-mid) 70%, transparent);
		color: var(--muted);
		font-size: 0.76rem;
		line-height: 1.2;
	}

	.search-command-pill strong {
		color: var(--text);
		font-size: 0.8rem;
	}

	.search-filter-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
		align-items: end;
		gap: 12px;
	}

	.search-filter-label {
		min-width: 0;
	}

	.search-filter-reset {
		min-height: 42px;
		white-space: nowrap;
	}

	/* Spaltenköpfe: volle Farben wie --column-* / --status-* (Einstellungen „Spaltenkopf“) */
	.board-column.is-desktop-primary .column-body {
		padding-top: 18px;
	}

	.board-column.is-desktop-secondary {
		opacity: 0.96;
	}

}

.search-bar.is-open {
	max-height: 190px;
	padding: 10px 16px;
	opacity: 1;
	transform: translateY(0);
}

.search-bar.is-hidden {
	max-height: 0;
	padding: 0 16px;
	border-width: 0;
	box-shadow: none;
	opacity: 0;
	transform: translateY(-4px);
}

.search-bar>* {
	opacity: 0;
	transform: translateY(-2px);
	transition:
		opacity 140ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.search-bar.is-open>* {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 25ms;
}

#search-input {
	width: 100%;
	padding: 10px 16px;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: var(--input-bg);
	color: var(--text);
	font-size: 0.95rem;
	font-family: inherit;
	outline: none;
	transition:
		border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1),
		background 180ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

#search-input:focus {
	border-color: #5f72d8;
	box-shadow: 0 0 0 3px rgba(95, 114, 216, 0.18);
}

#search-input::placeholder {
	color: var(--muted);
}

:root {
	--search-filter-control-h: var(--nf-menu-control-height);
	--search-filter-label-offset: 19px;
}

.search-filter-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
	gap: 8px;
	align-items: end;
	margin-top: 10px;
	transition:
		opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.search-filter-label {
	min-width: 0;
}

.search-filter-select {
	min-width: 0;
	height: var(--search-filter-control-h);
	min-height: var(--search-filter-control-h);
	padding-top: 0;
	padding-bottom: 0;
	line-height: calc(var(--search-filter-control-h) - 2px);
	box-sizing: border-box;
}

.search-filter-reset {
	height: var(--search-filter-control-h);
	min-height: var(--search-filter-control-h);
	margin-top: var(--search-filter-label-offset);
	align-self: stretch;
	padding: 0 12px;
	white-space: nowrap;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

@media (hover: hover) and (pointer: fine) {

	.search-filter-select:hover,
	.search-filter-reset:hover {
		transform: translateY(-1px);
		box-shadow: 0 10px 18px rgba(10, 14, 30, 0.08);
	}
}

.search-filter-reset:disabled {
	opacity: 0.45;
}

.search-filter-toggle {
	display: none;
}

/* ── Swipe Gestures ──────────────────────────────────────────────────────── */
.task-card {
	transition: transform 0.15s ease, background 0.2s ease;
	user-select: none;
	overflow: visible;
	/* Vertikal scrollen (Board); horizontale Geste bleibt für Swipe/Peek */
	touch-action: pan-y;
}

.task-card.is-swiping {
	transition: none;
	will-change: transform;
}

.task-card.swipe-left-preview,
.task-card.swipe-right-preview {
	box-shadow:
		0 24px 46px rgba(7, 8, 22, 0.18),
		0 8px 18px rgba(0, 0, 0, 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.task-card-wrap {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	overscroll-behavior-x: contain;
	/* Kein -webkit-mask-image: Die radiale Maske (weiß → schwarz) reduziert den
     Pointer-Event-Bereich an den Rändern auf ~10 % – Peek-Buttons werden dadurch
     nicht angetippt. overflow:hidden + border-radius reicht ab iOS 13.4+. */
}

@media (min-width: 641px) {

	/* iPad / Desktop: nächste Karte im DOM liegt sonst über dem Popover
     (z-index auf .task-card gilt nur innerhalb des Wraps). Unter 640px regelt
     die Phone-Section z-index 250 + Bottom-Sheet. */
	.task-card-wrap:has(.task-menu-anchor.is-open),
	.task-card-wrap:has(.task-menu-anchor:focus-within),
	.task-card-wrap:has(.task-quick-menus:hover),
	.task-card-wrap:has(.task-quick-menus:focus-within) {
		z-index: 80;
		overflow: visible;
	}
}

.task-swipe-track {
	position: relative;
}

.task-swipe-behind {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	z-index: 0;
	border-radius: inherit;
	overflow: hidden;
	/* Eigener Hintergrund: verhindert, dass der Board-BG zwischen den Buttons
     durchscheint, wenn die Karte zur Seite geschoben ist */
	background: color-mix(in srgb, var(--surface-strong) 94%, var(--bg));
	opacity: 0;
	transition: opacity 0.14s ease;
}

.task-swipe-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 12px;
	min-width: 0;
}

.task-swipe-actions--leading {
	justify-content: flex-start;
}

.task-swipe-actions--trailing {
	justify-content: flex-end;
}

.task-swipe-peek-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 62px;
	min-width: 62px;
	height: 78px;
	padding: 10px 6px;
	border-radius: 18px;
	border: none;
	background: #555;
	color: #fff;
	text-shadow: none;
	box-shadow: none;
	pointer-events: auto;
	transition: transform 0.16s ease, filter 0.16s ease;
}

.task-swipe-peek-btn:active {
	transform: scale(0.97);
	filter: brightness(0.88);
}

.task-swipe-peek-btn--done {
	background: #3a9e3f;
}

.task-swipe-peek-btn--pomo {
	background: #4a6fd4;
}

.task-swipe-peek-btn--more {
	background: #4f437a;
}

.task-swipe-peek-btn--sched {
	background: #4580c0;
}

.task-swipe-peek-btn--delete {
	background: #d93025;
}

.task-swipe-bg-spacer {
	flex: 1;
	min-width: 0;
}

.task-swipe-peek-icon {
	font-size: 1rem;
	line-height: 1;
}

.task-swipe-peek-label {
	font-size: 0.6rem;
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
	opacity: 0.96;
}

.task-swipe-track>.task-card {
	position: relative;
	z-index: 1;
	border-radius: inherit;
	/* Peek-Buttons liegen unter der Karte; backdrop-filter würde sie ins Glas ziehen */
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	/* Komplett deckender Hintergrund — kein Durchscheinen der hinter-layer Farben */
	background: var(--nf-swipe-card-bg);
}

.task-card-wrap.is-swipe-peek-open.is-swipe-peek-left .task-card,
.task-card-wrap.is-swipe-peek-open.is-swipe-peek-right .task-card {
	box-shadow:
		0 28px 48px rgba(7, 8, 22, 0.22),
		0 12px 24px rgba(0, 0, 0, 0.14),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* BW-Theme: behind-layer dieselbe Basis wie die Karte */
body[data-theme="bw"] .task-swipe-behind {
	background: var(--panel);
}

/* Bearbeiten (Karte oder Panel offen): Swipe-Peek-Layer aus — sonst scheinen die
   bunten Buttons durch halbtransparente Kartenflächen (in B&W besonders). */
.task-card-wrap:has(> .task-swipe-track > .task-card.is-editing) .task-swipe-behind {
	opacity: 0;
	pointer-events: none;
}

body[data-theme="bw"] .task-card.is-editing {
	background: var(--nf-swipe-card-bg);
}

.task-card-wrap.is-swipe-peek-open .task-swipe-behind,
.task-card-wrap:has(.task-card.swipe-left-preview) .task-swipe-behind,
.task-card-wrap:has(.task-card.swipe-right-preview) .task-swipe-behind,
.task-card-wrap:has(.task-card.is-swiping) .task-swipe-behind {
	opacity: 1;
}

/* B&W: Peek-Aktionen ohne Farbakzente (nur wenn sichtbar, z. B. nach Wischen) */
body[data-theme="bw"] .task-swipe-peek-btn {
	filter: grayscale(1) saturate(0);
}

body[data-theme="bw"] .task-card-wrap.is-swipe-peek-open.is-swipe-peek-right .task-swipe-actions--leading,
body[data-theme="bw"] .task-card-wrap.is-swipe-peek-open.is-swipe-peek-left .task-swipe-actions--trailing {
	background: none;
}

/* Subtiler Farbakzent pro Seite, damit man weiß wohin die Aktion geht */
.task-card-wrap.is-swipe-peek-open.is-swipe-peek-right .task-swipe-actions--leading {
	background: linear-gradient(to right, rgba(46, 125, 50, 0.18), transparent);
}

.task-card-wrap.is-swipe-peek-open.is-swipe-peek-left .task-swipe-actions--trailing {
	background: linear-gradient(to left, rgba(198, 40, 40, 0.16), transparent);
}

@media (max-width: 640px) {
	.task-card-wrap {
		border-radius: 16px;
	}

	/* Mobile: Energie-Akzent als gerundeter Overlay-Streifen statt border-left,
	   damit die Farbe auch in den oberen/unteren Rundungen sichtbar bleibt. */
	.task-card[data-energy] {
		border-left-color: transparent;
		overflow: hidden;
	}

	.task-card[data-energy]::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 3px;
		background: var(--task-energy-accent, transparent);
		border-radius: inherit;
		pointer-events: none;
	}

	.task-swipe-actions {
		gap: 10px;
		padding: 0 12px;
	}

	.task-swipe-peek-btn {
		width: 58px;
		min-width: 58px;
		height: 66px;
		padding: 9px 5px;
		border-radius: 16px;
	}
}

.task-card.swipe-today-flash {
	animation: swipe-today-flash 0.4s ease forwards;
}

@keyframes swipe-today-flash {
	0% {
		background: transparent;
	}

	50% {
		background: rgba(72, 168, 104, 0.25);
	}

	100% {
		background: transparent;
	}
}

/* ── Feature 1: Pomodoro Timer ────────────────────────────────────────────── */
/* Pomodoro widget — sits below the symbol in .task-symbol-col */
.pomodoro-widget {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	width: var(--task-card-menu-height);
}

.pomodoro-widget:empty {
	display: none;
}

/* Idle: small tomato trigger */
.pomodoro-trigger {
	width: 38px;
	min-height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85rem;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 10px;
	cursor: pointer;
	opacity: 0.35;
	padding: 0;
	line-height: 1;
	transition: opacity 120ms, transform 120ms, background 120ms, border-color 120ms;
}

.pomodoro-widget:hover .pomodoro-trigger,
.pomodoro-widget:focus-within .pomodoro-trigger {
	opacity: 0.75;
	background: var(--surface-mid);
	border-color: var(--border);
}

.pomodoro-trigger:hover {
	opacity: 1 !important;
	transform: scale(1.2);
}

/* Time picker popover (2×2 grid) */
.pomodoro-picker {
	position: absolute;
	top: 50%;
	left: calc(100% + 8px);
	transform: translateY(-50%);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	width: 88px;
	padding: 6px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(17, 14, 35, 0.94);
	box-shadow: 0 18px 32px rgba(8, 6, 24, 0.34);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	z-index: 40;
	animation: fade-in 120ms ease;
}

.pomodoro-dur-btn {
	min-height: 28px;
	padding: 2px 0;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--surface-mid);
	color: var(--muted);
	font-size: 0.58rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 120ms, color 120ms, border-color 120ms;
}

.pomodoro-dur-btn:hover {
	background: color-mix(in srgb, #f04444 14%, var(--mix-base));
	color: #f04444;
	border-color: color-mix(in srgb, #f04444 40%, transparent);
}

/* Ring overlay — sits directly on the symbol */
.task-symbol-col {
	position: relative;
}

.pomodoro-ring-overlay {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	line-height: 0;
}

/* Large hover clock — appears to the right of the symbol column */
.pomodoro-hover-clock {
	position: absolute;
	top: 0;
	left: calc(100% + 6px);
	transform: scale(0.7);
	transform-origin: top left;
	opacity: 0;
	pointer-events: none;
	transition: opacity 150ms ease, transform 150ms ease;
	z-index: 50;
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

.task-symbol-col:hover .pomodoro-hover-clock,
.task-symbol-col:focus-within .pomodoro-hover-clock {
	opacity: 1;
	transform: scale(1);
}

.pomodoro-ring {
	display: block;
}

.pomodoro-ring-bg {
	stroke: color-mix(in srgb, var(--border) 60%, transparent);
}

.pomodoro-ring-fg {
	stroke: #f04444;
	stroke-linecap: round;
	transition: stroke-dashoffset 1s linear, stroke 2s ease;
}

/* Done: rainbow blink on the card */
@keyframes pomodoro-done-blink {
	0% {
		border-color: #f04444;
		box-shadow: 0 0 0 2px #f0444444;
	}

	14% {
		border-color: #f08828;
		box-shadow: 0 0 0 4px #f0882844;
	}

	28% {
		border-color: #e0c400;
		box-shadow: 0 0 0 2px #e0c40044;
	}

	42% {
		border-color: #48a868;
		box-shadow: 0 0 0 4px #48a86844;
	}

	57% {
		border-color: #5f72d8;
		box-shadow: 0 0 0 2px #5f72d844;
	}

	71% {
		border-color: #b36ad6;
		box-shadow: 0 0 0 4px #b36ad644;
	}

	85% {
		border-color: #f04444;
		box-shadow: 0 0 0 2px #f0444444;
	}

	100% {
		border-color: var(--border);
		box-shadow: none;
	}
}

.task-card.pomodoro-done {
	animation: pomodoro-done-blink 3s ease forwards;
}

/* Symbol pulse when active */
.pomodoro-symbol-active {
	box-shadow: 0 0 0 2px color-mix(in srgb, #f04444 30%, transparent) !important;
	cursor: pointer;
}

/* Countdown label */
.pomodoro-ring-label {
	font-size: 0.58rem;
	font-weight: 700;
	color: #f04444;
	letter-spacing: 0.02em;
	text-align: center;
	font-variant-numeric: tabular-nums;
	text-transform: uppercase;
}

.task-card.pomodoro-active {
	border-left: 3px solid #f04444 !important;
}

body[data-theme="bw"] .task-card.pomodoro-active {
	border-left-color: rgba(24, 24, 24, 0.62) !important;
}

/* ── Floating Pomodoro Timer ────────────────────────────────────────────── */
.pomodoro-float {
	position: fixed;
	bottom: max(24px, env(safe-area-inset-bottom, 24px));
	left: 50%;
	transform: translateX(-50%) translateY(28px);
	opacity: 0;
	pointer-events: none;
	z-index: 1450;
	transition: opacity 320ms ease, transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pomodoro-float.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}

.pomodoro-float-inner-wrap {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 18px 14px 14px;
	border-radius: 26px;
	background: linear-gradient(155deg, #242424 0%, #121212 48%, #0f0f0f 100%);
	border: 1px solid color-mix(in srgb, #f04444 20%, #383838);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.06) inset,
		0 20px 56px rgba(0, 0, 0, 0.52),
		0 8px 24px rgba(220, 38, 38, 0.14);
	min-width: 300px;
	max-width: min(400px, calc(100vw - 24px));
}

@keyframes pomo-pulse {

	0%,
	100% {
		box-shadow:
			0 0 0 1px rgba(255, 255, 255, 0.06) inset,
			0 20px 56px rgba(0, 0, 0, 0.52),
			0 8px 24px rgba(220, 38, 38, 0.14);
	}

	50% {
		box-shadow:
			0 0 0 1px rgba(255, 255, 255, 0.08) inset,
			0 22px 60px rgba(220, 38, 38, 0.42),
			0 8px 26px rgba(0, 0, 0, 0.45);
	}
}

.pomodoro-float.is-urgent .pomodoro-float-inner-wrap {
	animation: pomo-pulse 1s ease-in-out infinite;
}

.pomodoro-float-clock {
	position: relative;
	width: 130px;
	height: 130px;
	flex-shrink: 0;
	border-radius: 50%;
	box-shadow:
		inset 0 2px 8px rgba(0, 0, 0, 0.32),
		0 0 0 3px color-mix(in srgb, #f04444 38%, transparent),
		0 4px 14px rgba(220, 38, 38, 0.22);
}

.pomodoro-float-svg {
	width: 130px;
	height: 130px;
	display: block;
	border-radius: 50%;
}

.pf-face {
	fill: url(#pf-face-gradient);
}

.pf-sector {
	fill: url(#pf-sector-gradient);
	opacity: 0.96;
}

.pomodoro-float.is-urgent .pf-sector {
	fill: #f87171;
	opacity: 1;
}

.pf-ticks line {
	stroke: #6b6b6b;
	stroke-width: 1.6;
	stroke-linecap: round;
}

.pf-ticks line:nth-child(1),
.pf-ticks line:nth-child(4),
.pf-ticks line:nth-child(7),
.pf-ticks line:nth-child(10) {
	stroke-width: 2.6;
	stroke: #2d2d2d;
}

.pomodoro-float-time {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.28rem;
	font-weight: 900;
	letter-spacing: -0.045em;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: #1a1a1a;
	pointer-events: none;
	padding-top: 18px;
}

.pomodoro-float.is-running .pomodoro-float-time {
	color: #fff;
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.45),
		0 0 20px rgba(255, 255, 255, 0.12);
}

.pomodoro-float-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	overflow: hidden;
}

.pomodoro-float-status {
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	color: rgba(255, 255, 255, 0.58);
}

.pomodoro-float-task {
	display: block;
	width: 100%;
	max-width: 100%;
	font-size: 0.92rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #fff;
}

.pomodoro-float-btns {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-top: 4px;
}

.pomodoro-float-primary,
.pomodoro-float-stop {
	box-sizing: border-box;
	height: 32px;
	min-height: 32px;
	border-radius: 10px;
	font-size: 0.82rem;
	font-weight: 700;
	background: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.18);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 150ms, color 150ms;
	white-space: nowrap;
}

.pomodoro-float-primary {
	padding: 0 16px;
}

.pomodoro-float-stop {
	width: 32px;
	min-width: 32px;
}

.pomodoro-float-primary:hover,
.pomodoro-float-stop:hover {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

@media (min-width: 768px) {
	.pomodoro-float {
		bottom: 28px;
		top: auto;
		left: auto;
		right: 28px;
		transform: translateY(28px);
	}

	.pomodoro-float.is-visible {
		transform: translateY(0);
	}

	.pomodoro-float-inner-wrap {
		flex-direction: row;
		align-items: center;
		padding: 12px 16px 12px 12px;
		border-radius: 22px;
		gap: 14px;
		min-width: 280px;
		max-width: 360px;
	}

	.pomodoro-float-clock {
		width: 110px;
		height: 110px;
	}

	.pomodoro-float-svg {
		width: 110px;
		height: 110px;
	}

	.pomodoro-float-time {
		font-size: 1.05rem;
		padding-top: 16px;
	}

	.pomodoro-float-body {
		align-items: flex-start;
		text-align: left;
	}

	.pomodoro-float-task {
		font-size: 0.88rem;
	}

	.pomodoro-float-btns {
		margin-top: 4px;
		gap: 7px;
	}

	.pomodoro-float-primary {
		padding: 0 16px;
		height: 32px;
		min-height: 32px;
		font-size: 0.82rem;
	}

	.pomodoro-float-stop {
		width: 32px;
		min-width: 32px;
		height: 32px;
		min-height: 32px;
	}
}

.pomodoro-live-panel {
	display: grid;
	gap: 10px;
	margin-top: 2px;
	padding: 12px 14px;
	border-radius: 16px;
	border: 1px solid color-mix(in srgb, #f04444 26%, var(--border));
	background: color-mix(in srgb, #f04444 8%, var(--surface-mid));
}

.pomodoro-live-badge {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: color-mix(in srgb, #f04444 76%, var(--text));
}

.pomodoro-live-time {
	font-size: clamp(1.2rem, 2.4vw, 1.65rem);
	font-weight: 800;
	line-height: 1;
	color: #f04444;
	font-variant-numeric: tabular-nums;
}

.pomodoro-live-controls {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.pomodoro-live-btn {
	box-sizing: border-box;
	min-height: 32px;
	height: auto;
	padding: 0 12px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.pomodoro-live-btn-primary {
	background: color-mix(in srgb, #f04444 14%, var(--mix-base));
	color: #f04444;
	border-color: color-mix(in srgb, #f04444 34%, transparent);
}

@keyframes fade-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ── Feature 2: Einzelfokus-Modus ────────────────────────────────────────── */
.focus-exit-btn {
	position: fixed;
	top: calc(70px + env(safe-area-inset-top, 0px));
	left: 50%;
	transform: translateX(-50%);
	z-index: 200;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: 32px;
	height: auto;
	background-color: #4f438a !important;
	background-image: linear-gradient(180deg, #6152a7 0%, #4f438a 100%) !important;
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 12px;
	padding: 6px 16px;
	cursor: pointer;
	font-size: 0.84rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	box-shadow: 0 10px 28px rgba(39, 28, 78, 0.34);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.14);
	opacity: 1 !important;
}

.focus-exit-btn:hover {
	filter: brightness(1.04);
}

.focus-exit-btn:active {
	transform: translateX(-50%) translateY(1px);
}

body[data-theme="dark"] .focus-exit-btn {
	background-color: #433570 !important;
	background-image: linear-gradient(180deg, #55448b 0%, #433570 100%) !important;
	color: #fdfdff !important;
	border-color: rgba(255, 255, 255, 0.2);
	box-shadow: 0 14px 32px rgba(20, 12, 44, 0.5);
}

body[data-theme="bw"] .focus-exit-btn {
	background-color: #e8e8e8 !important;
	background-image: linear-gradient(180deg, #f8f8f8 0%, #e8e8e8 100%) !important;
	color: #151515 !important;
	border-color: color-mix(in srgb, #111111 18%, var(--border));
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
	text-shadow: none;
}

.task-card.focus-single {
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
	transform: scale(1.01);
}

/* ── Feature 3: Notification Banner ─────────────────────────────────────── */
.notify-banner {
	background: color-mix(in srgb, #5f72d8 12%, var(--panel));
	border-bottom: 1px solid color-mix(in srgb, #5f72d8 25%, transparent);
	padding: 8px 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.82rem;
}

.notify-banner.is-hidden {
	display: none;
}

.pwa-update-banner {
	z-index: 260;
	position: relative;
}

.pwa-update-banner span {
	flex: 1;
	min-width: 0;
}

/* Demo-Modus: querer Hinweis-Streifen (nur Demo-Accounts) */
.demo-mode-banner {
	position: relative;
	z-index: 262;
	width: 100%;
	margin: 0;
	overflow: hidden;
	border-bottom: 1px solid color-mix(in srgb, white 22%, transparent);
	background: linear-gradient(105deg,
			#4a2f7a 0%,
			#5f72d8 28%,
			#3da8c9 55%,
			#69b85c 78%,
			#f29d38 100%);
	background-size: 220% 100%;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
	animation: demo-mode-banner-flow 14s ease-in-out infinite;
}

@keyframes demo-mode-banner-flow {

	0%,
	100% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}
}

.demo-mode-banner__shine {
	pointer-events: none;
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg,
			transparent 0%,
			rgba(255, 255, 255, 0.14) 45%,
			rgba(255, 255, 255, 0.32) 50%,
			rgba(255, 255, 255, 0.14) 55%,
			transparent 100%);
	background-size: 200% 100%;
	animation: demo-mode-banner-shine 3.2s ease-in-out infinite;
	mix-blend-mode: overlay;
}

@keyframes demo-mode-banner-shine {
	0% {
		background-position: -80% 0;
	}

	100% {
		background-position: 180% 0;
	}
}

.demo-mode-banner__inner {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	padding: 11px max(16px, env(safe-area-inset-right, 0px)) 11px max(16px, env(safe-area-inset-left, 0px));
	font-size: 0.84rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.35;
}

.demo-mode-banner__text {
	flex: 1 1 auto;
	text-align: left;
	min-width: 0;
}

@media (max-width: 640px) {
	.demo-mode-banner__text {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		line-height: 1.3;
	}

	.demo-mode-banner__dash {
		display: none;
	}

	body.drawer-open .demo-mode-banner {
		display: none;
	}
}

.demo-mode-banner__time {
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
	opacity: 0.95;
	white-space: nowrap;
	padding: 3px 10px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

@media (min-width: 641px) {
	.demo-mode-banner {
		position: fixed;
		right: 18px;
		bottom: 18px;
		left: auto;
		width: min(360px, calc(100vw - 36px));
		border: 1px solid color-mix(in srgb, white 24%, transparent);
		border-radius: 18px;
		box-shadow: 0 18px 38px rgba(9, 12, 28, 0.22);
		z-index: 150;
	}

	.demo-mode-banner__inner {
		padding: 10px 14px;
		font-size: 0.8rem;
	}
}

@media (prefers-reduced-motion: reduce) {

	.demo-mode-banner,
	.demo-mode-banner__shine {
		animation: none;
	}

	.demo-mode-banner {
		background-position: 35% 50%;
	}
}

/* ── Feature 5: Weekly Review Modal ─────────────────────────────────────── */
.weekly-chart {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

.weekly-day {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	flex: 1;
}

.weekly-day-label {
	font-size: 0.68rem;
	color: var(--muted);
}

.weekly-day-dot {
	font-size: 0.9rem;
	line-height: 1;
}

.weekly-area-bar-wrap {
	margin-top: 6px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.82rem;
}

.weekly-area-bar-bg {
	flex: 1;
	height: 6px;
	background: var(--border);
	border-radius: 3px;
	overflow: hidden;
}

.weekly-area-bar-fill {
	height: 100%;
	background: #5f72d8;
	border-radius: 3px;
}

.weekly-summary-row {
	display: flex;
	gap: 16px;
	margin: 12px 0;
	flex-wrap: wrap;
}

.weekly-summary-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.weekly-summary-num {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--text);
}

.weekly-summary-lbl {
	font-size: 0.72rem;
	color: var(--muted);
}

/* ── Schnellzeit-Buttons (Termin planen) ─────────────────────────────────── */
.time-quick-row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 6px;
}

.time-quick-btn {
	min-height: var(--nf-menu-control-height);
	padding: 0 10px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.72rem;
	font-weight: 600;
	border-radius: 12px;
	border: 1.5px solid var(--border);
	background: var(--surface-mid);
	color: var(--muted);
	cursor: pointer;
	transition: background 0.1s, color 0.1s, border-color 0.1s;
	white-space: nowrap;
}

.time-quick-btn:hover {
	background: color-mix(in srgb, #5f72d8 15%, var(--surface-mid));
	border-color: color-mix(in srgb, #5f72d8 40%, transparent);
	color: var(--text);
}

.time-quick-btn.is-active {
	background: color-mix(in srgb, #5f72d8 22%, var(--surface-mid));
	border-color: #5f72d8;
	color: #5f72d8;
	font-weight: 700;
}

/* ── Hilfe-Sidebar ───────────────────────────────────────────────────────── */
.help-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	z-index: 208;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	transition: opacity 0.25s;
}

.help-backdrop.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.help-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(520px, 96vw);
	background: var(--mix-base);
	border-left: 1px solid var(--border);
	box-shadow:
		-28px 0 64px rgba(10, 10, 28, 0.24),
		-12px 0 28px rgba(0, 0, 0, 0.14);
	z-index: 209;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
	overflow: hidden;
}

.help-drawer.is-open {
	transform: translateX(0);
	z-index: 268;
}

.help-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px 14px;
	border-bottom: 1px solid var(--border);
	flex-shrink: 0;
	position: sticky;
	top: 0;
	z-index: 2;
	background: color-mix(in srgb, #5f72d8 10%, var(--mix-base));
}

.help-drawer-title {
	display: inline-flex;
	align-items: center;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--text);
	margin: 0;
}

.help-drawer-body {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 18px 20px 32px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	scrollbar-width: thin;
}

.help-section {
	padding: 10px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.help-section:last-child {
	border-bottom: none;
}

.help-section-title {
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--text);
	margin: 0 0 8px 0;
}

.onboarding-card {
	margin-bottom: 4px;
	padding: 14px 14px 16px;
	border: 1px solid color-mix(in srgb, var(--status-today) 24%, var(--border));
	border-radius: 18px;
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--status-today) 10%, transparent), transparent 55%),
		color-mix(in srgb, var(--surface) 82%, transparent);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		0 12px 28px rgba(10, 10, 28, 0.1);
}

.onboarding-eyebrow {
	margin-bottom: 6px;
	color: var(--status-today);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.onboarding-list {
	margin: 0;
	padding-left: 18px;
	display: grid;
	gap: 8px;
	color: var(--muted);
	font-size: 0.86rem;
	line-height: 1.4;
}

.onboarding-list strong {
	color: var(--text);
}

.onboarding-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

.help-list {
	margin: 0;
	padding-left: 18px;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.help-list li {
	font-size: 0.82rem;
	color: var(--muted);
	line-height: 1.5;
	padding: 2px 0;
	overflow-wrap: anywhere;
}

.help-list li strong {
	color: var(--text);
	font-weight: 600;
}

.help-list kbd {
	display: inline-block;
	padding: 2px 6px;
	border-radius: 5px;
	background: var(--surface-mid);
	border: 1px solid var(--border);
	font-size: 0.78rem;
	font-family: monospace;
	color: var(--text);
	line-height: 1.2;
}

@media (max-width: 860px) {

	.settings-drawer,
	.notes-drawer,
	.help-drawer,
	.sched-drawer,
	.edit-panel {
		top: auto !important;
		right: 0 !important;
		left: 0 !important;
		bottom: 0 !important;
		width: 100vw !important;
		max-width: 100vw !important;
		max-height: min(96svh, 96dvh, 96vh) !important;
		border-left: 0 !important;
		border-top: 1px solid var(--border);
		border-radius: 24px 24px 0 0 !important;
		box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.22) !important;
		transform: translateY(100%) !important;
	}

	.settings-drawer.is-open,
	.notes-drawer.is-open,
	.help-drawer.is-open,
	.sched-drawer.is-open,
	.edit-panel.is-open {
		transform: translateY(0) !important;
	}

	/* Bearbeiten: Sheet höher ansetzen → mehr nutzbare Innenhöhe auf dem Phone */
	#edit-panel.edit-panel {
		top: max(5svh, env(safe-area-inset-top, 0px) + 28px) !important;
		bottom: 0 !important;
		height: auto !important;
		max-height: calc(100svh - max(5svh, env(safe-area-inset-top, 0px) + 28px)) !important;
	}

	@supports (height: 100dvh) {
		#edit-panel.edit-panel {
			max-height: calc(100dvh - max(5svh, env(safe-area-inset-top, 0px) + 28px)) !important;
		}
	}

	.edit-panel-body .edit-task-text {
		min-height: 112px;
		padding: 14px 12px 12px;
	}

	.edit-panel-body .task-editor-section[data-section="content"] {
		gap: 6px;
		padding-bottom: 10px;
	}

	/*
   * Von unten einfahrende Sheets liegen nicht unter der Notch — safe-area-inset-top
   * am Kopf erzeugt nur einen großen Leerraum unter der Rundung.
   */
	.settings-drawer-head,
	.notes-drawer-head,
	.help-drawer-head,
	.sched-drawer-head,
	.edit-panel-head {
		padding-top: 14px;
	}

	.settings-drawer-body,
	.notes-drawer-body,
	.help-drawer-body,
	.sched-drawer-body,
	.edit-panel-body {
		padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));
	}

	/* Geplant / Papierkorb: Höhe am Inhalt ausrichten, Body scrollt bei vielen Einträgen */
	.sched-drawer {
		height: max-content !important;
	}

	.sched-drawer-body {
		flex: 0 1 auto !important;
		min-height: 0;
		max-height: calc(min(96svh, 96dvh, 96vh) - 7.25rem);
	}

	/*
   * Module auf Mobil bis knapp unter die Systemleiste ziehen (Safe Area),
   * damit sie wie die Schnellnotiz als volle Sheets wirken.
   */
	#quick-note-drawer.notes-drawer,
	#shopping-drawer.notes-drawer,
	#contacts-drawer.notes-drawer,
	#medications-drawer.notes-drawer,
	#daily-log-drawer.notes-drawer,
	#admin-users-drawer.notes-drawer {
		top: env(safe-area-inset-top, 0px) !important;
		bottom: 0 !important;
		height: auto !important;
		max-height: none !important;
	}

	/* Mobile Module: kompakter Kopf, mehr nutzbare Höhe */
	#quick-note-drawer .settings-drawer-head.notes-drawer-head,
	#shopping-drawer .settings-drawer-head.notes-drawer-head,
	#contacts-drawer .settings-drawer-head.notes-drawer-head,
	#medications-drawer .settings-drawer-head.notes-drawer-head,
	#daily-log-drawer .settings-drawer-head.notes-drawer-head,
	#admin-users-drawer .settings-drawer-head.notes-drawer-head {
		padding-top: 12px;
		padding-bottom: 10px;
		padding-left: max(14px, env(safe-area-inset-left, 0px));
		padding-right: max(14px, env(safe-area-inset-right, 0px));
	}

	#quick-note-drawer .notes-drawer-body,
	#shopping-drawer .notes-drawer-body,
	#contacts-drawer .notes-drawer-body,
	#medications-drawer .notes-drawer-body,
	#daily-log-drawer .notes-drawer-body,
	#admin-users-drawer .notes-drawer-body {
		padding-top: 10px;
		padding-bottom: max(22px, env(safe-area-inset-bottom, 0px));
		padding-left: max(14px, env(safe-area-inset-left, 0px));
		padding-right: max(14px, env(safe-area-inset-right, 0px));
		gap: 8px;
	}

	#shopping-drawer .settings-drawer-title,
	#contacts-drawer .settings-drawer-title,
	#medications-drawer .settings-drawer-title,
	#daily-log-drawer .settings-drawer-title {
		flex: 1 1 auto;
		min-width: 0;
	}

	#shopping-drawer .notes-drawer-head-actions,
	#medications-drawer .notes-drawer-head-actions,
	#daily-log-drawer .notes-drawer-head-actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr)) 36px;
		align-items: center;
		margin-left: auto;
		gap: 6px;
		min-width: 0;
		max-width: min(54vw, 190px);
	}

	#shopping-drawer .notes-drawer-head-actions .settings-inline-btn,
	#medications-drawer .notes-drawer-head-actions .settings-inline-btn,
	#daily-log-drawer .notes-drawer-head-actions .settings-inline-btn {
		min-height: 34px;
		height: 34px;
		padding: 0 8px;
		font-size: 0.76rem;
		white-space: nowrap;
		width: 100%;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	#shopping-drawer .notes-drawer-head-actions .settings-close-btn,
	#medications-drawer .notes-drawer-head-actions .settings-close-btn,
	#daily-log-drawer .notes-drawer-head-actions .settings-close-btn {
		display: inline-flex !important;
		grid-column: 3;
		justify-self: end;
		flex: 0 0 36px;
		width: 36px;
		min-width: 36px;
	}

	#contacts-drawer .notes-drawer-head-actions {
		display: grid;
		grid-template-columns: minmax(0, auto) 36px;
		align-items: center;
		margin-left: auto;
		gap: 6px;
		min-width: 0;
	}

	#contacts-drawer .notes-drawer-head-actions .settings-inline-btn {
		min-height: 34px;
		padding: 0 10px;
		font-size: 0.76rem;
		white-space: nowrap;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	#contacts-drawer .notes-drawer-head-actions .settings-close-btn {
		display: inline-flex !important;
		grid-column: 2;
		justify-self: end;
		flex: 0 0 36px;
		width: 36px;
		min-width: 36px;
	}

	#quick-note-drawer .notes-toolbar {
		padding: 8px 10px;
		margin: 0;
		gap: 6px 8px;
		flex-wrap: wrap;
		overflow-x: visible;
	}

	/* Zweizeiliges Layout: Zeile 1 = Modus-Schalter + Aktionen, Zeile 2 = Format-Buttons */
	#quick-note-drawer .notes-toolbar-label {
		display: none;
	}

	#quick-note-drawer .notes-toolbar-sep {
		display: none;
	}

	#quick-note-drawer .notes-toolbar-cluster--modes {
		order: 2;
		flex: 1 1 auto;
	}

	#quick-note-drawer .notes-toolbar-cluster--actions {
		order: 3;
		flex-shrink: 0;
	}

	#quick-note-drawer .notes-toolbar-cluster--notes {
		order: 1;
		flex: 1 1 100%;
	}

	#quick-note-drawer .notes-note-select {
		flex: 1 1 auto;
		max-width: none;
		min-width: 120px;
	}

	#quick-note-drawer .notes-toolbar-spacer {
		display: none;
	}

	#quick-note-drawer .notes-toolbar-cluster--format {
		order: 4;
		flex-basis: 100%;
	}

	#quick-note-drawer .notes-md-hint-wrap .notes-md-hint {
		font-size: 0.72rem;
		line-height: 1.38;
		margin: 0;
	}

	#quick-note-drawer .notes-quick-note-footer {
		margin-top: 2px;
		padding-top: 2px;
	}

	/* Einstellungen: Tab-Leiste + Kopf — mehr Abstand zur Sheet-Hülle; safe-area L/R korrekt zuordnen */
	#settings-drawer .settings-tabbar {
		padding: 10px max(24px, env(safe-area-inset-right, 0px)) 8px max(24px, env(safe-area-inset-left, 0px));
	}

	#settings-drawer .settings-drawer-head {
		padding-left: max(24px, env(safe-area-inset-left, 0px));
		padding-right: max(24px, env(safe-area-inset-right, 0px));
	}

	#settings-drawer .settings-drawer-body {
		padding-top: 12px;
		padding-left: max(24px, env(safe-area-inset-left, 0px));
		padding-right: max(24px, env(safe-area-inset-right, 0px));
		gap: 16px;
	}
}

/* ── Subtasks ─────────────────────────────────────────────────────────────── */
.subtask-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	padding: 0 2px;
}

.subtask-bar-track {
	flex: 1;
	height: 4px;
	background: var(--surface-3, rgba(128, 128, 128, 0.15));
	border-radius: 2px;
	overflow: hidden;
}

.subtask-bar-fill {
	height: 100%;
	background:
		linear-gradient(90deg,
			#8d72ff 0%,
			#6a86ff 26%,
			#35b8d6 56%,
			#56d39a 82%,
			#49d66f 100%);
	border-radius: 2px;
	box-shadow: 0 0 8px color-mix(in srgb, #6a86ff 28%, transparent);
	transition: width 0.3s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.subtask-bar.is-complete .subtask-bar-fill {
	box-shadow: 0 0 12px color-mix(in srgb, #59e07e 28%, transparent);
}

body[data-theme="bw"] .subtask-bar-fill {
	background: linear-gradient(90deg, #555555 0%, #3f3f3f 45%, #2b2b2b 100%);
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
}

body[data-theme="bw"] .subtask-bar.is-complete .subtask-bar-fill {
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);
}

.subtask-bar-label {
	font-size: 0.7rem;
	color: var(--text-muted, rgba(128, 128, 128, 0.7));
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.subtask-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 6px;
	padding: 0 2px;
}

.subtask-item {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	cursor: pointer;
	font-size: 0.82rem;
	line-height: 1.4;
}

.subtask-item.is-done .subtask-text {
	text-decoration: line-through;
	opacity: 0.5;
}

.subtask-check {
	margin-top: 2px;
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	cursor: pointer;
	accent-color: var(--accent, #6c63ff);
}

body[data-theme="bw"] .subtask-check {
	accent-color: #1a1a1a;
}

.subtask-text {
	flex: 1;
}

/* ── Subtask Editor (in side panel) ──────────────────────────────────────── */
.subtask-editor {
	margin: 6px 0;
	display: grid;
	gap: 8px;
}

.composer-subtask-editor {
	margin-top: 6px;
}

.composer-subtask-inline {
	margin-top: 0;
}

.composer-subtask-editor .meta-label {
	display: block;
	margin-bottom: 8px;
}

.subtask-editor-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 0;
	overflow: visible;
}

.subtask-editor-row {
	display: flex;
	gap: 8px;
	align-items: center;
	min-width: 0;
}

.subtask-editor-row.is-draggable {
	transition: transform 0.14s ease, opacity 0.14s ease, margin 0.14s ease;
}

.subtask-editor-input {
	flex: 1;
	min-width: 0;
	min-height: var(--task-card-menu-height);
	height: var(--task-card-menu-height);
	padding: 0 10px;
	box-sizing: border-box;
	line-height: calc(var(--task-card-menu-height) - 2px);
	border: 1px solid var(--border, rgba(128, 128, 128, 0.2));
	border-radius: 12px;
	background: var(--surface-2, transparent);
	color: inherit;
	font-size: 0.85rem;
	font-family: inherit;
	overflow: hidden;
	text-overflow: ellipsis;
}

.subtask-editor-del {
	flex-shrink: 0;
}

.field-editor-del-btn.is-confirming,
.trash-delete-btn.is-confirming,
.contact-delete-entry-btn.is-confirming,
.contact-delete-btn.is-confirming,
.medication-delete-btn.is-confirming {
	width: auto;
	min-width: 78px;
	padding-inline: 10px;
	border-color: rgba(234, 109, 109, 0.48);
	background: rgba(234, 109, 109, 0.2);
	color: rgba(255, 224, 224, 0.98);
	font-weight: 800;
}

.subtask-char-counter {
	min-width: 0;
	justify-content: center;
	flex-shrink: 0;
}

.subtask-char-counter .soft-char-counter-pill,
.subtask-char-counter.is-over .soft-char-counter-over-pill {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 22px;
	height: 22px;
	padding: 0 9px;
	border-radius: 6px;
	border: 1px solid var(--border);
	background: transparent;
	font-size: 0.72rem;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.subtask-char-counter .soft-char-counter-pill {
	min-width: 40px;
}

.subtask-char-counter.is-over .soft-char-counter-over-pill {
	min-width: 54px;
	gap: 4px;
	color: #fff;
	border-color: color-mix(in srgb, #ff4d6d 42%, var(--border));
	background-image: linear-gradient(90deg,
		#ff006e 0%,
		#ff8500 14%,
		#ffbe0b 28%,
		#38b000 42%,
		#00b4d8 56%,
		#4361ee 70%,
		#9d4edd 84%,
		#ff006e 100%);
	background-size: 220% 100%;
	background-position: 0% 50%;
	animation: nf-neuro-loop-rainbow 5s linear infinite;
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.2) inset,
		0 2px 10px rgba(0, 0, 0, 0.22);
}

.subtask-char-counter.is-over .soft-char-counter-over-pill .soft-char-counter-infinity {
	font-size: 0.9rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

.subtask-char-counter.is-over .soft-char-counter-over-pill .soft-char-counter-over-num {
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
}

.subtask-add-btn {
	font-size: 0.82rem;
	padding: 0 12px;
	align-self: start;
	width: 100%;
}

.subtask-editor-inline {
	margin: 0;
}

@media (max-width: 640px) {
	.board.is-phone-priority .board-column[data-status="today"] {
		border-color: color-mix(in srgb, var(--status-today) 34%, var(--border));
		box-shadow:
			0 22px 44px rgba(8, 10, 24, 0.18),
			0 8px 18px rgba(0, 0, 0, 0.12),
			inset 0 1px 0 rgba(255, 255, 255, 0.05);
	}

	/* Mobile: Spaltenköpfe bleiben im Layoutfluss. Sticky Köpfe ließen Karten
	   beim schnellen Scrollen dahinter durchlaufen und wirkten wie Überlappung. */
	.board.is-phone-priority .board-column .column-head {
		position: relative;
		top: auto;
		z-index: 1;
	}

	.board.is-phone-priority .board-column[data-status="today"] .column-head {
		padding: 16px 14px 14px;
	}

	body[data-card-density="compact"] .board.is-phone-priority .board-column[data-status="today"] .column-head {
		padding: 9px 12px 8px;
	}

	.board.is-phone-priority .board-column[data-status="today"] .column-body {
		padding-top: 56px;
		gap: 10px;
	}

	body[data-card-density="compact"] .board.is-phone-priority .board-column[data-status="today"] .column-body {
		padding-top: 44px;
	}

	.board.is-phone-priority .board-column:not([data-status="today"]) .column-head {
		padding-top: 13px;
		padding-bottom: 11px;
	}

	body[data-card-density="compact"] .board.is-phone-priority .board-column:not([data-status="today"]) .column-head {
		padding: 8px 11px;
	}

	.board.is-phone-priority .board-column.is-mobile-secondary {
		opacity: 0.94;
		box-shadow:
			0 10px 24px rgba(8, 10, 24, 0.08),
			0 2px 10px rgba(0, 0, 0, 0.06);
	}

	.board.is-phone-priority .board-column.is-mobile-secondary .column-body {
		gap: 7px;
	}

	.board.is-phone-priority .board-column:not([data-status="today"]) .section-kicker {
		opacity: 0.84;
	}

	.board.is-phone-priority .col-today-limit {
		font-size: 0.76rem;
	}

	.board.is-phone-priority .col-today-progress {
		height: 5px;
		margin-top: 4px;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 999px;
	}

	.board.is-phone-priority .col-today-bar {
		border-radius: 999px;
	}

	.settings-drawer.is-open::before,
	.notes-drawer.is-open::before,
	.help-drawer.is-open::before,
	.sched-drawer.is-open::before,
	.edit-panel.is-open::before,
	.composer::before,
	.hero-more-sheet:not(.is-hidden)::before,
	.search-bar.is-open::before,
	#task-history-content::before {
		content: "";
		display: block;
		width: 38px;
		height: 4px;
		margin: 0 auto 12px;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.18);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
	}

	.settings-drawer-head,
	.notes-drawer-head,
	.help-drawer-head,
	.sched-drawer-head,
	.edit-panel-head,
	.search-sheet-head,
	.hero-more-sheet-head,
	.task-history-head {
		padding-left: max(14px, env(safe-area-inset-left, 0px));
		padding-right: max(14px, env(safe-area-inset-right, 0px));
		min-height: 48px;
	}

	.settings-drawer-title,
	.help-drawer-title,
	.sched-drawer-title,
	.edit-panel-title,
	.search-sheet-title,
	.hero-more-sheet-head h3,
	.task-history-head h3 {
		font-size: 1rem;
		letter-spacing: -0.01em;
	}

	.settings-close-btn,
	.sched-close-btn,
	.search-sheet-close,
	.hero-more-close-btn,
	#close-task-history {
		width: 36px;
		min-width: 36px;
		height: 36px;
		min-height: 36px;
		border-radius: 11px;
	}

	.settings-drawer-body,
	.notes-drawer-body,
	.help-drawer-body,
	.sched-drawer-body,
	.edit-panel-body,
	.hero-more-sheet-body {
		padding-left: max(16px, env(safe-area-inset-left, 0px));
		padding-right: max(16px, env(safe-area-inset-right, 0px));
	}

	#task-history-content {
		width: 100vw;
		max-width: 100vw;
		max-height: min(84svh, 84vh);
		padding: 14px 14px max(18px, env(safe-area-inset-bottom, 0px));
		border-radius: 24px 24px 0 0;
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
		background: var(--mix-base);
		box-shadow:
			0 -14px 34px rgba(8, 10, 24, 0.22),
			0 -4px 12px rgba(0, 0, 0, 0.12);
	}

	.task-history-head {
		gap: 12px;
		align-items: center;
		padding-top: 0;
		margin-bottom: 4px;
	}

	.task-history-subtitle {
		margin-top: 4px;
		font-size: 0.84rem;
		line-height: 1.35;
	}

	.task-history-summary {
		gap: 6px;
		padding: 10px 12px;
		border-radius: 14px;
	}

	.task-history-summary-row,
	.task-history-row {
		flex-direction: column;
		gap: 2px;
	}

	.task-history-summary-row span,
	.task-history-row span {
		color: var(--muted);
		font-size: 0.8rem;
	}

	.task-history-list {
		gap: 8px;
	}

	.settings-tabbar {
		gap: 10px;
	}

	.settings-tab-btn {
		min-height: 36px;
		padding: 0 16px;
	}
}

@media (max-width: 390px) {
	.hero {
		gap: 8px 6px;
		padding: 10px 10px 9px;
	}

	.brand-copy {
		max-width: 100px;
	}

	.hero-board-switch {
		min-height: calc(var(--nf-menu-control-height) + 8px + 2px);
		padding: 5px 8px;
	}

	.hero-action-btn {
		width: 34px;
		height: 34px;
	}

	.settings-drawer-body,
	.notes-drawer-body,
	.help-drawer-body,
	.sched-drawer-body,
	.edit-panel-body,
	.hero-more-sheet-body {
		padding-left: 14px;
		padding-right: 14px;
	}

	.settings-section,
	.settings-tab-panel {
		gap: 20px;
	}
}

@media (max-width: 640px) {
	.hero .brand-copy {
		display: none;
	}

	.card-density-btns {
		flex: 1 1 auto;
	}

	.card-density-btn {
		min-width: 0;
		flex: 1 1 0;
	}

	.search-bar.is-open {
		max-height: 176px;
	}

	.search-bar.is-open.filters-expanded {
		max-height: 252px;
	}

	.search-sheet-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin-bottom: 8px;
	}

	.search-sheet-title {
		margin: 0;
		font-size: 1rem;
		font-weight: 700;
		letter-spacing: -0.01em;
	}

	.search-sheet-close {
		flex: 0 0 auto;
	}

	.search-filter-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: fit-content;
		min-width: 0;
		height: 32px;
		min-height: 32px;
		margin-top: 6px;
		padding: 0 10px;
		border-radius: 999px;
		font-size: 0.76rem;
		opacity: 0.9;
	}

	.search-filter-toggle.is-hidden {
		display: none;
	}

	#search-input {
		margin-bottom: 2px;
	}

	.search-filter-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		margin-top: 8px;
		align-items: start;
		display: none;
	}

	.search-bar.filters-expanded .search-filter-row {
		display: grid;
	}

	.search-filter-label .meta-label {
		font-size: 0.54rem;
		letter-spacing: 0.06em;
		margin-bottom: 2px;
	}

	.search-filter-select {
		height: 32px;
		min-height: 32px;
		border-radius: 10px;
		font-size: 0.84rem;
	}

	.search-filter-reset {
		grid-column: 1 / -1;
		height: 32px;
		min-height: 32px;
		margin-top: 2px;
		padding: 0 10px;
		font-size: 0.76rem;
		border-radius: 10px;
		opacity: 0.86;
	}

	.hero-more-sheet {
		padding: 8px 12px max(10px, env(safe-area-inset-bottom, 0px));
		gap: 6px;
		overflow-y: hidden;
	}

	.hero-more-sheet:not(.is-hidden) {
		/* svh = Fallback; dvh = dynamische Browserleisten (iOS) */
		height: calc(100svh - max(calc(env(safe-area-inset-top, 0px) + 6px), 60px) - max(calc(env(safe-area-inset-bottom, 0px) + 8px), 10px));
		max-height: calc(100svh - max(calc(env(safe-area-inset-top, 0px) + 6px), 60px) - max(calc(env(safe-area-inset-bottom, 0px) + 8px), 10px));
		box-sizing: border-box;
	}

	@supports (height: 100dvh) {
		.hero-more-sheet:not(.is-hidden) {
			height: calc(100dvh - max(calc(env(safe-area-inset-top, 0px) + 6px), 60px) - max(calc(env(safe-area-inset-bottom, 0px) + 8px), 10px));
			max-height: calc(100dvh - max(calc(env(safe-area-inset-top, 0px) + 6px), 60px) - max(calc(env(safe-area-inset-bottom, 0px) + 8px), 10px));
		}
	}

	.hero-more-sheet-head {
		padding-top: 0;
		margin-bottom: 2px;
	}

	/* Nicht die 48px-Kopfzeile der anderen Sheets — Schließen näher am Inhalt */
	.hero-more-sheet .hero-more-sheet-head {
		min-height: 0 !important;
		padding-bottom: 4px !important;
	}

	.hero-more-sheet:not(.is-hidden)::before {
		margin-bottom: 6px;
	}

	.hero-more-sheet-body {
		gap: 1px;
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		grid-auto-rows: min-content;
		align-content: start;
	}

	#hero-more-sheet.hero-more-sheet .ghost-button.hero-more-action,
	#hero-more-sheet.hero-more-sheet a.hero-more-action.link-button {
		box-sizing: border-box;
		display: inline-flex;
		align-items: center;
		justify-content: flex-start !important;
		width: 100%;
		min-height: 54px !important;
		height: auto !important;
		max-height: none !important;
		padding: 14px 12px !important;
		border-radius: 12px;
		font-size: 0.9rem !important;
		font-weight: 600;
		line-height: 1.24 !important;
	}

	.task-card {
		gap: 7px;
		padding: 10px 10px 9px;
	}

	.task-card.task-card--phone-layout {
		--nf-phone-task-control-gap: 6px;
	}

	.task-card.task-card--phone-layout .task-head {
		align-items: stretch;
		row-gap: var(--nf-phone-task-control-gap);
		column-gap: var(--nf-phone-task-control-gap);
	}

	.task-card.task-card--phone-layout .task-symbol-col {
		grid-row: 1 / span 2;
		align-self: stretch;
		justify-content: flex-start;
		gap: 2px;
		min-height: 0;
	}

	/* „Zuletzt bearbeitet“: hochkant, von unten lesbar (Symbolspalte) */
	.task-card.task-card--phone-layout .task-meta-time {
		margin-top: auto;
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 0;
		padding-top: 4px;
		max-height: 6.5rem;
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		text-orientation: mixed;
		line-height: 1.15;
		letter-spacing: 0.05em;
		font-size: 0.58rem;
		opacity: 0.62;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		align-self: center;
		text-align: center;
	}

	/* Footer-Grid = gleiche Spalten wie .task-tags; Control-Wrapper mit display:contents → Zellen sind Footer-Kinder */
	.task-card.task-card--phone-layout .task-footer {
		grid-column: 2;
		grid-row: 2;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
		gap: var(--nf-phone-task-control-gap);
		align-items: center;
		width: 100%;
		min-width: 0;
		justify-self: stretch;
		padding-left: 0;
		margin-left: 0;
	}

	.task-card.task-card--phone-layout .task-footer:has(.task-tags > :only-child) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
	}

	.task-card.task-card--phone-layout .task-footer>.task-tags {
		display: contents;
		width: 100%;
	}

	.task-card.task-card--phone-layout .task-footer>.task-tags>.task-menu-anchor:nth-child(1) {
		grid-column: 1;
	}

	.task-card.task-card--phone-layout .task-footer>.task-tags>.task-menu-anchor:nth-child(2) {
		grid-column: 2 / 4;
	}

	.task-card.task-card--phone-layout .task-footer>.task-tags:has(> :only-child)> .task-menu-anchor {
		grid-column: 1 / 4;
	}

	.task-card.task-card--phone-layout .task-footer>.task-schedule-row,
	.task-card.task-card--phone-layout .task-footer>.task-schedule-meta-row {
		grid-column: 1 / -1;
		width: 100%;
	}

	.task-card.task-card--phone-layout .task-footer .task-schedule-row:empty {
		display: none;
	}

	.task-phone-control-grid {
		display: contents;
	}

	.task-phone-control-grid:not(:has(.estimate-tag)) .task-phone-cell-energy {
		grid-column: 1 / 3;
	}

	.task-phone-cell-energy {
		grid-column: 1;
		min-width: 0;
		width: 100%;
		display: flex;
	}

	.task-phone-cell-energy .task-menu-anchor {
		min-width: 0;
		width: 100%;
		max-width: 100%;
		display: flex;
	}

	.task-phone-cell-energy .task-menu-trigger {
		width: 100%;
		min-width: 0;
		max-width: 100%;
		box-sizing: border-box;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.task-phone-cell-trailing {
		display: contents;
	}

	.task-phone-cell-trailing .task-action-popover-anchor {
		grid-column: 3;
		justify-self: end;
		flex-shrink: 0;
		width: 36px;
	}

	.task-phone-cell-trailing .task-action-popover-anchor>.task-menu-trigger {
		min-width: 36px;
		width: 36px;
		max-width: 36px;
		min-height: var(--task-card-menu-height);
		height: var(--task-card-menu-height);
		padding: 0;
		justify-content: center;
	}

	.task-phone-cell-trailing .estimate-tag {
		grid-column: 2;
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
		max-width: none;
		min-height: var(--task-card-menu-height);
		height: var(--task-card-menu-height);
		padding: 0 8px;
		box-sizing: border-box;
		justify-content: center;
		white-space: nowrap;
		overflow: hidden;
	}

	.task-phone-cell-trailing .estimate-tag .estimate-tag-label {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.task-phone-cell-energy .task-menu-trigger,
	.task-phone-cell-schedule .schedule-tag,
	.task-phone-cell-schedule .task-schedule-trigger,
	.task-phone-cell-trailing .task-action-popover-anchor>.task-menu-trigger,
	.task-phone-cell-trailing .estimate-tag {
		min-height: var(--task-card-menu-height);
		height: var(--task-card-menu-height);
	}

	.task-card.task-card--phone-layout .task-footer .task-menu-trigger,
	.task-card.task-card--phone-layout .task-footer .estimate-tag,
	.task-card.task-card--phone-layout .task-footer .schedule-tag,
	.task-card.task-card--phone-layout .task-footer .task-schedule-trigger {
		border-radius: 10px;
		font-size: 0.82rem;
		line-height: 1.1;
		padding: 0 10px;
		justify-content: center;
	}

	.task-card.task-card--phone-layout .task-footer .task-action-popover-anchor>.task-menu-trigger {
		padding: 0;
		font-size: 1.05rem;
	}

	.task-phone-cell-schedule {
		grid-column: 1 / -1;
		min-width: 0;
		width: 100%;
		justify-self: stretch;
	}

	.task-phone-cell-schedule .schedule-tag,
	.task-phone-cell-schedule .task-schedule-trigger {
		width: 100%;
		max-width: none;
		box-sizing: border-box;
	}

	.task-schedule-meta-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: center;
		gap: 5px 8px;
		width: 100%;
		flex: 1 1 100%;
		min-width: 0;
	}

	.task-schedule-meta-row .estimate-tag {
		flex: 0 0 auto;
	}

	.task-schedule-meta-row .recurrence-preview-tag {
		flex: 1 1 auto;
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.task-card.task-card--phone-layout .task-footer .task-schedule-row,
	.task-card.task-card--phone-layout .task-footer .task-schedule-meta-row {
		gap: var(--nf-phone-task-control-gap);
		padding-left: 0;
		margin-left: 0;
		margin-top: 0;
	}

	.task-text-inner {
		padding: 5px 8px 4px;
	}

	.task-footer {
		gap: 7px;
		padding-left: calc(var(--task-card-menu-height) + 13px);
	}

	.task-head>.task-schedule-row {
		padding-left: calc(var(--task-card-menu-height) + 13px);
		gap: 6px;
	}

	.task-meta-time {
		margin-top: 5px;
		margin-left: calc(var(--task-card-menu-height) + 13px);
	}

	body[data-card-density="compact"] .task-card.task-card--compact {
		gap: 4px;
		padding: 6px 7px 5px;
		border-radius: 13px;
	}

	body[data-card-density="compact"] .task-card.task-card--compact .task-text-inner {
		padding: 3px 6px 2px;
		padding-right: 34px;
		border-radius: 8px;
	}

	body[data-card-density="compact"] .task-card.task-card--compact .task-text {
		font-size: 0.88rem;
		line-height: 1.3;
	}

	body[data-card-density="compact"] .task-card.task-card--compact .task-footer {
		gap: 4px;
		padding-left: calc(var(--task-card-menu-height) + 9px);
	}

	body[data-card-density="compact"] .task-card.task-card--compact.task-card--phone-layout .task-footer {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
		gap: var(--nf-phone-task-control-gap);
		align-items: center;
	}

	body[data-card-density="compact"] .task-card.task-card--compact.task-card--phone-layout .task-footer:has(.task-tags > :only-child) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
	}

	body[data-card-density="compact"] .task-card.task-card--compact .task-head>.task-schedule-row {
		padding-left: calc(var(--task-card-menu-height) + 9px);
		gap: 4px;
	}

	body[data-card-density="compact"] .task-card.task-card--compact .task-footer .task-schedule-row {
		padding-left: 0;
	}

	body[data-card-density="compact"] .task-card.task-card--compact .task-meta-time {
		margin-top: 3px;
		margin-left: calc(var(--task-card-menu-height) + 9px);
		font-size: 0.64rem;
	}

	body[data-card-density="compact"] .task-card.task-card--compact.task-card--phone-layout .task-meta-time {
		margin-top: auto;
		margin-left: 0;
		font-size: 0.56rem;
	}

	body[data-card-density="compact"] .task-card.task-card--compact .task-tags {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4px;
	}

	body[data-card-density="compact"] .task-card.task-card--compact.task-card--phone-layout .task-tags {
		gap: var(--nf-phone-task-control-gap);
	}

	body[data-card-density="compact"] .task-card.task-card--compact.task-card--phone-layout .task-tags:has(> :only-child) {
		grid-template-columns: minmax(0, 1fr);
	}

	body[data-card-density="compact"] .task-card.task-card--compact .task-actions {
		gap: 2px;
	}

	body[data-card-density="compact"] .task-card.task-card--compact .task-schedule-row .recurrence-preview-tag,
	body[data-card-density="compact"] .task-card.task-card--compact .subtask-bar,
	body[data-card-density="compact"] .task-card.task-card--compact .subtask-list {
		display: none;
	}

	body[data-card-density="comfortable"] .task-card.task-card--comfortable {
		gap: 10px;
		padding: 13px 12px 12px;
	}

	body[data-card-density="comfortable"] .task-card.task-card--comfortable .task-text {
		font-size: 0.95rem;
	}

	body[data-card-density="comfortable"] .task-card.task-card--comfortable .task-text-inner {
		padding: 6px 10px 5px;
		border-radius: 10px;
	}

	body[data-card-density="comfortable"] .task-card.task-card--comfortable .task-footer {
		gap: 8px;
		padding-left: calc(var(--task-card-menu-height) + 13px);
	}

	body[data-card-density="comfortable"] .task-card.task-card--comfortable .task-tags {
		gap: 7px;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	/* Phone: Kontext + Kategorie wieder nebeneinander (flex+100%-Breite würde stapeln) */
	body[data-card-density="comfortable"] .task-card.task-card--comfortable.task-card--phone-layout .task-footer {
		gap: var(--nf-phone-task-control-gap);
	}

	body[data-card-density="comfortable"] .task-card.task-card--comfortable.task-card--phone-layout .task-tags {
		display: contents;
	}

	body[data-card-density="comfortable"] .task-card.task-card--comfortable.task-card--phone-layout .task-tags:has(> :only-child) {
		display: contents;
	}

	body[data-card-density="comfortable"] .task-card.task-card--comfortable .task-tags .tag {
		min-height: var(--task-card-menu-height);
		padding: 5px 9px;
		font-size: 0.76rem;
	}

	body[data-card-density="comfortable"] .task-card.task-card--comfortable .task-actions {
		width: 100%;
		justify-content: flex-end;
		gap: 6px;
	}

	body[data-card-density="comfortable"] .task-card.task-card--comfortable .task-schedule-row {
		padding-left: calc(var(--task-card-menu-height) + 13px);
		gap: 7px;
	}

	body[data-card-density="comfortable"] .task-card.task-card--comfortable .task-meta-time {
		margin-top: 7px;
		margin-left: calc(var(--task-card-menu-height) + 13px);
	}

	body[data-card-density="comfortable"] .task-card.task-card--comfortable.task-card--phone-layout .task-meta-time {
		margin-top: auto;
		margin-left: 0;
		font-size: 0.58rem;
	}

	.composer-symbol-choice,
	.edit-panel-icon-section:not(.edit-panel-icon-in-section-head) {
		max-width: 112px;
	}
}

/* ── Recurrence- und Zeitschätzungs-Chips im Composer ─────────────────────── */
/* Gleiche Zeilenhöhe wie Wiederholung (aktiver Chip ohne translateY) */
#task-recurrence .composer-choice-button.active,
#task-estimate .composer-choice-button.active {
	transform: none;
}

#task-recurrence .composer-choice-button:not(.active) {
	color: #8b6cf7 !important;
	border-color: color-mix(in srgb, #8b6cf7 30%, transparent) !important;
	background: color-mix(in srgb, #8b6cf7 8%, var(--mix-base)) !important;
	opacity: 0.72 !important;
}

#task-recurrence .composer-choice-button.active {
	color: #8b6cf7 !important;
	border-color: #8b6cf7 !important;
	background: color-mix(in srgb, #8b6cf7 22%, var(--mix-base)) !important;
	opacity: 1 !important;
}

#task-recurrence {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

#task-estimate .composer-choice-button:not(.active) {
	color: #10b981 !important;
	border-color: color-mix(in srgb, #10b981 30%, transparent) !important;
	background: color-mix(in srgb, #10b981 8%, var(--mix-base)) !important;
	opacity: 0.72 !important;
}

#task-estimate .composer-choice-button.active {
	color: #10b981 !important;
	border-color: #10b981 !important;
	background: color-mix(in srgb, #10b981 22%, var(--mix-base)) !important;
	opacity: 1 !important;
}

#task-recurrence .composer-choice-button,
#task-estimate .composer-choice-button {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── Estimate & Recurrence Tags ───────────────────────────────────────────── */
.tag.estimate-tag {
	background: color-mix(in srgb, #10b981 15%, transparent);
	color: #10b981;
	border: 1px solid color-mix(in srgb, #10b981 30%, transparent);
}

.tag.estimate-tag.estimate-tag--with-icon {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.estimate-tag-icon {
	display: inline-flex;
	flex-shrink: 0;
	line-height: 0;
	color: inherit;
}

.estimate-tag-stopwatch-svg {
	width: 15px;
	height: 15px;
	display: block;
}

.estimate-tag-label {
	min-width: 0;
}

.tag.recurrence-tag {
	background: color-mix(in srgb, #6c63ff 15%, transparent);
	color: #6c63ff;
	border: 1px solid color-mix(in srgb, #6c63ff 30%, transparent);
}

body[data-theme="bw"] .tag.estimate-tag {
	background: rgba(17, 17, 17, 0.06);
	color: rgba(17, 17, 17, 0.86);
	border-color: rgba(17, 17, 17, 0.16);
	filter: grayscale(1) saturate(0);
}

body[data-theme="bw"] .tag.recurrence-tag {
	background: rgba(17, 17, 17, 0.06);
	color: rgba(17, 17, 17, 0.86);
	border-color: rgba(17, 17, 17, 0.16);
	/* Emoji 🔄 bleibt sonst farbig */
	filter: grayscale(1) saturate(0);
}

body[data-theme="bw"] .task-schedule-row .tag.recurrence-preview-tag {
	background: rgba(17, 17, 17, 0.05);
	color: rgba(17, 17, 17, 0.72);
	border-color: rgba(17, 17, 17, 0.12);
	filter: grayscale(1) saturate(0);
}

body[data-theme="bw"] #task-recurrence .composer-choice-button:not(.active) {
	color: rgba(17, 17, 17, 0.72) !important;
	border-color: rgba(17, 17, 17, 0.14) !important;
	background: rgba(17, 17, 17, 0.05) !important;
	opacity: 0.92 !important;
}

body[data-theme="bw"] #task-recurrence .composer-choice-button.active {
	color: rgba(17, 17, 17, 0.92) !important;
	border-color: rgba(17, 17, 17, 0.28) !important;
	background: rgba(17, 17, 17, 0.1) !important;
	opacity: 1 !important;
}

body[data-theme="bw"] .task-tag-dropdown-option.editor-recurrence-trigger,
body[data-theme="bw"] .composer-field-tag.editor-recurrence-trigger {
	color: var(--text);
}

body[data-theme="bw"] #task-recurrence .composer-select-trigger {
	color: var(--text);
	border-color: rgba(17, 17, 17, 0.16);
	background: rgba(17, 17, 17, 0.05);
}

body[data-theme="bw"] .recurrence-info-card {
	border-color: var(--border);
	background: var(--surface-mid);
}

body[data-theme="bw"] .edit-panel-body .editor-recurrence-menu .recurrence-chip {
	color: var(--text);
}

body[data-theme="bw"] .edit-panel-body .editor-recurrence-menu .recurrence-chip:not(.active) {
	border-color: rgba(17, 17, 17, 0.14);
	background: rgba(17, 17, 17, 0.04);
}

body[data-theme="bw"] .edit-panel-body .editor-recurrence-menu .recurrence-chip.active {
	border-color: rgba(17, 17, 17, 0.32);
	background: rgba(17, 17, 17, 0.1);
	color: var(--text);
}

body[data-theme="bw"] .recurrence-chip:hover {
	border-color: rgba(17, 17, 17, 0.22);
	color: var(--text);
}

body[data-theme="bw"] .recurrence-chip.active {
	background: rgba(17, 17, 17, 0.14);
	border-color: rgba(17, 17, 17, 0.32);
	color: var(--text);
}

.task-action-tag {
	cursor: pointer;
}

.task-action-tag:hover {
	filter: brightness(1.04);
}

/* ── Estimate chips in editor ─────────────────────────────────────────────── */
.estimate-menu,
.recurrence-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.estimate-chip,
.recurrence-chip {
	padding: 3px 10px;
	border-radius: 10px;
	border: 1px solid var(--border, rgba(128, 128, 128, 0.25));
	background: var(--surface-2, transparent);
	color: var(--text-muted, rgba(128, 128, 128, 0.8));
	cursor: pointer;
	font-size: 0.78rem;
	font-family: inherit;
	transition: all 0.15s;
	white-space: nowrap;
}

.estimate-chip:hover,
.recurrence-chip:hover {
	border-color: var(--accent, #6c63ff);
	color: var(--accent, #6c63ff);
}

.estimate-chip.active,
.recurrence-chip.active {
	background: var(--accent, #6c63ff);
	border-color: var(--accent, #6c63ff);
	color: white;
}

/* Nur-Lese-Board (Viewer): dezente Kennzeichnung */
body.nf-board-readonly .board {
	opacity: 0.97;
}

body.nf-board-readonly #toggle-composer:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CM6 WYSIWYG Markdown – NeuroFlow
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Heading sizes ───────────────────────────────────────────────────────── */
.cm-nf-h1 {
	font-size: 1.65em;
	font-weight: 700;
	line-height: 1.25;
}

.cm-nf-h2 {
	font-size: 1.35em;
	font-weight: 700;
	line-height: 1.30;
}

.cm-nf-h3 {
	font-size: 1.15em;
	font-weight: 600;
	line-height: 1.35;
}

.cm-nf-h4 {
	font-size: 1.05em;
	font-weight: 600;
}

.cm-nf-h5 {
	font-size: 1em;
	font-weight: 600;
	font-style: italic;
}

.cm-nf-h6 {
	font-size: 0.95em;
	font-weight: 600;
	color: var(--text-muted);
}

/* ── Inline formatting ───────────────────────────────────────────────────── */
.cm-nf-strong {
	font-weight: 700;
}

.cm-nf-em {
	font-style: italic;
}

.cm-nf-strike {
	text-decoration: line-through;
	opacity: 0.65;
}

.cm-nf-code {
	font-family: "SF Mono", "Fira Code", ui-monospace, monospace;
	font-size: 0.88em;
	background: color-mix(in srgb, var(--text) 8%, transparent);
	border-radius: 4px;
	padding: 1px 4px;
}

/* ── Links ───────────────────────────────────────────────────────────────── */
.cm-nf-link {
	color: var(--accent, #6366f1);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

/* ── Blockquote ──────────────────────────────────────────────────────────── */
.cm-nf-blockquote {
	border-left: 3px solid var(--accent, #6366f1);
	padding-left: 8px;
	opacity: 0.80;
	font-style: italic;
}

/* ── Code block ──────────────────────────────────────────────────────────── */
.cm-nf-code-block {
	font-family: "SF Mono", "Fira Code", ui-monospace, monospace;
	font-size: 0.88em;
	background: color-mix(in srgb, var(--text) 6%, transparent);
	border-radius: 8px;
	display: block;
}

/* ── Table ───────────────────────────────────────────────────────────────── */
.cm-nf-table {
	font-size: 0.90em;
}

/* ── HR widget ───────────────────────────────────────────────────────────── */
.cm-nf-hr {
	height: 1px;
	background: var(--border, #e5e7eb);
	margin: 6px 0;
	border-radius: 1px;
	pointer-events: none;
}

/* ── Task checkbox ───────────────────────────────────────────────────────── */
.cm-nf-checkbox {
	appearance: none;
	-webkit-appearance: none;
	width: 1.1em;
	height: 1.1em;
	border: 1.5px solid var(--text-muted, #6b7280);
	border-radius: 4px;
	background: transparent;
	vertical-align: middle;
	margin-right: 0.35em;
	margin-bottom: 0.1em;
	cursor: pointer;
	position: relative;
	flex-shrink: 0;
	transition: background 0.15s, border-color 0.15s;
}

.cm-nf-checkbox:checked {
	background: var(--accent, #6366f1);
	border-color: var(--accent, #6366f1);
}

.cm-nf-checkbox:checked::after {
	content: '';
	position: absolute;
	left: 3px;
	top: 0px;
	width: 4px;
	height: 8px;
	border: 2px solid #fff;
	border-top: none;
	border-left: none;
	transform: rotate(40deg);
}

.cm-nf-checkbox:focus {
	outline: 2px solid var(--accent, #6366f1);
	outline-offset: 1px;
}

/* ── Hint panel – expanded content ──────────────────────────────────────── */
.notes-md-hint {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.notes-md-hint .notes-md-hint-line {
	display: block;
	font-size: 0.80rem;
	color: var(--text-muted);
	line-height: 1.55;
}

.notes-md-hint .notes-md-hint-line strong {
	color: var(--text);
	font-weight: 600;
}

/* ── Mobile: Kontext-Editor Optimierungen (nicht Pomodoro-Zeilen) ─────────── */
@media (max-width: 640px) {

	/* Jede Zeile: Name + Griff + × oben, Farbpicker darunter */
	.field-editor-row:not(.pomodoro-settings-row) {
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-rows: auto auto;
		row-gap: 6px;
		column-gap: 6px;
		margin-bottom: 8px;
		align-items: center;
	}

	/* Drag-Griff: 1. Zeile, 1. Spalte */
	.field-editor-row:not(.pomodoro-settings-row) .field-editor-drag-handle {
		grid-row: 1;
		grid-column: 1;
		align-self: center;
	}

	/* Label-Input: 1. Zeile, 2. Spalte */
	.field-editor-row:not(.pomodoro-settings-row)>.field-editor-input-wrap {
		grid-row: 1;
		grid-column: 2;
		flex: none;
		width: 100%;
	}

	/* Löschen-Button: 1. Zeile, 3. Spalte */
	.field-editor-row:not(.pomodoro-settings-row) .field-editor-del-btn {
		grid-row: 1;
		grid-column: 3;
		align-self: center;
	}

	/* Farbpicker: 2. Zeile, volle Breite (alle 3 Spalten) */
	.field-editor-row:not(.pomodoro-settings-row)>.field-color-picker {
		grid-row: 2;
		grid-column: 1 / -1;
		flex-wrap: wrap;
		gap: 6px;
	}

	/* Dots etwas größer für bessere Tipp-Fläche */
	.field-editor-row:not(.pomodoro-settings-row)>.field-color-picker .color-dot {
		width: 20px;
		height: 20px;
	}

	/* Ohne Drag-Griff (neue Zeile / nicht-area): volle Breite für Input */
	.field-editor-row:not(.pomodoro-settings-row):not(.is-draggable)>.field-editor-input-wrap {
		grid-column: 1 / 3;
	}

	.pomodoro-settings-row {
		padding: 7px 10px;
		gap: 8px;
	}

	.pomodoro-settings-stepper .pomodoro-settings-step {
		width: 34px;
		height: 34px;
	}

	.pomodoro-settings-stepper .pomodoro-settings-step--wide {
		min-width: 40px;
		height: 34px;
		min-height: 34px;
	}

	/* Beschreibungstext im Kontext-Editor kompakter */
	.field-editor-group-copy--flush {
		font-size: 0.78rem;
		margin-bottom: 6px;
	}

	.field-editor-group-hint {
		font-size: 0.72rem;
		margin-bottom: 6px;
	}
}

.contacts-root,
.medications-root {
	display: grid;
	gap: 14px;
	padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
}

.contact-card,
.medication-card {
	background: linear-gradient(180deg, rgba(52, 58, 84, 0.92), rgba(34, 38, 57, 0.96));
	border: 1px solid rgba(129, 142, 199, 0.18);
	border-radius: 18px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	padding: 12px;
	display: grid;
	gap: 9px;
}

#contacts-drawer.notes-drawer {
	width: clamp(340px, 36vw, 500px);
}

#medications-drawer.notes-drawer {
	width: clamp(360px, 38vw, 560px);
}

.contact-card-collapsible {
	padding: 0;
	overflow: hidden;
}

.contact-card-summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px;
	cursor: pointer;
}

.contact-card-summary::-webkit-details-marker {
	display: none;
}

.contact-card-summary-copy {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.contact-card-summary-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--text);
}

.contact-card-summary-meta {
	font-size: 0.82rem;
	color: var(--muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.contact-card-summary-badge {
	font-size: 1rem;
	color: var(--muted);
	flex: 0 0 auto;
}

.contact-card-collapsible[open] .contact-card-summary-badge {
	transform: rotate(90deg);
}

.contact-card-body {
	display: grid;
	gap: 9px;
	padding: 0 14px 14px;
}

.contact-card-summary-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 14px 12px;
}

.contact-search-card {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 2px 2px;
}

.contact-search-input {
	flex: 1 1 auto;
	min-width: 0;
}

.contact-search-meta {
	flex: 0 0 auto;
	font-size: 0.78rem;
	color: var(--muted);
	white-space: nowrap;
}

.contact-card-head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.contact-card .contact-card-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: stretch;
	gap: 8px;
}

.contact-name-input {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 700;
}

.contact-name-extra-input {
	width: min(100%, 320px);
	align-self: flex-start;
	min-height: 36px;
	height: 36px;
	max-height: 72px;
	line-height: 1.28;
	resize: none;
}

.contact-favorite-toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--muted);
	font-size: 0.8rem;
	white-space: nowrap;
}

.contact-card .contact-favorite-toggle {
	min-height: 34px;
	padding: 0 10px;
	justify-self: start;
	border-radius: var(--nf-settings-control-radius);
	border: 1px solid rgba(129, 142, 199, 0.16);
	background: rgba(129, 142, 199, 0.08);
}

.contact-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.contact-grid--stacked {
	grid-template-columns: minmax(0, 1fr);
}

.contact-cityline {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: 8px;
}

.contact-postal-input {
	text-align: center;
}

.contact-category-wrap {
	display: grid;
	gap: 6px;
}

.contact-category-label {
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.contact-category-select {
	width: 100%;
	flex: 0 0 auto;
}

.contact-note-input {
	width: 100%;
	min-height: 132px;
	padding: 10px 12px;
	line-height: 1.35;
}

.contact-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.contact-card .contact-multi-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}

.contact-card .contact-multi-head strong {
	font-size: 0.98rem;
	font-weight: 700;
	color: var(--text);
}

.contact-card .contact-multi-list {
	display: grid;
	gap: 8px;
}

.contact-card .contact-multi-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
	gap: 8px;
	align-items: center;
}

.contact-card .contact-card-actions {
	align-items: center;
}

.contact-card .contact-card-actions .settings-inline-btn {
	min-width: 0;
}

.contact-card .contact-save-btn {
	margin-right: auto;
	min-width: 108px;
	border-color: rgba(76, 215, 162, 0.26);
	background: rgba(76, 215, 162, 0.1);
	color: rgba(202, 248, 232, 0.96);
	font-weight: 800;
}

.shopping-store-name-input {
	min-width: 0;
	font-weight: 700;
	line-height: 1.28;
}

.shopping-store-empty-copy {
	color: var(--muted);
	font-size: 0.82rem;
	padding: 4px 2px 2px;
}

.medication-card .contact-card-head {
	align-items: stretch;
}

.medication-card-head-shell {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
}

.medication-card .contact-card-head .contact-name-input {
	flex: 1 1 auto;
}

.medication-card .contact-favorite-toggle {
	min-height: 34px;
	padding: 0 10px;
	align-self: center;
	border-color: rgba(76, 215, 162, 0.22);
	background: rgba(76, 215, 162, 0.08);
}

.medication-dose-row,
.medication-intake-row {
	display: grid;
	grid-template-columns: minmax(64px, 0.34fr) minmax(96px, 0.34fr) minmax(0, 1fr);
	gap: 8px;
	align-items: stretch;
}

.medication-intake-row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

.medication-intake-row .medication-status-pill,
.medication-intake-row .medication-next-pill {
	flex: 1 1 136px;
}

.medication-intake-row .medication-state-chip {
	flex: 0 0 auto;
}

.medication-card .contact-multi-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}

.medication-card .contact-multi-head strong {
	font-size: 0.98rem;
	font-weight: 700;
	color: var(--text);
}

.medication-card .medication-times-head {
	display: grid;
	grid-template-columns: auto minmax(118px, 1fr) auto;
	align-items: center;
	margin-bottom: 8px;
}

.medication-card .contact-multi-list {
	display: grid;
	gap: 8px;
}

.medication-card .contact-multi-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 34px;
	gap: 8px;
	align-items: center;
}

.medication-card .medication-time-input {
	width: 100%;
}

.medication-card .medication-time-input--head {
	min-width: 0;
}

.medication-status-pill {
	min-height: 34px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 10px;
	border-radius: var(--nf-settings-control-radius);
	border: 1px solid rgba(234, 109, 156, 0.22);
	background: rgba(234, 109, 156, 0.08);
	color: rgba(248, 210, 225, 0.95);
	font-size: 0.8rem;
	line-height: 1.2;
	box-sizing: border-box;
	width: 100%;
}

.medication-status-pill span,
.medication-next-pill span {
	margin-left: auto;
	font-weight: 800;
	white-space: nowrap;
}

.medication-status-pill.is-success {
	border-color: rgba(76, 215, 162, 0.24);
	background: rgba(76, 215, 162, 0.12);
	color: rgba(202, 248, 232, 0.96);
}

.medication-status-pill.is-open {
	border-color: rgba(255, 174, 66, 0.22);
	background: rgba(255, 174, 66, 0.12);
	color: rgba(255, 223, 170, 0.96);
}

.medication-status-pill.is-paused {
	border-color: rgba(234, 109, 109, 0.26);
	background: rgba(234, 109, 109, 0.12);
	color: rgba(255, 204, 204, 0.96);
}

.medication-next-pill {
	min-height: 34px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 10px;
	border-radius: var(--nf-settings-control-radius);
	border: 1px solid rgba(76, 215, 162, 0.2);
	background: rgba(76, 215, 162, 0.08);
	color: rgba(202, 248, 232, 0.96);
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.15;
	box-sizing: border-box;
	width: 100%;
}

.medication-next-pill.is-paused {
	border-color: rgba(234, 109, 109, 0.26);
	background: rgba(234, 109, 109, 0.12);
	color: rgba(255, 204, 204, 0.96);
}

.medication-state-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.medication-state-chip {
	min-height: 30px;
	display: inline-flex;
	align-items: center;
	padding: 0 10px;
	border-radius: var(--nf-settings-control-radius);
	border: 1px solid rgba(129, 142, 199, 0.16);
	background: rgba(129, 142, 199, 0.08);
	color: var(--text);
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1;
	box-sizing: border-box;
}

.medication-state-chip.is-success {
	border-color: rgba(76, 215, 162, 0.24);
	background: rgba(76, 215, 162, 0.12);
	color: rgba(202, 248, 232, 0.96);
}

.medication-state-chip.is-warning {
	border-color: rgba(255, 174, 66, 0.22);
	background: rgba(255, 174, 66, 0.12);
	color: rgba(255, 223, 170, 0.96);
}

.medication-state-chip.is-active {
	border-color: rgba(76, 215, 162, 0.24);
	background: rgba(76, 215, 162, 0.12);
	color: rgba(202, 248, 232, 0.96);
}

.medication-state-chip.is-paused {
	border-color: rgba(234, 109, 109, 0.26);
	background: rgba(234, 109, 109, 0.12);
	color: rgba(255, 204, 204, 0.96);
}

.medication-card .contact-note-input {
	min-height: 84px;
	padding-top: 10px;
	padding-bottom: 10px;
	resize: vertical;
}

.medication-card .contact-card-actions {
	align-items: center;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

.medication-card .contact-card-actions .settings-inline-btn {
	min-width: 0;
	justify-content: center;
}

.medication-history-block {
	display: grid;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 14px;
	border: 1px solid rgba(129, 142, 199, 0.12);
	background: rgba(19, 22, 36, 0.18);
}

.medication-history-head {
	margin-bottom: 0;
}

.medication-history-helper {
	margin: 4px 0 8px;
	color: var(--muted);
	font-size: 0.78rem;
	line-height: 1.35;
}

.medication-history-manual,
.medication-history-more {
	border-radius: var(--nf-settings-control-radius);
	border: 1px solid rgba(129, 142, 199, 0.12);
	background: rgba(255, 255, 255, 0.025);
}

.medication-history-manual>summary,
.medication-history-more>summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 34px;
	padding: 0 10px;
	cursor: pointer;
	font-size: 0.84rem;
	font-weight: 800;
	color: var(--text);
	list-style: none;
}

.medication-history-manual>summary::-webkit-details-marker,
.medication-history-more>summary::-webkit-details-marker {
	display: none;
}

.medication-history-manual>summary::after,
.medication-history-more>summary::after {
	content: "▾";
	color: var(--muted);
	font-size: 0.78rem;
	transition: transform 0.16s ease;
}

.medication-history-manual[open]>summary::after,
.medication-history-more[open]>summary::after {
	transform: rotate(180deg);
}

.medication-history-count {
	font-size: 0.78rem;
	color: var(--muted);
}

.medication-history-list {
	display: grid;
	gap: 6px;
}

.medication-history-more {
	margin-top: 4px;
}

.medication-history-more .medication-history-group {
	padding: 0 10px 8px;
}

.medication-history-group {
	display: grid;
	gap: 6px;
	padding-top: 2px;
}

.medication-history-group + .medication-history-group {
	padding-top: 8px;
	border-top: 1px solid rgba(129, 142, 199, 0.1);
}

.medication-history-group-title {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}

.medication-history-group-list {
	display: grid;
	gap: 6px;
}

.medication-history-manual-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(96px, 0.45fr);
	gap: 8px;
	align-items: center;
	padding: 0 10px 10px;
}

.medication-history-manual-row .settings-inline-btn {
	grid-column: 1 / -1;
	justify-content: center;
}

.medication-history-date-input,
.medication-history-time-input {
	width: 100%;
}

.medication-history-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 0.84rem;
	color: var(--text);
}

.medication-history-copy {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.medication-history-date {
	font-weight: 600;
}

.medication-history-delete-btn {
	flex: 0 0 auto;
	min-width: 32px;
	width: 32px;
	padding: 0;
	border-color: rgba(234, 109, 109, 0.26);
	color: rgba(255, 180, 180, 0.95);
	background: rgba(234, 109, 109, 0.08);
}

.medication-history-delete-btn.is-confirming {
	width: auto;
	min-width: 78px;
	padding: 0 10px;
	background: rgba(234, 109, 109, 0.2);
	border-color: rgba(234, 109, 109, 0.48);
	color: rgba(255, 224, 224, 0.98);
	font-weight: 800;
}

.medication-time-delete-btn {
	width: 34px;
	min-width: 34px;
	padding: 0;
	border-color: rgba(234, 109, 109, 0.26);
	color: rgba(255, 180, 180, 0.95);
	background: rgba(234, 109, 109, 0.08);
}

.medication-time-delete-btn.is-confirming {
	width: auto;
	min-width: 78px;
	padding: 0 10px;
	background: rgba(234, 109, 109, 0.2);
	border-color: rgba(234, 109, 109, 0.48);
	color: rgba(255, 224, 224, 0.98);
	font-weight: 800;
}

.medication-history-relative,
.medication-history-empty {
	color: var(--muted);
	font-size: 0.78rem;
}

@media (max-width: 640px) {
	.admin-stats-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.admin-user-card-head {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
	}

	.admin-user-compact-meta,
	.admin-user-badges {
		grid-column: 1 / -1;
		justify-content: flex-start;
	}

	.contact-card-head {
		display: grid;
		align-items: stretch;
		gap: 8px;
	}

	.contact-card,
	.medication-card {
		padding: 10px;
		border-radius: 16px;
		gap: 8px;
	}

	.contact-card-body {
		padding: 0 10px 10px;
		gap: 8px;
	}

	.contact-card-summary {
		min-height: 54px;
		padding: 12px 10px;
	}

	.contact-card-summary-actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 0 10px 10px;
		gap: 7px;
	}

	.contact-card-summary-actions .settings-inline-btn {
		width: 100%;
		min-height: 36px;
		justify-content: center;
	}

	.contact-name-extra-input {
		width: 100%;
	}

	.contact-card .contact-favorite-toggle,
	.medication-card .contact-favorite-toggle {
		justify-self: stretch;
		justify-content: center;
		min-height: 38px;
	}

	.contact-card-body,
	.medication-card {
		gap: 8px;
	}

	.contact-card .contact-multi-head,
	.medication-card .contact-multi-head {
		align-items: center;
	}

	.contact-card .contact-multi-head strong,
	.medication-card .contact-multi-head strong {
		min-width: 0;
	}

	.contact-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 7px;
	}

	.contact-cityline {
		grid-template-columns: minmax(72px, 0.4fr) minmax(0, 1fr);
		gap: 7px;
	}

	.medication-card .contact-multi-row {
		grid-template-columns: minmax(0, 1fr) 38px;
		gap: 7px;
	}

	.medication-card .medication-times-head {
		grid-template-columns: minmax(62px, auto) minmax(92px, 1fr) 76px;
		gap: 7px;
	}

	.medication-card .medication-times-head strong {
		grid-column: auto;
		font-size: 0.9rem;
	}

	.medication-card .medication-times-head .settings-inline-btn {
		width: 76px;
		min-height: 38px;
		padding-inline: 0;
		justify-content: center;
	}

	.medication-card .medication-time-input {
		min-height: 38px;
		text-align: center;
	}

	.medication-time-delete-btn.is-confirming {
		grid-column: 1 / -1;
		width: 100%;
	}

	.medication-dose-row,
	.medication-intake-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 7px;
	}

	.medication-card-head-shell {
		grid-template-columns: minmax(0, 1fr);
	}

	.medication-status-pill,
	.medication-next-pill {
		min-height: 40px;
		align-items: center;
		padding: 6px 10px;
	}

	.contact-card .contact-multi-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 6px;
	}

	.contact-card .contact-multi-head,
	.medication-card .contact-multi-head {
		gap: 8px;
		margin-bottom: 6px;
	}

	.contact-card .contact-multi-head .settings-inline-btn,
	.medication-card .contact-multi-head .settings-inline-btn {
		min-height: 34px;
	}

	.contact-card .contact-multi-row .contact-delete-entry-btn {
		justify-self: end;
		width: 40px;
		min-width: 40px;
		min-height: 36px;
		padding: 0;
	}

	.contact-card .contact-multi-row .contact-delete-entry-btn.is-confirming {
		grid-column: 1 / -1;
		justify-self: stretch;
		width: 100%;
	}

	.medication-history-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		width: 100%;
	}

	.medication-history-manual-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.medication-history-manual-row .settings-inline-btn {
		min-height: 38px;
	}

	.medication-card .contact-card-actions {
		grid-template-columns: minmax(0, 1fr);
		gap: 7px;
	}

	.medication-card .contact-card-actions .settings-inline-btn,
	.contact-card .contact-card-actions .settings-inline-btn {
		min-height: 38px;
	}

	.contact-card .contact-card-actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 7px;
	}

	.contact-card .contact-save-btn,
	.contact-card .contact-delete-btn {
		grid-column: 1 / -1;
		width: 100%;
		margin-right: 0;
		justify-content: center;
	}
}

.daily-log-root {
	display: grid;
	gap: 14px;
}

.daily-log-today,
.daily-log-insights,
.daily-log-history {
	border: 1px solid var(--border);
	border-radius: 20px;
	background:
		linear-gradient(145deg, color-mix(in srgb, var(--card) 96%, #6ccf9b 4%), color-mix(in srgb, var(--card) 94%, #7a8cff 6%));
	box-shadow: var(--soft-shadow);
	padding: 16px;
	overflow: hidden;
}

.daily-log-today-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.daily-log-today-head > div {
	min-width: 0;
}

.daily-log-today-head h3 {
	margin: 2px 0 0;
	font-size: 1.24rem;
}

.daily-log-head-actions {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	min-width: 0;
}

.daily-vitals-toggle {
	width: 42px;
	min-width: 42px;
	padding-inline: 0;
	color: color-mix(in srgb, #f06f8f 84%, var(--text));
	border-color: color-mix(in srgb, #f06f8f 38%, var(--border));
	background: color-mix(in srgb, #f06f8f 10%, var(--surface-mid));
	font-size: 1rem;
	line-height: 1;
}

.daily-vitals-toggle.is-active {
	color: #fff;
	border-color: rgba(240, 111, 143, 0.7);
	background: linear-gradient(135deg, #f06f8f, #ff9a76);
	box-shadow: 0 10px 22px rgba(240, 111, 143, 0.2);
}

.daily-vitals-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.daily-vitals-grid label,
.daily-field-full {
	display: grid;
	gap: 5px;
	color: var(--muted);
	font-size: 0.82rem;
	font-weight: 800;
}

.daily-log-root .settings-inline-input {
	padding: 10px 12px;
	line-height: 1.35;
}

.daily-field-full {
	margin-top: 10px;
}

.daily-marker-grid,
.daily-template-row,
.daily-insight-row,
.daily-history-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.daily-marker-grid {
	margin-top: 14px;
	display: grid;
	gap: 10px;
}

.daily-marker-group {
	display: grid;
	gap: 7px;
	padding: 10px;
	border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
	border-radius: var(--nf-settings-shell-radius);
	background: color-mix(in srgb, var(--surface-mid) 46%, transparent);
}

.daily-marker-group p {
	margin: 0;
	color: var(--muted);
	font-size: 0.68rem;
	font-weight: 900;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.daily-marker-group-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.daily-marker-chip,
.daily-template-chip,
.daily-insight-pill,
.daily-history-chip {
	border: 1px solid var(--border);
	border-radius: var(--nf-settings-control-radius);
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	color: var(--text);
	min-height: 36px;
	padding: 7px 12px;
	font-weight: 850;
	font-size: 0.88rem;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
	box-sizing: border-box;
	max-width: 100%;
	overflow-wrap: anywhere;
}

.daily-marker-chip {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.daily-marker-chip.is-active {
	border-color: color-mix(in srgb, var(--accent) 70%, white 12%);
	background: color-mix(in srgb, var(--accent) 22%, var(--surface));
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

.daily-marker-chip--green.is-active { --accent: #43d889; }
.daily-marker-chip--blue.is-active { --accent: #58a9ff; }
.daily-marker-chip--orange.is-active { --accent: #f0a447; }
.daily-marker-chip--red.is-active { --accent: #ff6b73; }
.daily-marker-chip--gray.is-active { --accent: #a9b0c8; }
.daily-marker-chip--purple.is-active { --accent: #a98cff; }

.daily-template-row {
	margin-top: 10px;
}

.daily-more-note {
	margin-top: 12px;
	border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
	border-radius: var(--nf-settings-control-radius);
	background: color-mix(in srgb, var(--surface) 72%, transparent);
	overflow: hidden;
}

.daily-more-note>summary {
	min-height: 38px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 0 12px;
	cursor: pointer;
	list-style: none;
	color: var(--text);
	font-size: 0.88rem;
	font-weight: 850;
}

.daily-more-note>summary::-webkit-details-marker {
	display: none;
}

.daily-more-note>summary::after {
	content: "▾";
	color: var(--muted);
	font-size: 0.8rem;
	transition: transform 0.16s ease;
}

.daily-more-note[open]>summary::after {
	transform: rotate(180deg);
}

.daily-more-note .daily-template-row,
.daily-more-note .daily-field-full {
	margin: 0;
	padding: 0 12px 12px;
}

.daily-more-note .daily-template-row {
	padding-top: 2px;
}

.daily-template-chip {
	min-height: 34px;
	cursor: pointer;
	color: var(--muted);
	text-align: left;
}

.daily-template-chip:hover,
.daily-template-chip:focus-visible {
	color: var(--text);
	border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.daily-memo {
	min-height: 120px;
	padding: 12px 14px;
	resize: vertical;
}

.daily-log-history {
	display: grid;
	gap: 10px;
}

.daily-history-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
	border-radius: 16px;
	padding: 10px;
	background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.daily-history-card.is-editing {
	border-color: color-mix(in srgb, #58a9ff 42%, var(--border));
	background: color-mix(in srgb, var(--surface-mid) 70%, transparent);
}

.daily-history-card-head {
	display: grid;
	grid-template-columns: minmax(86px, auto) minmax(0, 1fr);
	gap: 10px;
	align-items: center;
}

.daily-history-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
}

.daily-history-date {
	color: var(--muted);
	font-weight: 900;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.daily-history-edit {
	display: grid;
	gap: 0;
	padding-top: 10px;
	border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.daily-history-body p {
	margin: 7px 0 0;
}

.daily-history-body small {
	display: block;
	margin-top: 5px;
	color: var(--muted);
}

.daily-history-chip,
.daily-insight-pill {
	min-height: 28px;
	padding: 4px 9px;
	font-size: 0.78rem;
	color: var(--muted);
}

.daily-history-chip--muted {
	opacity: 0.75;
}

@media (max-width: 640px) {
	.daily-log-today,
	.daily-log-insights,
	.daily-log-history {
		border-radius: 18px;
		padding: 13px;
	}

	.daily-vitals-grid,
	.daily-history-card,
	.daily-history-card-head {
		grid-template-columns: minmax(0, 1fr);
	}

	.daily-history-actions {
		justify-content: stretch;
	}

	.daily-history-actions .settings-inline-btn {
		flex: 1 1 140px;
	}

	.daily-marker-chip,
	.daily-template-chip {
		width: 100%;
		justify-content: flex-start;
		min-height: 42px;
		border-radius: var(--nf-settings-control-radius);
		white-space: normal;
		line-height: 1.25;
	}

	.daily-clear-btn {
		width: 100%;
		max-width: 100%;
		justify-content: center;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.daily-log-head-actions {
		display: grid;
		grid-template-columns: 46px minmax(0, 1fr);
		align-items: center;
		width: 100%;
	}

	.daily-vitals-toggle {
		width: 46px;
		min-width: 46px;
	}

	.daily-log-today-head {
		grid-template-columns: minmax(0, 1fr);
		align-items: stretch;
		gap: 9px;
	}
}

/* Task-Menüs laufen immer als Body-Portal, nicht innerhalb von Karten/Spalten.
   Das entkoppelt sie von Board-Breite, overflow und backdrop-filter Stacking-Contexts. */
.task-quick-menus.is-task-menu-portal {
	position: fixed;
	left: var(--task-menu-vp-left, 50%);
	right: auto;
	top: var(--task-menu-vp-top, auto);
	bottom: var(--task-menu-vp-bottom, auto);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	box-sizing: border-box;
	width: fit-content;
	min-width: min(210px, calc(100vw - 24px));
	max-width: calc(100vw - 24px);
	max-height: var(--task-menu-vp-max-height, min(62svh, 62vh));
	padding: 10px 12px;
	gap: 8px;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: var(--task-menu-vp-transform, none);
	pointer-events: auto;
	z-index: 5040;
	border-radius: 16px;
	border: 1px solid var(--border);
	background: color-mix(in srgb, var(--mix-base) 98%, #070914);
	background-clip: padding-box;
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.task-quick-menus.is-task-menu-portal::before {
	display: none;
}

.task-quick-menus.is-task-action-menu-portal {
	min-width: min(148px, calc(100vw - 24px));
	width: min(176px, calc(100vw - 24px));
	max-width: min(176px, calc(100vw - 24px));
	padding: 10px 12px 12px;
}

.task-quick-menus.is-task-choice-menu-portal {
	min-width: min(210px, calc(100vw - 24px));
}

.task-quick-menus.is-task-focus-menu-portal {
	min-width: min(220px, calc(100vw - 24px));
}

.task-quick-menus.is-task-menu-portal .task-action-menu,
.task-quick-menus.is-task-menu-portal .task-area-menu,
.task-quick-menus.is-task-menu-portal .task-energy-menu,
.task-quick-menus.is-task-menu-portal .task-status-menu,
.task-quick-menus.is-task-menu-portal .task-focus-menu {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

.task-quick-menus.is-task-menu-portal .task-action-option,
.task-quick-menus.is-task-menu-portal .task-area-option,
.task-quick-menus.is-task-menu-portal .task-energy-option,
.task-quick-menus.is-task-menu-portal .task-status-option {
	width: 100%;
	box-sizing: border-box;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
}