/* ---------------------------------------------------------------
   Design-Tokens. Alles unterhalb dieses Blocks greift nur noch über
   Variablen zu. Die Werte sind das „George“-Design aus ü-shop, hier
   aber nicht als eines von mehreren, sondern als das Design.
   --------------------------------------------------------------- */
:root {
  /* Farben */
  --accent: #3b5bf5;
  --accent-strong: #2b45cc;
  --on-accent: #ffffff;
  --danger: #d93025;
  --danger-strong: #b3261e;
  --warn: #e8730c;
  --bg: #f1f3f6;
  --card: #ffffff;
  --surface: #f1f3f6;
  --text: #14181f;
  --muted: #6b7280;
  --line: #e6e9ef;
  --wordmark: linear-gradient(95deg, #ffd6dc 0%, #ffe8c2 22%, #fff6b8 40%, #c9f5d6 60%, #cfe0ff 80%, #e6d4ff 100%);

  /* Töne für Personen und Bereiche — bewusst deutlich verschieden */
  --tone-1: #e2001a;
  --tone-2: #0f8a3d;
  --tone-3: #6b2d90;
  --tone-4: #3b5bf5;
  --tone-5: #e8730c;
  --tone-6: #0e9aa7;
  --tone-7: #d6197d;
  --tone-8: #7a5c2e;

  /* Schatten & Overlay */
  --shadow-card: 0 1px 2px rgba(20, 24, 31, 0.05), 0 6px 20px rgba(20, 24, 31, 0.06);
  --shadow-pop: 0 10px 30px rgba(20, 24, 31, 0.14);
  --shadow-dialog: 0 24px 64px rgba(20, 24, 31, 0.22);
  --backdrop: rgba(10, 14, 22, 0.45);

  /* Form */
  --radius: 4px;
  --radius-dialog: 14px;
  --radius-pill: 999px;
  --bw: 1px;
  --bw-input: 1px;
  --bw-check: 2px;

  /* Typografie */
  --font: "Inter", system-ui, -apple-system, sans-serif;
  --fs-badge: 0.65rem;
  --fs-xs: 0.72rem;
  --fs-sm: 0.8rem;
  --fs-note: 0.92rem;
  --fs-base: 1rem;
  --fs-body: 1.06rem;
  --fs-lg: 1.15rem;
  --fs-title: 2rem;
  --fw-normal: 400;
  --fw-medium: 600;
  --fw-bold: 700;
  --fw-heavy: 700;
  --title-spacing: -0.02em;

  /* Abstandsskala */
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 10px;
  --sp-6: 12px;
  --sp-7: 14px;
  --sp-8: 16px;
  --sp-9: 18px;
  --sp-10: 20px;
  --sp-11: 24px;
  --sp-12: 28px;
  --sp-13: 32px;
  --sp-14: 48px;

  /* Dichte */
  --page-pad-x: 20px;
  --row-pad-x: 20px;
  --input-pad-y: 13px;
  --input-pad-x: var(--sp-8);

  /* Bedienelemente */
  --check-size: 24px;
  --who-size: 36px;
  --icon-btn: 40px;
  --row-min-h: 62px;
}

/* Dunkle Palette (Systemeinstellung) */
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #6ea8ff;
    --accent-strong: #4d8ff0;
    --on-accent: #0b1220;
    --danger: #ff6b60;
    --danger-strong: #e0554b;
    --warn: #ff9f45;
    --bg: #0d1117;
    --card: #161b23;
    --surface: #0d1117;
    --text: #eef2f8;
    --muted: #98a2b3;
    --line: #232a34;
    --wordmark: linear-gradient(95deg, #b3123f 0%, #c2410c 22%, #a16207 40%, #15803d 60%, #1e40af 80%, #6b21a8 100%);
    --tone-1: #ff5a6a;
    --tone-2: #3fbb6d;
    --tone-3: #b07ad0;
    --tone-4: #6e8bff;
    --tone-5: #ff9f45;
    --tone-6: #35c1cd;
    --tone-7: #f062a6;
    --tone-8: #b99460;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.35);
  }
}

