@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.01ba6c2a184b.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/inter-latin.65850a373e25.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===============================================================
   Design-Tokens — Glasoberflächen über einem farbigen Grund
   ---------------------------------------------------------------
   Grundidee: Der Hintergrund liegt fest hinter der ganzen App und
   traegt zwei weiche Farbwolken. Alle Flaechen darueber sind
   halbtransparent und unscharf, dadurch entsteht Tiefe statt
   flacher Kaesten. Farbwerte stehen nur hier, nicht in den
   Komponenten.
   =============================================================== */

:root {
  color-scheme: dark;

  --bg: #0b0e15;
  --bg-deep: #070910;
  --bloom-a: rgba(64, 182, 189, 0.34);
  --bloom-b: rgba(126, 108, 255, 0.30);
  --bloom-c: rgba(255, 122, 84, 0.14);

  /* Glasflaechen, aufsteigend nach Naehe zum Betrachter */
  --glass-soft: rgba(255, 255, 255, 0.045);
  --glass: rgba(255, 255, 255, 0.075);
  --glass-strong: rgba(255, 255, 255, 0.115);
  --glass-solid: #161a22;

  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-border-strong: rgba(255, 255, 255, 0.22);
  --glass-highlight: rgba(255, 255, 255, 0.16);
  --blur: 20px;
  --blur-strong: 34px;

  /* Altnamen bleiben bestehen, damit bestehende Regeln weiterlaufen */
  --surface: var(--glass);
  --surface-soft: var(--glass-soft);
  --surface-raised: var(--glass-strong);
  --line: var(--glass-border);
  --line-strong: var(--glass-border-strong);

  --text: #eef0f6;
  --muted: #99a1b3;
  --muted-strong: #c9cede;

  --danger: #ff6b5e;
  --success: #4ade80;
  --warning: #fbbf24;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 8px 24px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 18px 44px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 32px 80px rgba(0, 0, 0, 0.58);
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 26px;
}

html[data-theme="light"] {
  color-scheme: light;

  --bg: #eaeef6;
  --bg-deep: #dde4f0;
  --bloom-a: rgba(64, 182, 189, 0.26);
  --bloom-b: rgba(122, 108, 255, 0.18);
  --bloom-c: rgba(255, 158, 120, 0.14);

  --glass-soft: rgba(255, 255, 255, 0.50);
  --glass: rgba(255, 255, 255, 0.68);
  --glass-strong: rgba(255, 255, 255, 0.84);
  --glass-solid: #ffffff;

  --glass-border: rgba(15, 23, 42, 0.08);
  --glass-border-strong: rgba(15, 23, 42, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.90);

  --text: #0f1420;
  --muted: #5c6577;
  --muted-strong: #2b3346;

  --danger: #dc2626;
  --success: #15803d;
  --warning: #b45309;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 8px 24px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 18px 44px rgba(16, 24, 40, 0.12);
  --shadow-lg: 0 32px 80px rgba(16, 24, 40, 0.20);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  position: relative;
  color: var(--text);
  /* Bewusst transparent: der Farbgrund liegt in body::before und wuerde
     sonst von der Body-Flaeche selbst uebermalt. */
  background: transparent;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Der farbige Grund liegt fest hinter allem und scrollt nicht mit.
   Nur dadurch hat das Milchglas darueber ueberhaupt etwas zu zeigen. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(78vw 70vh at 8% 2%, var(--bloom-a), transparent 66%),
    radial-gradient(70vw 68vh at 96% 10%, var(--bloom-b), transparent 64%),
    radial-gradient(90vw 60vh at 50% 104%, var(--bloom-c), transparent 66%),
    linear-gradient(165deg, var(--bg) 0%, var(--bg-deep) 100%);
}

a {
  color: inherit;
  text-decoration: none;
}

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

h1 {
  margin-bottom: 8px;
  color: var(--text);
  font-size: 32px;
  line-height: 1.1;
  font-weight: 800;
}

h2 {
  margin-bottom: 14px;
  color: var(--text);
  font-size: 18px;
  font-weight: 760;
}

button,
input,
textarea,
select {
  font: inherit;
}

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

html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  background: var(--glass-solid);
}

.auth-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 28px;
  /* Kein eigener Hintergrund mehr: der Farbgrund aus body::before gilt
     auch hier, sonst haette die Anmeldung eine andere Welt als die App. */
  background: transparent;
}

.login-card {
  width: min(440px, 100%);
  padding: 34px;
  background: var(--glass-strong);
  backdrop-filter: blur(var(--blur-strong)) saturate(170%);
  -webkit-backdrop-filter: blur(var(--blur-strong)) saturate(170%);
  border: 1px solid var(--glass-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-lg);
}

.login-brand,
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.login-card h1 {
  margin-bottom: 5px;
  font-size: 28px;
}

.login-card p,
.muted,
.text-slate-500,
.text-slate-600,
.text-slate-400 {
  color: var(--muted);
}

.brand-mark {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: #142224;
  background: var(--primary);
  border-radius: 8px;
  font-weight: 800;
  overflow: hidden;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.form-grid,
.login-card form {
  display: grid;
  gap: 16px;
}

.modern-form-card,
.modal-card .form-grid,
.card.form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.modern-form-card {
  max-width: 980px;
  padding: 22px;
}

.form-field,
.login-card form p {
  display: grid;
  gap: 7px;
  margin: 0;
}

.form-field:has(textarea),
.form-field:has(input[type="file"]),
.form-field-wide,
.form-actions,
.form-errors,
.modal-card .form-field:has(textarea),
.modal-card .form-field-wide {
  grid-column: 1 / -1;
}

.form-field-check {
  min-height: 48px;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.form-field-check label {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}

.form-field-check input[type="checkbox"] {
  grid-column: 1;
  grid-row: 1;
}

.form-field-check .help-text,
.form-field-check .error-text {
  grid-column: 1 / -1;
}

.form-errors {
  padding: 12px 14px;
  color: #ffb4a9;
  background: rgba(216, 75, 66, 0.1);
  border: 1px solid rgba(216, 75, 66, 0.25);
  border-radius: 10px;
}

label {
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 700;
}

input,
textarea,
select {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  color: var(--text);
  background: var(--glass-soft);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.modern-input,
.form-grid input,
.form-grid textarea,
.form-grid select {
  min-height: 46px;
  background: var(--glass-soft);
  border: 1px solid var(--glass-border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.modern-input:focus,
.form-grid input:focus,
.form-grid textarea:focus,
.form-grid select:focus {
  outline: none;
  background: var(--glass);
  border-color: color-mix(in srgb, var(--primary) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

input[type="checkbox"] {
  width: 18px;
  min-height: 18px;
  accent-color: var(--primary);
}

textarea {
  min-height: 96px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: #858991;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(64, 182, 189, 0.22);
}

.subtask-builder {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: var(--surface-soft);
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
}

.subtask-list,
.subtask-existing-list {
  display: grid;
  gap: 8px;
}

.subtask-input-row,
.subtask-existing-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.subtask-existing-row {
  min-height: 42px;
  padding: 9px 11px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
}

.subtask-existing-row:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
}

.subtask-existing-row strong {
  color: var(--muted);
  font-size: 12px;
}

.subtask-mini-list,
.todo-react-subtasks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.subtask-mini-list span,
.todo-react-subtasks span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  color: var(--muted-strong);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
}

.todo-react-card.is-subtask .todo-react-main {
  position: relative;
  padding-left: 24px;
}

.todo-react-card.is-subtask .todo-react-main::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 14px;
  width: 9px;
  height: calc(100% - 22px);
  border-left: 2px solid color-mix(in srgb, var(--primary) 36%, var(--line));
  border-bottom: 2px solid color-mix(in srgb, var(--primary) 36%, var(--line));
  border-radius: 0 0 0 8px;
}

tr.is-done,
.todo-react-card.is-done {
  opacity: 0.68;
}

tr.is-done strong,
.todo-react-card.is-done .todo-react-main > strong {
  color: var(--muted);
  text-decoration: line-through;
}

.help-text {
  color: var(--muted);
  font-size: 12px;
}

.error-text {
  color: #ff7a70;
  font-size: 13px;
  font-weight: 700;
}

.button,
button,
input[type="submit"] {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 18px;
  color: #08181a;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--primary) 100%, #fff 16%),
    var(--primary));
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35),
              0 6px 18px color-mix(in srgb, var(--primary) 34%, transparent);
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

.button:hover,
button:hover {
  filter: brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35),
              0 10px 26px color-mix(in srgb, var(--primary) 42%, transparent);
}

.button:active,
button:active {
  transform: translateY(1px);
}

.button:hover,
button:hover,
input[type="submit"]:hover {
  filter: brightness(1.04);
}

button:disabled,
.button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.button-muted {
  color: var(--text);
  background: var(--glass);
  border-color: var(--line-strong);
}

html[data-theme="light"] .button-muted {
  background: var(--glass);
}

.button-danger {
  color: #ffffff;
  background: var(--danger);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}

.back-link:hover {
  color: var(--text);
}

.button-icon {
  width: 38px;
  min-height: 38px;
  padding: 0;
  color: var(--muted-strong);
  background: transparent;
  border-color: transparent;
  border-radius: 999px;
}

.asap-icon,
[data-lucide] {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  stroke: currentColor;
  vertical-align: middle;
}

.button-icon .asap-icon,
.icon-button .asap-icon,
.danger-icon-button .asap-icon,
.modal-x .asap-icon,
.icon-link .asap-icon {
  display: block;
  width: 18px;
  height: 18px;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  transition: grid-template-columns 200ms ease;
}

.app-shell[data-sidebar="collapsed"] {
  grid-template-columns: 68px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--glass-soft);
  backdrop-filter: blur(var(--blur-strong)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-strong)) saturate(150%);
  border-right: 1px solid var(--glass-border);
  box-shadow: inset -1px 0 0 var(--glass-highlight);
  overflow: hidden;
}

/* Collapsed: nur Icons sichtbar, Texte verstecken */
.app-shell[data-sidebar="collapsed"] .nav-group a span,
.app-shell[data-sidebar="collapsed"] .brand > span:not(.brand-mark),
.app-shell[data-sidebar="collapsed"] .sidebar-footer span,
.app-shell[data-sidebar="collapsed"] .sidebar-footer small,
.app-shell[data-sidebar="collapsed"] .sidebar-footer-link span,
.app-shell[data-sidebar="collapsed"] .nav-label {
  display: none;
}
.app-shell[data-sidebar="collapsed"] .nav-group a,
.app-shell[data-sidebar="collapsed"] .sidebar-footer-link {
  justify-content: center;
  padding: 12px 8px;
}
.app-shell[data-sidebar="collapsed"] .brand {
  justify-content: center;
  padding: 14px 8px;
}
.app-shell[data-sidebar="collapsed"] .sidebar-footer {
  align-items: center;
  text-align: center;
  padding: 8px;
}

/* Brand + Sidebar-Toggle als horizontale Zeile am oberen Rand der Sidebar */
.sidebar-brand-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border-bottom: 1px solid var(--line);
}
.sidebar-brand-row .brand {
  flex: 1;
  min-width: 0;
  border-bottom: 0;
}

.sidebar-toggle {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
  flex-shrink: 0;
  margin-right: 10px;
  transition: background 140ms ease, border-color 140ms ease;
}
.sidebar-toggle:hover {
  background: rgba(255,255,255,0.04);
  border-color: var(--line-strong);
}
.app-shell[data-sidebar="collapsed"] .sidebar-brand-row {
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
}
.app-shell[data-sidebar="collapsed"] .sidebar-toggle {
  margin: 0;
}
@media (max-width: 1024px) {
  .sidebar-toggle { display: none; }
}

html[data-theme="light"] .sidebar,
html[data-theme="light"] .topbar {
  background: var(--glass-soft);
}

.brand {
  min-height: 72px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

.brand strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
}

.brand small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.nav-group {
  display: grid;
  gap: 6px;
  padding: 24px 6px;
}

.nav-label {
  margin: 12px 18px 4px;
  color: #777b83;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.nav-group a {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 18px;
  color: var(--muted-strong);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 650;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.nav-group a:hover {
  color: var(--text);
  background: var(--glass);
  border-color: var(--glass-border);
}

html[data-theme="light"] .nav-group a {
  color: #4b5563;
}

.nav-group a:hover {
  color: var(--text);
  background: var(--glass);
  border-color: var(--glass-border);
  box-shadow: none;
}

/* Der aktive Punkt wurde vorher mit einem harten blauen Rahmen markiert
   (rgb(90,127,255)) — ein Rest aus dem alten Design, der weder zur
   Primaerfarbe noch zum Glas passte. Jetzt: leicht gefaerbtes Glas,
   Lichtkante oben und ein schmaler Streifen am linken Rand. */
.nav-group a.is-active {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, var(--glass));
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    inset 3px 0 0 var(--primary);
}

html[data-theme="light"] .nav-group a:hover,
html[data-theme="light"] .nav-group a.is-active {
  background: var(--glass-strong);
}

.nav-group svg,
.nav-group i {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.sidebar-footer {
  display: grid;
  gap: 3px;
  margin: auto 14px 16px;
  padding: 14px;
  color: var(--muted-strong);
  background: var(--glass-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
}

html[data-theme="light"] .sidebar-footer {
  background: var(--glass-soft);
}

.sidebar-footer small {
  color: var(--muted);
}

.main-shell {
  min-width: 0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  padding: 14px 38px;
  background: var(--glass-soft);
  backdrop-filter: blur(var(--blur-strong)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-strong)) saturate(150%);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}

.mobile-top-brand {
  display: none;
  align-items: center;
  gap: 12px;
}

.mobile-top-brand strong,
.mobile-top-brand small {
  display: block;
}

.mobile-top-brand small {
  color: var(--muted);
  font-size: 12px;
}

.topbar-title,
.eyebrow {
  display: none;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted-strong);
  font-size: 14px;
  font-weight: 700;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.notification-badge {
  position: relative;
}

.push-toggle.is-enabled {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  border-color: color-mix(in srgb, var(--primary) 38%, transparent);
}

.push-toggle.is-denied {
  opacity: 0.55;
  cursor: not-allowed;
}

.push-toggle.is-enabled {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.push-status {
  padding: 0.85rem 1rem;
  color: var(--muted-strong);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 700;
}

.push-status[data-push-state="active"] {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 32%, var(--line));
}

.notification-badge span {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: #d84b42;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}

.avatar-chip {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--primary);
  background: rgba(103, 196, 207, 0.13);
  border-radius: 999px;
  font-weight: 800;
}

.mobile-menu {
  position: relative;
  display: none;
}

.mobile-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  /* Ueber dem Diktierknopf (70), sonst schwebt der auf dem Menue. */
  z-index: 80;
  width: min(280px, calc(100vw - 28px));
  max-height: calc(100dvh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: none;
  padding: 8px;
  /* Zwei Schichten statt einer deckenden Flaeche: ein zurueckhaltender
     Grund gegen das Durchscheinen, darueber die helle Glasschicht. Mit
     starker Unschaerfe bleibt der Text lesbar, ohne dass daraus ein
     blauer Kasten wird. */
  background:
    linear-gradient(var(--glass-strong), var(--glass-strong)),
    color-mix(in srgb, var(--bg) 58%, transparent);
  backdrop-filter: blur(44px) saturate(185%);
  -webkit-backdrop-filter: blur(44px) saturate(185%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 2px 6px rgba(0, 0, 0, 0.25),
    var(--shadow-lg);
}

.mobile-menu-panel.is-open {
  display: grid;
  gap: 4px;
}

.mobile-menu-panel a,
.mobile-menu-logout {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  padding: 10px 12px;
  color: var(--muted-strong);
  background: transparent;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  font-size: 14px;
  font-weight: 760;
  text-align: left;
}

.mobile-menu-panel a:hover,
.mobile-menu-logout:hover {
  color: var(--primary);
  background: var(--surface-soft);
  filter: none;
}

.mobile-menu-panel form {
  margin: 4px 0 0;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 8, 12, 0.55);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
}

.modal-backdrop.is-open {
  display: flex;
}

.modal-card {
  width: min(720px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  overflow-y: auto;
  padding: 24px;
  background: var(--glass-strong);
  backdrop-filter: blur(var(--blur-strong)) saturate(170%);
  -webkit-backdrop-filter: blur(var(--blur-strong)) saturate(170%);
  border: 1px solid var(--glass-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-lg);
}

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

.modal-head h2 {
  margin-bottom: 0;
}

.toast-stack {
  position: fixed;
  top: 86px;
  right: 24px;
  z-index: 90;
  display: grid;
  gap: 10px;
  width: min(380px, calc(100vw - 32px));
}

.toast-message {
  padding: 13px 15px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  font-size: 14px;
  font-weight: 750;
}

.toast-message.success {
  border-color: rgba(79, 180, 119, 0.45);
}

.toast-message.error {
  border-color: rgba(226, 75, 63, 0.55);
}

.content {
  width: min(1600px, 100%);
  margin: 0 auto;
  padding: 42px 38px 64px;
}

.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 28px;
}

.page-heading p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: 16px;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: -10px 0 20px;
}

.toolbar input,
.toolbar select {
  max-width: 520px;
}

.stats-grid,
.entity-grid,
.template-grid {
  display: grid;
  gap: 18px;
}

.stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 26px;
}

.entity-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.template-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card,
.bg-white,
.entity-card,
.template-card {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  /* Die innere Lichtkante oben laesst die Flaeche gewoelbt wirken,
     der aeussere Schatten hebt sie vom Grund ab. Kein backdrop-filter:
     der Grund dahinter ist ein weicher Verlauf, Weichzeichnen waere
     unsichtbar und kostet auf dem Handy eine eigene GPU-Ebene. */
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-sm);
}

html[data-theme="light"] .card,
html[data-theme="light"] .bg-white,
html[data-theme="light"] .entity-card,
html[data-theme="light"] .template-card,
html[data-theme="light"] .list-card,
html[data-theme="light"] .message,
html[data-theme="light"] .kanban-column {
  background: var(--surface);
}

.card {
  padding: 20px;
}

.card:hover,
.entity-card:hover,
.template-card:hover,
.list-card:hover {
  box-shadow: var(--shadow-md);
}

.lovable-grid {
  display: grid;
  gap: 18px;
}

.tabs-shell {
  display: grid;
  gap: 18px;
}

.tabs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 5px;
  overflow-x: auto;
  background: var(--glass-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

html[data-theme="light"] .tabs-list {
  background: var(--glass-soft);
}

.tab-trigger {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 9px;
  box-shadow: none;
  white-space: nowrap;
}

.tab-trigger:hover,
.tab-trigger.is-active {
  color: var(--text);
  background: var(--glass-strong);
  filter: none;
}

html[data-theme="light"] .tab-trigger:hover,
html[data-theme="light"] .tab-trigger.is-active {
  background: var(--glass-strong);
}

.tab-panel {
  display: none;
}

.tab-panel.is-active {
  display: block;
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.8fr);
  gap: 18px;
}

.project-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 18px;
}