/* Manuelle Wahl schlägt die Systemeinstellung */
:root[data-theme="dark"] {
  --accent: #6ea8ff;
  --accent-strong: #4d8ff0;
  --on-accent: #0b1220;
  --danger: #ff6b60;
  --danger-strong: #e0554b;
  --warn: #ff9f45;
  --bg: #0d1117;
  --card: #161b23;
  --surface: #0d1117;
  --text: #eef2f8;
  --muted: #98a2b3;
  --line: #232a34;
  --wordmark: linear-gradient(95deg, #b3123f 0%, #c2410c 22%, #a16207 40%, #15803d 60%, #1e40af 80%, #6b21a8 100%);
  --tone-1: #ff5a6a;
  --tone-2: #3fbb6d;
  --tone-3: #b07ad0;
  --tone-4: #6e8bff;
  --tone-5: #ff9f45;
  --tone-6: #35c1cd;
  --tone-7: #f062a6;
  --tone-8: #b99460;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.35);
}

:root[data-theme="light"] {
  --accent: #3b5bf5;
  --accent-strong: #2b45cc;
  --on-accent: #ffffff;
  --danger: #d93025;
  --danger-strong: #b3261e;
  --warn: #e8730c;
  --bg: #f1f3f6;
  --card: #ffffff;
  --surface: #f1f3f6;
  --text: #14181f;
  --muted: #6b7280;
  --line: #e6e9ef;
  --wordmark: linear-gradient(95deg, #ffd6dc 0%, #ffe8c2 22%, #fff6b8 40%, #c9f5d6 60%, #cfe0ff 80%, #e6d4ff 100%);
  --tone-1: #e2001a;
  --tone-2: #0f8a3d;
  --tone-3: #6b2d90;
  --tone-4: #3b5bf5;
  --tone-5: #e8730c;
  --tone-6: #0e9aa7;
  --tone-7: #d6197d;
  --tone-8: #7a5c2e;
  --shadow-card: 0 1px 2px rgba(20, 24, 31, 0.05), 0 6px 20px rgba(20, 24, 31, 0.06);
}

/* ---------------------------------------------------------------
   Akzentfarbe, frei wählbar. Steht bewusst nach allen Paletten:
   gleiche Spezifität wie [data-theme], die spätere Regel gewinnt.
   --------------------------------------------------------------- */
:root:root[data-accent="tinte"] { --accent: #201e1d; --accent-strong: #454140; --on-accent: #f3f2f2; }
:root:root[data-accent="gruen"] { --accent: #16a34a; --accent-strong: #15803d; --on-accent: #ffffff; }
:root:root[data-accent="rot"] { --accent: #dc2626; --accent-strong: #b91c1c; --on-accent: #ffffff; }
:root:root[data-accent="orange"] { --accent: #ea580c; --accent-strong: #c2410c; --on-accent: #ffffff; }
:root:root[data-accent="blau"] { --accent: #2563eb; --accent-strong: #1d4ed8; --on-accent: #ffffff; }
:root:root[data-accent="violett"] { --accent: #7c3aed; --accent-strong: #6d28d9; --on-accent: #ffffff; }

/* Auf dunklem Grund brauchen die Töne etwas mehr Leuchtkraft */
@media (prefers-color-scheme: dark) {
  :root:root[data-accent="tinte"] { --accent: #f4f3f2; --accent-strong: #cfcdcb; --on-accent: #191817; }
  :root:root[data-accent="gruen"] { --accent: #22c55e; --accent-strong: #16a34a; }
  :root:root[data-accent="rot"] { --accent: #ef4444; --accent-strong: #dc2626; }
  :root:root[data-accent="orange"] { --accent: #f97316; --accent-strong: #ea580c; }
  :root:root[data-accent="blau"] { --accent: #3b82f6; --accent-strong: #2563eb; }
  :root:root[data-accent="violett"] { --accent: #8b5cf6; --accent-strong: #7c3aed; }
}

:root:root[data-accent="tinte"][data-theme="dark"] { --accent: #f4f3f2; --accent-strong: #cfcdcb; --on-accent: #191817; }
:root:root[data-accent="gruen"][data-theme="dark"] { --accent: #22c55e; --accent-strong: #16a34a; }
:root:root[data-accent="rot"][data-theme="dark"] { --accent: #ef4444; --accent-strong: #dc2626; }
:root:root[data-accent="orange"][data-theme="dark"] { --accent: #f97316; --accent-strong: #ea580c; }
:root:root[data-accent="blau"][data-theme="dark"] { --accent: #3b82f6; --accent-strong: #2563eb; }
:root:root[data-accent="violett"][data-theme="dark"] { --accent: #8b5cf6; --accent-strong: #7c3aed; }

:root:root[data-accent="tinte"][data-theme="light"] { --accent: #201e1d; --accent-strong: #454140; --on-accent: #f3f2f2; }
:root:root[data-accent="gruen"][data-theme="light"] { --accent: #16a34a; --accent-strong: #15803d; }
:root:root[data-accent="rot"][data-theme="light"] { --accent: #dc2626; --accent-strong: #b91c1c; }
:root:root[data-accent="orange"][data-theme="light"] { --accent: #ea580c; --accent-strong: #c2410c; }
:root:root[data-accent="blau"][data-theme="light"] { --accent: #2563eb; --accent-strong: #1d4ed8; }
:root:root[data-accent="violett"][data-theme="light"] { --accent: #7c3aed; --accent-strong: #6d28d9; }

/* Selbst gehostet, damit die App offline bleibt (Inter, OFL) */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  max-width: 480px;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  -webkit-tap-highlight-color: transparent;
}

button, input, select { font-family: inherit; }

/* Beim Überziehen (iOS-Gummiband) rutscht der Kopf nach unten, während der
   Hintergrund stehen bleibt — in der Lücke sähe man sonst die Seitenfarbe.
   Ein fester Block in Kopffarbe, genau so hoch wie der Kopf, füllt sie. */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h, 220px);
  background: var(--accent);
  z-index: -1;
  pointer-events: none;
}

/* --- Kopf: ein Farbblock, wie in George --- */
header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--accent);
  color: var(--on-accent);
  padding: calc(env(safe-area-inset-top) + var(--sp-11)) var(--page-pad-x) 0;
}

h1 {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--fs-title);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--title-spacing);
  line-height: 1;
  color: var(--on-accent);
}

/* Regenbogen wie beim Geschwister-Projekt. Der Kopf ist hell blau, wenn das
   Farbschema dunkel ist — dann braucht die Wortmarke kräftige Töne statt
   pastelliger, sonst verschwindet sie. Siehe --wordmark in den Tokens. */
.wordmark {
  background: var(--wordmark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#settings-btn {
  margin-left: auto;
  width: var(--icon-btn);
  height: var(--icon-btn);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--on-accent) 18%, transparent);
  color: var(--on-accent);
  cursor: pointer;
}

#settings-btn svg { width: 21px; height: 21px; }

.offline-badge {
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--on-accent) 22%, transparent);
  color: var(--on-accent);
  font-size: var(--fs-badge);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#meta {
  margin-top: var(--sp-4);
  color: color-mix(in srgb, var(--on-accent) 78%, transparent);
  font-size: var(--fs-note);
}

/* --- Reiter, im Farbblock --- */
#tabs {
  display: flex;
  gap: var(--sp-9);
  margin-top: var(--sp-10);
}

#tabs a {
  padding-bottom: var(--sp-6);
  border-bottom: 3px solid transparent;
  color: color-mix(in srgb, var(--on-accent) 68%, transparent);
  font-size: var(--fs-note);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

#tabs a[aria-current="page"] {
  border-bottom-color: var(--on-accent);
  color: var(--on-accent);
  font-weight: var(--fw-heavy);
}

main {
  padding: var(--sp-10) var(--page-pad-x) calc(env(safe-area-inset-bottom) + var(--sp-14));
}

/* --- Listen: Zeilen bilden zusammen eine weiße Kachel --- */
.tasks, .history, .people-admin {
  list-style: none;
}

.tasks li:not(.section-head), .history li:not(.section-head) {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  min-height: var(--row-min-h);
  padding: var(--sp-6) var(--row-pad-x);
  background: var(--card);
  box-shadow: var(--shadow-card);
}

/* Aufeinanderfolgende Zeilen: nur eine leise Linie dazwischen */
.tasks li:not(.section-head) + li:not(.section-head),
.history li:not(.section-head) + li:not(.section-head) {
  border-top: var(--bw) solid var(--line);
}

/* Erste und letzte Zeile eines Abschnitts runden die Kachel ab */
.tasks li.section-head + li,
.history li.section-head + li { border-radius: var(--radius) var(--radius) 0 0; }

.tasks li:not(.section-head):has(+ .section-head),
.tasks li:not(.section-head):last-child,
.history li:not(.section-head):has(+ .section-head),
.history li:not(.section-head):last-child { border-radius: 0 0 var(--radius) var(--radius); }

.tasks li.section-head + li:has(+ .section-head),
.tasks li.section-head + li:last-child,
.history li.section-head + li:has(+ .section-head),
.history li.section-head + li:last-child { border-radius: var(--radius); }

/* Zwischentitel schweben über der Kachel */
.tasks li.section-head, .history li.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--sp-10) var(--sp-2) var(--sp-4);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tasks li.section-head:first-child, .history li.section-head:first-child { padding-top: var(--sp-4); }

/* Ein Streifen links zeigt, wie dringend es ist */
.tasks li.task { border-left: 5px solid transparent; }
.tasks li.task.overdue { border-left-color: color-mix(in srgb, var(--danger) 80%, transparent); }
.tasks li.task.today { border-left-color: color-mix(in srgb, var(--warn) 80%, transparent); }
.tasks li.task.soon { border-left-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.tasks li.task.snoozed { opacity: 0.66; }

.check {
  flex: none;
  width: var(--check-size);
  height: var(--check-size);
  border: var(--bw-check) solid var(--muted);
  border-radius: var(--radius-pill);
  background: none;
  cursor: pointer;
}

.tasks li.checking { opacity: 0.4; }
.tasks li.checking .check { background: var(--accent); border-color: var(--accent); }

.body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.name {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sub {
  color: var(--muted);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tasks li.task.overdue .sub { color: var(--danger); }
.tasks li.task.today .sub { color: var(--warn); }

/* Personen-Plakette: Kreis mit Anfangsbuchstaben, wie die Kategorie-Icons
   in George — zurückgenommener Ton, kräftige Schrift. */
.who {
  flex: none;
  width: var(--who-size);
  height: var(--who-size);
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--who-color, var(--accent)) 16%, transparent);
  color: var(--who-color, var(--accent));
  font-size: 0.9rem;
  font-weight: var(--fw-heavy);
}

.snooze {
  flex: none;
  width: var(--icon-btn);
  height: var(--icon-btn);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.snooze svg { width: 20px; height: 20px; }
.snooze:active { background: var(--surface); }

/* --- Verlauf --- */
.history .when {
  flex: none;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.history .drop {
  flex: none;
  width: 34px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 1.05rem;
  cursor: pointer;
}

.empty {
  margin: var(--sp-13) 0;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}

/* Ausblick unten: gedämpft, damit er nicht mit dem Fälligen konkurriert */
.tasks li.task.muted { opacity: 0.72; }
.tasks li.task.muted .name { font-weight: var(--fw-normal); }

button.wide {
  width: 100%;
  margin: var(--sp-11) 0 0;
  height: 54px;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-base);
  font-weight: var(--fw-heavy);
  box-shadow: var(--shadow-card);
  cursor: pointer;
}

button.wide:active { background: var(--accent-strong); }

/* --- Dialoge: schweben mittig, kaum gerundet --- */
dialog {
  width: min(calc(100vw - var(--sp-13)), 420px);
  max-height: 86dvh;
  overflow-y: auto;
  /* Der Balken säße in den runden Ecken und würde sie oben und unten
     eckig erscheinen lassen. Gescrollt wird trotzdem. */
  scrollbar-width: none;
  /* der Stern-Reset oben nimmt dem Dialog sonst das margin:auto,
     mit dem der Browser ihn mittig setzt */
  margin: auto;
  padding: var(--sp-11) var(--sp-10);
  border: 0;
  border-radius: var(--radius-dialog);
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-dialog);
}

dialog::-webkit-scrollbar { width: 0; height: 0; }

dialog::backdrop { background: var(--backdrop); }

dialog > p:first-child,
dialog form > p:first-child {
  margin-bottom: var(--sp-9);
  font-size: 1.5rem;
  font-weight: var(--fw-heavy);
  letter-spacing: -0.02em;
}

.field-label, .settings-label {
  margin: var(--sp-11) 0 var(--sp-3);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.field-label:first-of-type { margin-top: 0; }

/* Das Namensfeld ist die Überschrift des Dialogs: nur unterstrichen */
#task-name {
  height: 52px;
  padding: 0 0 6px;
  border: 0;
  border-bottom: var(--bw-input) solid var(--accent);
  background: none;
  color: var(--text);
  font-size: 1.5rem;
  font-weight: var(--fw-heavy);
  letter-spacing: -0.02em;
  width: 100%;
  outline: none;
}

#auth-form input {
  height: 52px;
  padding: 0 0 6px;
  border: 0;
  border-bottom: var(--bw-input) solid var(--accent);
  background: none;
  color: var(--text);
  font-size: 1.5rem;
  font-weight: var(--fw-heavy);
  outline: none;
}

dialog input[type="text"]:not(#task-name),
dialog input[type="number"],
dialog select {
  width: 100%;
  height: 52px;
  padding: 0 var(--input-pad-x);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-body);
  font-weight: var(--fw-heavy);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

dialog input:focus, dialog select:focus { border-color: var(--accent); }

/* Eigener Pfeil: der native ist je nach Gerät winzig oder unsichtbar */
dialog select {
  padding-right: calc(var(--input-pad-x) * 2 + 12px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23888888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--input-pad-x) center;
  background-size: 12px 8px;
}

#task-days-row {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
}

#task-days-row[hidden] { display: none; }
#task-days-row input { width: 110px; }
#task-days-row span { color: var(--muted); font-size: var(--fs-note); }

.dialog-actions {
  display: flex;
  gap: var(--sp-5);
  margin-top: var(--sp-11);
}

.dialog-actions button,
#task-form button[type="submit"] {
  flex: 1;
  height: 52px;
  padding-inline: var(--sp-9);
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.95rem;
  font-weight: var(--fw-heavy);
  cursor: pointer;
}

#task-cancel, #person-cancel, #snooze-cancel, #confirm-cancel {
  background: var(--surface);
  color: var(--text);
  border: var(--bw) solid var(--line);
}

#confirm-ok { background: var(--danger); }
#confirm-ok:active { background: var(--danger-strong); }

.text-danger {
  display: block;
  width: 100%;
  margin-top: var(--sp-8);
  padding: var(--sp-5);
  border: 0;
  background: none;
  color: var(--danger);
  font-size: var(--fs-note);
  font-weight: var(--fw-medium);
  cursor: pointer;
}

.text-danger[hidden] { display: none; }

/* --- Personen --- */
.person-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
}

.person-choices button {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-8) var(--sp-4) var(--sp-4);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-note);
  font-weight: var(--fw-medium);
  cursor: pointer;
}

.person-choices button[aria-pressed="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.person-choices .who { width: 30px; height: 30px; font-size: var(--fs-sm); }

#person-add-form, #people-add-form, #auth-form {
  display: flex;
  gap: var(--sp-5);
  margin-top: var(--sp-9);
}

#person-add-form input, #people-add-form input, #auth-form input { flex: 1; }

#person-add-form button, #people-add-form button, #auth-form button {
  flex: none;
  width: 54px;
  height: 52px;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 1.4rem;
  font-weight: var(--fw-heavy);
  cursor: pointer;
}

#auth-form button { width: auto; padding-inline: var(--sp-11); font-size: 0.95rem; }

.people-admin li {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  border-bottom: var(--bw) solid var(--line);
}

.people-admin li:last-child { border-bottom: 0; }
.people-admin .name { flex: 1; font-size: var(--fs-note); font-weight: var(--fw-medium); }
.people-admin .who { width: 30px; height: 30px; font-size: var(--fs-sm); }

.people-admin button {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
}

/* --- Akzent-Tupfer --- */
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
}

.swatches button, .swatches .swatch-custom {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  outline-offset: 3px;
}

.swatches button[aria-pressed="true"],
.swatches .swatch-custom[aria-pressed="true"] { outline: 2px solid var(--text); }

/* Eigene Farbe: das native Farbfeld sitzt randlos im Tupfer */
.swatches .swatch-custom { overflow: hidden; }

.swatches .swatch-custom input {
  width: 150%;
  height: 150%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.swatches .swatch-custom input::-webkit-color-swatch-wrapper { padding: 0; }
.swatches .swatch-custom input::-webkit-color-swatch { border: 0; }

.swatches button[data-value="standard"] { background: #3b5bf5; }
.swatches button[data-value="tinte"] { background: #201e1d; }
.swatches button[data-value="gruen"] { background: #16a34a; }
.swatches button[data-value="rot"] { background: #dc2626; }
.swatches button[data-value="orange"] { background: #ea580c; }
.swatches button[data-value="blau"] { background: #2563eb; }
.swatches button[data-value="violett"] { background: #7c3aed; }

@media (prefers-color-scheme: dark) {
  .swatches button[data-value="standard"] { background: #6ea8ff; }
  .swatches button[data-value="tinte"] { background: #f4f3f2; }
}

:root[data-theme="dark"] .swatches button[data-value="standard"] { background: #6ea8ff; }
:root[data-theme="dark"] .swatches button[data-value="tinte"] { background: #f4f3f2; }
:root[data-theme="light"] .swatches button[data-value="standard"] { background: #3b5bf5; }
:root[data-theme="light"] .swatches button[data-value="tinte"] { background: #201e1d; }

/* Punkt in der Mitte kennzeichnet "wie das Design es vorsieht" */
.swatches button[data-value="standard"]::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill);
  background: var(--card);
}

/* --- Chips (Verschieben, Farbschema, Hintergrund) --- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
}

.chips button {
  padding: var(--sp-5) var(--sp-9);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-note);
  font-weight: var(--fw-medium);
  cursor: pointer;
}

.chips button[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

/* Farbwahl-Feld sieht aus wie ein Chip mit Farbtupfer */
.chips .chip-color {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-8);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-note);
  font-weight: var(--fw-medium);
  cursor: pointer;
}

.chips .chip-color[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.chips .chip-color input {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  overflow: hidden;
}

.chips .chip-color input::-webkit-color-swatch-wrapper { padding: 0; }
.chips .chip-color input::-webkit-color-swatch { border: 0; border-radius: 50%; }

.auth-hint { margin-bottom: var(--sp-8); color: var(--muted); font-size: var(--fs-note); }
#auth-error { margin-top: var(--sp-6); color: var(--danger); font-size: var(--fs-note); }
#auth-error[hidden] { display: none; }
#confirm-detail { margin-bottom: 0; color: var(--muted); font-size: var(--fs-note); font-weight: var(--fw-normal); }
#confirm-detail[hidden] { display: none; }

/* --- Hintergrundbilder: eine Ebene hinter dem Inhalt, eine im Kopf --- */
#app-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-color: var(--bg-flat, transparent);
  background-image: var(--bg-image, none);
  /* In Pixeln gerechnet statt "cover"/"center": der Kopf zeigt im
     durchgehenden Modus denselben Ausschnitt, und der muss aufs Pixel passen. */
  background-size: var(--bg-size, cover);
  background-position: var(--bg-pos, center);
  background-repeat: no-repeat;
}

#app-bg[hidden] { display: none; }

/* Damit das Bild überhaupt zu sehen ist, darf die Seite nicht darüber liegen */
:root[data-bg] body { background: transparent; }

/* Ein Schleier hält Text auch auf unruhigen Fotos lesbar; über einer
   gewählten Farbe wäre er nur eine Verfälschung. */
:root { --scrim: color-mix(in srgb, var(--bg) 45%, transparent); }

#app-bg[data-kind="custom"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

/* Kopfbild liegt über der Akzentfarbe, mit Abdunklung für die Schrift.
   Oben deckend, damit es nahtlos an die einfarbige Statusleiste anschließt. */
:root[data-head-bg="photo"] header {
  background-image: linear-gradient(to bottom,
                      var(--accent) 0,
                      color-mix(in srgb, var(--accent) 78%, transparent) 22%,
                      color-mix(in srgb, var(--accent) 45%, transparent) 100%),
                    var(--header-image);
  background-size: cover;
  background-position: center;
}

/* --- Lesbarkeit auf dem Hintergrund: Beschriftungen, die nicht auf einer
   Kachel liegen, richten sich nach der Helligkeit des Hintergrunds. --- */
:root[data-bg-luma="dark"] { --on-bg: #ffffff; --on-bg-soft: rgba(255, 255, 255, 0.82); }
:root[data-bg-luma="light"] { --on-bg: #14181f; --on-bg-soft: rgba(20, 24, 31, 0.7); }

:root[data-bg-luma] .tasks li.section-head,
:root[data-bg-luma] .history li.section-head,
:root[data-bg-luma] .empty { color: var(--on-bg); }

:root[data-bg="custom"] .tasks li.section-head,
:root[data-bg="custom"] .history li.section-head,
:root[data-bg="custom"] .empty { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }

:root[data-bg="custom"][data-bg-luma="light"] .tasks li.section-head,
:root[data-bg="custom"][data-bg-luma="light"] .history li.section-head,
:root[data-bg="custom"][data-bg-luma="light"] .empty { text-shadow: 0 1px 3px rgba(255, 255, 255, 0.6); }

/* --- Durchgehender Hintergrund: der Kopf hat keinen eigenen Grund, der
   Hintergrund des Inhalts läuft ohne Kante durch bis nach oben. --- */
:root[data-head-bg="through"] header { background: none; }

/* Dieselbe Fläche noch einmal, nur so hoch wie der Kopf. Ohne sie schiene der
   Inhalt beim Scrollen durch den Kopf hindurch. Nicht beschnitten, sondern
   kurz: --bg-size/--bg-pos sind in Pixeln für den ganzen Bildschirm gerechnet,
   beide Ebenen zeigen damit denselben Ausschnitt. */
:root[data-head-bg="through"] header::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h, 220px);
  z-index: -2;
  background-color: var(--bg-flat, var(--bg));
  background-image: var(--bg-image, none);
  background-size: var(--bg-size, cover);
  background-position: var(--bg-pos, center);
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Auf dem Foto derselbe Schleier wie über dem Inhalt */
:root[data-head-bg="through"][data-bg="custom"] header::before {
  background-image: linear-gradient(var(--scrim), var(--scrim)), var(--bg-image);
  background-size: 100% 100%, var(--bg-size, cover);
  background-position: 0 0, var(--bg-pos, center);
}

:root[data-head-bg="through"] {
  /* Die Lücke, die das Gummiband oben aufreißt, malt das Wurzelelement —
     feste Ebenen reichen nicht hinein. app.js rechnet die Farbe aus. */
  background-color: var(--canvas);
  /* Am Bildschirm gemessen, damit der Übergang überall gleich weich wirkt */
  --fade-h: min(46vh, 440px);
  /* Viele Stufen statt zweier: ein glatter Verlauf von Deckend nach Nichts
     hat sonst an beiden Enden eine sichtbare Kante. */
  --fade-paint: linear-gradient(to bottom,
                  var(--canvas) 0,
                  var(--canvas) 8%,
                  color-mix(in srgb, var(--canvas) 84%, transparent) 26%,
                  color-mix(in srgb, var(--canvas) 58%, transparent) 44%,
                  color-mix(in srgb, var(--canvas) 32%, transparent) 62%,
                  color-mix(in srgb, var(--canvas) 13%, transparent) 78%,
                  color-mix(in srgb, var(--canvas) 4%, transparent) 90%,
                  transparent 100%);
  --fade-mask: linear-gradient(to bottom, #000 0, #000 18%,
                 rgba(0, 0, 0, 0.82) 38%, rgba(0, 0, 0, 0.5) 58%,
                 rgba(0, 0, 0, 0.22) 76%, rgba(0, 0, 0, 0.07) 89%, transparent 100%);
}

/* Der Übergang zur einfarbigen Statusleiste läuft über den Kopf hinaus, liegt
   aber in zwei Teilen: unter dem Kopf hinter dem Inhalt (sonst würden die
   obersten Kacheln mitgeweicht), im Kopf davor. */
:root[data-head-bg="through"] body::before {
  top: var(--header-h, 220px);
  height: max(0px, calc(var(--fade-h) - var(--header-h, 220px)));
  background: var(--fade-paint) 0 calc(-1 * var(--header-h, 220px)) / 100% var(--fade-h) no-repeat;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  -webkit-mask-image: var(--fade-mask);
  mask-image: var(--fade-mask);
  -webkit-mask-size: 100% var(--fade-h);
  mask-size: 100% var(--fade-h);
  -webkit-mask-position: 0 calc(-1 * var(--header-h, 220px));
  mask-position: 0 calc(-1 * var(--header-h, 220px));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

:root[data-head-bg="through"] header::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h, 220px);
  z-index: -1;
  background: var(--fade-paint) 0 0 / 100% var(--fade-h) no-repeat;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  -webkit-mask-image: var(--fade-mask);
  mask-image: var(--fade-mask);
  -webkit-mask-size: 100% var(--fade-h);
  mask-size: 100% var(--fade-h);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}

/* Schrift und Bedienelemente im Kopf richten sich nach der Helligkeit
   des Hintergrunds, nicht mehr nach der Akzentfarbe */
:root[data-head-bg="through"] h1 { color: var(--on-bg, var(--text)); }
:root[data-head-bg="through"] #meta { color: color-mix(in srgb, var(--on-bg, var(--text)) 75%, transparent); }

:root[data-head-bg="through"] #tabs a { color: color-mix(in srgb, var(--on-bg, var(--text)) 65%, transparent); }
:root[data-head-bg="through"] #tabs a[aria-current="page"] {
  color: var(--on-bg, var(--text));
  border-bottom-color: var(--on-bg, var(--text));
}

:root[data-head-bg="through"] #settings-btn {
  background: color-mix(in srgb, var(--on-bg, var(--text)) 16%, transparent);
  color: var(--on-bg, var(--text));
}

:root[data-head-bg="through"] .offline-badge {
  background: color-mix(in srgb, var(--on-bg, var(--text)) 20%, transparent);
  color: var(--on-bg, var(--text));
}

/* Auf hellem Grund braucht die Wortmarke die kräftigen Töne */
:root[data-head-bg="through"][data-bg-luma="light"],
:root[data-head-bg="through"]:not([data-bg-luma]) {
  --wordmark: linear-gradient(95deg, #b3123f 0%, #c2410c 22%, #a16207 40%, #15803d 60%, #1e40af 80%, #6b21a8 100%);
}

/* --- Kurzer Hinweis am unteren Rand, mit dem Weg zurück --- */
#toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + var(--sp-7));
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  max-width: min(92vw, 420px);
  padding: var(--sp-6) var(--sp-8);
  border-radius: var(--radius);
  background: var(--text);
  color: var(--card);
  font-size: var(--fs-note);
  box-shadow: var(--shadow-pop);
  transform: translate(-50%, calc(100% + var(--sp-9)));
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

#toast.show { transform: translate(-50%, 0); opacity: 1; }
#toast[hidden] { display: none; }
#toast span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#toast-undo {
  flex: none;
  border: 0;
  background: none;
  color: var(--card);
  font: inherit;
  font-weight: var(--fw-heavy);
  text-decoration: underline;
  cursor: pointer;
}

#toast-undo[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  #toast { transition: opacity 0.15s ease; transform: translate(-50%, 0); }
}