.project-overview-grid .card:nth-child(3) {
  grid-row: span 2;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.section-head h2 {
  margin: 0;
}

.section-head span,
.section-head a {
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
}

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

.activity-row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 13px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.activity-row:hover {
  border-color: rgba(103, 196, 207, 0.45);
}

.activity-dot {
  width: 9px;
  height: 9px;
  margin-top: 6px;
  background: var(--primary);
  border-radius: 999px;
}

.activity-row strong,
.activity-row small {
  display: block;
}

.activity-row small {
  margin-top: 4px;
  color: var(--muted);
}

.project-overview-root,
.portal-project-root {
  width: 100%;
}

.project-react-grid,
.portal-project-app {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(310px, 0.8fr);
  gap: 18px;
}

.portal-project-app {
  margin-top: 18px;
}

.project-react-card {
  min-width: 0;
  display: grid;
  gap: 16px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.project-react-hero {
  grid-row: span 2;
}

.project-react-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.project-react-section-head h2 {
  margin: 0 0 4px;
}

.project-react-section-head p,
.project-react-description {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.project-react-description {
  color: var(--muted-strong);
}

.project-react-progress {
  display: grid;
  gap: 8px;
}

.project-react-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.project-react-metric {
  min-width: 0;
  padding: 13px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.project-react-metric span,
.project-react-section-head > span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.project-react-metric strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 16px;
}

.project-react-timeline,
.project-react-task-list {
  display: grid;
  gap: 10px;
}

.project-react-event {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 13px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.project-react-event:hover {
  border-color: color-mix(in srgb, var(--primary) 46%, var(--line));
}

.project-react-dot {
  width: 9px;
  height: 9px;
  margin-top: 6px;
  background: var(--primary);
  border-radius: 999px;
}

.project-react-event strong,
.project-react-event small {
  display: block;
  overflow-wrap: anywhere;
}

.project-react-event small {
  margin-top: 4px;
  color: var(--muted);
}

.project-react-task {
  min-width: 0;
  display: grid;
  gap: 9px;
  padding: 13px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.project-react-task strong,
.project-react-task p {
  margin: 0;
  overflow-wrap: anywhere;
}

.project-react-task p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.project-react-task > span:not(.react-pill),
.project-react-task span:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.project-react-task.is-done strong {
  color: var(--muted);
  text-decoration: line-through;
}

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

.quick-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  color: var(--muted-strong);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.quick-row-main {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.quick-row-main p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.quick-row:hover {
  border-color: rgba(64, 182, 189, 0.42);
}

.quick-row strong,
.quick-row span {
  min-width: 0;
}

.metric-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.metric {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.metric-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.metric-value {
  margin-top: 7px;
  color: var(--text);
  font-size: 24px;
  font-weight: 850;
}

.builder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 18px;
}

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

.status-actions form {
  margin: 0;
}

.stat-card {
  position: relative;
  min-height: 118px;
  padding: 24px;
}

.stat-card::after {
  content: "";
  position: absolute;
  top: 24px;
  right: 24px;
  width: 46px;
  height: 46px;
  background: rgba(103, 196, 207, 0.13);
  border-radius: 12px;
}

.stat-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.stat-value {
  margin-top: 12px;
  color: var(--text);
  font-size: 36px;
  font-weight: 850;
}

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.table th,
.table td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.table th {
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.table tr:last-child td {
  border-bottom: 0;
}

.table td a:not(.button) {
  color: var(--text);
  font-weight: 750;
}

.table-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 14px;
  white-space: nowrap;
}

.table-actions a {
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 800;
}

.todo-table-row {
  cursor: pointer;
  transition: background 140ms ease;
}

.todo-table-row:hover {
  background: rgba(64, 182, 189, 0.06);
}

.todo-parent-row {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.subtask-title-cell {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding-left: 14px;
}

.subtask-branch {
  width: 16px;
  height: 27px;
  margin-top: 2px;
  border-left: 2px solid color-mix(in srgb, var(--primary) 40%, var(--line));
  border-bottom: 2px solid color-mix(in srgb, var(--primary) 40%, var(--line));
  border-radius: 0 0 0 8px;
}

.table tr.is-subtask td {
  background: color-mix(in srgb, var(--primary) 3%, transparent);
  border-bottom-color: color-mix(in srgb, var(--line) 86%, transparent);
}

.todo-status-form,
.inline-icon-form {
  margin: 0;
}

.todo-status-select {
  width: auto;
  min-height: 28px;
  padding-right: 24px;
  cursor: pointer;
}

.danger-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-height: 36px;
  padding: 0;
  color: #ffffff;
  background: var(--danger);
  border-color: rgba(255, 255, 255, 0.08);
}

.danger-icon-button:hover {
  filter: brightness(1.06);
}

.todo-react-shell {
  width: 100%;
}

.todo-react-shell.is-react-mounted .todo-react-fallback {
  display: none;
}

.todo-react-board {
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.todo-react-head,
.todo-react-card {
  display: grid;
  grid-template-columns: 26px minmax(230px, 1.45fr) minmax(170px, 0.95fr) minmax(120px, 0.55fr) minmax(110px, 0.5fr) minmax(170px, 0.8fr) minmax(95px, 0.45fr) 46px;
  gap: 18px;
  align-items: center;
}

.todo-react-head {
  min-height: 54px;
  padding: 0 20px;
  color: var(--muted);
  background: var(--surface-soft);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.todo-react-list {
  display: grid;
}

.todo-react-group {
  display: grid;
  border-bottom: 1px solid var(--line);
}

.todo-react-group:last-child {
  border-bottom: 0;
}

.todo-react-card {
  min-width: 0;
  padding: 18px 20px;
  color: var(--text);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.todo-react-child-list {
  display: grid;
  gap: 8px;
  padding: 0 18px 16px 42px;
}

.todo-react-child-list .todo-react-card {
  padding: 13px 14px;
  background: color-mix(in srgb, var(--primary) 4%, var(--surface-soft));
  border: 1px solid var(--line);
  border-radius: 12px;
}

.todo-react-card:hover,
.todo-react-card:focus-visible {
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  outline: 0;
}

.todo-react-child-list .todo-react-card:hover,
.todo-react-child-list .todo-react-card:focus-visible {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-soft));
}

.todo-react-main,
.todo-react-relation {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.todo-react-main strong,
.todo-react-relation a,
.todo-react-relation strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}

.todo-react-main p,
.todo-react-main small,
.todo-react-relation span,
.todo-react-assignee,
.todo-react-date {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
}

.todo-react-status select {
  min-height: 32px;
  width: auto;
  max-width: 100%;
  padding: 4px 28px 4px 11px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-soft));
  border-color: color-mix(in srgb, var(--primary) 26%, var(--line));
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.react-pill {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  color: var(--muted-strong);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.react-pill-hoch,
.react-pill-dringend {
  color: var(--warning);
  background: rgba(194, 147, 57, 0.12);
  border-color: rgba(194, 147, 57, 0.28);
}

.react-pill-niedrig {
  color: var(--muted);
}

.react-pill-green,
.react-pill-erledigt {
  color: var(--success);
  background: rgba(79, 180, 119, 0.12);
  border-color: rgba(79, 180, 119, 0.28);
}

.react-pill-in_arbeit {
  color: #5aa8ff;
  background: rgba(90, 168, 255, 0.12);
  border-color: rgba(90, 168, 255, 0.28);
}

.todo-react-actions {
  display: flex;
  justify-content: flex-end;
}

.todo-react-empty {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 210px;
  padding: 28px;
  color: var(--muted);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.todo-react-empty strong {
  color: var(--text);
  font-size: 18px;
}

.pill {
  display: inline-flex;
  align-items: center;
  /* Ohne align-self dehnt der Flex-Container die Pille auf volle Hoehe
     und aus der Kapsel wird eine Ellipse. flex-start statt center, weil
     der Container auf dem Handy eine Spalte ist — "center" wuerde die
     Pille dort mitten in die Karte schieben. */
  align-self: flex-start;
  flex: 0 0 auto;
  min-height: 24px;
  height: fit-content;
  padding: 4px 11px;
  color: var(--muted-strong);
  background: var(--glass-strong);
  border: 1px solid var(--glass-border-strong);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

html[data-theme="light"] .pill {
  background: var(--glass-strong);
  border-color: #e4e7ec;
}

.pill-primary,
.pill-blue {
  color: #6fb6ff;
  background: rgba(74, 137, 214, 0.18);
  border-color: rgba(74, 137, 214, 0.55);
}

.pill-green {
  color: #56c987;
  background: rgba(79, 180, 119, 0.18);
  border-color: rgba(79, 180, 119, 0.45);
}

.pill-orange {
  color: #d7a23d;
  background: rgba(194, 147, 57, 0.18);
  border-color: rgba(194, 147, 57, 0.5);
}

.pill-purple {
  color: #b565ff;
  background: rgba(139, 78, 216, 0.2);
  border-color: rgba(139, 78, 216, 0.58);
}

.empty-state {
  padding: 34px;
  color: var(--muted);
  text-align: center;
}

.unread-dot {
  width: 9px;
  height: 9px;
  display: inline-block;
  margin-right: 8px;
  background: var(--primary);
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(103, 196, 207, 0.12);
  vertical-align: middle;
}

.entity-card,
.template-card {
  min-height: 190px;
  display: grid;
  gap: 14px;
  padding: 24px;
}

.entity-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.entity-title {
  display: flex;
  gap: 14px;
}

.entity-avatar {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--primary);
  background: rgba(103, 196, 207, 0.13);
  border-radius: 12px;
  font-weight: 820;
}

.entity-card h2,
.template-card h2 {
  margin: 0 0 4px;
  font-size: 19px;
}

.entity-meta,
.card-list,
.project-meta {
  display: grid;
  gap: 9px;
  color: var(--muted);
  font-size: 15px;
}

.entity-actions {
  display: flex;
  gap: 14px;
  color: var(--muted-strong);
}

.progress-row {
  display: grid;
  gap: 8px;
  margin-top: auto;
}

.progress-label {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.progress-bar {
  height: 7px;
  overflow: hidden;
  background: var(--glass-strong);
  border-radius: 999px;
}

html[data-theme="light"] .progress-bar {
  background: var(--glass-strong);
}

.progress-bar span {
  display: block;
  height: 100%;
  background: var(--primary);
}

.message-list,
.attachment-list,
.lookup-list {
  display: grid;
  gap: 12px;
}

.message {
  max-width: 760px;
  padding: 15px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.message-admin {
  margin-left: auto;
  background: rgba(64, 182, 189, 0.12);
  border-color: rgba(64, 182, 189, 0.35);
}

.message-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
}

.ticket-thread-root {
  margin-bottom: 18px;
}

.ticket-thread-card {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.ticket-thread-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--line);
}

.ticket-thread-head h2 {
  margin: 0 0 4px;
}

.ticket-thread-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.ticket-thread-badges,
.ticket-attachment-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ticket-thread-card > .ticket-attachment-row {
  padding: 14px 20px 0;
}

.ticket-attachment-chip {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  overflow-wrap: anywhere;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-soft));
  border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--line));
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.ticket-message-list {
  display: grid;
  gap: 12px;
  padding: 20px;
}

.ticket-message-bubble {
  width: fit-content;
  max-width: min(760px, 82%);
  display: grid;
  gap: 9px;
  padding: 14px 16px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 16px 16px 16px 6px;
}

.ticket-message-bubble.is-own {
  justify-self: end;
  background: color-mix(in srgb, var(--primary) 13%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 36%, var(--line));
  border-radius: 16px 16px 6px 16px;
}

.ticket-message-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.ticket-message-meta strong {
  color: var(--muted-strong);
}

.ticket-message-bubble p {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 14px;
  line-height: 1.48;
}

.ticket-thread-empty {
  min-height: 170px;
  display: grid;
  place-items: center;
  gap: 8px;
  color: var(--muted);
  text-align: center;
}

.ticket-thread-empty strong {
  color: var(--text);
}

.ticket-composer {
  position: relative;
}

.ticket-composer textarea {
  min-height: 132px;
  font-size: 15px;
  line-height: 1.45;
}

.message p,
.content-body p {
  margin: 0;
}

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

.check-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.check-mark {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 2px solid rgba(103, 196, 207, 0.55);
  border-radius: 6px;
}

.check-row.is-done .check-mark {
  background: var(--primary);
  box-shadow: inset 0 0 0 4px var(--surface-soft);
}

.check-row h3 {
  margin: 0 0 5px;
  font-size: 16px;
}

.check-row p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.content-body {
  color: var(--muted-strong);
  line-height: 1.7;
}

.kanban-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 16px;
  overflow-x: auto;
  align-items: stretch;
}

.kanban-column {
  height: min(62vh, 560px);
  min-height: 430px;
  display: flex;
  flex-direction: column;
  padding: 0 9px 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)), #232323;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.kanban-column.is-over {
  border-color: rgba(64, 182, 189, 0.75);
  box-shadow: 0 0 0 3px rgba(64, 182, 189, 0.13);
}

.kanban-card {
  cursor: grab;
}

.premium-kanban-card {
  position: relative;
  gap: 10px;
  padding: 14px;
  margin-bottom: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0)), var(--surface);
  border-color: #3d3d3d;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.premium-kanban-card:hover {
  border-color: rgba(103, 196, 207, 0.52);
  transform: translateY(-1px);
}

.premium-kanban-card strong {
  font-size: 15px;
}

.kanban-card-head,
.kanban-card-meta,
.kanban-column-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.kanban-card-meta {
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.kanban-card-meta span,
.icon-link,
.project-preview-section h3,
.preview-task .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.kanban-card-meta i,
.icon-link i,
.project-preview-section h3 i,
.preview-task .pill i {
  width: 15px;
  height: 15px;
}

.icon-link {
  flex: 0 0 auto;
  color: var(--muted);
}

.icon-link:hover {
  color: var(--primary);
}

.kanban-card:active {
  cursor: grabbing;
}

.kanban-empty {
  padding: 34px 12px;
  color: var(--muted);
  text-align: center;
}

.kanban-dropzone {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
  scrollbar-width: thin;
}

.kanban-dropzone:has(.kanban-card) .kanban-empty,
.kanban-dropzone:has(.todo-kanban-card) .kanban-empty {
  display: none;
}

html[data-theme="light"] .kanban-column {
  background: var(--glass-soft);
}

.kanban-column-head {
  flex: 0 0 auto;
  margin: 0 -9px 10px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--line);
}

.kanban-column-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--muted-strong);
  font-size: 15px;
  font-weight: 800;
}

.kanban-column-head h2 span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.025);
}

.kanban-column-head strong {
  min-width: 27px;
  height: 27px;
  display: inline-grid;
  place-items: center;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.16);
  border-radius: 999px;
  font-size: 13px;
}

.todo-kanban-card.is-done {
  opacity: 0.58;
  filter: grayscale(0.18);
}

.todo-kanban-card.is-done strong {
  text-decoration: line-through;
  color: var(--muted);
}

.todo-kanban-status-actions {
  margin-top: 2px;
}

.kanban-subtask-list {
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.kanban-subtask-heading {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.kanban-subtask-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  padding: 10px;
  background: color-mix(in srgb, var(--primary) 4%, var(--surface-soft));
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  border-radius: 10px;
}

.kanban-subtask-item strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.25;
}

.kanban-subtask-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.kanban-subtask-item.is-done {
  opacity: 0.62;
}

.kanban-subtask-item.is-done strong {
  color: var(--muted);
  text-decoration: line-through;
}

.todo-status-pill-select {
  width: auto;
  min-height: 30px;
  padding: 3px 28px 3px 10px;
  color: var(--primary);
  background-color: color-mix(in srgb, var(--primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.list-card {
  display: grid;
  gap: 8px;
  padding: 16px;
  margin-bottom: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.project-preview-modal {
  position: relative;
  width: min(860px, 100%);
  padding: 28px 32px;
  border-radius: 18px;
}

.modal-x {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
}

.modal-x:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  filter: none;
}

.modal-x i {
  width: 25px;
  height: 25px;
}

.modal-x .asap-icon {
  width: 25px;
  height: 25px;
}

.project-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 36px;
  padding-right: 44px;
}

.project-preview-head h2 {
  margin: 0 0 9px;
  font-size: 28px;
  line-height: 1.12;
}

.project-preview-head p,
.project-preview-description {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.45;
}

.project-preview-description {
  margin-top: 24px;
}

.premium-progress {
  margin: 28px 0 26px;
}

.project-preview-section h3 {
  margin: 0 0 16px;
  font-size: 20px;
}

.project-preview-section h3 i,
.project-preview-section h3 .asap-icon {
  width: 21px;
  height: 21px;
  color: var(--primary);
}

.preview-task-list {
  display: grid;
  gap: 18px;
}

.preview-task-group,
.preview-child-task-list {
  display: grid;
  gap: 10px;
}

.preview-task-group {
  padding: 12px;
  background: color-mix(in srgb, var(--surface-raised) 68%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 18px;
}

.preview-task-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 24px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.preview-task-group-label strong {
  color: var(--primary);
  font-size: 11px;
}

.preview-child-task-list {
  position: relative;
  margin-left: 34px;
  padding-left: 18px;
}

.preview-child-task-list::before {
  content: "";
  position: absolute;
  left: 0;
  top: -10px;
  bottom: 18px;
  width: 2px;
  background: color-mix(in srgb, var(--primary) 36%, var(--line));
  border-radius: 999px;
}

.preview-task {
  width: 100%;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 18px 20px;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: none;
  text-align: left;
}

.preview-task.is-main-task {
  border-color: color-mix(in srgb, var(--primary) 20%, var(--line));
}

.preview-task.is-subtask {
  position: relative;
  min-height: 72px;
  grid-template-columns: 18px minmax(0, 1fr);
  padding: 14px 16px;
  background: color-mix(in srgb, var(--primary) 5%, var(--surface-raised));
  border-color: color-mix(in srgb, var(--primary) 26%, var(--line));
  border-radius: 14px;
}

.preview-subtask-connector {
  width: 18px;
  height: 20px;
  margin-top: 2px;
  border-left: 2px solid color-mix(in srgb, var(--primary) 46%, var(--line));
  border-bottom: 2px solid color-mix(in srgb, var(--primary) 46%, var(--line));
  border-radius: 0 0 0 8px;
}

.preview-task-kind {
  display: block;
  margin-bottom: 4px;
  color: var(--primary);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.preview-task-toggle,
.react-preview-task {
  cursor: pointer;
}

.react-preview-task:hover,
.preview-task-toggle:hover {
  border-color: rgba(103, 196, 207, 0.58);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.18);
  filter: none;
}

.preview-task-body {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.preview-task-body:hover {
  filter: none;
}

.preview-task strong {
  display: block;
  margin-bottom: 12px;
  font-size: 18px;
}

.preview-check {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  padding: 0;
  background: transparent;
  border: 2px solid var(--primary);
  border-radius: 999px;
  box-shadow: none;
}

.preview-task.is-done .preview-check {
  background: var(--primary);
  box-shadow: inset 0 0 0 5px var(--surface-raised);
}

.preview-task.is-done .preview-task-body strong {
  color: var(--muted);
  text-decoration: line-through;
}

.project-preview-actions {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 24px;
}

.subtask-builder {
  display: grid;
  gap: 10px;
}

.subtask-list {
  display: grid;
  gap: 8px;
}

.subtask-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 18px;
}

.settings-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin: -6px 0 28px;
  padding: 5px;
  overflow-x: auto;
  background: var(--glass-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.settings-tab {
  min-height: 38px;
  padding: 9px 14px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 7px;
  box-shadow: none;
  white-space: nowrap;
}

.settings-tab:hover,
.settings-tab.is-active {
  color: var(--text);
  background: var(--glass-strong);
  filter: none;
}

html[data-theme="light"] .settings-tabs {
  background: var(--glass-soft);
}

html[data-theme="light"] .settings-tab:hover,
html[data-theme="light"] .settings-tab.is-active {
  background: var(--glass-strong);
}

.settings-panel {
  display: none;
  grid-column: 1 / -1;
}

.settings-panel.is-active {
  display: block;
}

.settings-panel[data-settings-panel="branding"].is-active {
  grid-column: auto;
}

.settings-preview {
  display: none;
}

.settings-panel[data-settings-panel="branding"].is-active + .settings-preview {
  display: block;
}

.brand-preview {
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  color: #142224;
  background: var(--primary);
  border-radius: 8px;
}

.brand-preview strong,
.brand-preview small {
  display: block;
}

.brand-preview .brand-mark {
  background: rgba(255, 255, 255, 0.2);
}

.settings-icon-preview {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 8px;
}

.lookup-form,
.lookup-row {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(120px, 1.4fr) 52px 80px auto;
  gap: 8px;
  align-items: center;
}

.lookup-form {
  margin: 14px 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.lookup-bulk-form {
  display: grid;
  gap: 10px;
}

.lookup-row {
  grid-template-columns: minmax(90px, 1fr) minmax(120px, 1.4fr) 52px 80px auto auto;
}

.lookup-row input[type="color"],
.lookup-form input[type="color"] {
  min-height: 42px;
  padding: 4px;
}

.inline-check {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.inline-check input {
  width: 16px;
  min-height: 16px;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.divide-y > * + * {
  border-top: 1px solid var(--line);
}

.border {
  border: 1px solid var(--line);
}

.rounded {
  border-radius: 8px;
}

.p-4 {
  padding: 16px;
}

.p-6 {
  padding: 24px;
}

.mb-4 {
  margin-bottom: 16px;
}

.mt-1 {
  margin-top: 4px;
}

.mt-2 {
  margin-top: 8px;
}

.mt-3 {
  margin-top: 12px;
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.justify-between {
  justify-content: space-between;
}

.gap-4 {
  gap: 16px;
}

.font-medium,
.font-semibold {
  font-weight: 750;
}

.text-sm {
  font-size: 14px;
}

.text-xs {
  font-size: 12px;
}

.text-2xl {
  font-size: 28px;
}

@media (max-width: 1200px) {
  .entity-grid,
  .stats-grid,
  .metric-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .template-grid,
  .settings-grid,
  .project-overview-grid,
  .detail-layout,
  .builder-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  html,
  body {
    width: 100%;
    overflow-x: hidden;
  }

  .app-shell {
    min-height: 100dvh;
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    border-right: 0;
  }

  .sidebar .brand {
    display: none;
  }

  .sidebar .nav-group {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    padding: 7px 8px max(7px, env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    border-top: 1px solid var(--glass-border);
    box-shadow: 0 -16px 36px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(26px) saturate(160%);
    -webkit-backdrop-filter: blur(26px) saturate(160%);
  }

  .sidebar-footer {
    display: none;
  }

  .sidebar .nav-group a {
    min-height: 54px;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 6px 4px;
    border: 0;
    box-shadow: none;
    font-size: 12px;
  }

  /* Die Tableiste zeigt die fuenf taeglichen Wege. Alles Weitere liegt
     im Menue, das dieselbe Navigation samt "Mehr"-Gruppe enthaelt. */
  .sidebar .nav-group a:nth-child(n + 6),
  .sidebar .nav-more {
    display: none;
  }

  .sidebar .nav-group a:hover,
  .sidebar .nav-group a.is-active {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }

  /* Die Tableiste holt ihre Farbe jetzt aus --bg und stimmt damit in
     beiden Themes. Eine eigene Light-Regel ist nicht mehr noetig. */

  .topbar {
    position: sticky;
    top: 0;
    z-index: 35;
    min-height: calc(76px + env(safe-area-inset-top));
    justify-content: space-between;
    padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: blur(26px) saturate(160%);
    -webkit-backdrop-filter: blur(26px) saturate(160%);
  }

  .mobile-top-brand {
    display: flex;
  }

  .topbar-copy {
    display: none;
  }

  .user-menu {
    gap: 10px;
  }

  .mobile-menu {
    display: block;
  }

  .user-menu > span:not(.avatar-chip),
  .user-menu > form {
    display: none;
  }

  .page-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .content {
    padding: 18px 16px calc(96px + env(safe-area-inset-bottom));
  }

  .modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  .modal-card {
    max-height: calc(100dvh - env(safe-area-inset-top));
    border-radius: 18px 18px 0 0;
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }

  .kanban-board {
    grid-template-columns: repeat(5, minmax(270px, 1fr));
    margin: 0 -16px;
    padding: 0 16px 10px;
    scroll-snap-type: x mandatory;
  }

  .kanban-column {
    scroll-snap-align: start;
  }

  .settings-tabs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-tab,
  .tab-trigger {
    justify-content: flex-start;
  }

  .tabs-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .todo-react-board {
    overflow: visible;
    display: grid;
    gap: 12px;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .todo-react-head {
    display: none;
  }

  .todo-react-list {
    gap: 12px;
  }

  .todo-react-group {
    gap: 8px;
    border-bottom: 0;
  }

  .todo-react-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "tick main actions"
      "tick relation relation"
      "tick status priority"
      "tick assigned due";
    gap: 12px;
    align-items: start;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
  }

  .todo-react-child-list {
    gap: 8px;
    padding: 0 0 0 18px;
  }

  .todo-react-child-list .todo-react-card {
    padding: 14px;
  }

  .todo-react-main {
    grid-area: main;
  }

  .todo-react-relation {
    grid-area: relation;
  }

  .todo-react-status {
    grid-area: status;
    min-width: 0;
  }

  .todo-react-priority {
    grid-area: priority;
    justify-self: end;
  }

  .todo-react-assignee {
    grid-area: assigned;
  }

  .todo-react-date {
    grid-area: due;
    justify-self: end;
    text-align: right;
  }

  .todo-react-actions {
    grid-area: actions;
  }

  .todo-react-main strong,
  .todo-react-relation a,
  .todo-react-relation strong {
    font-size: 16px;
  }

  .ticket-thread-head {
    flex-direction: column;
    padding: 16px;
  }

  .ticket-message-list {
    padding: 14px;
  }

  .ticket-message-bubble {
    max-width: 92%;
    padding: 13px 14px;
    border-radius: 15px 15px 15px 5px;
  }

  .ticket-message-bubble.is-own {
    border-radius: 15px 15px 5px 15px;
  }

  .ticket-message-bubble p {
    font-size: 14px;
  }

  .ticket-composer {
    margin-bottom: 12px;
  }

  .project-react-grid,
  .portal-project-app {
    grid-template-columns: 1fr;
  }

  .project-react-hero {
    grid-row: auto;
  }

  .project-react-card {
    padding: 16px;
  }

  .project-react-section-head {
    flex-direction: column;
  }

  .project-react-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  html.is-standalone-app .topbar {
    min-height: calc(72px + env(safe-area-inset-top));
    padding-top: max(14px, env(safe-area-inset-top));
  }

  html.is-standalone-app .nav-group {
    padding-bottom: max(9px, env(safe-area-inset-bottom));
  }

  html.is-standalone-app .content {
    min-height: calc(100dvh - 72px);
  }
}

@media (max-width: 620px) {
  .modern-form-card,
  .modal-card .form-grid,
  .card.form-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .modern-form-card {
    padding: 16px;
  }

  .subtask-input-row,
  .subtask-existing-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .auth-shell {
    padding: 16px;
  }

  .login-card {
    padding: 24px;
  }

  .stats-grid,
  .entity-grid,
  .metric-strip {
    grid-template-columns: 1fr;
  }

  .project-preview-modal {
    padding: 22px 18px;
    border-radius: 18px 18px 0 0;
  }

  .project-preview-head {
    flex-direction: column;
    gap: 16px;
    padding-right: 42px;
  }

  .project-preview-head h2 {
    font-size: 24px;
  }

  .project-preview-head p,
  .project-preview-description {
    font-size: 15px;
  }

  .preview-task {
    padding: 15px;
  }

  .preview-task-group {
    padding: 10px;
  }

  .preview-child-task-list {
    margin-left: 14px;
    padding-left: 14px;
  }

  .preview-task strong {
    font-size: 16px;
  }

  .project-preview-actions {
    flex-direction: column-reverse;
  }
}

/* ============================================================
   CRM-weites Polish (vom Finanzbereich übernommen)
   - Kompaktere Stat-Cards (kein Deko-Blob)
   - Hover-Akzent auf List-Cards (Primärfarbe)
   - Pills feinere Größe
   - Semantische Wert-Farben (positiv/negativ)
   - Page-Heading-Hierarchie etwas straffer
   ============================================================ */

.content :is(h1, h2, h3) { line-height: 1.2; }

.content .stat-card { min-height: auto; padding: 14px 16px; }
.content .stat-card::after { display: none; }
.content .stat-label { font-size: 11px; letter-spacing: 0.05em; }
.content .stat-value { margin-top: 4px; font-size: 22px; font-weight: 700; }

.content .list-card {
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.content .list-card:hover {
  border-color: var(--primary);
}

.content .pill {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1.5;
}

.content .page-heading { padding: 0.25rem 0 0.75rem; }
.content .page-heading h1 { font-size: 1.6rem; margin-bottom: 0.25rem; }
.content .page-heading h2 { font-size: 1.1rem; }
.content .page-heading p { font-size: 0.85rem; margin: 0; }

/* Semantische Geldfarben — überall im CRM verwendbar */
.value-positive { color: #16a34a !important; }
.value-negative { color: #dc2626 !important; }

.control-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.control-hero h1 {
  margin: 4px 0 6px;
  font-size: clamp(28px, 4vw, 48px);
}

.control-hero p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

.control-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.control-grid,
.todo-scope-grid,
.todo-smart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.control-tile,
.todo-scope-card {
  min-height: 132px;
  display: grid;
  align-content: space-between;
  gap: 8px;
  padding: 16px;
  color: var(--text);
  text-decoration: none;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-sm);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.control-tile:hover,
.todo-scope-card:hover,
.todo-scope-card.is-active {
  border-color: color-mix(in srgb, var(--primary) 54%, var(--glass-border));
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-md);
}

.todo-scope-card.is-active {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.todo-ios-head {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}

.todo-ios-head h1 {
  margin: 12px 0 6px;
  font-size: clamp(38px, 7vw, 58px);
  letter-spacing: 0;
}

.todo-ios-head p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
}

.todo-ios-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.todo-ios-search {
  width: min(460px, 100%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  margin: -4px 0 18px;
}

.todo-ios-search svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.todo-ios-search input {
  min-width: 0;
  width: 100%;
  padding: 4px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.todo-smart-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.todo-smart-card {
  min-height: 126px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto;
  gap: 8px;
  padding: 18px;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-sm);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.todo-smart-card:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-md);
}

.todo-smart-card svg {
  width: 32px;
  height: 32px;
  opacity: 0.95;
}

.todo-smart-card strong {
  justify-self: end;
  font-size: 44px;
  line-height: 0.9;
}

.todo-smart-card span {
  grid-column: 1 / -1;
  align-self: end;
  font-size: 22px;
  font-weight: 850;
}

/* Die Filterkacheln behalten ihre Farbcodierung, tragen sie aber als
   gefaerbtes Glas statt als deckende Flaeche. Der Farbton kommt aus
   --tone und wird nur schwach eingemischt. */

.todo-tone-blue { --tone: #6aa7e8; }
.todo-tone-rose { --tone: #e59ba0; }
.todo-tone-dark { --tone: #8b93a5; }
.todo-tone-pink { --tone: #dd7ea4; }
.todo-tone-gray { --tone: #a5afb4; }
.todo-tone-green { --tone: #5ecf8c; }

.todo-smart-card[class*="todo-tone-"] {
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--tone) 26%, transparent),
      color-mix(in srgb, var(--tone) 8%, transparent)),
    var(--glass);
  border-color: color-mix(in srgb, var(--tone) 34%, var(--glass-border));
}

.todo-smart-card[class*="todo-tone-"] strong,
.todo-smart-card[class*="todo-tone-"] svg {
  color: color-mix(in srgb, var(--tone) 70%, var(--text));
}

.todo-smart-card.is-active[class*="todo-tone-"] {
  border-color: color-mix(in srgb, var(--tone) 62%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-highlight),
              0 0 0 1px color-mix(in srgb, var(--tone) 30%, transparent),
              var(--shadow-md);
}

.todo-list-panel {
  margin-bottom: 18px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
}

.todo-list-rows {
  display: grid;
}

.todo-list-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  color: var(--text);
  text-decoration: none;
  border-top: 1px solid var(--line);
}

.todo-list-detail {
  display: block;
  border-top: 1px solid var(--line);
}

.todo-list-detail:first-child {
  border-top: 0;
}

.todo-list-detail > summary {
  list-style: none;
  cursor: pointer;
}

.todo-list-detail > summary::-webkit-details-marker {
  display: none;
}

.todo-list-detail .todo-list-row {
  border-top: 0;
}

.todo-list-detail[open] .todo-list-row > svg {
  transform: rotate(180deg);
}

.todo-list-row:first-child {
  border-top: 0;
}

.todo-list-row:hover,
.todo-list-row.is-active {
  color: var(--primary);
}

.todo-list-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 18%, var(--surface-soft));
  border-radius: 999px;
  font-size: 14px;
  font-weight: 850;
}

.todo-list-icon svg {
  width: 20px;
  height: 20px;
}

.todo-list-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.todo-list-copy strong,
.todo-list-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.todo-list-copy small,
.todo-list-count {
  color: var(--muted);
}

.todo-list-count {
  min-width: 22px;
  text-align: right;
  font-weight: 800;
}

.todo-list-detail-body {
  display: grid;
  gap: 12px;
  padding: 0 0 16px 56px;
}

.todo-inline-list {
  display: grid;
  gap: 8px;
}

.todo-inline-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: var(--text);
  text-decoration: none;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.todo-inline-row span:nth-child(2) {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.todo-inline-row strong,
.todo-inline-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.todo-inline-row small,
.todo-inline-row em,
.todo-inline-empty,
.todo-list-open-link {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
}

.todo-inline-circle {
  width: 18px;
  height: 18px;
  border: 2px solid var(--primary);
  border-radius: 999px;
}

.todo-inline-create-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.5fr) auto;
  gap: 10px;
}

.todo-list-open-link {
  justify-self: start;
  text-decoration: none;
  font-weight: 800;
}

.todo-current-heading {
  margin: 18px 0 10px;
}

.todo-current-heading h2 {
  margin: 0 0 4px;
}

.control-tile span,
.todo-scope-card span {
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 800;
}

.control-tile strong,
.todo-scope-card strong {
  color: var(--text);
  font-size: 34px;
  line-height: 1;
}

.control-tile small,
.todo-scope-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.control-tile.is-warning strong {
  color: var(--warning);
}

.dashboard-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 16px;
  margin-bottom: 16px;
}

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

.section-head h2 {
  margin: 0 0 4px;
}

.dashboard-quick-form,
.todo-quick-create-form,
.client-quick-todo-form {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(130px, 1fr)) auto;
  gap: 10px;
  align-items: end;
}

.dashboard-title-field,
.todo-quick-title,
.quick-title-field {
  min-width: 0;
}

.dashboard-quick-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-quick-form .dashboard-title-field {
  grid-column: 1 / -1;
}

.dashboard-quick-form button {
  justify-self: start;
}

.dashboard-task-list {
  display: grid;
  gap: 8px;
}

.dashboard-task-row,
.client-focus-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  color: var(--text);
  text-decoration: none;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.dashboard-task-row:hover,
.client-focus-card:hover {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--line));
}

.dashboard-task-row > span:first-child,
.dashboard-task-row > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.dashboard-task-row strong,
.client-focus-card strong {
  overflow-wrap: anywhere;
}

.dashboard-task-row small,
.client-focus-card span {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.dashboard-task-row em {
  flex: 0 0 auto;
  color: var(--muted-strong);
  font-style: normal;
  font-weight: 800;
}

.client-focus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.client-focus-card {
  display: grid;
  align-content: space-between;
  min-height: 82px;
}

.todo-quick-create-card {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}

.entity-card,
.entity-head,
.entity-title,
.entity-meta,
.entity-actions {
  min-width: 0;
}

.entity-meta span {
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  .control-hero,
  .dashboard-workspace {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .dashboard-quick-form,
  .todo-quick-create-form,
  .client-quick-todo-form {
    grid-template-columns: 1fr;
  }

  .todo-ios-actions {
    justify-content: stretch;
  }

  .todo-ios-search {
    width: 100%;
  }

  .todo-smart-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .todo-smart-card {
    min-height: 96px;
    padding: 14px;
    border-radius: 18px;
  }

  .todo-smart-card strong {
    font-size: 34px;
  }

  .todo-smart-card span {
    font-size: 18px;
  }
}

@media (max-width: 520px) {
  .todo-ios-head h1 {
    font-size: 46px;
  }

  .todo-list-panel {
    padding: 8px 12px;
    border-radius: 18px;
  }

  .todo-list-detail-body {
    padding-left: 0;
  }

  .todo-inline-create-form {
    grid-template-columns: 1fr;
  }

  .entity-card {
    padding: 16px;
  }

  .entity-head {
    flex-direction: column;
    align-items: stretch;
  }

  .entity-actions {
    justify-content: space-between;
  }
}

/* ---------------------------------------------------------------
   Navigations-Fortschritt
   Erscheint erst nach 120 ms, damit schnelle Wechsel ruhig bleiben.
   --------------------------------------------------------------- */

html.is-navigating::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--primary), transparent);
  animation: nav-progress 900ms ease-out forwards;
}

@keyframes nav-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(0.9); }
}

html.is-navigating {
  cursor: progress;
}


/* ---------------------------------------------------------------
   Aufklappbare Zweitnavigation ("Mehr")
   Alles, was nicht taeglich gebraucht wird, liegt hier — sichtbar,
   aber nicht im Weg.
   --------------------------------------------------------------- */

.nav-more {
  margin-top: 6px;
}

.nav-more > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 18px;
  color: var(--muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  font-weight: 650;
  list-style: none;
  transition: color 160ms ease, background 160ms ease;
}

.nav-more > summary::-webkit-details-marker {
  display: none;
}

.nav-more > summary:hover {
  color: var(--text);
  background: var(--glass);
}

.nav-more[open] > summary {
  color: var(--muted-strong);
}

.nav-more > summary svg,
.nav-more > summary i {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.nav-more > a {
  font-size: 14px;
  font-weight: 600;
}

.app-shell[data-sidebar="collapsed"] .nav-more > summary span {
  display: none;
}

.app-shell[data-sidebar="collapsed"] .nav-more > summary {
  justify-content: center;
  padding: 10px;
}

/* ===============================================================
   Tagesansicht ("Heute")
   =============================================================== */

.today-head {
  margin-bottom: 16px;
}

.today-head h1 {
  margin: 0;
  font-size: 34px;
}

/* Schnellerfassung: eine Zeile, ein Feld, Enter genuegt. */
.quick-capture {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 8px 8px 16px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-sm);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.quick-capture:focus-within {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-highlight),
              0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

.quick-capture svg,
.quick-capture i {
  flex: 0 0 auto;
  color: var(--muted);
}

.quick-capture input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  padding: 0;
  color: var(--text);
  background: transparent;
  border: 0;
  outline: none;
  font-size: 16px;
}

.quick-capture input[type="text"]::placeholder {
  color: var(--muted);
}

.quick-capture button {
  flex: 0 0 auto;
  min-height: 40px;
  border-radius: 999px;
}

/* Kennzahlen als schmale Chips statt bildschirmhoher Kacheln. */
.today-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.today-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 14px;
  color: var(--muted-strong);
  background: var(--glass-soft);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.today-chip:hover {
  color: var(--text);
  background: var(--glass);
  border-color: var(--glass-border-strong);
}

.today-chip strong {
  color: var(--text);
  font-size: 17px;
  font-weight: 750;
}

.today-chip span {
  font-size: 13px;
}

.today-chip.is-alert strong {
  color: var(--danger);
}

.today-chip.is-alert {
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}

/* --- Aufgabenbloecke --- */

.today-block {
  margin-bottom: 16px;
  padding: 18px 18px 10px;
}

.today-block-alert {
  border-color: color-mix(in srgb, var(--danger) 30%, var(--glass-border));
}

.today-block .section-head {
  align-items: center;
  margin-bottom: 6px;
}

.today-block-count {
  padding: 3px 10px;
  color: var(--muted-strong);
  background: var(--glass-strong);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.today-rows {
  display: grid;
}

.today-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 2px;
  border-top: 1px solid var(--glass-border);
  transition: opacity 240ms ease, transform 240ms ease;
}

.today-row:first-child {
  border-top: 0;
}

/* Erledigt-Kreis. Gross genug fuer den Daumen (44px Trefferflaeche
   ueber das Padding), optisch aber nur ein Ring. */
.today-tick {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 2px solid var(--glass-border-strong);
  border-radius: 999px;
  box-shadow: none;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.today-tick:hover {
  border-color: var(--success);
  background: color-mix(in srgb, var(--success) 22%, transparent);
  box-shadow: none;
  filter: none;
  transform: scale(1.08);
}

.today-row.prio-dringend .today-tick,
.today-row.prio-hoch .today-tick {
  border-color: color-mix(in srgb, var(--danger) 60%, transparent);
}

.today-row-body {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 2px;
  text-decoration: none;
}

.today-row-body strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 620;
}

.today-row-body small {
  color: var(--muted);
  font-size: 12.5px;
}

.today-row.is-done .today-tick {
  background: var(--success);
  border-color: var(--success);
}

.today-row.is-done .today-row-body strong {
  color: var(--muted);
  text-decoration: line-through;
}

.today-row.is-gone {
  opacity: 0;
  transform: translateX(14px);
}

.today-row.is-failed {
  border-color: var(--danger);
}

/* --- Zuletzt bewegt --- */

.today-recent-list {
  display: grid;
}

.today-recent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 2px;
  border-top: 1px solid var(--glass-border);
  text-decoration: none;
}

.today-recent-row:first-child {
  border-top: 0;
}

.today-recent-row span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.today-recent-row strong {
  font-size: 15px;
  font-weight: 620;
}

.today-recent-row small,
.today-recent-row em {
  color: var(--muted);
  font-size: 12.5px;
  font-style: normal;
}

@media (max-width: 900px) {
  .today-head h1 {
    font-size: 27px;
  }

  .quick-capture {
    padding-left: 14px;
  }

  /* Auf dem Handy zaehlt jeder Pixel Eingabebreite: der Knopf schrumpft
     auf ein Symbol, abgeschickt wird ohnehin meist mit Enter. */
  .quick-capture button {
    width: 40px;
    padding: 0;
    font-size: 0;
  }

  .quick-capture button::after {
    content: "↵";
    font-size: 18px;
    line-height: 1;
  }
}

/* ---------------------------------------------------------------
   Mail-Outbox
   --------------------------------------------------------------- */

.outbox-warning {
  margin-bottom: 16px;
  border-color: color-mix(in srgb, var(--warning) 45%, var(--glass-border));
}

.outbox-warning strong {
  display: block;
  margin-bottom: 4px;
  color: var(--warning);
}

.outbox-warning p {
  margin: 0;
}

.outbox-rows {
  display: grid;
}

.outbox-row {
  padding: 14px 2px;
  border-top: 1px solid var(--glass-border);
}

.outbox-row:first-child {
  border-top: 0;
}

.outbox-row-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.outbox-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.outbox-copy strong {
  font-size: 15px;
  font-weight: 620;
}

.outbox-copy small,
.outbox-status {
  color: var(--muted);
  font-size: 12.5px;
}

.outbox-status {
  flex: 0 0 auto;
  padding: 4px 11px;
  background: var(--glass-strong);
  border-radius: 999px;
  white-space: nowrap;
}

.outbox-row.is-sent .outbox-status {
  color: var(--success);
}

.outbox-row.is-failed .outbox-status {
  color: var(--danger);
}

.outbox-error {
  margin: 8px 0 0;
  padding: 8px 11px;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.outbox-preview {
  margin-top: 10px;
}

.outbox-preview summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
}

.outbox-preview iframe {
  width: 100%;
  height: 340px;
  margin-top: 10px;
  background: #fff;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
}

@media (max-width: 900px) {
  .outbox-row-head {
    flex-wrap: wrap;
  }
}

.quick-capture-hint {
  margin: -8px 0 18px;
  padding: 0 16px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ===============================================================
   To-do-Seite auf dem Handy
   ---------------------------------------------------------------
   Vorher standen drei Navigationsebenen (Kacheln, Suche, Kundenlisten)
   vor der ersten Aufgabe — die Liste begann erst nach knapp drei
   Bildschirmen. Ein Filterklick sah dadurch wirkungslos aus.
   =============================================================== */

/* Die gefilterte Liste ist der Zweck der Seite und gehoert nach oben.
   Vorher standen Kundenlisten, Suche und Schnellerfassung davor, sodass
   ein Filterklick weit unterhalb des sichtbaren Bereichs wirkte.
   Gilt in jeder Breite, nicht nur auf dem Handy. */
.todo-page {
  display: flex;
  flex-direction: column;
}

/* Jedes direkte Kind braucht eine Reihenfolge — ohne Angabe gilt 0,
   und das Element springt an den Anfang. */
.todo-page > * { order: 5; }

.todo-page > .todo-ios-head { order: 1; }
.todo-page > .todo-smart-grid { order: 2; }
.todo-page > .todo-current-heading { order: 3; }
.todo-page > .todo-status-tabs { order: 4; }
.todo-page > .todo-sort-toolbar { order: 5; }
.todo-page > .todo-react-shell { order: 6; }
.todo-page > .todo-quick-create-card { order: 7; }
.todo-page > .todo-ios-search { order: 8; }
.todo-page > .todo-list-panel { order: 9; }

@media (max-width: 900px) {

  /* Kopf entschlacken: die Erklaerzeile kostet eine halbe Bildschirmhoehe
     und sagt nichts, was die Oberflaeche nicht selbst zeigt. */
  .todo-page .todo-ios-head h1 {
    font-size: 26px;
    margin-bottom: 0;
  }

  .todo-page .todo-ios-head p {
    display: none;
  }

  /* Filter als waagerecht scrollende Chips statt als Kachelwand.
     Spart rund 450 Pixel und haelt alle sechs Filter in Reichweite. */
  .todo-page .todo-smart-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 12px -16px 14px;
    padding: 2px 16px 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .todo-page .todo-smart-grid::-webkit-scrollbar {
    display: none;
  }

  .todo-page .todo-smart-card {
    flex: 0 0 auto;
    min-height: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 9px 15px;
    border-radius: 999px;
    scroll-snap-align: start;
  }

  .todo-page .todo-smart-card svg,
  .todo-page .todo-smart-card i {
    display: none;
  }

  .todo-page .todo-smart-card strong {
    justify-self: auto;
    font-size: 17px;
    font-weight: 750;
  }

  .todo-page .todo-smart-card span {
    grid-column: auto;
    align-self: auto;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
  }

  /* Der aktive Filter muss auf einen Blick erkennbar sein — bei Chips
     reicht ein zarter Rand nicht. */
  .todo-page .todo-smart-card.is-active {
    background:
      linear-gradient(150deg,
        color-mix(in srgb, var(--tone) 46%, transparent),
        color-mix(in srgb, var(--tone) 22%, transparent)),
      var(--glass);
    border-color: color-mix(in srgb, var(--tone) 70%, transparent);
  }

  /* Kundenlisten sind auf dem Handy Zweitnavigation. */
  .todo-page .todo-list-panel {
    margin-top: 8px;
  }
}

@media (max-width: 900px) {
  /* Die Erklaerzeile wiederholt nur, was die Liste ohnehin zeigt. */
  .todo-page > .todo-current-heading p {
    display: none;
  }

  .todo-page > .todo-current-heading {
    margin-bottom: 10px;
  }

  /* Statusreiter als eine scrollende Zeile statt als zweizeiliger Block. */
  .todo-page > .todo-status-tabs {
    width: auto !important;
    margin: 0 -16px 10px;
    padding: 0 16px;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    background: transparent;
    border: 0;
    scrollbar-width: none;
  }

  .todo-page > .todo-status-tabs::-webkit-scrollbar {
    display: none;
  }

  .todo-page > .todo-status-tabs .tab-trigger {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Sortierung wendet sich bei Auswahl selbst an, der Knopf entfaellt. */
  .todo-page > .todo-sort-toolbar {
    margin-bottom: 12px;
  }

  .todo-page > .todo-sort-toolbar .todo-sort-submit {
    display: none;
  }
}

/* ===============================================================
   Handy: Abstaende zusammenziehen
   ---------------------------------------------------------------
   Die Basiswerte sind fuer Desktop gedacht. Auf 375 Pixel Breite
   kippen mehrere Flex-Zeilen in Spalten, wodurch aus waagerechten
   Abstaenden ploetzlich senkrechte Luecken werden.
   =============================================================== */

@media (max-width: 900px) {
  .content {
    padding: 16px 14px 96px;
  }

  h1 {
    font-size: 23px;
  }

  h2 {
    font-size: 17px;
  }

  .page-heading {
    margin-bottom: 14px;
  }

  .page-heading p {
    font-size: 13.5px;
    line-height: 1.45;
  }

  .card,
  .entity-card,
  .template-card {
    padding: 14px;
  }

  /* Die 18px waren als waagerechter Abstand zwischen Titel und Pille
     gedacht. In der Spalte reissen sie ein Loch in die Karte. */
  .entity-head {
    gap: 8px;
  }

  .entity-grid,
  .template-grid,
  .stats-grid {
    gap: 10px;
  }

  /* Aktionsknoepfe unter der Ueberschrift nebeneinander statt gestreckt. */
  .page-heading .toolbar,
  .page-heading > div:last-child {
    gap: 8px;
  }
}


/* ---------------------------------------------------------------
   Erledigt-Kreis in der To-do-Liste
   Eine Beruehrung statt Karte oeffnen, Status suchen, auswaehlen.
   --------------------------------------------------------------- */

.todo-react-tick {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 2px solid var(--glass-border-strong);
  border-radius: 999px;
  box-shadow: none;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.todo-react-tick:hover:not(:disabled) {
  border-color: var(--success);
  background: color-mix(in srgb, var(--success) 22%, transparent);
  box-shadow: none;
  filter: none;
  transform: scale(1.08);
}

.todo-react-tick:disabled {
  opacity: 0.5;
  cursor: progress;
}

.todo-react-card.is-done .todo-react-tick {
  background: var(--success);
  border-color: var(--success);
}

/* Die Kopfzeile der Tabelle braucht eine leere Spalte, damit die
   Beschriftungen ueber ihren Werten bleiben. */
.todo-react-head::before {
  content: "";
}

@media (max-width: 900px) {
  .todo-react-tick {
    grid-area: tick;
    align-self: start;
    width: 26px;
    height: 26px;
    margin-top: 2px;
  }

  .todo-react-head::before {
    content: none;
  }
}

/* ===============================================================
   Diktier-Erfassung
   Immer erreichbar, deshalb fest ueber allem und ausserhalb des
   Seiteninhalts.
   =============================================================== */

.voice-fab {
  position: fixed;
  right: 18px;
  bottom: calc(22px + env(safe-area-inset-bottom));
  z-index: 70;
  width: 58px;
  height: 58px;
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35),
              0 12px 30px color-mix(in srgb, var(--primary) 45%, transparent);
}

.voice-fab svg,
.voice-fab i {
  width: 24px;
  height: 24px;
}

@media (max-width: 900px) {
  /* Ueber der Tableiste bleiben, nicht dahinter. */
  .voice-fab {
    right: 16px;
    bottom: calc(84px + env(safe-area-inset-bottom));
    width: 54px;
    height: 54px;
  }
}

.voice-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(6, 8, 12, 0.55);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
}

.voice-sheet-backdrop.is-open {
  display: flex;
}

.voice-sheet {
  width: min(560px, 100%);
  max-height: 88dvh;
  overflow-y: auto;
  display: grid;
  gap: 12px;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  background: var(--glass-strong);
  backdrop-filter: blur(var(--blur-strong)) saturate(170%);
  -webkit-backdrop-filter: blur(var(--blur-strong)) saturate(170%);
  border: 1px solid var(--glass-border-strong);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-lg);
  animation: voice-sheet-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 901px) {
  .voice-sheet-backdrop {
    align-items: center;
    padding: 24px;
  }

  .voice-sheet {
    border-radius: var(--radius-lg);
  }
}

@keyframes voice-sheet-in {
  from { transform: translateY(18px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .voice-sheet { animation: none; }
}

.voice-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.voice-sheet-head h2 {
  margin: 0;
}

.voice-hint {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.voice-hint.is-warning {
  color: var(--warning);
}

.voice-sheet textarea {
  width: 100%;
  min-height: 118px;
  padding: 13px 15px;
  color: var(--text);
  background: var(--glass-soft);
  border: 1px solid var(--glass-border-strong);
  border-radius: var(--radius-sm);
  font-size: 16px; /* unter 16px zoomt iOS beim Fokus hinein */
  line-height: 1.5;
  resize: vertical;
}

.voice-sheet textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--primary) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

.voice-actions {
  display: flex;
  gap: 10px;
}

.voice-mic {
  flex: 1 1 auto;
  gap: 9px;
  color: var(--text);
  background: var(--glass);
  border: 1px solid var(--glass-border-strong);
  box-shadow: none;
}

.voice-mic:hover {
  filter: none;
  background: var(--glass-strong);
  box-shadow: none;
}

.voice-mic.is-recording {
  color: #fff;
  background: color-mix(in srgb, var(--danger) 82%, transparent);
  border-color: var(--danger);
  animation: voice-pulse 1.6s ease-in-out infinite;
}

@keyframes voice-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 45%, transparent); }
  50% { box-shadow: 0 0 0 9px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .voice-mic.is-recording { animation: none; }
}

.voice-actions .button[type="submit"] {
  flex: 0 0 auto;
  min-width: 120px;
}

.voice-note {
  margin: -4px 0 0;
  padding: 9px 12px;
  color: var(--muted-strong);
  background: var(--glass-soft);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.45;
}

/* Waehrend die KI arbeitet: Formular sichtbar beschaeftigt. */
.voice-sheet.is-busy,
.quick-capture.is-busy {
  opacity: 0.75;
  pointer-events: none;
}

.voice-sheet.is-busy [type="submit"],
.quick-capture.is-busy [type="submit"] {
  cursor: progress;
}

.voice-sheet.is-busy::after,
.quick-capture.is-busy::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--primary), transparent);
  animation: nav-progress 1200ms ease-out forwards;
}

.voice-sheet,
.quick-capture {
  position: relative;
}

/* ===============================================================
   Menue hinter den drei Punkten
   Enthaelt dieselbe Navigation wie die Sidebar, samt aufklappbarer
   "Mehr"-Gruppe — es gibt nur noch eine Navigation im Projekt.
   =============================================================== */

.mobile-menu-head {
  display: grid;
  gap: 1px;
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 6px;
}

.mobile-menu-head strong {
  font-size: 14px;
  font-weight: 650;
}

.mobile-menu-head small {
  color: var(--muted);
  font-size: 12px;
}

.mobile-menu-panel .nav-group {
  display: grid;
  gap: 2px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.mobile-menu-panel .nav-group a {
  min-height: 42px;
  padding: 9px 14px;
  font-size: 14.5px;
}

.mobile-menu-panel .nav-more > summary {
  min-height: 40px;
  padding: 8px 14px;
  font-size: 14px;
}

.mobile-menu-panel form {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--glass-border);
}

@media (max-width: 900px) {
  /* Auf dem Handy eine Schublade von rechts statt eines kleinen
     Kaestchens: mehr Platz fuer die volle Navigation, und man erwischt
     die Eintraege mit dem Daumen. */
  .mobile-menu-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(310px, 86vw);
    max-height: none;
    /* Nicht display:none, sonst gibt es kein Hineinschieben zu sehen.
       visibility haelt die Schublade zugleich aus Tastatur und
       Vorlesehilfen heraus, solange sie zu ist. */
    display: grid;
    visibility: hidden;
    padding: calc(14px + env(safe-area-inset-top)) 10px
             calc(14px + env(safe-area-inset-bottom));
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    border-width: 1px 0 0 1px;
    transform: translateX(100%);
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .mobile-menu-panel.is-open {
    visibility: visible;
    transform: translateX(0);
  }

  .mobile-menu-panel .nav-group a {
    min-height: 46px;
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu-panel {
    transition: none;
  }
}

/* Schleier hinter der Menue-Schublade: macht klar, dass die Seite
   dahinter gerade nicht bedient wird, und schliesst beim Antippen. */
.mobile-menu-scrim {
  position: fixed;
  inset: 0;
  /* Ueber dem Diktierknopf (70), sonst schwebt der auf der Schublade. */
  z-index: 75;
  display: none;
  background: rgba(6, 8, 12, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.mobile-menu-scrim.is-open {
  display: block;
}

@media (min-width: 901px) {
  /* Am Rechner ist es ein Aufklappmenue, kein Vollbild — kein Schleier. */
  .mobile-menu-scrim {
    display: none !important;
  }
}


@media (min-width: 901px) {
  .mobile-menu-panel {
    position: fixed;
    top: 74px;
    right: 24px;
    left: auto;
  }
}


/* Die Schublade ist volle Bildschirmhoehe. Ohne align-content zieht das
   Raster die Eintraege ueber die ganze Hoehe auseinander. */
.mobile-menu-panel.is-open {
  align-content: start;
}