/* ── Reset & Base ─────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-bg: #faf8f5;
  --color-surface: #ffffff;
  --color-text: #2d2a26;
  --color-text-muted: #8a8480;
  --color-primary: #c06830;
  --color-primary-hover: #a85828;
  --color-primary-light: #fdf0e8;
  --color-border: #e8e4df;
  --color-success: #3a8a5c;
  --color-success-light: #edf7f0;
  --color-error: #c4403a;
  --color-error-light: #fdf0ef;
  --color-people: #2563eb;
  --color-people-hover: #1d4ed8;
  --color-interactions: #059669;
  --color-interactions-hover: #047857;
  --color-todos: #a855f7;
  --color-todos-hover: #9333ea;
  --color-habits: #e67e22;
  --color-habits-hover: #d35400;
  --color-habits-light: #fef3e7;
  --color-culture: #0891b2;
  --color-culture-hover: #0e7490;
  --color-culture-light: #ecfeff;
  --color-tours: #16a34a;
  --color-tours-hover: #15803d;
  --color-tours-light: #f0fdf4;
  --color-books: #b45309;
  --color-books-hover: #92400e;
  --color-forecasts: #6366f1;
  --color-forecasts-hover: #4f46e5;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(45, 42, 38, 0.06), 0 1px 2px rgba(45, 42, 38, 0.04);
  --shadow-md: 0 4px 12px rgba(45, 42, 38, 0.08), 0 2px 4px rgba(45, 42, 38, 0.04);
  --max-width: 860px;
  /* Hoehe des sticky .header – gemessen, nicht erzwungen. Nur als Offset fuer
     Elemente, die unter ihm kleben (z. B. .todos-side). Wenn sich der Header-
     Inhalt aendert, hier nachziehen. */
  --header-height: 57px;
  --bg-gradient: linear-gradient(135deg, #faf8f5 0%, #f0e6da 50%, #e8ddd0 100%);
}

/* ── Color scheme overrides ──────────────────────────────────
   Default (:root) is the "warm" scheme. "system" follows the OS
   preference via prefers-color-scheme below. */

[data-color-scheme="dark"] {
  --color-bg: #1a1a1f;
  --color-surface: #25252c;
  --color-text: #f0eee9;
  --color-text-muted: #b8b2ac;
  --color-primary: #f08a50;
  --color-primary-hover: #ff9d65;
  --color-primary-light: #4a3020;
  --color-border: #3a3a42;
  --color-success: #5dd99e;
  --color-success-light: #1f3a2a;
  --color-error: #f57570;
  --color-error-light: #3a1f1f;
  --color-people: #6ea3ff;
  --color-people-hover: #87b3ff;
  --color-interactions: #4dd99e;
  --color-interactions-hover: #5cdda6;
  --color-todos: #c89dff;
  --color-todos-hover: #d4b3ff;
  --color-habits: #ff9d4d;
  --color-habits-hover: #ffae70;
  --color-habits-light: #3a2a1f;
  --color-culture: #4dd2e8;
  --color-culture-hover: #6ddae8;
  --color-culture-light: #1a3340;
  --color-tours: #5dd87a;
  --color-tours-hover: #7adfa3;
  --color-tours-light: #1f3327;
  --color-books: #f5a55a;
  --color-books-hover: #ffb870;
  --color-forecasts: #a5b4fc;
  --color-forecasts-hover: #c4cdfd;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
  --bg-gradient: linear-gradient(135deg, #1a1a1f 0%, #25252c 50%, #1a1a1f 100%);
}

[data-color-scheme="cool"] {
  --color-bg: #f4f7fb;
  --color-surface: #ffffff;
  --color-text: #1e293b;
  --color-text-muted: #64748b;
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-light: #dbeafe;
  --color-border: #e2e8f0;
  --bg-gradient: linear-gradient(135deg, #f4f7fb 0%, #e0eaf5 50%, #c9d6e8 100%);
}

[data-color-scheme="forest"] {
  --color-bg: #f5f7f1;
  --color-surface: #ffffff;
  --color-text: #1f2e1a;
  --color-text-muted: #6b7c5e;
  --color-primary: #4a7c3a;
  --color-primary-hover: #3a6230;
  --color-primary-light: #e8efd8;
  --color-border: #d8e0cc;
  --bg-gradient: linear-gradient(135deg, #f5f7f1 0%, #e3e8d8 50%, #cdd6b8 100%);
}

[data-color-scheme="sunset"] {
  --color-bg: #fff5f7;
  --color-surface: #ffffff;
  --color-text: #3a1f2c;
  --color-text-muted: #8a6a76;
  --color-primary: #d4407a;
  --color-primary-hover: #b8336a;
  --color-primary-light: #fde8ef;
  --color-border: #f0d8e0;
  --bg-gradient: linear-gradient(135deg, #fff5f7 0%, #ffe0ec 30%, #ffd0a8 70%, #ffb37a 100%);
}

[data-color-scheme="terminal"] {
  --color-bg: #0a0e0a;
  --color-surface: #0f1410;
  --color-text: #7aff7a;
  --color-text-muted: #50c060;
  --color-primary: #8affb3;
  --color-primary-hover: #a0ffc4;
  --color-primary-light: #1a3a22;
  --color-border: #2a5a32;
  --color-success: #8affb3;
  --color-success-light: #1a3a22;
  --color-error: #ff7575;
  --color-error-light: #3a1010;
  --color-people: #8affb3;
  --color-people-hover: #a0ffc4;
  --color-interactions: #8affb3;
  --color-interactions-hover: #a0ffc4;
  --color-todos: #8affb3;
  --color-todos-hover: #a0ffc4;
  --color-habits: #8affb3;
  --color-habits-hover: #a0ffc4;
  --color-habits-light: #1a3a22;
  --color-culture: #8affb3;
  --color-culture-hover: #a0ffc4;
  --color-culture-light: #1a3a22;
  --color-tours: #8affb3;
  --color-tours-hover: #a0ffc4;
  --color-tours-light: #1a3a22;
  --color-books: #8affb3;
  --color-books-hover: #a0ffc4;
  --color-forecasts: #8affb3;
  --color-forecasts-hover: #a0ffc4;
  --shadow: 0 1px 3px rgba(0, 255, 100, 0.08), 0 1px 2px rgba(0, 255, 100, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 255, 100, 0.1), 0 2px 4px rgba(0, 255, 100, 0.06);
  --bg-gradient: linear-gradient(135deg, #0a0e0a 0%, #0f1410 50%, #0a0e0a 100%);
  font-family: "SF Mono", Menlo, Consolas, "Courier New", monospace;
}

[data-color-scheme="gletscher"] {
  --color-bg: #eaf4ff;
  --color-surface: rgba(243, 249, 255, 0.86);
  --color-text: #0a1a33;
  --color-text-muted: #4f6685;
  --color-primary: #0b63c4;
  --color-primary-hover: #084f9e;
  --color-primary-light: #dcecff;
  --color-border: rgba(10, 60, 130, 0.14);
  --color-success: #0d8a6a;
  --color-success-light: #d8f5ec;
  --color-error: #d0294a;
  --color-error-light: #ffe3e8;
  --color-habits: #c25e00;
  --color-habits-light: #fff0dc;
  --color-culture: #007c99;
  --color-culture-light: #d9f6fd;
  --color-todos: #6a3fd6;
  --color-bg-soft: var(--color-surface);
  --shadow: 0 6px 24px rgba(0, 20, 60, 0.28);
  --shadow-md: 0 10px 32px rgba(0, 20, 60, 0.36);
  --bg-gradient: linear-gradient(165deg, #000000 0%, #03091a 22%, #0a2c63 50%, #1d78cf 74%, #7cc6f7 90%, #d4efff 100%);
}

/* Der Verlauf reicht von Schwarz bis Eisblau, die Karten sind hell. Text, der
   ohne Karte direkt auf dem Verlauf steht, braucht deshalb eigene Regeln:
   Seitentitel liegen oben im Dunkeln und werden nur hell; was beim Scrollen
   bis in den hellen unteren Teil wandert, bekommt eine dunkle Pille. Innerhalb
   einer Karte bleibt es bei der dunklen Textfarbe. */
[data-color-scheme="gletscher"] .container :is(h1, .quick-add-summary, .quick-add-hint):not(:is(.card, .section-card, .detail-card, .board-day, .todos-today-box) *) {
  color: #eaf5ff;
}

[data-color-scheme="gletscher"] .container .quick-add-hint code {
  color: #bfe4ff;
}

[data-color-scheme="gletscher"] :is(
  .container > h2,
  .board-week,
  .todo-day-heading,
  .todos-notes-header h2,
  .todos-today-header h2,
  .todos-habits-title h2,
  .habits-summary-label,
  .journal-pagination-status,
  .pagination-summary,
  .tour-memory-attribution,
  .subtodos-done > summary
):not(:is(.card, .section-card, .detail-card, .board-day, .todos-today-box) *) {
  width: fit-content;
  padding: 0.1rem 0.7rem;
  border-radius: 999px;
  color: #eaf5ff;
  background: rgba(0, 8, 24, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

[data-color-scheme="gletscher"] .todo-day-heading.overdue:not(:is(.card, .section-card) *) {
  color: #ff9bb0;
}

[data-color-scheme="gletscher"] .container :is(.todos-today-header h2 a, .todos-habits-title h2 a, .tour-memory-attribution a) {
  color: #bfe4ff;
}

[data-color-scheme="gletscher"] .container > .tabs > .tab-list .tab {
  color: #a9c6e4;
}

[data-color-scheme="gletscher"] .footer .notifications {
  color: #eaf5ff;
  background: rgba(0, 8, 24, 0.55);
}

[data-color-scheme="gletscher"] .container > .tabs > .tab-list .tab:is(:hover, .active),
[data-color-scheme="gletscher"] .container > a {
  color: #bfe4ff;
}

[data-color-scheme="gletscher"] .container > .tabs > .tab-list .tab.active {
  border-bottom-color: #bfe4ff;
}

[data-color-scheme="gletscher"] .habits-ring-text {
  fill: #eaf5ff;
}

[data-color-scheme="gletscher"] :is(.header, .card, .section-card, .board-tile, .board-day, .todos .todo, .todos-filters, .todos-today-box) {
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

/* Die Kleckse brauchen „fixed" je Ebene: Das „fixed" in `background: var(--bg-gradient)
   fixed` gilt nur für die letzte Ebene, die übrigen würden sonst mitscrollen und
   sich über die ganze Seitenhöhe verteilen. */
[data-color-scheme="konfetti"] {
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-text: #1b1530;
  --color-text-muted: #6d6585;
  --color-primary: #e0007a;
  --color-primary-hover: #b80064;
  --color-primary-light: #ffe3f1;
  --color-border: #ece8f2;
  --color-success: #1aa34a;
  --color-success-light: #e2f8e6;
  --color-error: #e4002b;
  --color-error-light: #ffe5ea;
  --color-habits: #e86a00;
  --color-habits-light: #fff0e0;
  --color-culture: #0090d6;
  --color-culture-light: #e0f4ff;
  --color-todos: #7c3aed;
  --shadow: 0 2px 6px rgba(40, 20, 80, 0.06), 0 8px 24px rgba(40, 20, 80, 0.06);
  --shadow-md: 0 4px 12px rgba(40, 20, 80, 0.1), 0 2px 4px rgba(40, 20, 80, 0.05);
  --bg-gradient:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 110 110'><g fill-opacity='0.32' fill='%23ff2e88' transform='rotate(0 50 50)'><path d='M50 8C62 6 66 20 74 22C86 25 96 30 92 44C89 54 98 62 90 72C82 82 70 76 62 86C54 96 40 94 34 84C28 74 14 78 9 66C4 54 14 46 12 36C10 24 22 18 32 18C40 18 42 9 50 8Z'/><circle cx='96' cy='10' r='4'/><circle cx='6' cy='94' r='3'/><circle cx='80' cy='97' r='2.5'/></g></svg>") 4% 9% / 76px 76px no-repeat fixed,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 110 110'><g fill-opacity='0.32' fill='%23ffd60a' transform='rotate(40 50 50)'><path d='M50 14C58 4 70 16 72 26C80 22 90 28 84 40C94 48 90 62 78 64C80 76 68 86 58 80C52 94 36 90 36 78C24 84 12 74 20 62C8 56 10 42 22 40C16 28 30 18 40 24C42 16 46 14 50 14Z'/><circle cx='93' cy='90' r='3'/><circle cx='9' cy='10' r='2.5'/><circle cx='97' cy='30' r='1.8'/></g></svg>") 27% 1% / 46px 46px no-repeat fixed,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 110 110'><g fill-opacity='0.32' fill='%2300c2ff' transform='rotate(-20 50 50)'><path d='M30 20C42 10 58 22 66 14C76 6 90 16 86 30C83 40 94 48 88 60C82 72 66 66 58 78C50 90 32 88 26 76C20 64 6 62 10 48C13 36 20 28 30 20Z'/><circle cx='97' cy='70' r='3'/><circle cx='3' cy='22' r='3.5'/><circle cx='46' cy='3' r='2'/></g></svg>") 95% 6% / 96px 96px no-repeat fixed,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 110 110'><g fill-opacity='0.32' fill='%237ae22a' transform='rotate(110 50 50)'><path d='M50 14C58 4 70 16 72 26C80 22 90 28 84 40C94 48 90 62 78 64C80 76 68 86 58 80C52 94 36 90 36 78C24 84 12 74 20 62C8 56 10 42 22 40C16 28 30 18 40 24C42 16 46 14 50 14Z'/><circle cx='93' cy='90' r='3'/><circle cx='9' cy='10' r='2.5'/><circle cx='97' cy='30' r='1.8'/></g></svg>") 80% 24% / 43px 43px no-repeat fixed,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 110 110'><g fill-opacity='0.32' fill='%23ff7a00' transform='rotate(200 50 50)'><path d='M50 8C62 6 66 20 74 22C86 25 96 30 92 44C89 54 98 62 90 72C82 82 70 76 62 86C54 96 40 94 34 84C28 74 14 78 9 66C4 54 14 46 12 36C10 24 22 18 32 18C40 18 42 9 50 8Z'/><circle cx='96' cy='10' r='4'/><circle cx='6' cy='94' r='3'/><circle cx='80' cy='97' r='2.5'/></g></svg>") 99% 42% / 67px 67px no-repeat fixed,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 110 110'><g fill-opacity='0.32' fill='%238b5cf6' transform='rotate(70 50 50)'><path d='M30 20C42 10 58 22 66 14C76 6 90 16 86 30C83 40 94 48 88 60C82 72 66 66 58 78C50 90 32 88 26 76C20 64 6 62 10 48C13 36 20 28 30 20Z'/><circle cx='97' cy='70' r='3'/><circle cx='3' cy='22' r='3.5'/><circle cx='46' cy='3' r='2'/></g></svg>") 1% 45% / 56px 56px no-repeat fixed,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 110 110'><g fill-opacity='0.32' fill='%23ffd60a' transform='rotate(160 50 50)'><path d='M50 14C58 4 70 16 72 26C80 22 90 28 84 40C94 48 90 62 78 64C80 76 68 86 58 80C52 94 36 90 36 78C24 84 12 74 20 62C8 56 10 42 22 40C16 28 30 18 40 24C42 16 46 14 50 14Z'/><circle cx='93' cy='90' r='3'/><circle cx='9' cy='10' r='2.5'/><circle cx='97' cy='30' r='1.8'/></g></svg>") 8% 66% / 83px 83px no-repeat fixed,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 110 110'><g fill-opacity='0.32' fill='%23ff2e88' transform='rotate(250 50 50)'><path d='M30 20C42 10 58 22 66 14C76 6 90 16 86 30C83 40 94 48 88 60C82 72 66 66 58 78C50 90 32 88 26 76C20 64 6 62 10 48C13 36 20 28 30 20Z'/><circle cx='97' cy='70' r='3'/><circle cx='3' cy='22' r='3.5'/><circle cx='46' cy='3' r='2'/></g></svg>") 97% 64% / 40px 40px no-repeat fixed,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 110 110'><g fill-opacity='0.32' fill='%238b5cf6' transform='rotate(300 50 50)'><path d='M50 8C62 6 66 20 74 22C86 25 96 30 92 44C89 54 98 62 90 72C82 82 70 76 62 86C54 96 40 94 34 84C28 74 14 78 9 66C4 54 14 46 12 36C10 24 22 18 32 18C40 18 42 9 50 8Z'/><circle cx='96' cy='10' r='4'/><circle cx='6' cy='94' r='3'/><circle cx='80' cy='97' r='2.5'/></g></svg>") 90% 84% / 80px 80px no-repeat fixed,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 110 110'><g fill-opacity='0.32' fill='%2300c2ff' transform='rotate(20 50 50)'><path d='M50 14C58 4 70 16 72 26C80 22 90 28 84 40C94 48 90 62 78 64C80 76 68 86 58 80C52 94 36 90 36 78C24 84 12 74 20 62C8 56 10 42 22 40C16 28 30 18 40 24C42 16 46 14 50 14Z'/><circle cx='93' cy='90' r='3'/><circle cx='9' cy='10' r='2.5'/><circle cx='97' cy='30' r='1.8'/></g></svg>") 2% 90% / 52px 52px no-repeat fixed,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 110 110'><g fill-opacity='0.32' fill='%23ff7a00' transform='rotate(140 50 50)'><path d='M30 20C42 10 58 22 66 14C76 6 90 16 86 30C83 40 94 48 88 60C82 72 66 66 58 78C50 90 32 88 26 76C20 64 6 62 10 48C13 36 20 28 30 20Z'/><circle cx='97' cy='70' r='3'/><circle cx='3' cy='22' r='3.5'/><circle cx='46' cy='3' r='2'/></g></svg>") 30% 99% / 64px 64px no-repeat fixed,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 110 110'><g fill-opacity='0.32' fill='%237ae22a' transform='rotate(90 50 50)'><path d='M50 8C62 6 66 20 74 22C86 25 96 30 92 44C89 54 98 62 90 72C82 82 70 76 62 86C54 96 40 94 34 84C28 74 14 78 9 66C4 54 14 46 12 36C10 24 22 18 32 18C40 18 42 9 50 8Z'/><circle cx='96' cy='10' r='4'/><circle cx='6' cy='94' r='3'/><circle cx='80' cy='97' r='2.5'/></g></svg>") 64% 98% / 73px 73px no-repeat fixed,
    #ffffff;
}

@media (prefers-color-scheme: dark) {
  [data-color-scheme="system"] {
    --color-bg: #1a1a1f;
    --color-surface: #25252c;
    --color-text: #f0eee9;
    --color-text-muted: #b8b2ac;
    --color-primary: #f08a50;
    --color-primary-hover: #ff9d65;
    --color-primary-light: #4a3020;
    --color-border: #3a3a42;
    --color-success: #5dd99e;
    --color-success-light: #1f3a2a;
    --color-error: #f57570;
    --color-error-light: #3a1f1f;
    --color-people: #6ea3ff;
    --color-people-hover: #87b3ff;
    --color-interactions: #4dd99e;
    --color-interactions-hover: #5cdda6;
    --color-todos: #c89dff;
    --color-todos-hover: #d4b3ff;
    --color-habits: #ff9d4d;
    --color-habits-hover: #ffae70;
    --color-habits-light: #3a2a1f;
    --color-culture: #4dd2e8;
    --color-culture-hover: #6ddae8;
    --color-culture-light: #1a3340;
    --color-tours: #5dd87a;
    --color-tours-hover: #7adfa3;
    --color-tours-light: #1f3327;
    --color-books: #f5a55a;
    --color-books-hover: #ffb870;
    --color-forecasts: #a5b4fc;
    --color-forecasts-hover: #c4cdfd;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
    --bg-gradient: linear-gradient(135deg, #1a1a1f 0%, #25252c 50%, #1a1a1f 100%);
  }
}

html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100dvh;
  color: var(--color-text);
  background: var(--bg-gradient) fixed;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.15s;
}

a:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

/* ── Header ──────────────────────────────────────────────── */
.header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 0.75rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 10;
}

.header .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}

.header .logo a {
  position: relative;
  display: inline-block;
}

.header .logo img {
  height: 32px;
  display: block;
}

.header .signin {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.875rem;
}

.header .signin a {
  color: var(--color-text-muted);
}

.header .signin a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.btn-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.btn-help:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.footer {
  text-align: center;
  padding: 2rem 1.5rem;
}

.footer .notifications {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.85rem;
  font-family: inherit;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.footer .notifications:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.footer .notifications:disabled {
  opacity: 0.5;
  cursor: default;
}

[data-keyboard-shortcut-key] {
  white-space: nowrap;
}

[data-keyboard-shortcut-key]::after {
  content: attr(data-keyboard-shortcut-key);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.2rem;
  margin-left: 0.35rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  font-size: 0.5625rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  vertical-align: middle;
}

/* Ohne Tastatur führt der Hinweis ins Leere. */
@media (hover: none) and (pointer: coarse) {
  [data-keyboard-shortcut-key]::after {
    content: none;
  }
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.header-nav a {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.header-nav a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.nav-dropdown {
  position: relative;
  display: inline-block;
}

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}

.nav-dropdown-toggle::-webkit-details-marker {
  display: none;
}

.nav-dropdown-toggle::after {
  content: "▾";
  margin-left: 0.3rem;
  font-size: 0.7rem;
  line-height: 1;
}

.nav-dropdown-toggle:hover {
  color: var(--color-primary);
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  min-width: 180px;
  z-index: 100;
  padding: 0.5rem 0;
}

.nav-dropdown-menu a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--color-text);
  font-size: 0.875rem;
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.nav-dropdown-menu a:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.nav-dropdown[open] .nav-dropdown-menu {
  display: block;
}

.nav-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.35rem;
  margin-left: 0.3rem;
  background: var(--color-primary);
  color: var(--color-surface);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.nav-bubble-dot {
  min-width: 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
}

/* ── Main Content ────────────────────────────────────────── */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* ── Typography ──────────────────────────────────────────── */
h1 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.subtitle {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}

.last-seen {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.last-seen a,
.last-seen .overdue-badge {
  white-space: nowrap;
}

.interaction-kind {
  display: inline-block;
  background: var(--color-primary-light, #f5ebe4);
  color: var(--color-primary);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.15em 0.45em;
  border-radius: var(--radius-sm);
  margin-right: 0.35em;
  vertical-align: baseline;
}

/* ── Navigation Links ────────────────────────────────────── */
.nav-links {
  display: flex;
  gap: 0.75rem;
}

.nav-group {
  display: flex;
  gap: 0.25rem;
}


.nav-group-right {
  margin-left: auto;
}

.nav-links a,
.nav-links button,
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.15rem;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.nav-links a:hover,
.nav-links button:hover,
.btn:hover {
  background: var(--color-primary-hover);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

.btn-sm {
  padding: 0.25rem 0.65rem;
  font-size: 0.75rem;
}

.nav-links a.people,
.btn.people {
  background: var(--color-people);
}
.nav-links a.people:hover,
.btn.people:hover {
  background: var(--color-people-hover);
}

.nav-links a.interactions,
.btn.interactions {
  background: var(--color-interactions);
}
.nav-links a.interactions:hover,
.btn.interactions:hover {
  background: var(--color-interactions-hover);
}

.nav-links a.todos,
.nav-links button.todos,
.btn.todos {
  background: var(--color-todos);
}
.nav-links a.todos:hover,
.nav-links button.todos:hover,
.btn.todos:hover {
  background: var(--color-todos-hover);
}

.nav-links a.habits,
.btn.habits {
  background: var(--color-habits);
}
.nav-links a.habits:hover,
.btn.habits:hover {
  background: var(--color-habits-hover);
}

.nav-links a.culture,
.btn.culture {
  background: var(--color-culture);
}
.nav-links a.culture:hover,
.btn.culture:hover {
  background: var(--color-culture-hover);
}

.nav-links a.tours,
.btn.tours {
  background: var(--color-tours);
}
.nav-links a.tours:hover,
.btn.tours:hover {
  background: var(--color-tours-hover);
}

.nav-links button.notifications,
.btn.notifications {
  background: #6b7280;
}
.nav-links button.notifications:hover,
.btn.notifications:hover {
  background: #4b5563;
}

.nav-links button:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn-secondary:hover {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

.btn-secondary.active,
.btn-secondary.active:hover {
  background: var(--color-culture-light);
  border-color: var(--color-culture);
  color: var(--color-culture);
}

.btn-danger {
  background: var(--color-error);
}

.btn-danger:hover {
  background: #a83632;
  color: #fff;
  text-decoration: none;
}

/* ── Home Grid ───────────────────────────────────────────── */
.container:has(.home-grid) {
  max-width: 1400px;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.container:has(.tour-controls) {
  max-width: 1100px;
}

.container:has(.calendar) {
  max-width: min(1600px, 96vw);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

form.tour-controls {
  max-width: none;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.home-grid .section-card + .section-card {
  margin-top: 0;
}

/* ── Section Cards (Homepage) ────────────────────────────── */
.section-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.9rem 1.25rem;
  box-shadow: var(--shadow);
  min-width: 0;
}

.section-card + .section-card {
  margin-top: 1.5rem;
}

.section-card.people {
  border-top-color: var(--color-people);
}
.section-card.people a {
  color: var(--color-people);
}
.section-card.people a:hover {
  color: var(--color-people-hover);
}

.section-card.interactions {
  border-top-color: var(--color-interactions);
}
.section-card.interactions a {
  color: var(--color-interactions);
}
.section-card.interactions a:hover {
  color: var(--color-interactions-hover);
}

.section-card.todos {
  border-top-color: var(--color-todos);
}
.section-card.todos a {
  color: var(--color-todos);
}
.section-card.todos a:hover {
  color: var(--color-todos-hover);
}

.section-card.habits {
  border-top-color: var(--color-habits);
}
.section-card.habits a {
  color: var(--color-habits);
}
.section-card.habits a:hover {
  color: var(--color-habits-hover);
}

/* Wochen-Kachel über die volle Breite des Dashboards. */
.section-card.calendar-week {
  grid-column: 1 / -1;
  border-top-color: var(--color-primary);
}
.section-card.calendar-week .calendar-columns {
  margin-top: 0.5rem;
}

.section-card.culture {
  border-top-color: var(--color-culture);
}
.section-card.culture a {
  color: var(--color-culture);
}
.section-card.culture a:hover {
  color: var(--color-culture-hover);
}

.section-card.tours {
  border-top-color: var(--color-tours);
}
.section-card.tours a {
  color: var(--color-tours);
}
.section-card.tours a:hover {
  color: var(--color-tours-hover);
}

.section-card.books {
  border-top-color: var(--color-books);
}
.section-card.books a {
  color: var(--color-books);
}
.section-card.books a:hover {
  color: var(--color-books-hover);
}

.section-card.forecasts {
  border-top-color: var(--color-forecasts);
}
.section-card.forecasts a {
  color: var(--color-forecasts);
}
.section-card.forecasts a:hover {
  color: var(--color-forecasts-hover);
}

.home-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
}

.home-row:last-child {
  border-bottom: none;
}

.muted {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.home-grid .section-card {
  font-size: 0.875rem;
}

.section-card h2 {
  margin-bottom: 0.1rem;
  font-size: 1.1rem;
}

.home-grid .section-card h2 {
  font-size: 0.95rem;
}

.section-card .subtitle {
  margin-bottom: 0.4rem;
  font-size: 0.8rem;
}

.home-grid .section-card .subtitle {
  font-size: 0.7rem;
  margin-bottom: 0.3rem;
}

.home-grid .last-seen,
.home-grid .todo-meta {
  font-size: 0.75rem;
}

.birthdays-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg-soft, rgba(0, 0, 0, 0.02));
  font-size: 0.8rem;
}

.birthdays-banner-icon {
  font-size: 1rem;
}

/* Fällige Gratulationen sind kein Ausblick, sondern eine Aufgabe: Der Streifen
   hebt sich deshalb vom Vorschau-Streifen ab und bleibt stehen, bis abgehakt. */
.congratulations-banner {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.congratulations-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Der Button steckt in einer <form> von button_to. Sie darf weder die globale
   form-Breite mitbringen noch den Button auf der Textbasislinie absetzen –
   dort saß er sichtbar zu hoch. */
.congratulations-item form {
  display: flex;
  align-items: center;
  margin: 0;
  max-width: none;
}

/* Dezent: Der Streifen erinnert, er drängt nicht. Gefüllt (btn-done) zog der
   Button mehr Aufmerksamkeit auf sich als der Geburtstag daneben.
   Die Klasse .btn-done steht weiter unten im Stylesheet – ohne den zusätzlichen
   Elternselektor gewänne sie bei gleicher Spezifität. */
.congratulations-banner .btn-congratulate,
.congratulations-banner .btn-congratulate[type="submit"] {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.2;
  padding: 0.1rem 0.45rem;
  transform: none;
}

.congratulations-banner .btn-congratulate:hover,
.congratulations-banner .btn-congratulate[type="submit"]:hover {
  background: var(--color-surface);
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: none;
}

/* Eintrag plus Wegklick-Kreuz bleiben eine Einheit, damit das × beim Umbruch
   nicht allein in die nächste Zeile rutscht. */
.photo-exhibition-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.photo-exhibition-item form {
  display: flex;
  align-items: center;
  margin: 0;
  max-width: none;
}

/* Zurückhaltend bis zum Zeigen: Das × soll den Hinweis nicht überstrahlen, den
   es wegräumt. Der Elternselektor hebt die Spezifität über die globale
   button-Regel. */
.photo-exhibitions-banner .btn-banner-dismiss,
.photo-exhibitions-banner .btn-banner-dismiss[type="submit"] {
  background: transparent;
  border: 0;
  color: var(--color-muted, #888);
  font-size: 0.85rem;
  line-height: 1;
  padding: 0.1rem 0.25rem;
  opacity: 0.5;
  transform: none;
}

.photo-exhibitions-banner .btn-banner-dismiss:hover,
.photo-exhibitions-banner .btn-banner-dismiss[type="submit"]:hover,
.photo-exhibitions-banner .btn-banner-dismiss:focus-visible {
  background: transparent;
  color: var(--color-primary);
  opacity: 1;
  transform: none;
}

.birthdays-banner-item {
  text-decoration: none;
  color: inherit;
}

.birthdays-banner-item:hover {
  text-decoration: underline;
}

.birthdays-banner-item.is-today {
  font-weight: 600;
}

.birthdays-banner-sep {
  color: var(--color-muted, #888);
}

.birthdays-banner-more {
  margin-left: auto;
  color: var(--color-muted, #888);
  font-style: italic;
}

.section-card .people {
  gap: 0;
}

.section-card .scrollable-list {
  max-height: calc(8 * 2.2rem);
  overflow-y: auto;
}

.section-card.todos .scrollable-list,
.section-card.habits .scrollable-list {
  max-height: calc(9 * 2.2rem);
}

.section-card.people .scrollable-list {
  max-height: calc(6 * 2.2rem);
}

.section-card.overdue .scrollable-list {
  overflow: visible;
}

.section-card .people .person {
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;
  padding: 0.3rem 0.5rem;
}

.section-card .people .person:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.section-card .people .person:first-child {
  padding-top: 0;
}

.section-card .people .person:hover {
  background: var(--color-primary-light);
  box-shadow: none;
  border-radius: var(--radius-sm);
  margin: 0 -0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow);
}

/* ── Lists (People, Interactions, Todos) ─────────────────── */
.interactions,
.people,
.todos {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.interactions .interaction,
.people .person,
.todos .todo {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: box-shadow 0.15s, background 0.15s;
}

.interactions .interaction:hover,
.people .person:hover,
.todos .todo:hover {
  box-shadow: var(--shadow-md);
}

.interactions .interaction div,
.people .person div,
.todos .todo div {
  padding-right: 0;
}

.col {
  flex: 1;
  min-width: 0;
}

/* ── Todo Styles ─────────────────────────────────────────── */
.todo-due-date {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.todo-priority {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
}

.todo-priority-hoch {
  background: var(--color-error-light);
  color: var(--color-error);
}

.todo-priority-mittel {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.todo-priority-niedrig {
  background: var(--color-border);
  color: var(--color-text-muted);
}

.todo-priority-buttons {
  display: inline-flex;
  gap: 0.2rem;
}

/* ── Todo-Zeile: Aktionen hinter „⋯“ (siehe _todo_row) ──────
   Breit stehen Priorität und Verschieben offen in der Zeile, Toggle und Badge
   sind weg. Unter der Schwelle wird daraus ein Menü unter dem „⋯“. Die Schwelle
   misst die Liste: Desktop mit Seitenspalte bleibt darüber, iPad quer mit
   Seitenspalte und iPad hochkant liegen darunter. */
#todos {
  container: todo-list / inline-size;
}

.todo-row-actions,
.todo-row-shift {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.todo-row-shift {
  gap: 0.25rem;
}

/* .todo davor, weil .col-auto und .btn-postpone weiter unten stehen und bei
   gleicher Spezifität gewinnen würden. */
.todo .todo-row-menu-toggle,
.todo .todo-priority-badge {
  display: none;
}

@container todo-list (max-width: 800px) {
  .todos .todo {
    gap: 0.6rem;
    padding: 0.55rem 0.85rem;
  }

  .todo-row-menu {
    position: relative;
  }

  .todo .todo-row-menu-toggle {
    display: inline-flex;
    padding: 0.15rem 0.55rem;
    font-size: 0.875rem;
    line-height: 1;
  }

  .todo-row-menu.is-open .todo-row-menu-toggle {
    background: var(--color-text-muted);
    color: #fff;
  }

  .todo .todo-priority-badge {
    display: inline-block;
  }

  .todo-row-actions {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 20;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    width: max-content;
    margin-top: 0.25rem;
    padding: 0.6rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
  }

  .todo-row-menu.is-open .todo-row-actions {
    display: flex;
  }

  /* Auf dem Finger brauchen die Buttons im Menü mehr Fläche als in der Zeile. */
  .todo-row-actions .btn-priority,
  .todo-row-actions .btn-postpone {
    min-width: 2.25rem;
    min-height: 2rem;
    justify-content: center;
    font-size: 0.8125rem;
  }

  .todo-row-actions .todo-priority-buttons,
  .todo-row-shift {
    display: flex;
    gap: 0.4rem;
  }

  /* .container form und .btn-reschedule-wrap geben Formularen unten Luft; neben
     Badge und „⋯“ säße „Erledigt“ dadurch zu hoch. */
  #todos .todo-done-form,
  #todos .todo-row-actions form.button_to,
  #todos .todo-row-actions .btn-reschedule-wrap,
  #todos .todo-row-move .btn-reschedule-wrap {
    margin: 0;
    padding-bottom: 0;
  }
}

.btn-priority,
.btn-priority[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: 0.15rem 0.4rem;
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}

.btn-priority:hover,
.btn-priority[type="submit"]:hover {
  transform: translateY(-1px);
  border-color: var(--color-text-muted);
}

.btn-priority-hoch.selected,
.btn-priority-hoch.selected[type="submit"] {
  background: var(--color-error-light);
  color: var(--color-error);
  border-color: var(--color-error);
}

.btn-priority-mittel.selected,
.btn-priority-mittel.selected[type="submit"] {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-priority-niedrig.selected,
.btn-priority-niedrig.selected[type="submit"] {
  background: var(--color-border);
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

.todo-due-date.due-today {
  color: var(--color-primary);
  font-weight: 500;
}

.todo-day-heading {
  margin: 1rem 0 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.todo-day-heading:first-child {
  margin-top: 0;
}

.todo-day-heading.due-today {
  color: var(--color-primary);
}

.todo-section-heading {
  margin: 0.75rem 0 0.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.todo-section-heading:first-child {
  margin-top: 0;
}

.todos .todos-future {
  display: flex;
  flex-direction: column;
  gap: inherit;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}

.section-card .todos .todo:has(+ .todos-future) {
  border-bottom: none;
}

.todo-day-heading.overdue {
  color: var(--color-error);
}

.overdue-badge {
  display: inline-block;
  background: var(--color-error-light);
  color: var(--color-error);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
}

.todo-due-date.overdue {
  color: var(--color-error);
  font-weight: 500;
}

.todo-people {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.todo-meta {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  text-align: right;
  white-space: nowrap;
}

.todo-people-names {
  margin-left: 0.5rem;
}

.people-avatars {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  flex-shrink: 0;
}

.todos .todo.completed {
  opacity: 0.5;
}

.todos .todo.future,
.todo-day-heading.future {
  opacity: 0.6;
}

/* ── Kalender-Termine in der Todo-Liste ──────────────────── */
.todos .todo.calendar-event {
  border-left: 3px solid var(--color-culture);
  background: var(--color-culture-light);
}

.calendar-event-marker {
  margin-right: 0.35rem;
}

/* Termin steht unmittelbar bevor (Klasse kommt vom imminent-event-Controller,
   der clientseitig tickt). Der Akzent wechselt vom ruhigen Kalender-Blau auf
   die Warnfarbe und die Zeile pulsiert dezent, damit sie im Blick aufploppt,
   ohne dass die Seite neu geladen wird. */
.todos .todo.calendar-event.is-imminent {
  border-left-color: var(--color-error);
  background: var(--color-error-light);
  animation: imminent-pulse 2s ease-in-out infinite;
}

/* Bevorstehende Termine sind nie ausgegraut – auch wenn der Tag als
   "zukuenftig" gefadet wird, ist genau dieser Termin gerade dringend. */
.todos .todo.calendar-event.is-imminent.future {
  opacity: 1;
}

.todos .todo.calendar-event.is-imminent .todo-due-date {
  color: var(--color-error);
  font-weight: 600;
}

@keyframes imminent-pulse {
  50% { border-left-color: var(--color-culture); }
}

@media (prefers-reduced-motion: reduce) {
  .todos .todo.calendar-event.is-imminent {
    animation: none;
  }
}

/* ── Unter-Todos ─────────────────────────────────────────── */
.subtodos {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.25rem 0 0 1.75rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--color-border);
}

.todos .subtodos .todo.subtodo {
  padding: 0.5rem 0.75rem;
  background: var(--color-bg);
}

.subtodo-marker {
  color: var(--color-text-muted);
  margin-right: 0.25rem;
}

/* Das Haupt-Todo hinter einer eigenstaendigen Unter-Todo-Zeile der Tagesliste
   (siehe _todo_row). Bewusst zurueckgenommen: Der eigene Titel fuehrt die
   Zeile, die Herkunft ist nur der Kontext dazu. */
.todo-parent-hint {
  margin-left: 0.4rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.todo-parent-hint::before {
  content: "aus ";
}

/* Der abweichende Termin eines eingerueckten Unter-Todos (siehe
   TodosHelper#subtodo_due_hint). Wie der Parent-Hinweis zurueckgenommen: Er
   korrigiert die Tages-Ueberschrift, fuehrt die Zeile aber nicht. */
.todo-date-hint {
  margin-left: 0.4rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.todo-date-hint::before {
  content: "→ ";
}

.todo-subtodo-progress {
  margin-left: 0.4rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* Inline-editierbarer Titel: Anzeige und Eingabefeld liegen uebereinander im
   selben Platz, umgeschaltet wird per [hidden]. Die display-Regeln brauchen
   deshalb :not([hidden]) – eine display-Angabe schlaegt sonst die
   [hidden]-Regel des Browsers und das Feld staende immer offen. */

/* display: contents nimmt den Wrapper aus dem Layout: Der Titel muss im
   Textfluss der Zeile bleiben, damit das Kategorie-Badge neben seiner letzten
   Zeile sitzt. Ein eigener Kasten (inline-flex) ist atomar – daneben passt
   nichts mehr, und das Badge rutscht eine Zeile tiefer. */
.inline-title {
  display: contents;
}

.inline-title-display:not([hidden]) {
  display: inline;
}

.inline-title-form:not([hidden]) {
  display: inline-flex;
  width: 100%;
}

/* Erbt die Schrift vom umgebenden Titel, damit die Zeile beim Umschalten
   nicht springt. */
.inline-title-form input[type="text"] {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: inherit;
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}

/* Der Titel editiert beim Klick, statt zu navigieren – er darf deshalb nicht
   wie ein Link aussehen. Der Textcursor ist der Hinweis darauf; navigiert wird
   ueber die Zeile ringsum (row_link_controller), die dafuer den Zeigefinger
   bekommt. */
.todos .todo {
  cursor: pointer;
}

.inline-title-display {
  cursor: text;
}

.inline-title-display a {
  color: inherit;
}

.inline-title-display a:hover {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.2em;
}

/* Der Stift erscheint nur bei Tastatur-Fokus. Mit der Maus klickt man den Titel
   direkt an; per Tastatur gehoert Enter auf dem Titel dem Link (Detailseite),
   deshalb braucht das Editieren dort einen eigenen Knopf.
   Breite 0 statt display: none – so belegt er nichts (das Kategorie-Badge
   bliebe sonst eine Zeile tiefer haengen), bleibt aber in der Tab-Reihenfolge. */
.inline-title-edit {
  width: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 0.8em;
  line-height: 1;
  vertical-align: middle;
  opacity: 0;
}

.inline-title-edit:focus-visible {
  width: auto;
  margin-left: 0.35rem;
  opacity: 1;
}

/* Auf der Detailseite ist der Titel eine H1 – das Feld muss deren Schrift
   uebernehmen, sonst schrumpft es beim Aufklappen auf Fliesstextgroesse. */
.todo-show-header .inline-title {
  display: flex;
}

.todo-show-header .inline-title-form {
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
}

.inline-title-submit {
  flex-shrink: 0;
}

.todo-show-header .inline-title-form input[type="text"] {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
}

/* Erledigte Unter-Todos stecken in der Liste hinter einer Faltung: eingeklappt
   eine dezente Zeile, aufgeklappt die gewohnten Zeilen. Nativ per <details>,
   damit sie auch ohne JavaScript aufgeht (ADR 0009). */
/* Kein align-self: flex-start – das <details> ist Flex-Item in .subtodos und
   wuerde samt der aufgeklappten Zeilen auf Inhaltsbreite schrumpfen. Die
   Klickflaeche haelt das inline-flex am summary schmal. */
.subtodos-done > summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  list-style: none;
  user-select: none;
}

.subtodos-done > summary::-webkit-details-marker {
  display: none;
}

.subtodos-done > summary:hover {
  color: var(--color-text);
}

/* Marker hinter dem Text – anders als bei den übrigen <details>-Blöcken, weil
   die Zeile mit dem Haken beginnt: "✓ 2 erledigt ▸". */
.subtodos-done > summary::after {
  content: "▸";
  display: inline-block;
  transition: transform 0.15s ease;
}

.subtodos-done[open] > summary::after {
  transform: rotate(90deg);
}

.subtodos-done-check {
  color: var(--color-success);
}

/* Spiegelt den Abstand von .subtodos – die aufgeklappten Zeilen sollen sitzen
   wie die offenen darüber, nicht wie ein Fremdkörper. */
.subtodos-done-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.btn-add-subtodo {
  align-self: flex-start;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.todo-show-attachments {
  margin: 1rem 0;
}

.todo-show-attachments .btn-link {
  margin-top: 0;
  padding: 0;
}

.todo-show-subtodos {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 1rem 0;
}

.todo-show-subtodo-list {
  margin: 0;
  padding-left: 1.25rem;
}

.todo-show-subtodo-list li.completed {
  opacity: 0.5;
  text-decoration: line-through;
}

.interactions .person.completed {
  opacity: 0.5;
  text-decoration: line-through;
}

.section-card .todos {
  gap: 0;
}

.section-card .todos .todo {
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;
  padding: 0.3rem 0.5rem;
}

.section-card .todos .todo:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.section-card .todos .todo:first-child {
  padding-top: 0;
}

.section-card .todos .todo:hover {
  background: var(--color-primary-light);
  box-shadow: none;
  border-radius: var(--radius-sm);
  margin: 0 -0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.section-card .habits-list {
  gap: 0.25rem;
}

.section-card .habits-list .habit-item {
  padding: 0.3rem 0.5rem;
  gap: 0.6rem;
  border-radius: var(--radius-sm);
}

/* ── Inline Actions (small edit/delete links) ────────────── */
.inline-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
}

.inline-actions a {
  color: var(--color-text-muted);
}

/* button_to umschließt den Delete-Button mit einem <form>. Ohne Eingriff ist
   dieses <form> der Flex-Sohn und – weil es einen inline-flex-Button per
   Baseline ausrichtet – ~8px höher als der Edit-Link; der Button sitzt oben
   im Form-Kasten, wodurch Edit ~4px tiefer rutscht. display: contents blendet
   die Form-Box aus, sodass der Button selbst zum Flex-Sohn wird und exakt wie
   der Edit-Link zentriert sitzt. (Gleiche Technik wie .actions .button_to.) */
.inline-actions .button_to {
  display: contents;
}

.inline-actions a:hover {
  color: var(--color-primary);
}

.inline-actions .btn-destroy,
.inline-actions .btn-destroy[type="submit"] {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: normal;
  padding: 0;
  cursor: pointer;
  transform: none;
  /* Gleiche line-height wie der Edit-Link (link_to), damit der button_to-
     Button dieselbe Box-Höhe hat und beide exakt auf einer Höhe sitzen.
     Ohne dies ist der Button (line-height: normal) ~2px niedriger. */
  line-height: inherit;
}

.inline-actions .btn-destroy:hover,
.inline-actions .btn-destroy[type="submit"]:hover {
  background: none;
  color: var(--color-text);
  transform: none;
  text-decoration: underline;
}

.inline-actions .inline-form {
  max-width: none;
}

/* ── Habit Styles ────────────────────────────────────────── */
.habits-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.habits-list .habit-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: color-mix(in srgb, var(--color-success) calc(var(--habit-progress, 0) * 28%), var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: box-shadow 0.15s, background 0.15s;
}

.habits-list .habit-item:hover {
  box-shadow: var(--shadow-md);
}

.habit-item.target-reached .col a {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

.habit-check {
  color: var(--color-success);
  font-weight: 700;
  margin-right: 0.25rem;
}

.habit-missed {
  color: var(--color-text-muted);
  font-weight: 700;
  margin-right: 0.25rem;
}

/* Der Done-Button sieht im "heute erledigt"-Zustand (is-done) genauso aus wie
   sonst – das Erledigt-Signal ist das Haekchen vor dem Habit-Namen. Die Klasse
   bleibt als Markup-Hook erhalten, hat aber keine eigene Optik mehr. */

.habit-meta {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  text-align: right;
  white-space: nowrap;
}

.habit-progress {
  font-weight: 600;
}

.habit-progress.complete {
  color: var(--color-success);
}

/* Ein offenes Ziel ist der Normalfall und bleibt deshalb neutral. Rot kommt
   erst, wenn die Woche kippt (.week-tight). */
.habit-progress.incomplete {
  color: var(--color-text-muted);
}

/* Bei mehreren Wochenzielen die Badges inline voneinander abheben. */
.habit-progress + .habit-progress {
  margin-left: 0.4rem;
}

/* Mehrere Wochenziele (Tage/km/Minuten) nebeneinander, umbrechend. */
.habit-goals {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 0.1rem 0.5rem;
  text-align: right;
}

/* Im Flex-Container regelt gap den Abstand – Sibling-Margin zuruecksetzen. */
.habit-goals .habit-progress + .habit-progress {
  margin-left: 0;
}

.habit-item.trend-warn {
  border-left: 3px solid var(--color-error);
  padding-left: calc(0.75rem - 3px);
}

.habit-trend-sentence {
  margin-top: 0.5rem;
  color: var(--color-text-muted, #555);
  font-size: 0.95em;
}

.habit-trend {
  font-size: 0.75rem;
  font-weight: 700;
  margin-left: 0.25rem;
}

.habit-trend.up {
  color: var(--color-success);
}

.habit-trend.flat {
  color: var(--color-text-muted, #666);
}

.habit-trend.down {
  color: var(--color-warning);
}

.habit-trend.warn {
  color: var(--color-error);
}

.habit-actions {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

/* Habit Tiles Grid */
/* Kopfzeile: Aktions-Buttons links, Wochenziel-Ring rechts. */
.habits-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.habits-toolbar-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Zusammenfassung "X/Y Wochenziele erreicht" als Fortschrittsring. */
.habits-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.habits-ring {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
}

.habits-ring-track {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 3.5;
}

.habits-ring-fill {
  fill: none;
  stroke: var(--color-success);
  stroke-width: 3.5;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dasharray 0.4s ease;
}

.habits-ring-text {
  fill: var(--color-text);
  font-size: 9px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
}

.habits-summary-label {
  font-size: 0.75rem;
  line-height: 1.15;
  color: var(--color-text-muted);
}

/* ── Todo-Seite: Todos links, Hinweise + Habits rechts ───────
   Die rechte Spalte (.todos-side) traegt oben die Hinweis-Streifen und darunter
   die Habits. Auf schmalen Screens loest sie sich auf (siehe unten).
   Ein-/Ausblenden der Habits per habits-panel-Controller (nicht gespeichert). */
.todos-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

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

.todos-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

/* Ab Desktop zweispaltig, sobald rechts etwas Sichtbares steht: Hinweise oder
   nicht-ausgeblendete Habits.
   Hinweis: :has() darf nicht in :has() verschachtelt werden – der Selektor waere
   ungueltig und wuerde komplett ignoriert. Deshalb Nachfahren-Kombinator bzw.
   :not(:has(…)) auf gleicher Ebene statt :has(… :has(…)). */
@media (min-width: 960px) {
  /* Kopfzeile und Liste teilen sich die linke Spalte; den Abstand dazwischen
     traegt der margin des Headers, nicht der Grid-Gap. */
  .todos-layout { row-gap: 0; }

  .todos-layout:has(.todos-banners),
  .todos-layout:has(.todos-today),
  .todos-layout:has(.todos-habits):not(.habits-hidden) {
    grid-template-columns: minmax(0, 1fr) 360px;
  }

  .todos-layout > .todos-header,
  .todos-main { grid-column: 1; }

  .todos-side { grid-column: 2; grid-row: 1 / span 2; }

  /* Bleibt beim Scrollen der Liste stehen und scrollt bei Ueberlaenge selbst –
     .todos-layout hat align-items:start, sonst haette das Grid-Item volle
     Zeilenhoehe und koennte gar nicht kleben.
     Der Scroll-Container klippt auch quer (overflow-y:auto macht overflow-x
     automatisch zum Scroll-Container), sonst schnitte er den Kachel-Schatten
     ringsum ab. Das Padding gibt ihm Luft, der negative Margin holt die Spalte
     optisch wieder an ihren Platz. Scrollbar schmal und zurueckhaltend. */
  .todos-side {
    position: sticky;
    top: calc(var(--header-height) + 1rem);
    max-height: calc(100vh - var(--header-height) - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.35rem 0.5rem;
    margin: -0.35rem -0.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
  }

  .container:has(.todos-layout .todos-banners),
  .container:has(.todos-layout .todos-today),
  .container:has(.todos-layout:not(.habits-hidden) .todos-habits) {
    max-width: 1240px;
  }
}

/* Ausgeblendet: nur der Habits-Block verschwindet, Einblenden-Button erscheint.
   Die Spalte selbst bleibt stehen, solange Hinweise da sind. */
.todos-layout.habits-hidden .todos-habits { display: none; }
.todos-habits-show { display: none; }
.todos-layout.habits-hidden .todos-habits-show { display: inline-flex; }

/* Ohne Hinweise ist die ausgeblendete Spalte leer – zurueck zur normalen
   (schmalen) Todo-Breite. Die .habits-grid des versteckten Blocks wuerde den
   Container sonst breit halten. Mit Hinweisen bleibt es bei 1240px (oben). */
.container:has(.todos-layout.habits-hidden):not(:has(.todos-banners)):not(:has(.todos-today)) {
  max-width: var(--max-width);
}

/* Ueberschrift der Hinweise – wie bei den Habits ausserhalb der weissen Box. */
.todos-notes-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.todos-notes-header h2 {
  margin: 0;
  font-size: 1.1rem;
}

/* Ein weisser Kasten fuer alle Streifen zusammen – dasselbe Vokabular wie eine
   .habit-tile daneben. Die Streifen geben darin ihren eigenen Rahmen auf,
   sonst steckte Box in Box; getrennt wird per Haarlinie. */
.todos-side .todos-banners {
  gap: 0;
  padding: 0 0.9rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  /* Klippt den randvollen Gratulations-Balken an den runden Ecken – egal ob er
     oben, unten oder als einziger Streifen steht. */
  overflow: hidden;
}

.todos-side .todos-banners .birthdays-banner {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0.7rem 0;
}

.todos-side .todos-banners .birthdays-banner + .birthdays-banner {
  border-top: 1px solid var(--color-border);
}

/* Faellige Gratulationen bleiben die Ausnahme: sie sind eine Aufgabe, kein
   Ausblick, und behalten darum ihre Farbe – als randvoller Akzent-Balken. */
.todos-side .todos-banners .congratulations-banner {
  margin: 0 -0.9rem;
  padding: 0.7rem 0.9rem;
  background: var(--color-primary-light);
  border-left: 3px solid var(--color-primary);
}

/* Die Streifen sind fuer die volle Breite gebaut (flex-Zeile mit „·"-Trennern).
   In der schmalen Spalte stattdessen: fuehrendes Icon links im Bundsteg,
   Eintraege untereinander rechts. Streifen ohne fuehrendes Icon (upcoming,
   congratulations – die tragen es pro Eintrag) lassen Spalte 1 auf 0 fallen. */
.todos-side .birthdays-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.3rem 0.5rem;
}

.todos-side .birthdays-banner > .birthdays-banner-icon { grid-row: 1 / -1; }
.todos-side .birthdays-banner > *:not(.birthdays-banner-icon) { grid-column: 2; }
.todos-side .birthdays-banner-sep { display: none; }

/* Termine, zwischen Hinweisen und Habits. Gleiches Vokabular wie der
   Hinweis-Kasten darueber: Ueberschrift ausserhalb, weisse Box darunter.
   Heute steht vorn, die naechsten Tage folgen kleiner und abgeschwaecht. */
.todos-today-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.todos-today-header h2 {
  margin: 0;
  font-size: 1.1rem;
}

/* Wie bei den Habits: Die Ueberschrift verlinkt, sieht aber aus wie die
   Ueberschriften daneben – sonst waere sie die einzige farbige der Spalte. */
.todos-today-header h2 a {
  color: var(--color-text);
  text-decoration: none;
}

.todos-today-header h2 a:hover {
  text-decoration: underline;
}

.todos-today-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Tagesueberschrift ueber jeder Gruppe ("Heute", "Morgen", "In 3 Tagen"). */
.todos-today-day {
  padding: 0.5rem 0.9rem 0.15rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.todos-today-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.todos-today-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem 0.55rem;
}

/* Nur innerhalb einer Gruppe trennen – zwischen den Gruppen tut das die
   Tagesueberschrift. */
.todos-today-item + .todos-today-item {
  border-top: 1px solid var(--color-border);
  padding-top: 0.55rem;
}

.todos-today-link {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.todos-today-link:hover .todos-today-name { text-decoration: underline; }

.todos-today-time {
  flex: none;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.todos-today-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.todos-today-marker { margin-right: 0.25rem; }

/* Beteiligte Personen bzw. Ort – nur zur Einordnung, deshalb zurueckgenommen. */
.todos-today-meta {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* Termin steht unmittelbar bevor – dieselbe Warnfarbe wie in der Liste, aber
   ohne Puls: Sonst pulsierte derselbe Termin an zwei Stellen gleichzeitig. Der
   Akzent links per inset-Schatten statt Rahmen, damit die Zeile nicht springt,
   wenn die Klasse kommt und geht. */
.todos-today-item.is-imminent {
  background: var(--color-error-light);
  box-shadow: inset 3px 0 0 var(--color-error);
}

.todos-today-item.is-imminent .todos-today-time {
  color: var(--color-error);
  font-weight: 600;
}

/* Die naechsten Tage: kleiner und zurueckgenommen, damit der Blick zuerst auf
   heute faellt. Die Deckkraft nimmt alles mit, auch die Kategorie-Badges. */
.todos-today-later {
  border-top: 1px solid var(--color-border);
  font-size: 0.88em;
  opacity: 0.68;
}

.todos-today-later .todos-today-time { font-size: 0.8rem; }

.todos-today-more {
  display: block;
  padding: 0.15rem 0.9rem 0.6rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* Einspaltig loest sich die Spalte auf, damit die Streifen oben bleiben und die
   Habits – wie bisher – unter der Liste landen. Der Heute-Block folgt den
   Streifen und steht damit ebenfalls ueber der Liste. Die Kopfzeile mit den
   Buttons steht vor allem, wie auf dem Board. */
@media (max-width: 959px) {
  .todos-side { display: contents; }
  .todos-layout > .todos-header { order: -2; margin-bottom: 0; }
  .todos-notes { order: -1; }
  .todos-today { order: -1; }
}

.todos-habits-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.todos-habits-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.todos-habits-title h2 {
  margin: 0;
  font-size: 1.1rem;
}

.todos-habits-title h2 a {
  color: var(--color-text);
  text-decoration: none;
}

.todos-habits-title h2 a:hover {
  text-decoration: underline;
}

/* Ring in der Spaltenueberschrift kompakt halten. */
.todos-habits-title .habits-summary-label {
  display: none;
}

.todos-habits-title .habits-ring {
  width: 34px;
  height: 34px;
}

/* In der schmalen Spalte immer eine Kachel pro Reihe (schlaegt die
   mehrspaltige .habits-grid-Regel via hoeherer Spezifitaet). */
.todos-habits .habits-grid {
  grid-template-columns: minmax(0, 1fr);
}

.habits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

/* Auf grossen Bildschirmen drei Habits nebeneinander. Der globale Container ist
   auf --max-width (860px) gedeckelt, daher passen sonst nur zwei. iPad (<=1024)
   und Handy behalten ihre 2- bzw. 1-Spalten-Ansicht. */
@media (min-width: 1100px) {
  .container:has(.habits-grid) {
    max-width: 1100px;
  }

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

/* Die Kachel uebernimmt die Zeilen des Rasters (subgrid): Balken, Kette,
   Sparkline und Knopfzeile liegen dadurch bei allen Kacheln einer Reihe auf
   derselben Hoehe, auch wenn die eine drei Wochenziele in der Kopfzeile hat und
   die andere keine Mengen-Zeile. Deshalb steht jede Zeile im Markup immer da,
   auch leer – faellt eine weg, verrutschen alle folgenden in die falsche Spur. */
.habit-tile {
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 7;
  row-gap: 0.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
}

/* Der Rand kodiert nur das erreichte Wochenziel (gruener Ring, passend zur
   gruenen Zaehlerfarbe 4/4). Heute erledigt zeigt das Haekchen im Titel, der
   Trend der Pfeil im Titel.
   Erledigtes treten ausgegraut in den Hintergrund und wird im Controller ans
   Ende sortiert – so bleibt der Blick auf den noch offenen Habits. Das gilt
   fuer erreichte Wochenziele wie auch fuer heute schon erledigte Habits;
   letztere erscheinen am naechsten Tag von selbst wieder normal, weil
   completed_today? auf das aktuelle Datum eingegrenzt ist. Beim Hovern wird die
   Kachel wieder voll sichtbar, damit man weiterhin bequem nachloggen kann. */
.habit-tile.target-reached {
  box-shadow: 0 0 0 2px var(--color-success) inset;
}

.habit-tile.target-reached,
.habit-tile.completed-today,
.habit-tile.missed-today {
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

.habit-tile.target-reached:hover,
.habit-tile.target-reached:focus-within,
.habit-tile.completed-today:hover,
.habit-tile.completed-today:focus-within,
.habit-tile.missed-today:hover,
.habit-tile.missed-today:focus-within {
  opacity: 1;
}

/* Baseline statt center: Die Kopfzeile ist so hoch wie die hoechste der Reihe
   (drei Wochenziele brauchen zwei Zeilen). Zentriert haenge der Titel einer
   einzeiligen Kachel in der Mitte dieser Spur, statt oben zu stehen – und die
   Zahlen rechts sollen weiterhin auf derselben Grundlinie sitzen wie er. */
.habit-tile-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.habit-tile-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.habit-tile-header h3 a {
  color: var(--color-text);
  text-decoration: none;
}

.habit-tile-header h3 a:hover {
  text-decoration: underline;
}

.habit-tile-meta {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* Wochenfortschritt mit Soll-Marke: die Fuellung zeigt das am weitesten
   erreichte Ziel (--habit-progress an der Kachel), der Strich steht dort, wo
   man am Ende des heutigen Tages stuende, haette man das Ziel gleichmaessig
   ueber die Woche verteilt. Liegt die Fuellung links davon, fehlt genau diese
   Strecke. Beide Marken sind beschriftet: ohne "Ziel" am rechten Ende liest
   sich der Soll-Strich als Ziellinie, und "fast am Strich" heisst dann faelsch
   "fast geschafft". */
.habit-bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--color-border);
}

.habit-bar-fill {
  width: calc(var(--habit-progress, 0) * 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--color-success);
  transition: width 0.2s ease, background 0.2s ease;
}

.habit-bar-pace,
.habit-bar-goal {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  border-radius: 1px;
}

.habit-bar-pace {
  left: calc(var(--habit-pace, 0) * 100%);
  margin-left: -1px;
  background: var(--color-text-muted);
}

.habit-bar-goal {
  right: 0;
  background: var(--color-text);
}

.habit-bar-captions {
  position: relative;
  height: 0.9rem;
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

/* Die Beschriftung haengt an derselben Position wie der Strich. */
.habit-bar-caption-pace {
  position: absolute;
  left: calc(var(--habit-pace, 0) * 100%);
  transform: translateX(-50%);
  white-space: nowrap;
}

.habit-bar-caption-goal {
  position: absolute;
  right: 0;
}

/* Eng: ab jetzt zaehlt jeder verbleibende Tag – rot heisst hier "handeln".
   Verloren: die Woche geht rechnerisch nicht mehr auf, dagegen hilft kein
   Klick mehr, also grau statt rot. */
.habit-tile.week-tight .habit-bar-fill {
  background: var(--color-error);
}

.habit-tile.week-tight .habit-progress.incomplete {
  color: var(--color-error);
}

.habit-tile.week-lost .habit-bar-fill {
  background: var(--color-text-muted);
}

/* Heute schon geloggt: Das Rot forderte zum Handeln auf, obwohl fuer heute
   nichts mehr offen ist – die Kachel tritt ohnehin ausgegraut zurueck. Die
   enge Woche bleibt am Zaehler ablesbar. */
.habit-tile.week-tight.completed-today .habit-bar-fill {
  background: var(--color-success);
}

/* Ist das Ziel erreicht, gibt es kein Soll mehr, an dem man sich messen muesste. */
.habit-tile.week-reached .habit-bar-pace,
.habit-tile.week-reached .habit-bar-caption-pace {
  display: none;
}

/* Wochenzeile unter dem Balken: Kette links, Hinweis daneben. Beide sind
   optional, deshalb traegt die Zeile den Abstand, nicht ihr Inhalt. */
.habit-week {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
}

.habit-streak {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.habit-streak-count {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.habit-streak-label,
.habit-streak-miss {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.habit-outlook {
  font-size: 0.75rem;
}

.habit-outlook.tight {
  color: var(--color-error);
  font-weight: 600;
}

.habit-outlook.lost {
  color: var(--color-text-muted);
}

/* ── Habit-Eintrag ─────────────────────────────────────────── */
/* Die Wochenkarte oben im Eintragsformular zeigt je Ziel den Stand und
   gestrichelt, was der Eintrag dazulegt (--goal-base bis --goal-after, vom
   habit-entry-Controller gesetzt). Kippt der Eintrag das Wochenziel, bekommt
   die Karte den gruenen Ring der erreichten Kachel. */
.habit-entry-week {
  display: grid;
  gap: 0.75rem;
  max-width: 480px;
  margin-bottom: 1.75rem;
  padding: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: box-shadow 0.25s ease;
}

.habit-entry-week.is-reached,
.habit-entry-week.is-reaching {
  box-shadow: 0 0 0 2px var(--color-success) inset, var(--shadow);
}

.habit-entry-week-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
}

.habit-entry-week-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.habit-entry-goal {
  display: grid;
  gap: 0.3rem;
}

.habit-entry-goal-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.habit-entry-goal-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.habit-entry-goal.is-reached .habit-entry-goal-value,
.habit-entry-goal-plus {
  color: var(--color-success);
}

.habit-entry-ghost {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--goal-base) * 100%);
  width: calc((var(--goal-after) - var(--goal-base)) * 100%);
  border-radius: 999px;
  background: repeating-linear-gradient(-45deg, var(--color-success) 0 3px, transparent 3px 6px);
  transition: width 0.2s ease;
}

.habit-entry-outlook {
  padding-top: 0.6rem;
  border-top: 1px dashed var(--color-border);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.habit-entry-outlook:empty {
  display: none;
}

.habit-entry-week.is-reaching .habit-entry-outlook {
  color: var(--color-success);
  font-weight: 600;
}

.habit-entry-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.habit-entry-presets {
  display: contents;
}

.habit-entry-chips[hidden],
.habit-entry-presets[hidden] {
  display: none;
}

.habit-entry-chip {
  justify-content: center;
  gap: 0.25rem;
  min-width: 3.25rem;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.habit-entry-chip-unit {
  font-size: 0.75rem;
  opacity: 0.8;
}

/* Der Punkt markiert die Menge vom letzten Mal. */
.habit-entry-chip.is-last::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 0.2rem;
  border-radius: 50%;
  background: var(--color-habits);
}

.habit-entry-chip.selected.is-last::after {
  background: currentColor;
}

.habit-entry-chips input.habit-entry-custom {
  width: 5rem;
  border-radius: 999px;
  text-align: center;
}

.habit-entry-unit,
.habit-entry-datetime {
  margin-top: 0.6rem;
}

.habit-entry-unit summary,
.habit-entry-links summary {
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.habit-entry-unit .people-toggle-grid {
  margin-top: 0.5rem;
}

.habit-entry-chips + .habit-entry-datetime {
  max-width: 260px;
}

.habit-entry-hint {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.habit-entry-links {
  margin-bottom: 1.25rem;
  padding: 0.6rem 0.85rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.habit-entry-links-body {
  margin-top: 0.85rem;
}

.habit-entry-links-body .form-group:last-child {
  margin-bottom: 0;
}

.habit-tile-sparkline {
  height: 76px;
}

.habit-tile-sparkline canvas {
  width: 100%;
  height: 100%;
}

.habit-tile-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
}

/* button_to (Done) rendert ein <form>, link_to (Detail) ein <a>. Mit
   display:contents verschwindet die Form-Box, sodass der <button> zum direkten
   Flex-Kind neben dem <a> wird – beide sind dann identische Geschwister und
   werden gleich ausgerichtet. */
.habit-tile-actions form {
  display: contents;
}

.habit-tile-actions .btn-done {
  line-height: normal;
}

/* Taktiles Feedback beim Klick auf Done/Detail. */
.habit-tile-actions .btn-done:active {
  transform: scale(0.92);
}

/* ── Done-Feuerwerk ──────────────────────────────────────────
   Wird vom habit-done-Controller beim Klick auf Done ausgeloest:
   das Tile pulst kurz und in der Mitte explodiert ein Feuerwerk aus
   bunten Partikeln, bevor Turbo die Liste neu morpht. Die Partikel
   werden per JS erzeugt und ueber --dx/--dy nach aussen geschleudert. */
.habit-tile.is-celebrating {
  animation: habit-done-tile 0.6s ease-out;
}

/* Wochenziel erreicht: kraeftigerer Puls mit goldenem Aufblitzen. */
.habit-tile.is-celebrating-big {
  animation: habit-done-tile-big 1.1s ease-out;
}

.habit-firework {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 3;
}

.habit-firework-particle {
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  opacity: 0;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  animation: habit-firework 0.7s cubic-bezier(0.15, 0.6, 0.4, 1) forwards;
}

@keyframes habit-done-tile {
  0% { transform: scale(1); }
  35% { transform: scale(1.035); }
  100% { transform: scale(1); }
}

@keyframes habit-done-tile-big {
  0% { transform: scale(1); box-shadow: var(--shadow); }
  18% { transform: scale(1.06); box-shadow: 0 0 0 4px var(--color-success), 0 0 56px 8px rgba(255, 215, 0, 0.6); }
  45% { transform: scale(1.02); }
  100% { transform: scale(1); box-shadow: var(--shadow); }
}

/* Partikel schiessen nach aussen (--dx/--dy) und sinken am Ende leicht ab. */
@keyframes habit-firework {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 10px)) scale(0.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .habit-tile.is-celebrating,
  .habit-tile.is-celebrating-big { animation: none; }
  .habit-firework { display: none; }
}

/* button_to (Done) rendert ein <form>, link_to (Detail) ein <a>. Mit
   display:contents wird der <button> zum direkten Flex-Kind neben dem <a>,
   sodass beide identische Geschwister sind und gleich hoch ausgerichtet werden. */
.habit-actions form {
  max-width: none;
  display: contents;
}

.habit-actions .btn-done {
  line-height: normal;
}


.section-card .habits-list {
  gap: 0;
}

.section-card .habits-list .habit-item {
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;
  padding: 0.65rem 0.5rem;
}

.section-card .habits-list .habit-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.section-card .habits-list .habit-item:first-child {
  padding-top: 0;
}

.section-card .habits-list .habit-item:hover {
  background: var(--color-primary-light);
  box-shadow: none;
  border-radius: var(--radius-sm);
  margin: 0 -0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ── Done Button ─────────────────────────────────────────── */
.col-auto {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.btn-done,
.btn-done[type="submit"] {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  background: var(--color-text-muted);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

/* Ist der Button ein <a> (etwa „Detail“ auf den Habit-Kacheln), gewinnt a:hover
   mit seiner höheren Spezifität und färbt die Schrift dunkelgrün samt Unterstrich
   – auf dem dunklen Hover-Hintergrund war sie kaum noch zu lesen. Farbe und
   Unterstreichung deshalb hier festnageln, wie .btn und .btn-postpone es tun. */
.btn-done:hover,
.btn-done[type="submit"]:hover {
  background: var(--color-text);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

/* Der Gegenknopf tritt zurueck: er meldet einen vergebenen Tag, er feiert
   nichts. Ist der Tag markiert, bleibt er gedrueckt stehen – nochmal klicken
   nimmt es zurueck. */
.btn-miss,
.btn-miss[type="submit"] {
  background: none;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.btn-miss:hover,
.btn-miss[type="submit"]:hover,
.btn-miss.is-missed,
.btn-miss.is-missed[type="submit"] {
  background: var(--color-border);
  color: var(--color-text);
}

.section-card .btn-done,
.section-card .btn-done[type="submit"] {
  background: var(--color-text-muted);
}

.section-card .btn-done:hover,
.section-card .btn-done[type="submit"]:hover {
  background: var(--color-text);
}

.section-card a.btn-done,
.section-card a.btn-done:hover {
  color: #fff;
}

.actions .btn-done,
.actions .btn-done[type="submit"] {
  background: var(--color-text-muted);
  font-size: 0.8125rem;
  /* line-height vereinheitlichen, damit Button (button_to) und Link
     (link_to) mit derselben Klasse gleich hoch sind. */
  line-height: normal;
  padding: 0.4rem 0.75rem;
}

.actions .btn-done:hover,
.actions .btn-done[type="submit"]:hover {
  background: var(--color-text);
}

/* ── Postpone Button ─────────────────────────────────────── */
.btn-postpone,
.btn-postpone[type="submit"] {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.4rem;
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-text-muted);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}

.btn-postpone:hover,
.btn-postpone[type="submit"]:hover {
  background: var(--color-text-muted);
  color: #fff;
  transform: translateY(-1px);
}

/* ── Date Shortcuts (Todo-Formular) ─────────────────────── */
.date-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.4rem;
  /* #338: mehr Abstand zwischen den Datumsvorgaben und dem Datumsfeld */
  margin-bottom: 0.75rem;
}

/* ── Snooze Dropdown ────────────────────────────────────── */
.snooze-dropdown {
  position: relative;
}

.snooze-dropdown > .btn-snooze-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.4rem;
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-text-muted);
  border-radius: var(--radius-sm);
  font-size: 0.6875rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: background 0.15s, color 0.15s;
}

.snooze-dropdown > .btn-snooze-toggle::-webkit-details-marker {
  display: none;
}

.snooze-dropdown > .btn-snooze-toggle:hover {
  background: var(--color-text-muted);
  color: #fff;
}

.snooze-dropdown .snooze-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 0.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 10;
  min-width: 120px;
}

.snooze-menu .snooze-option,
.snooze-menu .snooze-option[type="submit"] {
  display: block;
  width: 100%;
  padding: 0.35rem 0.6rem;
  background: none;
  border: none;
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.75rem;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

.snooze-menu .snooze-option:hover,
.snooze-menu .snooze-option[type="submit"]:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.snooze-menu .button_to {
  margin: 0;
}

/* ── Avatars ─────────────────────────────────────────────── */
.avatar {
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-bg);
}

.avatar-xxxs { width: 16px; height: 16px; }
.avatar-xxs { width: 24px; height: 24px; }
.avatar-xs { width: 32px; height: 32px; }
.avatar-sm { width: 40px; height: 40px; }
.avatar-lg { width: 100px; height: 100px; }

/* Personen-Erwähnung im Tagebuch-Freitext: Avatar vor dem Namen.
   Der Span bleibt inline, damit die Textbaseline (und damit die
   Satzzeichen hinter dem Namen) nicht verrutscht. */
.journal-mention {
  white-space: nowrap;
}

.journal-mention .avatar {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.2rem;
}

.journal-mention-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin-top: 0.35rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.journal-mention-preview[hidden] {
  display: none;
}

.journal-mention-choice button {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.5rem 0.1rem 0.15rem;
  margin-left: 0.35rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}

.journal-mention-choice button:hover,
.journal-mention-choice button:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 600;
  line-height: 1;
}

.avatar-initials.avatar-xs { font-size: 0.7rem; }
.avatar-initials.avatar-sm { font-size: 0.8rem; }
.avatar-initials.avatar-lg { font-size: 2rem; }

.person-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.person-header h2 {
  margin: 0;
}

.person-header-meta {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.avatar-preview-container {
  text-align: center;
  margin: 0.75rem 0;
}

.avatar-preview {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 3px solid var(--color-border);
}

.avatar-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.avatar-option label {
  font-size: 0.8125rem;
  display: block;
  margin-bottom: 0.2rem;
}

.avatar-option select {
  width: 100%;
}

@media (max-width: 600px) {
  .avatar-options-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Avatar Editor Page ─────────────────────────────────── */
form:has(.avatar-editor-page) {
  max-width: 780px;
}

.avatar-editor-page {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 140px);
}

.avatar-editor-page .avatar-preview-container {
  flex-shrink: 0;
  text-align: center;
  padding: 1rem 0;
}

.avatar-options-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 0 0.5rem;
}

.avatar-category {
  margin-bottom: 1.25rem;
}

.avatar-category > label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.avatar-box-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.avatar-box {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  user-select: none;
}

.avatar-box:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.avatar-box.selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.avatar-box.selected:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.avatar-box input[type="radio"] {
  display: none;
}

.avatar-color-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  user-select: none;
}

.avatar-color-circle:hover {
  border-color: var(--color-primary);
  transform: scale(1.1);
}

.avatar-color-circle.selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary);
  transform: scale(1.1);
}

.avatar-color-circle input[type="radio"] {
  display: none;
}

/* ── Detail Views ────────────────────────────────────────── */
.detail-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  margin-bottom: 1.5rem;
  /* URLs haben keine Umbruchstelle und schieben die Seite sonst auf dem
     Handy seitlich hinaus. */
  overflow-wrap: anywhere;
}

.detail-card p {
  margin-bottom: 0.75rem;
  line-height: 1.7;
}

/* Label über dem Wert statt daneben: Eine lange URL bekommt so die volle
   Breite, statt hinter dem Label umzubrechen. */
.detail-card strong {
  display: block;
  line-height: 1.4;
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Absätze brauchen ihren Abstand am .markdown-body selbst: Der globale Reset
   nimmt <p> jede Margin, und .detail-card p gibt sie nur dort zurück, wo der
   Text in einer detail-card steht – in einer Bewertungszeile etwa nicht, und
   die Leerzeilen aus dem Markdown verschwanden dort spurlos. */
.markdown-body p,
.markdown-body ul,
.markdown-body ol,
.markdown-body blockquote,
.markdown-body pre {
  margin-bottom: 0.75rem;
  line-height: 1.7;
}

.markdown-body > *:last-child {
  margin-bottom: 0;
}

/* Markdown-Inhalt: **fett** soll fett sein und nicht das Label-Styling
   der detail-card erben (sonst Großbuchstaben, grau, eigene Zeile) */
.markdown-body strong {
  display: inline;
  line-height: inherit;
  color: inherit;
  font-weight: 700;
  font-size: inherit;
  text-transform: none;
  letter-spacing: normal;
}

.reading-note {
  margin-top: 0.35rem;
}

.reading-note p:last-child {
  margin-bottom: 0;
}

.search-link {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  vertical-align: middle;
  line-height: 1.4;
}

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

.detail-card ul {
  list-style: none;
  padding: 0;
  margin-top: 0.25rem;
}

/* Die Szenario-Liste bringt ihre eigene Auffüllung mit, sonst kleben
   Prozentwert und Badge am Rahmen. */
.detail-card ul:not(.forecast-scenarios) li {
  padding: 0.25rem 0;
}

/* Markdown-Listen sollen Aufzählungszeichen behalten und nicht das
   list-style: none der detail-card erben */
.markdown-body ul,
.markdown-body ol {
  list-style: revert;
  padding-left: 1.5rem;
}

.markdown-body li {
  padding: 0;
}

.detail-card-columns {
  display: flex;
  gap: 2rem;
}

.detail-card-main {
  flex: 1;
}

.detail-card-sidebar {
  flex: 0 0 auto;
  border-left: 1px solid var(--color-border);
  padding-left: 2rem;
}

.people-list-avatars {
  list-style: none;
  padding: 0;
  margin-top: 0.5rem;
}

.people-list-avatars li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
}

/* ── Todo Show ─────────────────────────────────────────────── */
.todo-show-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.todo-show-title {
  margin: 0 0 0.85rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
}

/* Meta-Leiste: Priority/Status/Fälligkeit etc. als scanbare Badges
   statt verteilter Label-Zeilen. */
.todo-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.meta-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.8125rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  white-space: nowrap;
}

.meta-badge-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.meta-badge-open {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: transparent;
  font-weight: 600;
}

.meta-badge-done {
  background: var(--color-success-light);
  color: var(--color-success);
  border-color: transparent;
  font-weight: 600;
}

.meta-badge-deadline .meta-badge-label {
  color: var(--color-error);
}

/* Alle Aktionen der Detailseite in einer Leiste; seltene stecken in den
   Menüs, damit die Leiste auch auf dem Handy einzeilig bleibt. */
.todo-show-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* Spezifischer als .container form, das Formularen unten Luft gibt. */
.todo-show-toolbar form.button_to {
  margin: 0;
  padding: 0;
}

.todo-show-toolbar .btn-done,
.todo-show-toolbar .btn-done[type="submit"],
.todo-show-tool {
  box-sizing: border-box;
  height: 2.25rem;
  padding: 0 0.75rem;
  border: 1px solid var(--color-border);
  line-height: 1;
}

.todo-show-toolbar .btn-done,
.todo-show-toolbar .btn-done[type="submit"] {
  border-color: var(--color-success);
  background: var(--color-success);
  font-size: 0.875rem;
}

.todo-show-tool {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.todo-show-tool::-webkit-details-marker {
  display: none;
}

.todo-show-tool:hover,
.todo-show-menu[open] > .todo-show-tool {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.todo-show-menu {
  position: relative;
}

.todo-show-menu-panel {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 11rem;
  margin-top: 0.25rem;
  padding: 0.25rem 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.todo-show-menu-panel form.button_to {
  margin: 0;
  padding: 0;
}

.todo-show-menu-panel .btn-reschedule-wrap {
  display: contents;
}

.todo-show-menu-item,
.todo-show-menu-item[type="submit"],
.todo-show-menu-panel .btn-reschedule {
  display: block;
  width: 100%;
  padding: 0.45rem 0.85rem;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.todo-show-menu-item:hover,
.todo-show-menu-item[type="submit"]:hover,
.todo-show-menu-panel .btn-reschedule:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.todo-show-menu-item.danger {
  color: var(--color-error);
}

.todo-show-back {
  margin-left: auto;
  font-size: 0.875rem;
}

.meta-badge-person {
  align-items: center;
}

.todo-show-subtodo-more {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

.todo-show-subtodo-more .btn-add-subtodo {
  padding: 0;
  border: none;
  background: none;
  color: var(--color-primary);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

/* ID zum Nachschlagen für die API/CLI — rechts abgesetzt und bewusst leise,
   damit sie die Badge-Leiste nicht mitliest. Ein Klick kopiert sie. */
.todo-meta-id {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  cursor: pointer;
}

.todo-meta-id:hover,
.todo-meta-id:focus-visible {
  color: var(--color-text);
}

.todo-meta-id.is-copied::after {
  content: "✓";
  margin-left: 0.15rem;
}

/* Die Id in der Listenzeile (siehe TodosHelper#todo_id_badge): dieselbe Optik
   wie auf der Detailseite, aber noch einen Schritt zurückgenommen – sie steht
   neben jeder Zeile und darf den Titel nicht überstimmen. */
.todo-row-id {
  display: none;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  opacity: 0.55;
  cursor: pointer;
}

:root.show-todo-ids .todo-row-id {
  display: inline-flex;
}

.todo-row-id:hover,
.todo-row-id:focus-visible,
.todo-row-id.is-copied {
  opacity: 1;
}

.todo-row-id.is-copied::after {
  content: "✓";
  margin-left: 0.15rem;
}

a.meta-badge-link {
  text-decoration: none;
}

a.meta-badge-link:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Beschreibung ist der Hauptinhalt — abgesetzt mit eigener Hintergrundfarbe,
   volle Breite, kein Label-Styling. */
.todo-show-description {
  line-height: 1.7;
  margin-bottom: 1.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
}

.todo-show-description p {
  margin-bottom: 0.9rem;
}

.todo-show-description p:last-child {
  margin-bottom: 0;
}

/* Checkliste aus den Aufzählungen der Beschreibung (Todo::Checklist). Die
   Checkbox ist ein Button, Bearbeiten/Löschen klappen unter dem Text auf. */
.todo-checklist {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
}

.todo-checklist:last-child {
  margin-bottom: 0;
}

.todo-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}

.todo-checklist-check {
  display: contents;
}

.todo-checklist-box,
.todo-checklist-box[type="submit"] {
  flex: none;
  padding: 0.3rem 0.2rem;
  border: none;
  background: none;
  cursor: pointer;
}

.todo-checklist-box:hover,
.todo-checklist-box[type="submit"]:hover {
  background: none;
  transform: none;
}

/* Gezeichnet statt ☐/☑: Die Zeichen fehlen in manchen Schriften. */
.todo-checklist-mark {
  position: relative;
  display: block;
  width: 1.05rem;
  height: 1.05rem;
  border: 1.5px solid var(--color-text-muted);
  border-radius: 4px;
  transition: background 0.15s, border-color 0.15s;
}

.todo-checklist-box:hover .todo-checklist-mark {
  border-color: var(--color-primary);
}

.todo-checklist-item.checked .todo-checklist-mark {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.todo-checklist-item.checked .todo-checklist-mark::after {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 0.08rem;
  width: 0.3rem;
  height: 0.6rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Nur für Screenreader und Tests: Der Button zeigt die Box, sagt aber, was er tut. */
.todo-checklist-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.todo-checklist-edit {
  flex: 1;
  min-width: 0;
}

.todo-checklist-text {
  list-style: none;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.todo-checklist-text::-webkit-details-marker {
  display: none;
}

.todo-checklist-item.checked .todo-checklist-text {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.todo-checklist-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  margin: 0.35rem 0 0.6rem;
}

.todo-checklist-rename {
  flex: 1 1 16rem;
  min-width: 0;
}

.todo-checklist-add {
  margin-bottom: 1.5rem;
}

.todo-show-description + .todo-checklist-add {
  margin-top: -0.75rem;
}

.todo-show-url {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
  word-break: break-word;
}

.todo-show-url-icon {
  flex: 0 0 auto;
  font-size: 0.9em;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 1rem;
}

.actions a {
  font-size: 0.875rem;
}

/* button_to umschließt den Button mit einem <form>. display: contents
   blendet die Form-Box aus dem Layout, sodass der Button zum direkten
   Flex-Kind von .actions wird – identisch behandelt wie die Link-Aktionen,
   wodurch Button- und Link-Aktionen browserübergreifend auf einer Linie
   sitzen. (Die margin-left:auto-Rechtsbündigkeit von Delete wandert dadurch
   vom <form> auf den Button selbst, siehe .actions .btn-destroy.) */
.actions .button_to {
  display: contents;
}

.actions .add-photos-form {
  display: contents;
}

.add-photos-trigger {
  display: inline;
  margin: 0;
  font-size: 0.875rem;
  font-weight: normal;
  color: var(--color-primary);
  cursor: pointer;
}

.add-photos-trigger:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

/* Versteckt, aber nicht display:none — sonst fällt das Feld aus der
   Tab-Reihenfolge und das Label öffnet den Dateidialog nicht per Tastatur. */
.add-photos-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.add-photos-trigger:focus-within {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Forms ────────────────────────────────────────────────── */
form {
  max-width: 480px;
}

.form-group {
  margin-bottom: 1.25rem;
}

label,
.form-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 0.35rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
  width: 100%;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(192, 104, 48, 0.12);
}

/* #338: Date-/Time-Inputs (z.B. die Deadline-Box in „Mehr Optionen") dürfen
   ihren umgebenden Container nicht überlaufen. max-width als harmlose
   Absicherung auf allen Browsern. */
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
  max-width: 100%;
}

/* iOS-Safari-spezifisch: Das native Date-/Time-Control ignoriert dort
   width: 100% und behält seine intrinsische Breite → es sprengt den
   Container (.form-group der Deadline). @supports (-webkit-touch-callout)
   greift ausschließlich in iOS-Safari, daher bleibt der Desktop (inkl.
   Kalender-Icon) unangetastet. appearance: none macht das Control zu einer
   normalen, breiten-respektierenden Box; min-height hält die Feldhöhe. */
@supports (-webkit-touch-callout: none) {
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-width: 0;
    min-height: 2.6rem;
  }
}

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

select[multiple] {
  min-height: 140px;
}

/* Ohne appearance: none zeichnet das Betriebssystem das Dropdown selbst — mit
   eigener Höhe und eigenem Pfeil, der neben den Textfeldern aus dem Rahmen
   fällt. Der Pfeil kommt deshalb als Hintergrund-SVG; sein Grau ist fest
   verdrahtet, weil ein Data-URI die Theme-Variablen nicht sieht, und liegt
   bewusst in der Mitte zwischen hellem und dunklem Untergrund. Die Polsterung
   rechts hält den Text vom Pfeil weg. */
select:not([multiple]) {
  height: auto;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238a8480' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 0.7rem;
}

input[type="submit"],
button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

input[type="submit"]:hover,
button[type="submit"]:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

/* Sticky Submit für Formulare (#284): Die Aktions-Buttons bleiben am
   unteren Rand fixiert, sodass man bei langen Formularen nicht scrollen
   muss, um sie zu erreichen. Der fixierte Verlauf liegt deckungsgleich
   auf dem body-Hintergrund und ist dadurch unsichtbar.

   Zentral angewandt auf den letzten Aktions-Container eines Formulars
   (das .form-group bzw. .actions mit einem Submit-Button als direktem
   Kind). Inline-Such-/Filterformulare ohne solchen Wrapper bleiben
   unberührt. .form-actions-sticky dient als expliziter Opt-in-Alias. */
form > .form-group:has(> input[type="submit"]),
form > .form-group:has(> button[type="submit"]),
form > .actions:has(> input[type="submit"]),
form > .actions:has(> button[type="submit"]),
.form-actions-sticky {
  position: sticky;
  bottom: 0;
  z-index: 10;
  margin-top: 1rem;
  margin-bottom: 0;
  padding: 0.75rem 0;
  background: var(--bg-gradient) fixed;
}

/* iOS-Safari kennt background-attachment: fixed nicht und behandelt es wie
   scroll: Der ganze Verlauf landet dann gestaucht im schmalen Streifen und
   umrahmt den Button als dunkler Rand (am stärksten bei Gletscher, der von
   Schwarz bis Eisblau läuft). Dort bleibt der Streifen deshalb durchsichtig
   und macht nur weich, was darunter durchscrollt – sichtbar ist so der echte
   Seitenhintergrund an genau dieser Stelle. */
@supports (-webkit-touch-callout: none) {
  form > .form-group:has(> input[type="submit"]),
  form > .form-group:has(> button[type="submit"]),
  form > .actions:has(> input[type="submit"]),
  form > .actions:has(> button[type="submit"]),
  .form-actions-sticky {
    background: transparent;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}

/* Platz unter dem Formularinhalt, damit der sticky Button-Streifen
   die letzten Eingabefelder nicht verdeckt. */
.container form {
  padding-bottom: 0.5rem;
}

/* Sign out button in header */
.header button[type="submit"] {
  background: none;
  color: var(--color-text-muted);
  padding: 0;
  font-size: 0.875rem;
  border: none;
  transform: none;
}

.header button[type="submit"]:hover {
  color: var(--color-primary);
  background: none;
  transform: none;
}

/* Destroy buttons – per margin-left:auto rechtsbündig. Da der button_to-
   Form via display: contents kein Box mehr bildet, sitzt das auto-Margin
   direkt auf dem Button. */
.actions .btn-destroy,
.actions .btn-destroy[type="submit"] {
  margin-left: auto;
  background: none;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: normal;
  padding: 0;
  border: none;
  transform: none;
}

.actions .btn-destroy:hover,
.actions .btn-destroy[type="submit"]:hover {
  background: none;
  color: var(--color-error);
  transform: none;
  text-decoration: underline;
}

/* ── Inline Forms ────────────────────────────────────────── */
.inline-form {
  display: inline;
  max-width: none;
}

/* ── Checkbox Labels ─────────────────────────────────────── */
.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.9375rem;
  color: var(--color-text);
}

.checkbox-label input[type="checkbox"] {
  width: auto;
}

/* ── People Toggle Buttons (Interaction Form) ────────────── */
.people-toggle-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.people-toggle-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.85rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  user-select: none;
}

.people-toggle-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.people-toggle-btn.selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.people-toggle-btn.selected:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.people-toggle-btn input[type="checkbox"],
.people-toggle-btn input[type="radio"] {
  display: none;
}

/* ── Journal Scale Buttons ───────────────────────────────── */
.scale-hint {
  margin: 0 0 0.5rem 0;
  color: var(--color-text-muted, #666);
}

.scale-btn {
  padding: 0.35rem 0.6rem;
}

.scale-emoji {
  font-size: 1.4rem;
  line-height: 1;
}

/* ── Journal Entry Form ──────────────────────────────────── */
form.journal-form {
  max-width: 780px;
}

.journal-form input[type="date"] {
  width: auto;
  min-width: 11rem;
}

.journal-scale-pairs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.5rem;
}

.journal-form .temperature-range {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.5rem;
  align-items: center;
}

.journal-form .bp-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.journal-form .bp-row {
  display: grid;
  grid-template-columns: 6rem 1fr auto 1fr;
  gap: 0.5rem;
  align-items: center;
}

.journal-form .bp-label {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.journal-form .bp-sep {
  color: var(--color-text-muted);
  text-align: center;
}

@media (max-width: 600px) {
  .journal-scale-pairs {
    grid-template-columns: 1fr;
  }
}

/* ── Time Picker (Interaction Form) ──────────────────────── */
.time-picker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.time-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  padding: 0.4rem 0.6rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.time-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.time-btn.selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.time-btn.selected:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.mt-label {
  display: block;
  margin-top: 0.75rem;
  margin-bottom: 0.35rem;
}

/* ── Flash Messages ──────────────────────────────────────── */
.flash-messages {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.flash {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  margin-top: 1rem;
}

/* .notice rendert das Layout bewusst nicht (Rails-Standardmeldungen sollen
   nicht überall aufpoppen); .info ist der Kanal für selbst geschriebene
   Hinweise, die sichtbar sein sollen. Optisch dieselbe ruhige Kachel. */
.flash.notice,
.flash.info {
  background: var(--color-success-light);
  color: var(--color-success);
  border: 1px solid #b6dbc4;
}

.flash.alert {
  background: var(--color-error-light);
  color: var(--color-error);
  border: 1px solid #f0c4c2;
}

/* ── Form Errors ─────────────────────────────────────────── */
.form-errors {
  background: var(--color-error-light);
  color: var(--color-error);
  border: 1px solid #f0c4c2;
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
}

.form-errors h2 {
  font-size: 0.9375rem;
  color: var(--color-error);
  margin-bottom: 0.5rem;
}

.form-errors ul {
  padding-left: 1.25rem;
  margin: 0;
}

.form-errors li {
  margin-bottom: 0.25rem;
}

/* ── Auth Pages ──────────────────────────────────────────── */
fieldset {
  border: none;
  padding: 0;
}

fieldset table {
  width: 100%;
  border-collapse: collapse;
}

fieldset th {
  text-align: left;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  padding: 0.5rem 1rem 0.5rem 0;
  white-space: nowrap;
}

fieldset td {
  padding: 0.5rem 0;
  width: 100%;
}

fieldset td input[type="email"],
fieldset td input[type="password"] {
  width: 100%;
}

section {
  margin-top: 1.25rem;
}

.passkey-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.passkey-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.passkey-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.passkey-meta {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.passkey-add h2 {
  margin-top: 0;
}

.passkey-add > p {
  margin: 0 0 1rem;
}

.passkey-add input[type="text"] {
  width: 100%;
}

button[type="submit"].btn-danger {
  background: var(--color-error);
}

button[type="submit"].btn-danger:hover {
  background: #a83632;
}

/* ── Cultural Memory Styles ─────────────────────────────── */
.cultural-memories {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cultural-memory-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: box-shadow 0.15s, background 0.15s;
}

/* Lange URLs und Titel wie „BACH/MOZART/BEETHOVEN“ haben keine Umbruchstelle
   und schöben die Seite sonst über den Rand. */
.cultural-memory-item .col,
.tour-item .col {
  overflow-wrap: break-word;
}

.cultural-memory-item:hover {
  box-shadow: var(--shadow-md);
}

.cultural-memory-date {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
  flex: none;
}

.photo-exhibition-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: box-shadow 0.15s, background 0.15s;
}

.photo-exhibition-card:hover {
  box-shadow: var(--shadow-md);
}

.photo-exhibition-thumb {
  flex: none;
  display: block;
  width: 96px;
  height: 96px;
}

.photo-exhibition-thumb img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}

/* Title and description share this column's left edge, so they line up. */
.photo-exhibition-main {
  flex: 1;
  min-width: 0;
}

.photo-exhibition-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
}

.photo-exhibition-title {
  font-weight: 600;
}

.photo-exhibition-date {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
  flex: none;
}

.photo-exhibition-venue {
  margin-top: 0.3rem;
}

.photo-exhibition-desc {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
}

.cultural-memory-category {
  display: inline-block;
  background: var(--color-culture-light);
  color: var(--color-culture);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.15em 0.45em;
  border-radius: var(--radius-sm);
  margin-left: 0.35em;
  vertical-align: baseline;
}

.cultural-memory-rating {
  flex: none;
  color: var(--color-culture);
}

.cultural-memory-action {
  flex: none;
  margin-left: auto;
}

.rating-stars {
  color: var(--color-culture);
  letter-spacing: 0.05em;
}

.cultural-memory-image-container {
  margin-bottom: 1rem;
}

.cultural-memory-image {
  max-width: 100%;
  max-height: 400px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.cultural-memory-image-preview {
  max-width: 200px;
  max-height: 200px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  margin-top: 0.5rem;
}

/* Rezensionen: Zeitungsausschnitte stehen als Vorschaubild nebeneinander, PDFs
   nur als Zeile — ein Vorschaubild gäbe es dafür ohnehin nicht. */
.rezension-list {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.rezension-entry {
  max-width: 200px;
}

.rezension-link {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.9rem;
}

.rezension-thumb {
  width: 200px;
  height: 160px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.rezension-online {
  font-size: 0.85rem;
}

.rezension-note {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.rezensionen-fieldset {
  margin-bottom: 1rem;
}

/* Jede Rezension ist eine eigene Karte: Quelle und Datum stehen nebeneinander,
   Datei und Notiz darunter — das Datei-Feld ist zu breit, um in dieselbe Zeile
   zu passen, ohne die Quelle auf zwei Zeichen zusammenzudrücken. */
.rezension-fields {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.75rem;
}

.rezension-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10rem auto;
  gap: 0.75rem;
  align-items: end;
}

.rezension-fields .form-group {
  margin-bottom: 0.75rem;
  min-width: 0;
}

.rezension-fields .form-group:last-child {
  margin-bottom: 0;
}

.rezension-row .form-group {
  margin-bottom: 0;
}

.rezension-fields input[type="file"] {
  max-width: 100%;
}

.rezension-row .btn-remove {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  width: 2.2rem;
  height: 2.2rem;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--color-text-muted);
}

.rezension-row .btn-remove:hover {
  color: var(--color-error);
  border-color: var(--color-error);
}

/* Auf dem Handy bleibt der Entfernen-Knopf neben der Quelle stehen; das
   Datum rutscht darunter, statt auf 4 Zeichen einzulaufen. */
@media (max-width: 640px) {
  .rezension-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .rezension-row .form-group:first-child {
    grid-area: 1 / 1 / 2 / 2;
  }

  .rezension-row .btn-remove {
    grid-area: 1 / 2 / 2 / 3;
  }

  .rezension-row .form-group:nth-child(2) {
    grid-area: 2 / 1 / 3 / 3;
  }
}

/* Werke: Künstler und Titel in einer Zeile, der Eindruck darunter —
   so liest sich das Programm wie im Programmheft. */
.work-list {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 1rem;
}

.detail-card ul.work-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.detail-card ul.work-list li.work-entry {
  padding: 0.6rem 0.8rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.work-title {
  font-weight: 600;
}

.work-idagio {
  font-size: 0.85rem;
}

.work-memory,
.work-note {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.work-note p {
  margin: 0.2rem 0 0;
}

.memento-image-container {
  margin-bottom: 1rem;
}

.memento-image {
  max-width: 100%;
  max-height: 400px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.memento-image-preview {
  max-width: 200px;
  max-height: 200px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  margin-top: 0.5rem;
}

.book-author {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-left: 0.25em;
}

.book-author::before {
  content: "— ";
}

.book-year {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-left: 0.25em;
}

.book-year::before {
  content: "(";
}

.book-year::after {
  content: ")";
}

.book-rezensionen {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-left: 0.35em;
  white-space: nowrap;
}

.book-tags {
  display: inline-block;
  font-size: 0.65rem;
  font-style: italic;
  margin-left: 0.35em;
}

.tag-link {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  font-size: 0.7rem;
  font-style: normal;
  text-decoration: none;
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  margin-right: 0.25rem;
}

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

.tag-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.25rem 1rem;
  padding: 0.75rem 0.5rem;
  font-family: Charter, "Iowan Old Style", Georgia, serif;
  line-height: 1.25;
}

.tag-cloud-link {
  font-size: calc(0.875rem + var(--tag-weight, 0.5) * 1.625rem);
  color: color-mix(in srgb, var(--color-books) calc(35% + var(--tag-weight, 0.5) * 65%), var(--color-text-muted));
  text-decoration: none;
}

.tag-cloud-link.is-heavy {
  font-weight: 500;
}

.tag-cloud-link:hover {
  color: var(--color-books-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.tag-cloud-link.active {
  color: var(--color-books);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.tag-cloud-link.is-muted {
  color: color-mix(in srgb, var(--color-text-muted) calc(55% + var(--tag-weight, 0.5) * 45%), var(--color-bg));
}

.tag-cloud-link.has-unread {
  color: var(--color-books);
}

.tag-count {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-left: 0.15em;
}

.tag-unread {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-books) 14%, var(--color-surface));
  color: var(--color-books);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.6875rem;
  font-weight: 500;
  vertical-align: 0.35em;
}

.active-filter {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.journal-pager {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.journal-pager-next {
  margin-left: auto;
}

/* ── Blutdruck (Verlauf-Sektion) ─────────────────────────── */
.journal-bp-row {
  display: flex;
  gap: 1.2rem;
  align-items: center;
}

.journal-bp-row .journal-trend-box-chart {
  flex: 1;
  min-width: 0;
}

@media (max-width: 480px) {
  .journal-bp-row {
    flex-direction: column;
    align-items: stretch;
  }
}

.journal-bp-summary {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-top: 0.2rem;
  flex: 0 0 auto;
  min-width: 6rem;
}

.journal-bp-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.journal-bp-summary-days {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

.journal-bp-summary-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.journal-bp-trend {
  font-size: 0.75rem;
  font-weight: 700;
  margin-left: 1px;
}

.journal-bp-trend.up {
  color: var(--color-error);
}

.journal-bp-trend.down {
  color: var(--color-success);
}

.journal-entry-snippet {
  margin-top: 0.25rem;
  margin-bottom: 0.6rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.journal-photo-section {
  margin-bottom: 1rem;
}

/* Das Titelbild steht groß über dem Eintrag, wie bei den Touren. */
.journal-cover-photo {
  display: block;
  margin-bottom: 0.6rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: zoom-in;
  line-height: 0;
}

.journal-cover-photo-image {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  display: block;
}

/* Die übrigen Fotos als Kacheln darunter — Tippziel groß genug fürs Tablet. */
.journal-photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
}

.journal-photo-gallery-item {
  display: block;
  cursor: zoom-in;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.journal-photo-gallery-image {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}

.journal-photo-gallery-item:hover .journal-photo-gallery-image {
  transform: scale(1.04);
}

.journal-photo-month {
  margin-bottom: 1.5rem;
}

.journal-photo-tile {
  margin: 0;
  min-width: 0;
}

.journal-photo-tile figcaption {
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.journal-photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.journal-photo-preview {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-start;
}

.journal-photo-thumb {
  max-width: 200px;
  max-height: 200px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.journal-photo-remove,
.journal-photo-cover {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.journal-photo-preview.is-cover .journal-photo-thumb {
  outline: 3px solid var(--color-primary);
  outline-offset: -3px;
}

.journal-photo-preview.is-cover .journal-photo-cover {
  color: var(--color-primary);
  font-weight: 600;
}

.journal-entry-photo-thumb {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  display: block;
}

/* ── Ältere Einträge (Karten) ────────────────────────────── */
.journal-entries {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.journal-entry-card {
  display: flex;
  gap: 0.9rem;
  padding: 0.8rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: box-shadow 0.15s, transform 0.1s;
}

.journal-entry-card:hover {
  box-shadow: var(--shadow-md);
}

.journal-entry-card-photo {
  flex: 0 0 auto;
  line-height: 0;
  position: relative;
}

/* Zählt die weiteren Bilder, von denen die Karte nur das erste zeigt. */
.journal-entry-photo-count {
  position: absolute;
  right: 0.2rem;
  bottom: 0.2rem;
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.7rem;
  line-height: 1.4;
}

.journal-entry-card-body {
  flex: 1;
  min-width: 0;
}

.journal-entry-card-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.45rem;
}

.journal-entry-card-date {
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
}

.journal-entry-card-date:hover {
  text-decoration: underline;
}

.journal-entry-card-age {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.journal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.55rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--color-text-muted);
  background: color-mix(in srgb, var(--color-text-muted) 8%, transparent);
  border-radius: 999px;
  white-space: nowrap;
}

/* Skalen-Tags je nach Wert rot (schlecht) → grün (gut) hinterlegt */
.tag-scale {
  color: var(--color-text);
  background: color-mix(
    in srgb,
    color-mix(in srgb, var(--color-error), var(--color-success) calc(var(--scale-weight, 0.5) * 100%)) 22%,
    transparent
  );
}

/* ── Pagination ──────────────────────────────────────────── */
.journal-year-nav,
.journal-month-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}

/* Folgt direkt die Monats-Leiste, bleiben Jahr und Monat enger gruppiert. */
.journal-year-nav:has(+ .journal-month-nav) {
  margin-bottom: 0.75rem;
}

.journal-year-nav .btn,
.journal-month-nav .btn {
  padding: 0.25rem 0.6rem;
  font-size: 0.85rem;
}

.journal-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.journal-pagination-status {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn-secondary:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.btn.is-disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}

.journal-memory-card-photo {
  width: 100%;
  height: 120px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  margin: 0.4rem 0;
  display: block;
}

.journal-entry-snippet strong {
  font-weight: 600;
  margin-right: 0.25rem;
}

.journal-prompt {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  margin: 0.4rem 0;
}

.journal-prompt-text {
  margin: 0 0 0.3rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.journal-prompt-snippet {
  margin: 0 0 0.3rem;
  padding-left: 0.6rem;
  border-left: 2px solid var(--color-border);
  line-height: 1.5;
}

.journal-prompt-snippet strong {
  color: var(--color-text-muted);
}

.journal-prompt-snippet-full {
  margin-top: 0.3rem;
}

.journal-prompt-snippet-full > summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--color-primary);
  list-style: none;
  user-select: none;
}

.journal-prompt-snippet-full > summary::-webkit-details-marker {
  display: none;
}

.journal-prompt-snippet-full > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.35rem;
  transition: transform 0.15s ease;
}

.journal-prompt-snippet-full[open] > summary::before {
  transform: rotate(90deg);
}

.journal-prompt-snippet-full > .journal-section:first-of-type {
  margin-top: 0.6rem;
}

.journal-prompt-snippet-full > .journal-section:last-child {
  margin-bottom: 0;
}

.journal-prompt-snippet-full .journal-section h2 {
  font-size: 1rem;
}

.journal-prompt-snippet-full .journal-cover-photo-image {
  max-height: 300px;
}

.journal-prompt-memento {
  margin: 0 0 0.3rem;
}

.journal-prompt-memento-body {
  margin-top: 0.4rem;
  padding-left: 0.6rem;
  border-left: 2px solid var(--color-border);
}

.journal-prompt-memento-body p {
  margin: 0 0 0.3rem;
}

.journal-prompt-memento-body .memento-image {
  display: block;
  max-height: 200px;
  margin-bottom: 0.3rem;
}

.journal-prompt-question {
  margin: 0;
  font-style: italic;
  line-height: 1.5;
}

.journal-entry-prompt {
  margin: 0 0 0.6rem;
  padding-left: 0.6rem;
  border-left: 2px solid var(--color-border);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.journal-entry-prompt-label {
  font-weight: 600;
}

.journal-entry-prompt-question {
  font-style: italic;
}

.forecast-group {
  margin-top: 1rem;
}

.forecast-group-heading {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.forecast-group-overdue .forecast-group-heading {
  color: var(--color-error);
}

.forecast-group-happened .forecast-group-heading {
  color: var(--color-success);
}

.forecast-list {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.forecast-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem;
  align-items: baseline;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--color-border);
}

.forecast-item:last-child {
  border-bottom: none;
}

.forecast-item.overdue {
  background: color-mix(in srgb, var(--color-error) 7%, var(--color-surface));
}

.forecast-item.resolved {
  opacity: 0.8;
}

.forecast-title {
  min-width: 0;
}

.forecast-probability {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.forecast-meta {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.forecast-scenarios {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.forecast-scenarios li {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.forecast-scenarios li.selected {
  border-color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-surface));
}

.forecast-scenarios li.remainder {
  border-style: dashed;
  color: var(--color-text-muted);
}

.forecast-scenarios .scenario-prob {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 3.5rem;
}

.forecast-scenarios .scenario-title {
  flex: 1;
}

.forecast-scenarios .scenario-badge {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-success);
  font-weight: 600;
}

.forecast-scenarios-summary {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.scenarios-fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.scenarios-fieldset legend {
  font-weight: 600;
  padding: 0 0.4rem;
}

.scenarios-fieldset .form-hint {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0 0 0.6rem;
}

.scenario-fields {
  margin-bottom: 0.5rem;
}

.scenario-row {
  display: grid;
  grid-template-columns: 1fr 6rem auto;
  gap: 0.6rem;
  align-items: end;
}

.scenario-row .form-group {
  margin-bottom: 0;
}

.scenario-row .btn-remove {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  width: 2.2rem;
  height: 2.2rem;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--color-text-muted);
}

.scenario-row .btn-remove:hover {
  color: var(--color-error);
  border-color: var(--color-error);
}

.resolve-scenarios {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.resolve-option {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.4rem 0.2rem;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
}

.resolve-option:last-child {
  border-bottom: none;
}

.resolve-option .scenario-prob {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 3.5rem;
}

.book-cover-container {
  margin-bottom: 1rem;
}

.book-cover {
  max-width: 200px;
  max-height: 300px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.book-cover-list {
  width: 35px;
  height: 50px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.book-cover-thumb {
  flex: 0 0 35px;
}

.book-cover-preview {
  max-width: 150px;
  max-height: 225px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  margin-top: 0.5rem;
}

.culture-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.books-filters > summary {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
  font-size: 0.875rem;
  list-style: none;
}

.books-filters > summary::-webkit-details-marker {
  display: none;
}

.books-filters > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.4rem;
  color: var(--color-text-muted);
  transition: transform 0.15s;
}

.books-filters[open] > summary {
  margin-bottom: 0.75rem;
}

.books-filters[open] > summary::before {
  transform: rotate(90deg);
}

.books-filters-label {
  color: var(--color-text-muted);
}

/* Ohne ::details-content-Unterstützung bleibt die Zusammenfassung auch auf
   breiten Bildschirmen stehen, sonst ließen sich die Filter nicht mehr öffnen. */
@supports selector(::details-content) {
  @media (min-width: 601px) {
    .books-filters > summary {
      display: none;
    }

    .books-filters::details-content {
      content-visibility: visible;
      height: auto;
    }
  }
}

/* ── Tour Styles ──────────────────────────────────────── */
#filter-year,
#filter-type,
#filter-region,
#filter-sort,
#tour-filters {
  scroll-margin-top: 4rem;
}

.tour-stats {
  margin-bottom: 1.5rem;
}

.tour-stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.5rem;
}

.tour-stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-tours);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  box-shadow: var(--shadow);
  text-align: center;
}

.tour-stat-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-tours);
}

.tour-stat-label {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tour-record-cards {
  display: grid;
  /* Höchstens vier Kacheln je Reihe: Jede Spalte ist mindestens ein Viertel der
     Reihe breit (abzüglich der drei Lücken). Die acht Erinnerungs-Kacheln
     stehen dadurch 4 + 4 statt 5 + 3. Schmale Fenster greifen weiterhin auf die
     11rem zurück und brechen früher um. */
  grid-template-columns: repeat(auto-fit, minmax(max(11rem, (100% - 1.5rem) / 4), 1fr));
  gap: 0.5rem;
}

.tour-record-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-tours);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.tour-record-label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tour-record-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-tours);
}

.tour-record-name {
  font-size: 0.85rem;
  line-height: 1.2;
}

.tour-record-date {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.tour-memory-thumb-link {
  display: block;
  margin-top: 0.25rem;
  line-height: 0;
}

.tour-memory-thumb {
  width: 100%;
  height: 4.5rem;
  background: var(--color-tours-light);
  border-radius: var(--radius);
  display: block;
  cursor: pointer;
}

.tour-memory-attribution {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  margin-top: 0.5rem;
  text-align: right;
}

.tour-memory-attribution a {
  color: inherit;
  text-decoration: underline;
}

.tour-memory-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 0.25rem;
}

.tour-memory-bar {
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  margin-top: 0.35rem;
  overflow: hidden;
}

.tour-memory-bar-fill {
  height: 100%;
  background: var(--color-tours);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.tours-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tour-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: box-shadow 0.15s, background 0.15s;
}

.tour-item:hover {
  box-shadow: var(--shadow-md);
}

/* Eine Bewertung kann ein langer Markdown-Text sein. Datum und Aktionen sollen
   dann nicht in dessen Mitte schweben, sondern oben an der ersten Zeile stehen. */
.review-item {
  align-items: flex-start;
}

.tour-date {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
  flex: none;
}

/* Datum und Avatare stehen über dem Titel: In eigenen Spalten begänne der
   Titel je nach Anzahl der Mitfahrer woanders, und auf dem Handy bliebe ihm
   kaum Breite. */
.tour-date-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.15rem;
}

.tour-meta {
  flex: none;
  display: flex;
  gap: 0.75rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.tour-activity-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.15em 0.45em;
  border-radius: var(--radius-sm);
  margin-left: 0.35em;
  vertical-align: baseline;
}

/* Schnelleintrag auf der Aquarium-Startseite: eine Zeile mit je einer
   Schaltflaeche pro aktivem Becken. Kein Aufklappen – die Zeile ist kurz
   genug, dass sie die Eintraege darunter nicht verdraengt. */
.aquarium-quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}


/* Archivierte Becken: da, aber zurueckgenommen. */
.aquarium-archived-title {
  margin: 2rem 0 0.75rem;
  font-size: 1rem;
  color: var(--color-text-muted);
}

.aquarium-archived {
  opacity: 0.6;
}

.aquarium-archived-note {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.aquarium-log-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.aquarium-log-item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: box-shadow 0.15s, background 0.15s;
}

.aquarium-log-item:hover {
  box-shadow: var(--shadow-md);
}

.aquarium-log-date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.aquarium-log-tank {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.aquarium-log-body p {
  margin: 0 0 0.5rem 0;
}

.aquarium-log-body p:last-child {
  margin-bottom: 0;
}

.aquarium-log-actions {
  display: flex;
  justify-content: flex-end;
  font-size: 0.85rem;
}


.tour-map-container {
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 0;
}

.tour-map {
  width: 100%;
  height: 800px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow);
}

.tour-photo-marker {
  background: transparent;
  border: none;
}

.tour-photo-marker img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  object-fit: cover;
  display: block;
}

.tour-photo-marker {
  cursor: pointer;
}

.tours-map-container {
  margin-bottom: 1.5rem;
}

.tours-map-full {
  width: 100%;
  height: 70vh;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow);
}

.chart-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow);
  margin-bottom: 1rem;
}

.chart-card h3 {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.chart-total {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-tours);
}

.chart-container {
  position: relative;
  height: 200px;
}

.chart-container-chronicle {
  height: 300px;
}

/* ── Filter Buttons ────────────────────────────────────── */
.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin: 1.5rem 0;
}

.pagination-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
}

/* 40px Kantenlänge: mit dem Finger treffbar, und ‹ 1 … 4 5 6 … 18 › passt
   trotzdem in eine Zeile auf 390px. */
.pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

a.pagination-link:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  text-decoration: none;
}

.pagination-link.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.pagination-link.disabled {
  opacity: 0.4;
}

.pagination-gap {
  min-width: 1.25rem;
  text-align: center;
  color: var(--color-text-muted);
}

.pagination-summary {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.btn-filter {
  display: inline-flex;
  font-family: inherit;
  align-items: center;
  padding: 0.35rem 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn-filter:hover {
  border-color: var(--color-culture);
  background: var(--color-culture-light);
  color: var(--color-culture);
  text-decoration: none;
}

.btn-filter.active {
  background: var(--color-culture);
  border-color: var(--color-culture);
  color: #fff;
}

.btn-filter.active:hover {
  background: var(--color-culture-hover);
  border-color: var(--color-culture-hover);
  color: #fff;
}

.btn-filter.tours:hover {
  border-color: var(--color-tours);
  background: var(--color-tours-light);
  color: var(--color-tours);
}

.btn-filter.tours.active {
  background: var(--color-tours);
  border-color: var(--color-tours);
  color: #fff;
}

.btn-filter.tours.active:hover {
  background: var(--color-tours-hover);
  border-color: var(--color-tours-hover);
  color: #fff;
}

.btn-filter.habits:hover {
  border-color: var(--color-habits);
  background: var(--color-habits-light);
  color: var(--color-habits);
}

.btn-filter.habits.active {
  background: var(--color-habits);
  border-color: var(--color-habits);
  color: #fff;
}

.btn-filter.habits.active:hover {
  background: var(--color-habits-hover);
  border-color: var(--color-habits-hover);
  color: #fff;
}

/* ── Tour Filter Form ───────────────────────────────────── */
.tour-filter-form {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.tour-filter-form > summary {
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  list-style: none;
}

.tour-filter-form > summary::-webkit-details-marker {
  display: none;
}

.tour-filter-form > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.4rem;
  transition: transform 0.15s;
}

.tour-filter-form[open] > summary::before {
  transform: rotate(90deg);
}

.tour-filter-form[open] {
  padding-bottom: 0.85rem;
}

.tour-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items: end;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding: 0 0.85rem;
}


.tour-filter-field label {
  margin-bottom: 0.25rem;
}

.tour-filter-field--wide {
  grid-column: 1 / -1;
}

.tour-filter-range {
  display: flex;
  gap: 0.4rem;
}

.tour-filter-range input {
  min-width: 0;
}

.tour-filter-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.85rem;
}

.tour-filter-grid .people-toggle-grid {
  gap: 0.35rem;
}

.tour-filter-grid .people-toggle-btn {
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
}

/* ── Tabs ────────────────────────────────────────────────── */
.tabs {
  margin: 1rem 0 1.5rem;
}

.tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1.5rem;
}

.tab {
  background: none;
  border: none;
  padding: 0.6rem 1rem;
  cursor: pointer;
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 0.95rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

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

.tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.tab-panel {
  display: none;
}

/* Der Inhalt eines Tabs stand nackt auf dem Seitenhintergrund, während sonst
   überall Karten stehen – er bekommt dieselbe weiße Fläche. */
.tab-panel.active {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
}

.tab-panel > p:first-child {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--color-text-muted);
}

.preference-checkboxes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.25rem 1rem;
  margin-bottom: 1.25rem;
}

.preference-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.preference-checkbox:hover {
  background: var(--color-primary-light);
}

.preference-checkbox input {
  margin: 0;
}

/* ── Favorite Authors ────────────────────────────────────── */
.favorite-authors {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.favorite-author {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
}

.favorite-author-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.favorite-author-name {
  font-size: 1.1rem;
  margin: 0;
}

.favorite-author-meta {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.favorite-author-avg {
  font-weight: 600;
}

.favorite-author-books {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.favorite-author-books li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.favorite-author-book-year {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  min-width: 2.5rem;
}

/* ── Bookshelf ───────────────────────────────────────────── */
.container:has(.bookshelf) {
  max-width: 1400px;
}

.bookshelf-index {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* Kleine Abteilungen teilen sich eine Zeile, große nehmen die volle Breite
   und brechen innerhalb ihres Regals um. */
.bookshelf-sections {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

/* Die Bretter sind ein Hintergrund im Zeilenraster: jede Reihe ist genau
   --shelf-row hoch, darunter liegt im Zeilenabstand das Brett. So stimmt das
   Regal bei jeder Fensterbreite, ohne die Reihen serverseitig zu zählen. */
.bookshelf {
  --shelf-row: 220px;
  --shelf-board: 22px;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 14px solid #5a3519;
  border-top-width: 0;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  border-image: linear-gradient(135deg, #7a4a24, #4e2c13 40%, #6b3f1d 70%, #3f230f) 1;
  /* Der klebende Seitenkopf ist mit umbrechender Navigation höher als
     --header-height; die Sprungmarke soll das Schild nicht verdecken. */
  scroll-margin-top: 7rem;
}

.bookshelf-crown {
  margin: 0 -14px;
  padding: 10px 14px;
  text-align: center;
  font-size: 1rem;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 11px),
    linear-gradient(to bottom, #8a5528, #6b3f1d 60%, #4e2c13);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35);
}

.bookshelf-plaque {
  display: inline-block;
  padding: 0.2rem 0.9rem;
  border-radius: 3px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #3b2a12;
  background: linear-gradient(to bottom, #f3d98b, #c9a04a 55%, #a87f30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.5);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.bookshelf-rows {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  row-gap: var(--shelf-board);
  padding: 0 12px var(--shelf-board);
  background-color: #3a2213;
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.45) 0,
      transparent 16px,
      transparent calc(var(--shelf-row) - 30px),
      rgba(0, 0, 0, 0.35) var(--shelf-row),
      #c48b52 var(--shelf-row),
      #a46c38 calc(var(--shelf-row) + 4px),
      #8a5528 calc(var(--shelf-row) + 12px),
      #5e3618 calc(var(--shelf-row) + var(--shelf-board))
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 0 2px,
      transparent 2px 7px,
      rgba(0, 0, 0, 0.06) 7px 9px,
      transparent 9px 17px
    ),
    linear-gradient(90deg, #2c180c, #4a2c17 20%, #3d2412 55%, #4b2d18 80%, #2a170b);
  box-shadow: inset 0 8px 18px rgba(0, 0, 0, 0.5);
  flex: 1;
}

.bookshelf-slot {
  height: var(--shelf-row);
  display: flex;
  align-items: flex-end;
  margin-right: 2px;
}

/* Die Ebenen des Buchrückens liegen in Variablen, damit Zustände einzelne
   austauschen können, ohne die übrigen zu wiederholen. */
.book-spine {
  --spine-texture: linear-gradient(transparent, transparent);
  --spine-decor:
    linear-gradient(to bottom, transparent 14px, rgba(222, 184, 105, 0.75) 14px 16px, transparent 16px 19px, rgba(222, 184, 105, 0.75) 19px 20px, transparent 20px),
    linear-gradient(to top, transparent 14px, rgba(222, 184, 105, 0.75) 14px 16px, transparent 16px);
  --spine-gloss: linear-gradient(90deg, rgba(0, 0, 0, 0.35), rgba(255, 255, 255, 0.18) 28%, rgba(255, 255, 255, 0.04) 50%, rgba(0, 0, 0, 0.3));
  --spine-filter: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  box-sizing: border-box;
  width: var(--spine-width);
  height: var(--spine-height);
  padding: 10px 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  overflow: hidden;
  color: #f3e6c8;
  text-decoration: none;
  border-radius: 3px 3px 2px 2px;
  background-color: var(--spine-color);
  background-image: var(--spine-texture), var(--spine-decor), var(--spine-gloss);
  box-shadow: 2px 0 3px rgba(0, 0, 0, 0.45);
  filter: var(--spine-filter);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.book-spine:hover,
.book-spine:focus-visible {
  transform: rotate(180deg) translateY(10px);
  filter: var(--spine-filter) brightness(1.15);
  color: #fff6dc;
}

.book-spine:focus-visible {
  outline: 2px solid #f0c674;
  outline-offset: 2px;
}

.book-spine-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.1;
  /* Zwei Zeilen über die Blockgröße statt line-clamp: WebKit legt
     display: -webkit-box quer und ignoriert die senkrechte Schreibrichtung. */
  max-block-size: 2.2em;
  overflow: hidden;
  min-height: 0;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.book-spine-author {
  flex-shrink: 0;
  margin-inline-start: auto;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
  white-space: nowrap;
  max-height: 32%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Quer im unteren Zierfeld; die eigene Drehung hebt die des Rückens auf. */
.book-spine-stars {
  position: absolute;
  top: 11px;
  left: 0;
  right: 0;
  writing-mode: horizontal-tb;
  transform: rotate(180deg);
  text-align: center;
  font-size: 7px;
  line-height: 1;
  color: #f4d27a;
  text-shadow: 0 0 3px rgba(244, 210, 122, 0.7);
}

/* Lesezeichen: rotate(180deg) dreht den Rücken, deshalb sitzt „oben" am
   Element-Ende. */
.book-spine--reading {
  overflow: visible;
}

.book-spine--reading::after {
  content: "";
  position: absolute;
  bottom: -14px;
  left: 30%;
  width: 7px;
  height: 22px;
  background: #c0392b;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%);
}

/* Hoch bewertet: Ledereinband mit erhabenen Bünden und Goldprägung. */
.book-spine--acclaimed {
  --spine-texture:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.08) 0 1px, transparent 1px 4px);
  --spine-decor:
    linear-gradient(to bottom, transparent 3px, rgba(0, 0, 0, 0.35) 3px 4px, rgba(255, 255, 255, 0.22) 4px 6px, rgba(0, 0, 0, 0.35) 6px 7px, transparent 7px 22px, #d9b25c 22px 25px, transparent 25px 27px, #d9b25c 27px 28px, transparent 28px),
    linear-gradient(to top, transparent 8px, rgba(0, 0, 0, 0.35) 8px 9px, rgba(255, 255, 255, 0.22) 9px 11px, rgba(0, 0, 0, 0.35) 11px 12px, transparent 12px 16px, #d9b25c 16px 19px, transparent 19px 21px, #d9b25c 21px 22px, transparent 22px);
  padding: 34px 0 26px;
  color: #f2d27e;
  box-shadow:
    inset 0 0 0 1px rgba(217, 178, 92, 0.45),
    3px 0 5px rgba(0, 0, 0, 0.6);
}

.book-spine--acclaimed .book-spine-title {
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7), 0 0 1px rgba(242, 210, 126, 0.6);
}

.book-spine--masterpiece {
  --spine-filter: drop-shadow(0 0 6px rgba(244, 200, 110, 0.55));
}

.book-spine--masterpiece .book-spine-title {
  font-size: 0.86rem;
}

/* Abgebrochen: verblichen, fleckig, mit Knick und ausgefranster Oberkante. */
.book-spine--abandoned {
  --spine-texture:
    radial-gradient(ellipse 60% 18% at 40% 35%, rgba(70, 45, 20, 0.4), transparent 70%),
    radial-gradient(ellipse 45% 10% at 65% 72%, rgba(70, 45, 20, 0.3), transparent 70%),
    linear-gradient(to bottom, transparent 54%, rgba(0, 0, 0, 0.45) 54% 55%, rgba(255, 255, 255, 0.18) 55% 56%, transparent 56%),
    repeating-linear-gradient(115deg, transparent 0 17px, rgba(255, 255, 255, 0.07) 17px 18px);
  --spine-decor:
    linear-gradient(to bottom, transparent 14px, rgba(160, 140, 100, 0.35) 14px 16px, transparent 16px),
    linear-gradient(to top, transparent 14px, rgba(160, 140, 100, 0.35) 14px 16px, transparent 16px);
  --spine-filter: sepia(0.55) saturate(0.45) brightness(0.78) contrast(0.9);
  color: #cfc4aa;
  clip-path: polygon(0 0, 100% 0, 100% 96%, 86% 99%, 72% 95.5%, 55% 100%, 38% 96%, 20% 98.5%, 0 95%);
}

.book-spine--abandoned .book-spine-title {
  text-shadow: none;
  opacity: 0.85;
}

.bookshelf-slot:has(.book-spine--leaning) {
  transform: rotate(3deg);
  transform-origin: bottom right;
  margin-right: 12px;
}

/* ── Book desk ───────────────────────────────────────────── */
/* Die Detailseite zeigt das Buch auf einem Schreibtisch aus dem Holz des
   Regals: links der Band, rechts eine Karteikarte. Karte und Holz bringen
   ihre Farben selbst mit und bleiben im Dark Mode gleich, wie Papier. */
.book-desk {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 2rem;
  padding: 2rem 1.75rem;
  margin-bottom: 1.25rem;
  border-radius: 6px;
  background-color: #8a5a32;
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0 calc(25% - 2px),
      rgba(40, 20, 8, 0.45) calc(25% - 2px) 25%
    ),
    repeating-linear-gradient(
      178deg,
      rgba(255, 255, 255, 0.04) 0 2px,
      transparent 2px 9px,
      rgba(0, 0, 0, 0.07) 9px 11px,
      transparent 11px 23px
    ),
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(255, 220, 170, 0.18), transparent 70%),
    linear-gradient(100deg, #7a4a24, #9b6a3c 35%, #85532b 65%, #6b3f1d);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.25),
    inset 0 -6px 0 #5e3618,
    0 10px 24px rgba(0, 0, 0, 0.3);
}

.book-desk-volume {
  position: relative;
  transform: rotate(-3deg);
  margin-top: 0.5rem;
}

/* Die gestaffelten Schatten rechts unten sind der Buchblock. */
.book-desk-cover {
  display: block;
  width: 170px;
  height: auto;
  border-radius: 2px 5px 5px 2px;
  box-shadow:
    inset 4px 0 6px rgba(0, 0, 0, 0.35),
    2px 2px 0 #efe6d2,
    4px 4px 0 #d8ccb2,
    5px 5px 0 #b8a988,
    10px 16px 20px rgba(0, 0, 0, 0.55);
}

.book-desk-cover--plain {
  aspect-ratio: 2 / 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 1.75rem 1rem 1.25rem 1.25rem;
  color: #f2d27e;
  font-family: Georgia, "Times New Roman", serif;
  text-align: center;
  background-color: var(--spine-color);
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0 6px, rgba(255, 255, 255, 0.12) 6px 8px, transparent 8px),
    linear-gradient(to bottom, transparent 10px, rgba(217, 178, 92, 0.7) 10px 11px, transparent 11px calc(100% - 11px), rgba(217, 178, 92, 0.7) calc(100% - 11px) calc(100% - 10px), transparent 0);
}

.book-desk-cover-title {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

.book-desk-cover-author {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

/* Lesezeichen, solange ein Lesevorgang offen ist. */
.book-desk-volume--reading::after {
  content: "";
  position: absolute;
  bottom: -22px;
  left: 62%;
  width: 10px;
  height: 34px;
  background: linear-gradient(90deg, #a5281d, #c0392b 50%, #a5281d);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}

.book-desk-card {
  --card-ink: #2d2a26;
  --card-muted: #7a6c58;
  --card-link: #8a4b14;
  position: relative;
  min-width: 0;
  padding: 1.25rem 1.5rem 1rem;
  color: var(--card-ink);
  border-radius: 3px;
  background: #fbf6ea;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    3px 6px 14px rgba(0, 0, 0, 0.4);
  transform: rotate(0.6deg);
  overflow-wrap: anywhere;
}

.book-desk-card a:not(.btn-destroy) {
  color: var(--card-link);
}

.book-desk-card .search-link {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--card-muted);
}

.book-desk-head {
  padding: 0 7.5rem 0.75rem 0;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid rgba(192, 57, 43, 0.45);
}

.book-desk-title {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--card-ink);
}

.book-desk-author {
  margin: 0.15rem 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  color: var(--card-muted);
}

.book-desk-rating {
  display: inline-block;
  margin-top: 0.15rem;
}

.book-desk-card .rating-stars {
  color: #c08a1e;
}

.book-desk-stamp {
  --stamp: #6b5d48;
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.15rem 0.55rem;
  border: 2px solid var(--stamp);
  border-radius: 4px;
  color: var(--stamp);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: rotate(-6deg);
  opacity: 0.8;
}

.book-desk-stamp--reading { --stamp: #2f6b3f; }
.book-desk-stamp--read { --stamp: #1f4f7a; }
.book-desk-stamp--abandoned { --stamp: #9c3d2c; }

.book-desk-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 0.5rem 1rem;
  margin: 0 0 0.75rem;
}

.book-desk-facts dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--card-muted);
}

.book-desk-facts dd {
  margin: 0;
  font-size: 0.9rem;
}

.book-desk-tags {
  margin: 0 0 0.5rem;
}

.book-desk-section {
  padding-top: 0.6rem;
  margin-top: 0.6rem;
  border-top: 1px dashed rgba(0, 0, 0, 0.15);
}

.book-desk-section h2 {
  margin: 0 0 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--card-muted);
}

.book-desk-section h2 .inline-actions {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

.book-desk-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.book-desk-section li {
  padding: 0.15rem 0;
  font-size: 0.9rem;
}

.book-desk-empty {
  margin: 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--card-muted);
}

@media (max-width: 640px) {
  .book-desk {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 1.75rem;
    padding: 1.5rem 1rem;
  }

  .book-desk-cover {
    width: 110px;
  }

  .book-desk-card {
    justify-self: stretch;
    transform: none;
    padding: 1rem;
  }

  .book-desk-head {
    padding-right: 0;
  }

  .book-desk-stamp {
    position: static;
    display: inline-block;
    margin-bottom: 0.5rem;
  }
}

/* Ab vier Sternen liegt das Buch auf einer Schreibunterlage aus Leder mit
   Goldprägung, ohne Cover bekommt es selbst den Ledereinband aus dem Regal. */
.book-desk-pad {
  position: relative;
}

.book-desk--acclaimed .book-desk-pad {
  padding: 1.4rem 1.6rem 1.8rem;
  border-radius: 4px;
  background-color: #1f3a2c;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.1) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 35% 30%, rgba(255, 255, 255, 0.08), transparent 65%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.4),
    inset 0 0 22px rgba(0, 0, 0, 0.5),
    2px 5px 12px rgba(0, 0, 0, 0.45);
}

.book-desk--acclaimed .book-desk-pad::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(217, 178, 92, 0.75);
  outline: 1px solid rgba(217, 178, 92, 0.4);
  outline-offset: 3px;
  border-radius: 2px;
  pointer-events: none;
}

.book-desk--acclaimed .book-desk-cover--plain {
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.08) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0 6px, rgba(255, 255, 255, 0.12) 6px 8px, transparent 8px),
    linear-gradient(to bottom, transparent 10px, #d9b25c 10px 12px, transparent 12px 14px, #d9b25c 14px 15px, transparent 15px calc(100% - 15px), #d9b25c calc(100% - 15px) calc(100% - 14px), transparent calc(100% - 14px) calc(100% - 12px), #d9b25c calc(100% - 12px) calc(100% - 10px), transparent 0);
  box-shadow:
    inset 0 0 0 1px rgba(217, 178, 92, 0.45),
    inset 4px 0 6px rgba(0, 0, 0, 0.35),
    2px 2px 0 #efe6d2,
    4px 4px 0 #d8ccb2,
    5px 5px 0 #b8a988,
    10px 16px 20px rgba(0, 0, 0, 0.55);
}

.book-desk--masterpiece .book-desk-volume {
  filter: drop-shadow(0 0 10px rgba(244, 200, 110, 0.55));
}

/* Die Nachbarn aus der Abteilung: eine Reihe, verkleinert, das aufgerufene
   Buch in der Mitte. Reicht die Breite nicht, schneidet center beide Ränder
   gleich ab, so bleibt das aktuelle Buch sichtbar. */
.bookshelf--neighbours {
  margin-bottom: 1.5rem;
}

.bookshelf--neighbours .bookshelf-plaque {
  text-decoration: none;
}

.bookshelf--neighbours .bookshelf-rows {
  flex-wrap: nowrap;
  justify-content: center;
  overflow: hidden;
  zoom: 0.75;
}

.book-spine--current {
  transform: rotate(180deg) translateY(16px);
  box-shadow:
    0 0 0 2px #f0c674,
    0 0 12px rgba(240, 198, 116, 0.6);
}

@media (max-width: 640px) {
  .bookshelf {
    scroll-margin-top: 12.5rem;
  }

  .bookshelf--neighbours .bookshelf-rows {
    zoom: 0.6;
  }

  .book-desk--acclaimed .book-desk-pad {
    padding: 1rem 1.2rem 1.4rem;
  }
}

/* ── Utilities ───────────────────────────────────────────── */
.mt-2 {
  margin-top: 1.5rem;
}

.mt-3 {
  margin-top: 2.25rem;
}

.mb-2 {
  margin-bottom: 1.5rem;
}

.text-muted {
  color: var(--color-text-muted);
}

.text-sm {
  font-size: 0.85rem;
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 1.5rem 0;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .home-grid {
    grid-template-columns: 1fr;
  }

  .home-grid .section-card + .section-card {
    margin-top: 1.5rem;
  }
}

@media (max-width: 600px) {
  .container {
    padding: 1rem 0.75rem;
  }

  .section-card {
    padding: 1rem;
  }

  /* Wrap instead of stack — avatar + name + button stay on row 1,
     meta info (last-seen / todo-meta) wraps to row 2 */
  .interactions .interaction,
  .people .person,
  .todos .todo {
    flex-wrap: wrap;
    column-gap: 0.5rem;
    row-gap: 0.15rem;
  }

  .cultural-memory-item,
  .tour-item {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Das Datum steht in einer eigenen Zeile über dem Eintrag, damit der Titel
     die volle Breite bekommt. */
  .cultural-memory-item .cultural-memory-date {
    order: -1;
    flex: 0 0 100%;
    font-size: 0.75rem;
  }

  /* Die Kennzahlen sind zusammen breiter als ein Handy und brechen deshalb
     unter dem Titel um. Das Raster hält Titel und Kennzahlen an einer
     gemeinsamen linken Kante neben dem Foto. */
  .tour-list-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: 0.75rem;
    row-gap: 0.35rem;
  }

  .tour-list-item .tour-cover-thumb {
    grid-row: span 2;
  }

  .tour-list-item .tour-meta {
    grid-column: 2;
    flex-wrap: wrap;
    gap: 0.15rem 0.75rem;
  }

  /* Bewertung und Button rutschen in die Zeile unter dem Titel. */
  .cultural-memory-item .book-main {
    flex: 1 1 60%;
  }

  /* „in etwa einem Monat (Montag, 02.11.2026)“ passt nicht neben den Titel. */
  .parent-picker .parent-picker-option {
    flex-wrap: wrap;
  }

  .parent-picker .parent-picker-title {
    flex-basis: 0;
  }

  .parent-picker .parent-picker-due {
    flex-basis: 100%;
    padding-left: 1.4rem;
  }

  /* Meta wraps to its own row below */
  .last-seen {
    order: 1;
    flex: 0 0 100%;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 0.35rem;
    font-size: 0.75rem;
  }

  .todo-meta {
    order: 1;
    flex: 0 0 100%;
    text-align: left;
  }

  /* Auf dem Handy ueberladen die Prio- (H/M/N) und Verschiebe-Buttons
     (+1d, →Mo, Verschieben) die schmale Zeile und machen die Liste
     unbrauchbar – daher ausblenden. Aendern geht weiter ueber die Detailseite; "Done"
     bleibt zum schnellen Abhaken erhalten. Haupt-Todos bringen sie stattdessen
     im „⋯“-Menü mit (.todo-row-menu), „Verschieben“ steht direkt daneben
     (.todo-row-move). */
  .todos .todo-priority-buttons:not(.todo-row-actions *),
  .todos .btn-postpone:not(.todo-row-menu *, .todo-row-move *) {
    display: none;
  }

  /* Die Buttons der Detailseite brauchen den engeren Abstand, damit mehr
     von ihnen in eine Zeile passen. */
  .todo-show .actions {
    gap: 0.5rem;
  }

  .habits-list .habit-item {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .section-card .people .person:hover,
  .section-card .todos .todo:hover,
  .section-card .habits-list .habit-item:hover {
    margin: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  form {
    max-width: 100%;
  }

  h1 {
    font-size: 1.5rem;
  }
}

/* ── Keyboard Shortcut Help Overlay ─────────────────────── */
#keyboard-shortcut-help {
  position: fixed;
  inset: 0;
  background: rgba(45, 42, 38, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1rem;
}

.keyboard-shortcut-modal {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 2rem;
  max-width: 520px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
}

.keyboard-shortcut-modal h2 {
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
}

.shortcut-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.shortcut-section h3 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.shortcut-section dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.75rem;
  align-items: center;
}

.shortcut-section dt {
  display: flex;
  gap: 0.25rem;
  justify-content: flex-end;
}

.shortcut-section dd {
  font-size: 0.875rem;
  color: var(--color-text);
}

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: 0.15rem 0.4rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text);
  box-shadow: 0 1px 0 rgba(45, 42, 38, 0.1);
}

@media (max-width: 1024px) {
  .header .content {
    flex-wrap: wrap;
  }

  .header .logo {
    order: 1;
  }

  .header .signin {
    order: 2;
    margin-left: auto;
  }

  .header-nav {
    order: 3;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0.875rem;
    padding-top: 0.5rem;
  }
}

@media (max-width: 600px) {
  .shortcut-columns {
    grid-template-columns: 1fr;
  }
}

/* ── Tour Photos & Lightbox ──────────────────────────────── */
.tour-header {
  margin-bottom: 1rem;
}

.tour-header-meta {
  margin: 0 0 0.25rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tour-header-meta .tour-activity-badge {
  margin-left: 0;
}

.tour-header-name {
  margin: 0;
}

.tour-header-regions {
  margin: 0.4rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tour-region-chip {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.15em 0.55em;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  text-decoration: none;
}

.tour-region-chip:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

dl.tour-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.tour-stat {
  min-width: 0;
}

.tour-stat-label {
  display: block;
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.15rem;
}

.tour-stat-value {
  display: block;
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  word-break: break-word;
}

@media (min-width: 600px) {
  dl.tour-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.tour-cover-photo {
  margin-bottom: 1rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.tour-cover-photo-image {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  display: block;
}

.tour-cover-thumb {
  flex: none;
}

.tour-cover-thumb-image {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}

.tour-route-thumb {
  background: var(--color-tours-light);
  color: var(--color-tours);
  padding: 2px;
}

.tour-cover-thumb-placeholder {
  background: var(--color-tours-light);
}

.tour-photo-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tour-photo-thumb-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.tour-photo-thumb-item.is-cover .tour-photo-thumb {
  outline: 3px solid var(--color-tours);
  outline-offset: -3px;
}

.tour-photo-cover-badge {
  font-size: 0.75rem;
  color: var(--color-tours);
  font-weight: 600;
}

.tour-photo-thumb {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.tour-photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.tour-photo-gallery-item {
  display: block;
  cursor: zoom-in;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.tour-photo-gallery-image {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}

.tour-photo-gallery-item:hover .tour-photo-gallery-image {
  transform: scale(1.04);
}

body.lightbox-open {
  overflow: hidden;
}

.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 2rem;
}

.lightbox-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
}

.lightbox-close {
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.75rem;
}

.lightbox-prev,
.lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  font-size: 2rem;
}

.lightbox-prev {
  left: 1rem;
}

.lightbox-next {
  right: 1rem;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255, 255, 255, 0.3);
}

.lightbox-counter {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.85rem;
}

/* Auf Touch-Geräten gibt es kein Hover: größere Flächen zum Tippen. */
@media (pointer: coarse) {
  .lightbox-close {
    width: 3rem;
    height: 3rem;
  }

  .lightbox-prev,
  .lightbox-next {
    width: 3.5rem;
    height: 3.5rem;
  }
}

/* ── Interaction Preparation ─────────────────────────────── */
.prepare-history {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.prepare-history-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

/* Bearbeiten steht neben dem Titel: Mit langer Historie laege es unten
   ausser Sicht. */
.prepare-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
}

/* Die Avatare laufen im Fliesstext mit, statt eine eigene Zeile aufzumachen. */
.prepare .people-avatars {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 0.25rem;
}

.prepare-history-note {
  white-space: pre-wrap;
  line-height: 1.6;
}

.journal-anniversary {
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
  margin-bottom: 2rem;
}

.journal-anniversary h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}

.journal-anniversary-date {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.journal-section {
  margin-bottom: 1.5rem;
}

.journal-section h2 {
  margin: 0 0 0.5rem;
}

.journal-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin: 0;
  padding: 1rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.journal-trend-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.25rem;
}

.journal-trend-box h2 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.journal-trend-box-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.journal-trend-box-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.journal-trend-box-card.wide {
  grid-column: span 2;
}

.journal-trend-box-card.trend-warn {
  border-left: 3px solid var(--color-error);
  padding-left: calc(0.8rem - 3px);
}

.journal-trend-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.journal-trend-box-label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.journal-trend-box-period {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.2;
}

.journal-trend-box-sparkline {
  height: 56px;
  position: relative;
}

.journal-trend-box-chart {
  height: 180px;
  position: relative;
}

a.journal-memory-card {
  color: inherit;
  text-decoration: none;
}

a.journal-memory-card:hover {
  background: var(--color-surface-2, rgba(0, 0, 0, 0.03));
}

.journal-memory-card-date {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.journal-memory-card-body {
  font-size: 0.85rem;
  line-height: 1.35;
  word-break: break-word;
}

@media (min-width: 600px) {
  .journal-trend-box-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .journal-trend-box-card.wide {
    grid-column: span 4;
  }
}

.journal-stat {
  min-width: 0;
}

.journal-stat-label {
  display: block;
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.15rem;
}

.journal-stat-value {
  display: block;
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  word-break: break-word;
}

.journal-stat-note {
  margin-top: 0.25rem;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.4;
}

.journal-stat-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.journal-stat-list li + li {
  margin-top: 0.25rem;
}

.journal-stat-list-inline {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
}

.journal-stat-list-inline li + li {
  margin-top: 0;
}

@media (min-width: 600px) {
  .journal-stats {
    grid-template-columns: repeat(4, 1fr);
  }

  .journal-stat-wide {
    grid-column: span 2;
  }
}

/* ── Todo Categories ────────────────────────────────────── */
.category-badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

/* CulturalMemory#category ist ein freier Text ohne hinterlegte Farbe. Statt der
   weissen Schrift der Kategorie-Badges traegt es die Farben der Kultur-Sektion,
   die in jedem Theme genug Kontrast zueinander haben. */
.cultural-memory-badge {
  background: var(--color-culture-light);
  color: var(--color-culture-hover);
}

.category-swatch {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  margin-right: 0.35rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.people-toggle-btn.category-toggle:hover {
  border-color: var(--category-color, var(--color-primary));
  background: color-mix(in srgb, var(--category-color, var(--color-primary)) 12%, transparent);
}

.people-toggle-btn.category-toggle.selected,
.people-toggle-btn.category-toggle.selected:hover {
  background: var(--category-color, var(--color-primary));
  border-color: var(--category-color, var(--color-primary));
  color: #fff;
}

.people-toggle-btn.category-toggle.selected .category-swatch {
  border-color: rgba(255, 255, 255, 0.6);
}

.btn-filter.category-filter:hover {
  border-color: var(--category-color, var(--color-primary));
  background: color-mix(in srgb, var(--category-color, var(--color-primary)) 14%, transparent);
  color: var(--color-text);
}

.btn-filter.category-filter.active,
.btn-filter.category-filter.active:hover {
  background: var(--category-color, var(--color-primary));
  border-color: var(--category-color, var(--color-primary));
  color: #fff;
}

.category-inline-form {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.category-inline-form[hidden] {
  display: none;
}

.category-inline-form input[type="text"] {
  flex: 1;
  min-width: 8rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.category-inline-form input[type="color"] {
  width: 2.5rem;
  height: 2.2rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
}

.btn-small {
  padding: 0.4rem 0.75rem;
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  cursor: pointer;
}

.btn-small:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn-link {
  background: none;
  border: none;
  padding: 0.3rem 0;
  margin-top: 0.4rem;
  color: var(--color-primary);
  font-size: 0.875rem;
  cursor: pointer;
}

.btn-link:hover {
  text-decoration: underline;
}

.form-error {
  flex-basis: 100%;
  color: var(--color-error);
  font-size: 0.8125rem;
}

.categories-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.category-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.category-row .category-count {
  color: var(--color-text-muted, #888);
  font-size: 0.8125rem;
}

.category-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
}

.btn-link.danger {
  color: var(--color-error);
}

/* ── Kalender ─────────────────────────────────────────────── */
.calendar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.calendar-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.calendar-title {
  flex: 1 1 100%;
  order: -1;
  font-size: 1.25rem;
  margin: 0;
}

.calendar-nav {
  display: inline-flex;
  gap: 0.25rem;
}

.calendar-nav-btn {
  min-width: 2.25rem;
  text-align: center;
}

.calendar-views {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

/* Nur die gewählte Ansicht trägt die Primärfarbe, die übrigen treten zurück. */
.calendar-view-btn {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.calendar-view-btn:hover {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

.calendar-view-btn.is-active,
.calendar-view-btn.is-active:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.calendar-new-btn {
  margin-left: auto;
}

/* Wochentags-Spalten (Tag, 3 Tage, Woche) */
.calendar-columns {
  display: grid;
  gap: 0.5rem;
}

.calendar-columns--tag {
  grid-template-columns: 1fr;
}

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

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

/* Tablet quer: Woche in zwei Reihen (4 + 3), bleibt als Raster lesbar. */
@media (max-width: 1024px) {
  .calendar-columns--woche {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Tablet hoch / kleine Geräte: 3 Tage nebeneinander, Woche in zwei Spalten. */
@media (max-width: 760px) {
  .calendar-columns--woche {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

/* Handy: alles gestapelt. */
@media (max-width: 520px) {
  .calendar-columns--woche,
  .calendar-columns--drei {
    grid-template-columns: 1fr;
  }
}

.calendar-day {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.calendar-day.is-today {
  border-color: var(--color-primary);
  box-shadow: inset 0 2px 0 var(--color-primary);
}

.calendar-day-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.25rem;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-text);
}

.calendar-day-weekday {
  font-weight: 600;
  font-size: 0.85rem;
}

.calendar-day-date {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.calendar-day-items {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.4rem;
}

.calendar-empty {
  color: var(--color-text-muted);
  text-align: center;
  font-size: 0.85rem;
}

.cal-item {
  display: flex;
  gap: 0.35rem;
  align-items: baseline;
  padding: 0.25rem 0.4rem;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--cal-color, var(--color-primary));
  background: var(--color-bg);
  text-decoration: none;
  color: var(--color-text);
  font-size: 0.82rem;
  min-width: 0;
}

.cal-item:hover {
  background: var(--color-primary-light);
}

.cal-item-time {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  flex: 0 0 auto;
}

.cal-item-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-item-span,
.cal-event-span,
.calendar-event-span {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  font-size: 0.9em;
  white-space: nowrap;
}

/* Die Avatar-Reihe schiebt sich ans Zeilenende, damit der Titel weiter links
   bündig steht und beim Kürzen als erstes nachgibt. Die Zeilen richten sich an
   der Baseline aus – die Bilder brauchen deshalb ihre eigene Ausrichtung. */
.cal-item .people-avatars,
.cal-event .people-avatars {
  margin-left: auto;
  align-self: center;
}

.cal-item .people-avatars {
  gap: 0.15rem;
}

.cal-event .people-avatars {
  gap: 0.1rem;
}

.cal-item--event { --cal-color: var(--color-primary); }
.cal-item--habit { --cal-color: var(--color-habits); }
.cal-item--todo { --cal-color: var(--color-todos); }
.cal-item--cultural_memory { --cal-color: var(--color-culture); }
.cal-item--interaction { --cal-color: var(--color-interactions); }
.cal-item--appointment { --cal-color: var(--color-error); }

/* Kalender-Filter: ausgeblendete Kategorien (Klasse am Wrapper).
   Nur echte Kalender-Items (.cal-item / .cal-event / .cal-block / .cal-ink)
   ausblenden – die Filter-Pills tragen zwar cal-item--<kind> (für die
   Punktfarbe), aber keine dieser Klassen und bleiben so sichtbar. */
.cal-filter-hide-event .cal-item.cal-item--event,
.cal-filter-hide-event .cal-event.cal-item--event,
.cal-filter-hide-habit .cal-item.cal-item--habit,
.cal-filter-hide-habit .cal-event.cal-item--habit,
.cal-filter-hide-todo .cal-item.cal-item--todo,
.cal-filter-hide-todo .cal-event.cal-item--todo,
.cal-filter-hide-cultural_memory .cal-item.cal-item--cultural_memory,
.cal-filter-hide-cultural_memory .cal-event.cal-item--cultural_memory,
.cal-filter-hide-interaction .cal-item.cal-item--interaction,
.cal-filter-hide-interaction .cal-event.cal-item--interaction,
.cal-filter-hide-appointment .cal-item.cal-item--appointment,
.cal-filter-hide-appointment .cal-event.cal-item--appointment,
.cal-filter-hide-event .cal-block.cal-item--event,
.cal-filter-hide-event .cal-ink.cal-item--event,
.cal-filter-hide-habit .cal-block.cal-item--habit,
.cal-filter-hide-habit .cal-ink.cal-item--habit,
.cal-filter-hide-todo .cal-block.cal-item--todo,
.cal-filter-hide-todo .cal-ink.cal-item--todo,
.cal-filter-hide-cultural_memory .cal-block.cal-item--cultural_memory,
.cal-filter-hide-cultural_memory .cal-ink.cal-item--cultural_memory,
.cal-filter-hide-interaction .cal-block.cal-item--interaction,
.cal-filter-hide-interaction .cal-ink.cal-item--interaction,
.cal-filter-hide-appointment .cal-block.cal-item--appointment,
.cal-filter-hide-appointment .cal-ink.cal-item--appointment {
  display: none;
}

.calendar-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  margin-bottom: 1rem;
}

.calendar-filter-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: 0.82rem;
  cursor: pointer;
  user-select: none;
}

.calendar-filter-item:has(input:not(:checked)) {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.calendar-filter-item input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.calendar-filter-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--cal-color, var(--color-primary));
  flex: 0 0 auto;
}

.calendar-filter-item:has(input:not(:checked)) .calendar-filter-dot {
  background: var(--color-text-muted);
}

.calendar-filter-item:focus-within {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* Monatsgitter */
/* 1fr ohne feste Gesamthöhe macht jede Wochenzeile so hoch wie die höchste. */
.calendar-month {
  display: grid;
  grid-template-rows: auto;
  grid-auto-rows: 1fr;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.calendar-month-head,
.calendar-month-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-month-weekday {
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}

.calendar-month-cell {
  min-height: 6.5rem;
  min-width: 0;
  padding: 0.3rem;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.calendar-month-cell.is-outside {
  background: var(--color-bg);
  color: var(--color-text-muted);
}

.calendar-month-cell.is-today {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.calendar-month-daynum {
  font-size: 0.8rem;
  text-decoration: none;
  color: inherit;
  align-self: flex-start;
}

.calendar-month-items {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  align-content: flex-start;
}

.cal-event {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  padding: 0.1rem 0.3rem;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--cal-color, var(--color-primary));
  background: color-mix(in srgb, var(--cal-color, var(--color-primary)) 14%, transparent);
  color: var(--color-text);
  font-size: 0.72rem;
  line-height: 1.25;
  text-decoration: none;
}

.cal-event:hover {
  background: color-mix(in srgb, var(--cal-color, var(--color-primary)) 24%, transparent);
}

.cal-event-time {
  font-weight: 600;
  color: var(--cal-color, var(--color-primary));
  flex-shrink: 0;
}

.cal-event-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 800px) {
  .calendar-month-cell {
    min-height: 4.5rem;
  }
}

/* Balken für mehrtägige Termine. Tage und Balken teilen sich ein Raster: Jeder
   Tag spannt über alle Zeilen und reicht sie per Subgrid an Kopf und Einträge
   weiter, die Balken liegen in den Bahnen dazwischen. Die Tage brauchen eine
   feste Spalte, sonst weicht die Auto-Platzierung den Balken aus. */
.calendar-month-row {
  grid-template-rows: var(--span-rows);
  row-gap: 0.15rem;
}

.calendar-month-cell {
  grid-column: var(--column);
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  /* Ohne feste Spalte wächst die auto-Spur auf die Breite ungekürzter Titel. */
  grid-template-columns: minmax(0, 1fr);
}

.calendar-month-daynum {
  justify-self: start;
}

.calendar-month-items {
  grid-row: -2 / -1;
}

/* Deckend, damit die Zellränder nicht durch den Balken laufen. */
.cal-span {
  position: relative;
  min-width: 0;
  margin-inline: 0.3rem;
  background: color-mix(in srgb, var(--cal-color, var(--color-primary)) 14%, var(--color-surface));
}

.cal-span:hover {
  background: color-mix(in srgb, var(--cal-color, var(--color-primary)) 24%, var(--color-surface));
}

.cal-span.is-continued-before {
  margin-left: 0;
  border-left-width: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.cal-span.is-continued-after {
  margin-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Die Woche bricht unter dieser Breite auf weniger Spalten um; dann stehen
   mehrtägige Termine wieder einzeln an jedem Tag. */
@media (min-width: 1025px) {
  .calendar-columns--woche {
    grid-template-rows: var(--span-rows);
    row-gap: 0.2rem;
  }

  .calendar-columns--woche > .calendar-day {
    grid-column: var(--column);
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
  }

  .calendar-columns--woche > .calendar-day > .calendar-day-items {
    grid-row: -2 / -1;
  }

  .calendar-columns--woche .cal-item.is-spanned {
    display: none;
  }

  .calendar-columns--woche > .cal-span {
    margin-inline: 0.4rem;
    font-size: 0.8rem;
  }

  .calendar-columns--woche > .cal-span.is-continued-before {
    margin-left: 0;
  }

  .calendar-columns--woche > .cal-span.is-continued-after {
    margin-right: 0;
  }
}

@media (max-width: 1024px) {
  .calendar-columns--woche > .cal-span {
    display: none;
  }
}

/* Darstellung: Liste/Zeitachse bzw. Raster/Wand, als Segment zusammengezogen. */
.calendar-styles {
  display: inline-flex;
}

.calendar-style-btn {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 0;
  margin-left: -1px;
}

.calendar-style-btn:first-child {
  margin-left: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.calendar-style-btn:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.calendar-style-btn:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.calendar-style-btn.is-active,
.calendar-style-btn.is-active:hover {
  position: relative;
  background: var(--color-text);
  color: var(--color-surface);
  border-color: var(--color-text);
}

/* ── Zeitachse ─────────────────────────────────────────────── */
/* Die Woche bleibt auch auf dem Handy ein Raster und scrollt dann seitlich. */
.cal-timeline-scroll {
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.cal-timeline {
  --hour: 46px;
  --minute: calc(var(--hour) / 60);
  display: grid;
  grid-template-columns: 3.2rem repeat(var(--days), minmax(0, 1fr));
}

.cal-timeline--woche {
  min-width: 760px;
}

.cal-timeline-corner,
.cal-timeline-head {
  border-bottom: 1px solid var(--color-border);
}

.cal-timeline-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.55rem 0.5rem 0.45rem;
  border-left: 1px solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
}

.cal-timeline-daynum {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  flex: 0 0 auto;
  border-radius: 50%;
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cal-timeline-weekday {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.cal-timeline-booked {
  margin-left: auto;
  font-size: 0.68rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.cal-timeline-head.is-today .cal-timeline-daynum {
  background: var(--color-primary);
  color: #fff;
}

.cal-timeline-head.is-today .cal-timeline-weekday {
  color: var(--color-primary);
}

.cal-timeline-head.is-past .cal-timeline-daynum {
  font-weight: 500;
  color: var(--color-text-muted);
}

.cal-timeline-allday-label {
  padding: 0.45rem 0.4rem 0 0;
  text-align: right;
  font-size: 0.62rem;
  color: var(--color-text-muted);
  border-bottom: 2px solid var(--color-border);
}

/* dense: Ganztägiges rückt in die oberste freie Zeile seiner Spalte. */
.cal-timeline-allday {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(var(--days), minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: 3px 0;
  min-height: 1.9rem;
  padding: 4px 0;
  border-bottom: 2px solid var(--color-border);
}

.cal-timeline-allday > .cal-event {
  min-width: 0;
  margin-inline: 4px;
  font-size: 0.74rem;
}

.cal-timeline-allday > .cal-span {
  margin-inline: 4px;
}

.cal-timeline-allday > .cal-span.is-continued-before {
  margin-left: 0;
}

.cal-timeline-allday > .cal-span.is-continued-after {
  margin-right: 0;
}

/* Todos ohne Uhrzeit sind noch offen: gestrichelt statt gefüllt. */
.cal-timeline-allday > .cal-item--todo {
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--cal-color) 60%, transparent);
}

.cal-timeline-axis {
  position: relative;
  height: calc((var(--last-hour) - var(--first-hour)) * var(--hour));
}

.cal-timeline-axis span {
  position: absolute;
  right: 0.4rem;
  top: calc((var(--hour-mark) - var(--first-hour)) * var(--hour));
  transform: translateY(-50%);
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.cal-timeline-day {
  position: relative;
  min-width: 0;
  border-left: 1px solid var(--color-border);
  background-image: repeating-linear-gradient(to bottom, var(--color-border) 0 1px, transparent 1px var(--hour));
}

.cal-timeline-day.is-weekend {
  background-color: color-mix(in srgb, var(--color-primary) 4%, transparent);
}

.cal-timeline-day.is-today {
  background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.cal-block {
  position: absolute;
  top: calc((var(--start) - var(--first-hour) * 60) * var(--minute) + 1px);
  height: calc((var(--end) - var(--start)) * var(--minute) - 2px);
  left: calc(var(--lane) * (100% - 6px) / var(--lanes) + 3px);
  width: calc((100% - 6px) / var(--lanes) - 2px);
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.2rem 0.35rem;
  overflow: hidden;
  border-left: 3px solid var(--cal-color, var(--color-primary));
  border-radius: 6px;
  background: color-mix(in srgb, var(--cal-color, var(--color-primary)) 18%, var(--color-surface));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  color: var(--color-text);
  font-size: 0.74rem;
  line-height: 1.25;
  text-decoration: none;
}

.cal-block:hover {
  z-index: 1;
  background: color-mix(in srgb, var(--cal-color, var(--color-primary)) 28%, var(--color-surface));
}

.cal-block.is-short {
  flex-direction: row;
  align-items: baseline;
  gap: 0.3rem;
}

.cal-block-title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

/* In schmalen Spalten gibt die Uhrzeit zuerst nach, der Titel bleibt. */
.cal-block-time {
  flex: 0 100 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.cal-block .people-avatars {
  gap: 0.1rem;
  margin-top: auto;
}

.cal-block.is-short .people-avatars {
  display: none;
}

.cal-timeline-day.is-past .cal-block {
  opacity: 0.6;
}

.cal-timeline-now {
  position: absolute;
  z-index: 2;
  left: -4px;
  right: 0;
  top: calc((var(--now) - var(--first-hour) * 60) * var(--minute));
  height: 2px;
  background: var(--color-error);
  pointer-events: none;
}

.cal-timeline-now::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-error);
}

/* ── Wandkalender ──────────────────────────────────────────── */
/* Papier, Tinte und Rotstift haben feste Farben, wie Regal und Schreibtisch
   bei den Büchern. Die Handschrift kommt aus dem System, nicht aus einer
   geladenen Schrift. */
.cal-wall-stage {
  --paper: #fbf7ee;
  --paper-ink: #2b2620;
  --paper-muted: #8a7c66;
  --paper-line: #e3dccf;
  --red-pencil: #b0412e;
  --hand: "Bradley Hand", "Segoe Print", "Chalkboard SE", "Comic Sans MS", cursive;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 2rem;
  align-items: start;
}

@media (max-width: 960px) {
  .cal-wall-stage {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Neben dem Kalender bleibt das Blatt beim Scrollen stehen. */
@media (min-width: 961px) {
  .cal-wall-pad {
    position: sticky;
    top: calc(var(--header-height) + 1rem);
  }
}

.cal-wall {
  padding-top: 12px;
  filter: drop-shadow(0 14px 22px rgba(40, 25, 10, 0.28));
}

.cal-wall-paper {
  position: relative;
  border-radius: 3px;
  color: var(--paper-ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(255, 255, 255, 0.7), transparent 60%),
    repeating-linear-gradient(0deg, rgba(120, 90, 50, 0.025) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(120, 90, 50, 0.02) 0 1px, transparent 1px 4px);
}

.cal-wall-spiral {
  position: absolute;
  z-index: 2;
  top: -10px;
  left: 6%;
  right: 6%;
  height: 22px;
  background: radial-gradient(circle at 50% 70%, #5b5852 0 3px, transparent 3.5px) 0 0 / 22px 22px repeat-x;
}

.cal-wall-spiral::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 8px, #9a968f 8px 9px, #e8e5df 9px 12px, #8d8981 12px 13px, transparent 13px) 0 0 / 22px 16px repeat-x;
}

.cal-wall-photo {
  position: relative;
  display: block;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  border-radius: 3px 3px 0 0;
  color: #fff;
  text-decoration: none;
}

.cal-wall-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cal-wall-photo-badge {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  background: rgba(0, 0, 0, 0.4);
}

.cal-wall-photo-caption {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.7rem;
  font-size: 0.8rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

.cal-wall-photo-caption strong {
  display: block;
  font-size: 1rem;
}

.cal-wall-body {
  padding: 1.6rem 1.25rem 1.4rem;
}

.cal-wall-title {
  margin: 0 0 0.6rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.3rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
}

.cal-wall-title span {
  font-size: 1.2rem;
  color: var(--paper-muted);
}

.cal-wall-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 2px solid var(--paper-ink);
}

.cal-wall-weekday {
  padding: 0.35rem 0.4rem;
  border-bottom: 1px solid #d8cfbf;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6d6253;
}

.cal-wall-weekday.is-weekend {
  color: var(--red-pencil);
}

/* Die Tage spannen über alle Zeilen der Woche; die Klebestreifen mehrtägiger
   Termine liegen in den Zeilen darunter über dem Fuß der Zellen. */
.cal-wall-week {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  row-gap: 3px;
}

.cal-wall-cell {
  position: relative;
  grid-column: var(--column);
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  min-width: 0;
  min-height: 6.4rem;
  padding: 0.3rem 0.35rem calc(var(--tapes) * 1.3rem + 0.3rem);
  border-bottom: 1px solid var(--paper-line);
  border-right: 1px solid #ece6da;
}

.cal-wall-cell:nth-child(7) {
  border-right: 0;
}

.cal-wall-cell.is-weekend {
  background: rgba(176, 65, 46, 0.035);
}

.cal-wall-cell.is-past {
  background-color: rgba(190, 160, 110, 0.07);
}

/* Abgestrichen wie mit Bleistift. */
.cal-wall-cell.is-past::after {
  content: "";
  position: absolute;
  inset: 0.6rem 0.8rem;
  pointer-events: none;
  background: linear-gradient(to top right, transparent calc(50% - 0.8px), rgba(70, 60, 50, 0.3) calc(50% - 0.8px) calc(50% + 0.6px), transparent calc(50% + 0.6px));
}

.cal-wall-cell.is-today {
  background: rgba(192, 57, 43, 0.05);
}

.cal-wall-daynum {
  position: relative;
  font-family: Georgia, serif;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--paper-ink);
  text-decoration: none;
}

.cal-wall-cell.is-weekend .cal-wall-daynum,
.cal-wall-cell.is-holiday .cal-wall-daynum {
  color: var(--red-pencil);
}

.cal-wall-cell.is-outside .cal-wall-daynum {
  color: #cbbfae;
}

/* Rotstift-Kringel um heute. */
.cal-wall-cell.is-today .cal-wall-daynum::before {
  content: "";
  position: absolute;
  left: -0.45rem;
  top: -0.4rem;
  width: 2rem;
  height: 1.85rem;
  border: 2px solid #c0392b;
  border-radius: 52% 48% 55% 45% / 50% 55% 45% 50%;
  transform: rotate(-8deg);
}

.cal-wall-holiday {
  max-width: calc(100% - 2.4rem);
  font-size: 0.58rem;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--red-pencil);
}

.cal-ink {
  --ink: #2c3e70;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--hand);
  font-size: 0.82rem;
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
}

.cal-ink:hover {
  text-decoration: underline;
}

.cal-ink.cal-item--appointment,
.cal-wall-birthday { --ink: var(--red-pencil); }
.cal-ink.cal-item--interaction { --ink: #1e6b4f; }
.cal-ink.cal-item--habit { --ink: #b5651d; }
.cal-ink.cal-item--todo { --ink: #6d3fa0; }
.cal-ink.cal-item--cultural_memory { --ink: #146a80; }
.cal-ink--tour { --ink: #3d5a2a; }

.cal-ink-time {
  margin-right: 0.25em;
  opacity: 0.75;
}

/* Geburtstage mit Rotstift eingekringelt. */
.cal-wall-birthday {
  position: relative;
  overflow: visible;
  margin: 0.15rem 0 0.1rem 0.15rem;
  padding: 0 0.4rem;
}

.cal-wall-birthday::before {
  content: "";
  position: absolute;
  inset: -0.1rem -0.1rem;
  border: 1.5px solid #c0392b;
  border-radius: 50% 45% 52% 48% / 55% 50% 50% 45%;
  transform: rotate(-3deg);
}

.cal-wall-polaroid {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  width: 2.1rem;
  height: 2.1rem;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transform: rotate(4deg);
}

.cal-wall-polaroid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Klebefilm über dem Foto. */
.cal-wall-polaroid::after {
  content: "";
  position: absolute;
  left: 30%;
  top: -5px;
  width: 40%;
  height: 8px;
  background: rgba(240, 225, 170, 0.75);
  transform: rotate(-4deg);
}

.cal-wall-cell:has(.cal-wall-polaroid) .cal-wall-holiday,
.cal-wall-cell:has(.cal-wall-polaroid) .cal-ink--tour {
  max-width: calc(100% - 2.4rem);
}

.cal-wall-more {
  font-size: 0.68rem;
  color: var(--paper-muted);
  text-decoration: none;
}

/* Mehrtägiges als Washi-Tape über den Zellen. */
.cal-wall-tape {
  z-index: 1;
  align-self: end;
  min-width: 0;
  height: 1.1rem;
  margin: 0 0.2rem 0.2rem;
  padding: 0 0.6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--hand);
  font-size: 0.78rem;
  line-height: 1.1rem;
  color: #3a3226;
  text-decoration: none;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.25) 0 4px, transparent 4px 8px),
    color-mix(in srgb, var(--cal-color, #78b4c8) 45%, var(--paper));
  clip-path: polygon(0 8%, 3% 0, 97% 6%, 100% 0, 99% 100%, 96% 92%, 2% 100%, 0 90%);
}

/* Abreißblatt für heute, mit zwei Blättern darunter. */
.cal-wall-pad {
  position: relative;
  filter: drop-shadow(0 10px 16px rgba(40, 25, 10, 0.25));
}

.cal-wall-pad::before,
.cal-wall-pad::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4px 4px -4px;
  border-radius: 3px;
  background: #f1ebde;
}

.cal-wall-pad::after {
  z-index: -2;
  inset: 8px 8px -8px;
  background: #e7dfcf;
}

.cal-wall-sheet {
  overflow: hidden;
  border-radius: 3px;
  text-align: center;
  color: var(--paper-ink);
  background: var(--paper);
}

.cal-wall-sheet-month {
  padding: 0.6rem 0.5rem 0.5rem;
  font-family: Georgia, serif;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  background: var(--red-pencil) radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.25), transparent 70%);
}

.cal-wall-sheet-perforation {
  height: 8px;
  background: radial-gradient(circle at 6px 0, transparent 3px, var(--paper) 3.5px) 0 0 / 12px 8px repeat-x, var(--red-pencil);
}

.cal-wall-sheet-day {
  margin-top: 0.4rem;
  font-family: Georgia, serif;
  font-size: 5.5rem;
  line-height: 1;
  color: var(--red-pencil);
}

.cal-wall-sheet-weekday {
  font-family: Georgia, serif;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
}

.cal-wall-sheet-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem 0.8rem;
  margin: 0.4rem 0.5rem 0.8rem;
  font-size: 0.7rem;
  color: var(--paper-muted);
}

.cal-wall-sheet-items {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.7rem 1rem 0.9rem;
  border-top: 1px dashed #d8cfbf;
  list-style: none;
  text-align: left;
}

.cal-wall-sheet-items a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--hand);
  font-size: 0.95rem;
  color: #2c3e70;
  text-decoration: none;
}

.cal-wall-sheet-items .cal-ink-time {
  display: inline-block;
  min-width: 2.6rem;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.7rem;
  color: var(--paper-muted);
}

.cal-wall-sheet-items .is-open-todo .cal-ink-time::before {
  content: "☐";
}

.cal-wall-sheet-free,
.cal-wall-sheet-note {
  padding: 0 1rem 1rem;
  font-family: Georgia, serif;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--paper-muted);
}

.cal-wall-sheet-free {
  padding-top: 0.7rem;
  border-top: 1px dashed #d8cfbf;
}

.cal-wall-sheet-note a {
  color: var(--red-pencil);
}

@media (max-width: 640px) {
  .cal-wall-body {
    padding-inline: 0.5rem;
  }

  .cal-wall-cell {
    min-height: 4.5rem;
    padding-inline: 0.2rem;
  }

  .cal-ink {
    font-size: 0.7rem;
  }

  .cal-wall-polaroid {
    width: 1.4rem;
    height: 1.4rem;
  }

  .cal-wall-holiday {
    display: none;
  }
}

/* Habit-Ziele */
.calendar-goals {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
}

.calendar-goals summary {
  cursor: pointer;
  font-weight: 600;
}

.calendar-goals-range {
  color: var(--color-text-muted);
  font-weight: 400;
  margin-left: 0.5rem;
  font-size: 0.85rem;
}

.calendar-goals-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: 0.4rem;
}

.calendar-goal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  border-left: 3px solid var(--color-habits);
}

.calendar-goal.is-reached {
  border-left-color: var(--color-success);
  background: var(--color-success-light);
}

.calendar-goal-name {
  text-decoration: none;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Passen Name und Kennzahlen nicht in eine Zeile, rutschen die Kennzahlen
   nach unten, statt den Namen abzuschneiden. */
.calendar-goal-stats {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 0.5rem;
  margin-left: auto;
  min-width: 0;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* Termin-Detailseite */
.calendar-event-time {
  color: var(--color-text-muted);
}

.calendar-event-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* "Löschen" ist ein button_to (<form><button>), die anderen sind link_to (<a>).
   display: contents nimmt die Form-Box aus dem Flex-Layout, line-height normal
   vereinheitlicht die Höhe von Button und Links – sonst sind sie verschieden hoch. */
.calendar-event-actions .button_to {
  display: contents;
}

.calendar-event-actions .btn {
  line-height: normal;
}

.form-hint {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
}

.form-subgroup {
  margin-top: 0.5rem;
}

/* Auswahl „nur diesen Termin" / „ganze Serie" beim Bearbeiten eines
   Serien-Termins. */
.edit-scope {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  background: var(--color-surface);
}

.edit-scope legend {
  font-weight: 600;
  padding: 0 0.35rem;
}

.edit-scope-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-weight: 400;
  cursor: pointer;
}

/* Progressive-disclosure block in the create/edit forms (#306) */
.more-options {
  margin: 1rem 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0 0.9rem;
  background: var(--color-surface);
}

.more-options > summary {
  cursor: pointer;
  padding: 0.7rem 0;
  font-weight: 600;
  color: var(--color-text-muted);
  list-style: none;
  user-select: none;
}

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

.more-options > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.5rem;
  transition: transform 0.15s ease;
}

.more-options[open] > summary::before {
  transform: rotate(90deg);
}

.more-options[open] > summary {
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.6rem;
}

.more-options > .form-group:last-child {
  margin-bottom: 0.9rem;
}

/* ── Todo-Formular: kompakt ─────────────────────────────── */
/* Breiter als die üblichen 480px, damit Priorität und Kategorie nebeneinander
   passen und das Datum mit seinen Kurzwahlen in einer Zeile steht. */
form.todo-form {
  max-width: 680px;
}

.todo-form .form-group {
  margin-bottom: 1rem;
}

.todo-form .people-toggle-grid {
  gap: 0.35rem;
}

.todo-form .people-toggle-btn {
  padding: 0.3rem 0.7rem;
}

.todo-form .people-toggle-btn.category-toggle {
  padding: 0.15rem 0.5rem;
  font-size: 0.8125rem;
}

.todo-form .category-toggle .category-swatch {
  width: 0.5rem;
  height: 0.5rem;
}

/* Zwei Felder nebeneinander, auf schmalen Bildschirmen untereinander. */
.todo-form-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 1.5rem;
}

.todo-form-row > * {
  min-width: 0;
}

@media (max-width: 640px) {
  .todo-form-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.todo-form-label-actions {
  display: inline-flex;
  gap: 0.6rem;
  margin-left: 0.5rem;
}

.todo-form-label-actions .btn-link {
  margin: 0;
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 400;
}

.todo-due-panel {
  margin: 0.6rem 0 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  min-width: 0;
}

.todo-due-panel[hidden],
.todo-due-panel[data-mode="none"] {
  display: none;
}

.todo-due-panel > * + * {
  margin-top: 0.6rem;
}

.todo-due-panel .btn-link {
  margin: 0;
  padding: 0;
}

.todo-due-date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.todo-due-date input[type="date"] {
  width: auto;
}

.todo-due-date .date-shortcuts {
  margin: 0;
}

.todo-due-time {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

.todo-due-time .time-stepper {
  margin: 0;
}

.todo-due-recurrence,
.todo-due-offset,
.todo-due-deadline {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.todo-due-recurrence label,
.todo-due-offset label,
.todo-due-deadline label {
  margin: 0;
  white-space: nowrap;
}

.todo-due-recurrence select,
.todo-due-deadline input {
  width: auto;
}

.todo-due-offset input {
  width: 5rem;
}

.todo-due-deadline {
  margin-top: 0.6rem;
}

.todo-form-parent > summary {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.todo-form-parent-current {
  margin-left: 0.4rem;
  color: var(--color-text);
  font-weight: 600;
}

.todo-form-parent[open] > summary {
  margin-bottom: 0.5rem;
}

.todo-form-people > label {
  margin-bottom: 0.35rem;
}

/* Quick-add bar on the todo/calendar index pages (#306) */
.quick-add {
  margin: 0 0 1rem;
}

/* Eingeklappter Zustand: nur ein schlanker Auslöser, spart Platz. */
.quick-add > summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
  padding: 0.3rem 0.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
  list-style: none;
  user-select: none;
}

.quick-add > summary::-webkit-details-marker {
  display: none;
}

.quick-add > summary:hover {
  color: var(--color-primary-hover);
}

.quick-add[open] > summary {
  margin-bottom: 0.5rem;
}

.quick-add[open] .quick-add-bar {
  margin-top: 0;
}

.quick-add-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius);
  padding: 0.55rem 0.75rem;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

/* Vorschlagsliste der Autovervollständigung, direkt unter der Eingabezeile. */
.quick-add-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  min-width: 14rem;
  max-width: 100%;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

/* Titelfelder mit Emoji-Vervollständigung: Die Liste hängt sich darunter. */
.emoji-suggest {
  position: relative;
}

.quick-add-suggestions[hidden] {
  display: none;
}

.quick-add-suggestion {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.55rem;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  color: var(--color-text);
}

.quick-add-suggestion[aria-selected="true"],
.quick-add-suggestion:hover {
  background: var(--color-primary-light);
}

.quick-add-suggestion-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-add-suggestion-kind {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.quick-add-bar input[type="text"] {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-size: 1rem;
  padding: 0.25rem 0;
}

.quick-add-bar .quick-add-submit {
  flex-shrink: 0;
}

.quick-add-bar .quick-add-icon {
  color: var(--color-primary);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}

.quick-add-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

/* Leere Vorschau nimmt keinen Platz weg (mehr Liste sichtbar). */
.quick-add-preview:empty {
  display: none;
}

.quick-add-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.quick-add-hint {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  margin-top: 0.35rem;
}

/* Kategorie-Chips zum Einfügen des #Tags ins Textfeld (statt Abtippen). */
.quick-add-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.quick-add-cat {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}

.quick-add-cat:hover {
  border-color: var(--category-color, var(--color-primary));
  background: color-mix(in srgb, var(--category-color, var(--color-primary)) 12%, transparent);
}

/* Inline-Quick-Add für Unter-Todos auf der Detailseite: nur ein Titel nötig. */
.subtodo-quick-add,
.todo-checklist-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.subtodo-quick-add-input,
.todo-checklist-input {
  flex: 1;
  min-width: 0;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.9rem;
}

.subtodo-quick-add-input:focus,
.todo-checklist-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Kompakter Kopfbereich der Todo-Seite (#306): Überschrift und Aktionen in
   einer Zeile, verdichtete Abstände, damit mehr von der Liste sichtbar ist. */
.todos-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}

.todos-header h1 {
  margin-bottom: 0;
  font-size: 1.4rem;
}

.todos-header-actions {
  display: flex;
  gap: 0.5rem;
}

/* ── Dashboard-Umschalter (Übersicht / Liste / Board) ─────── */
.dashboard-switcher {
  display: flex;
  align-self: center;
  margin-right: auto;
  padding: 2px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
}

.dashboard-switcher-item {
  padding: 0.2rem 0.8rem;
  border-radius: 999px;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  white-space: nowrap;
}

.dashboard-switcher-item:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.dashboard-switcher-item.active {
  background: var(--color-surface);
  box-shadow: var(--shadow);
  color: var(--color-primary);
  font-weight: 600;
}

.dashboard-switcher-bar {
  display: flex;
  margin-bottom: 0.75rem;
}

/* Abstand nach unten kommt vom Spalten-Gap (.todos-side) bzw. vom Grid-Gap,
   wenn sich die Spalte einspaltig auflöst. */
.todos-banners {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.todos-filters {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.6rem 0.75rem;
  box-shadow: var(--shadow);
}

/* Kategorie-Filter kleiner und zurückhaltender; aktiv/hover behalten Farbe. */
.category-tabs {
  gap: 0.3rem;
}

.category-tabs .btn-filter {
  padding: 0.15rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 500;
}

.category-tabs .btn-filter:not(.active) {
  color: var(--color-text-muted);
  background: transparent;
  border-color: transparent;
}

/* Inline-Icon im kombinierten Anstehend-Banner (#306). */
.upcoming-banner-icon {
  margin-right: 0.15rem;
}

/* Quick-Add auf der verdichteten Todo-Seite etwas enger anschließen. */
.todos-filters + .quick-add {
  margin-top: 0;
}

/* ── Todo-Explosion ──────────────────────────────────────────
   Beim Klick auf Done (todo-done-Controller) zerbirst die Zeile in Partikel;
   die Wucht richtet sich nach der Prioritaet. Raeumt der Klick den heutigen
   Tag leer, zuendet zusaetzlich ein seitenweites Tages-Feuerwerk. */
/* Zeile bebt kurz, loest sich in Rauch auf und verschwindet dann zuegig (Turbo
   morpht sie kurz danach weg). Bewusst kurz, damit die Liste nicht haengt. */
.todo.is-exploding {
  position: relative;
  z-index: 1;
  animation: todo-disintegrate 0.55s cubic-bezier(0.3, 0, 0.2, 1) forwards;
}

/* Morph-festes Overlay am <body> (data-turbo-permanent): haelt Partikel und
   Feuerwerk am Leben, auch nachdem Turbo die erledigte Zeile schon entfernt
   hat. Bursts werden per left/top an ihre Position gesetzt. */
.todo-fx-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
}

.todo-explosion,
.todo-day-fireworks-burst {
  position: absolute;
  width: 0;
  height: 0;
}

.todo-explosion-particle {
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  opacity: 0;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  animation: todo-explosion 1.15s cubic-bezier(0.17, 0.85, 0.32, 1) forwards;
}

/* Zeile faded ganz aus, bevor sie entfernt wird. */
@keyframes todo-disintegrate {
  0%   { transform: scale(1); opacity: 1; filter: blur(0); }
  14%  { transform: scale(1.05) translateX(-3px); }
  30%  { transform: scale(1.03) translateX(3px); }
  85%  { opacity: 0; }
  100% { transform: scale(0.72); opacity: 0; filter: blur(5px); }
}

/* Partikel schiessen schnell raus, werden langsamer (ease-out) und sinken
   durch etwas "Schwerkraft" ab, bevor sie ausfaden. */
@keyframes todo-explosion {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  15%  { opacity: 1; }
  80%  { opacity: 0.9; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 44px)) scale(0.35); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .todo.is-exploding { animation: none; }
  .todo-fx-overlay { display: none; }
}

/* Screen-Shake nur bei Hoch-Prio: der Inhalt jolted kurz, das Partikel-Overlay
   (Body-Geschwister) bleibt stabil. clip verhindert horizontalen Scroll durch
   die Verschiebung, ohne position:sticky zu brechen. */
html { overflow-x: clip; }

.container.todo-shake {
  animation: todo-screen-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes todo-screen-shake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-5px, 2px); }
  30% { transform: translate(4px, -3px); }
  45% { transform: translate(-4px, 2px); }
  60% { transform: translate(3px, -2px); }
  78% { transform: translate(-2px, 1px); }
}

@media (prefers-reduced-motion: reduce) {
  .container.todo-shake { animation: none; }
}

/* ── Verschieben-Button ──────────────────────────────────────
   Standard inert (kein eigener Kasten); nur in der Todo-Listenzeile bildet
   der Wrapper die untere Kante der benachbarten button_to-<form>s nach, damit
   der Button auf gleicher Höhe wie +1d/→Mo/Done sitzt. */
.btn-reschedule-wrap {
  display: contents;
}

.todos .todo .btn-reschedule-wrap {
  display: block;
  padding-bottom: 0.5rem;
}

.reschedule-icon {
  width: 1.2em;
  height: 1.2em;
}

/* Ohne Text fehlt dem Button die Grundlinie, an der +1d/→Mo in der Zeile
   stehen; der Browser setzt dann seine Unterkante darauf. */
.btn-reschedule:has(> .reschedule-icon) {
  vertical-align: middle;
}

/* ── Notizblock (quick_note_controller) ───────────────────── */
.quick-note-dialog {
  /* Der globale Reset nimmt <dialog> die native Zentrierung (margin: 0). */
  margin: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
  width: calc(100% - 2rem);
  max-width: 640px;
  max-height: calc(100dvh - 2rem);
  padding: 1rem 1.2rem 1.2rem;
}

.quick-note-dialog:focus {
  outline: none;
}

.quick-note-dialog::backdrop {
  background: rgba(20, 18, 16, 0.45);
}

.quick-note-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.quick-note-head h2 {
  font-size: 1.1rem;
}

.quick-note-status {
  flex: 1;
  min-width: 0;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.quick-note-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
}

.quick-note-dialog textarea:not([hidden]) {
  display: block;
  width: 100%;
  min-height: 40dvh;
  resize: vertical;
}

.quick-note-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.quick-note-actions .btn {
  margin-left: auto;
}

/* .btn-postpone bringt ein eigenes display mit, das [hidden] sonst schlägt. */
.quick-note-actions [hidden] {
  display: none;
}

.quick-note-head {
  flex-wrap: wrap;
}

.quick-note-modes {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.quick-note-modes button {
  background: none;
  border: none;
  padding: 0.2rem 0.6rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  cursor: pointer;
}

.quick-note-modes button[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-surface);
}

.quick-note-view:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 40dvh;
  max-height: 60dvh;
  overflow-y: auto;
}

.quick-note-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.quick-note-gap {
  height: 0.4rem;
}

.quick-note-item {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0;
  font-size: inherit;
  font-weight: normal;
  color: var(--color-text);
  cursor: pointer;
  overflow-wrap: anywhere;
}

.quick-note-item input {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--color-primary);
}

.quick-note-item:has(input:checked) span {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

/* „→ Todo“ erscheint nur bei offenen Punkten; auf Touch-Geräten ohne Hover
   immer, sonst beim Überfahren der Zeile, damit die Liste ruhig bleibt. */
.quick-note-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.quick-note-row .quick-note-item {
  flex: 1;
  min-width: 0;
}

.quick-note-to-todo {
  flex: none;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  cursor: pointer;
}

.quick-note-to-todo:hover,
.quick-note-to-todo:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

@media (hover: hover) {
  .quick-note-row:not(:hover) .quick-note-to-todo:not(:focus-visible) {
    opacity: 0;
  }
}

.quick-note-todo-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* Punkt am ✎ (Header und Knopf unten rechts), solange im Notizblock etwas steht. */
.btn-quick-note,
.quick-note-fab {
  position: relative;
}

.quick-note-dot {
  position: absolute;
  top: -0.15rem;
  right: -0.15rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-surface);
}

/* Der Knopf ist selbst grün – dort hebt sich nur ein heller Punkt ab. */
.quick-note-fab .quick-note-dot {
  top: 0.1rem;
  right: 0.1rem;
  width: 0.75rem;
  height: 0.75rem;
  background: var(--color-surface);
  box-shadow: 0 0 0 2px var(--color-primary);
}

/* Ohne Tastatur gibt es kein „i“ – dort öffnet ein Knopf den Notizblock. */
.quick-note-fab {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  .btn-quick-note {
    display: none;
  }

  .quick-note-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 40;
    width: 3rem;
    height: 3rem;
    border: none;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 1.3rem;
    box-shadow: var(--shadow-md);
    cursor: pointer;
  }
}

/* ── Tee-Timer (tea_timer_controller) ───────────────────────── */
/* Der Dialog steckt mit im Wrapper; so bleibt der Knopf direktes Flex-Kind der Kopfzeile. */
.tea-timer {
  display: contents;
}

.btn-tea-timer--running {
  width: auto;
  padding: 0 0.45rem;
  border-radius: 0.75rem;
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.btn-tea-timer--running:hover {
  color: #fff;
}

.tea-timer-dialog {
  /* Der globale Reset nimmt <dialog> die native Zentrierung (margin: 0). */
  margin: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
  width: calc(100% - 2rem);
  max-width: 360px;
  padding: 1rem 1.2rem 1.2rem;
}

.tea-timer-dialog::backdrop {
  background: rgba(20, 18, 16, 0.45);
}

.tea-timer-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1rem;
}

.tea-timer-head h2 {
  font-size: 1.1rem;
}

.tea-timer-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
}

.tea-timer-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.tea-timer-presets .btn {
  flex: 1 1 0;
  min-width: 0;
}

.tea-timer-custom {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: none;
}

.tea-timer-custom label {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.tea-timer-custom input {
  flex: 1;
  min-width: 0;
}

.tea-timer-running {
  text-align: center;
}

.tea-timer-label {
  color: var(--color-text-muted);
}

.tea-timer-remaining {
  margin: 0.25rem 0 1rem;
  font-size: 2.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tea-timer-hint {
  margin-top: 1rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

/* ── Verschieben-Overlay (reschedule_controller) ─────────────── */
.reschedule-dialog {
  /* Der globale Reset setzt margin: 0 auf alles und hebelt damit die native
     Zentrierung modaler <dialog> aus – hier wieder herstellen. */
  margin: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
  width: 100%;
  /* Breiter und mit kompakteren Chips: So passen die Tages-Chips in zwei statt
     drei Zeilen und die Wochentage in eine – der Dialog passt ohne Scrollen aufs
     Handy. Auf schmalen Displays begrenzt width: 100% die Breite ohnehin. */
  max-width: 560px;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: 1.1rem 1.2rem 1.2rem;
}

/* Der ganze Dialog-Inhalt steckt in einem <form>, und global gilt
   form { max-width: 480px } – im 560px breiten Dialog blieb rechts sonst ein
   ungenutzter weißer Streifen stehen. */
.reschedule-dialog form {
  max-width: none;
}

.reschedule-dialog::backdrop {
  background: rgba(20, 18, 16, 0.45);
}

.reschedule-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1rem;
}

.reschedule-title {
  font-weight: 600;
}

.reschedule-current {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.reschedule-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
}

.reschedule-group {
  margin-bottom: 0.8rem;
}

.reschedule-lbl {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.reschedule-scope-hint {
  margin-top: 0.45rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.reschedule-tabs {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.9rem;
  background: var(--color-bg);
  padding: 0.25rem;
  border-radius: var(--radius-sm);
}

.reschedule-tabs button {
  flex: 1;
  padding: 0.45rem;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-weight: 600;
  font-size: 0.82rem;
  border-radius: 6px;
  cursor: pointer;
}

.reschedule-tabs button.sel {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
}

.reschedule-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.reschedule-chip {
  /* Die Chips wachsen in die Zeile hinein: Sonst blieb rechts im breiteren
     Dialog Luft stehen, während ein Chip mit langem Label („Nächste Woche (Mo)")
     schon in die nächste Zeile umbrach. */
  flex: 1 1 auto;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: 0.76rem;
  cursor: pointer;
  min-height: 30px;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.reschedule-chip:hover:not(:disabled) {
  border-color: var(--color-primary);
}

.reschedule-chip.sel {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
}

.reschedule-chip:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.reschedule-stepper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.55rem;
}

.reschedule-stepper button {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.reschedule-stepper button:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.reschedule-stepper .val {
  flex: 1;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Uhrzeit-Stepper im Todo-Formular: dieselbe Optik wie das Verschieben-Overlay,
   die Mitte ist aber ein editierbares <input type="time"> statt reiner Text. */
.time-stepper .val {
  height: 44px;
  padding: 0 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  box-sizing: border-box;
}

.reschedule-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.3rem;
  margin-top: 0.55rem;
}

.reschedule-weekdays .reschedule-chip {
  padding: 0.4rem 0;
  text-align: center;
}

.reschedule-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.reschedule-cal-head button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.1rem;
}

.reschedule-cal-head .m {
  font-weight: 600;
}

.reschedule-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.2rem;
}

.reschedule-cal-grid .dow {
  font-size: 0.62rem;
  text-align: center;
  color: var(--color-text-muted);
  font-weight: 600;
  padding-bottom: 0.2rem;
}

.reschedule-cal-grid .day {
  aspect-ratio: 1;
  border: none;
  background: transparent;
  color: var(--color-text);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  min-height: 34px;
}

.reschedule-cal-grid .day:hover:not(:disabled) {
  background: var(--color-primary-light);
}

.reschedule-cal-grid .day.today {
  outline: 1px solid var(--color-primary);
}

.reschedule-cal-grid .day.sel {
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
}

.reschedule-cal-grid .day.out {
  color: var(--color-text-muted);
  opacity: 0.4;
}

.reschedule-cal-grid .day:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.reschedule-preview {
  background: var(--color-primary-light);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  font-weight: 600;
  text-align: center;
  margin: 1rem 0;
  color: var(--color-primary-hover);
  font-variant-numeric: tabular-nums;
}

/* Schalter unter der Vorschau: hält den Schnell-Tab an, statt sofort zu
   verschieben. Optisch ein Chip über die volle Breite — mit Tap-Ziel, denn auf
   Touch ist er der einzige Weg in den Sammel-Modus. */
.reschedule-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  width: 100%;
  min-height: 44px;
  margin: -0.5rem 0 0.9rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.74rem;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.reschedule-hint:hover {
  border-color: var(--color-primary);
}

.reschedule-hint small {
  font-size: 0.68rem;
  opacity: 0.75;
}

.reschedule-hint.on {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
}

.reschedule-actions {
  display: flex;
  gap: 0.6rem;
}

.reschedule-btn {
  flex: 1;
  padding: 0.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  min-height: 46px;
}

.reschedule-btn.primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.reschedule-btn.primary:hover {
  background: var(--color-primary-hover);
}

/* Mobil: als Bottom-Sheet vom unteren Rand. */
@media (max-width: 560px) {
  .reschedule-dialog {
    max-width: none;
    margin: auto auto 0;
    border-radius: 18px 18px 0 0;
    border-bottom: none;
  }
}

/* ── Zustands-Tabs ─────────────────────────────────────────────────────────
   Übersichten, die mehrere Zustände desselben Dings zeigen (Mementos, Prognosen),
   zeigen einen davon auf einmal und schalten hier um. */

.page-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.page-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: 0.85rem;
  text-decoration: none;
}

.page-tab.sel {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
  font-weight: 600;
}

/* ── Mementos-Übersicht ────────────────────────────────────────────────────
   Die Sammlung ist gemischt: Bücher, Fotos, Links, lose Gedanken. Ohne Bild,
   Quelle und Notiz sahen die alle gleich aus – die Zeile zeigt deshalb, was
   ein Memento ausmacht. */

.memento-list {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.memento-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--color-border);
}

.memento-row:last-child {
  border-bottom: none;
}

.memento-row.resolved {
  opacity: 0.8;
}

.memento-row-thumb {
  flex: 0 0 auto;
  line-height: 0;
}

.memento-row-thumb img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius);
}

/* min-width: 0 – sonst sprengt eine lange URL die Zeile statt umzubrechen. */
.memento-row-main {
  flex: 1 1 auto;
  min-width: 0;
}

.memento-row-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.memento-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.15rem;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.memento-row-meta > * + *::before {
  content: "· ";
}

.memento-row-note {
  margin-top: 0.2rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.memento-row .actions {
  flex: 0 0 auto;
}

/* ── Fotos & Dateianhänge (Betrachtungen, Prognosen) ─────── */
.betrachtung-photo-grid,
.forecast-photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.75rem 0;
}

.betrachtung-photo-thumb,
.forecast-photo-thumb {
  display: block;
  line-height: 0;
}

.betrachtung-photo-thumb img,
.forecast-photo-thumb img {
  width: 160px;
  height: 160px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.betrachtung-attachment-list {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.betrachtung-attachment-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.betrachtung-attachment-remove,
.forecast-photo-remove {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* Verknüpfungen auf der Übersicht: klein und abgesetzt, wie Unter-Todos */
.betrachtung-links {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0.35rem 0 0;
  padding-left: 0.6rem;
  border-left: 2px solid var(--color-border);
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.betrachtung-links-label {
  color: var(--color-text-muted);
  font-weight: 600;
  margin-right: 0.3rem;
}

/* ── Haupt-Todo auswählen ────────────────────────────────────
   Suchfeld über einer scrollenden Radio-Liste: bei rund 60 offenen Wurzeln
   braucht die Auswahl eine Höhenbegrenzung, sonst schiebt sie im Formular
   alles Weitere aus dem Bild. Optik wie die übrigen Auswahlkacheln
   (.people-toggle-btn), nur einzeilig. */
.parent-picker-search {
  width: 100%;
  margin-bottom: 0.4rem;
}

.parent-picker-options {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-height: 15rem;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.3rem;
}

/* Doppelte Klasse, damit „.form-group label“ (display: block) nicht gewinnt –
   sonst bricht der Titel nicht ab und die Liste scrollt seitwärts. */
.parent-picker .parent-picker-option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.86rem;
}

/* Die Suche blendet per [hidden] aus. Das display oben und die globale
   label-Regel schlagen die [hidden]-Regel des Browsers. */
.parent-picker-option[hidden] {
  display: none;
}

.parent-picker-option:hover {
  background: var(--color-bg);
}

.parent-picker-option.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

/* Der Titel nimmt den Rest der Zeile; Kategorie und Termin bleiben rechts
   stehen und werden nicht umgebrochen. */
.parent-picker-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.parent-picker-due {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.parent-picker-empty {
  margin: 0.4rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* Im Overlay darf die Liste mehr Höhe nehmen – dort steht sonst nichts. */
.parent-picker-dialog .parent-picker-options {
  max-height: min(22rem, 55dvh);
}

/* Der „↳“-Knopf in der Listenzeile: gleiche Höhe wie die Nachbarn, aber
   schmal, weil das Zeichen allein steht. */
.btn-demote {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* ── Rückgängig-Streifen ─────────────────────────────────────
   Steht unten über der Seite, damit er den Blick nicht von der Liste nimmt,
   und blendet sich nach acht Sekunden aus (undo_toast_controller). Über dem
   Dialog-Backdrop liegt er bewusst nicht – ein offenes Overlay hat Vorrang. */
.undo-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: calc(100vw - 2rem);
  padding: 0.6rem 0.75rem 0.6rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  font-size: 0.875rem;
  transition: opacity 0.3s, transform 0.3s;
}

.undo-toast.leaving {
  opacity: 0;
  transform: translate(-50%, 0.5rem);
  pointer-events: none;
}

.undo-toast-message {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.undo-toast-action {
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.undo-toast-action:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

@media (max-width: 640px) {
  .undo-toast {
    left: 1rem;
    right: 1rem;
    transform: none;
    justify-content: space-between;
  }

  .undo-toast.leaving {
    transform: translateY(0.5rem);
  }
}

/* ── Admin-Auswertung ─────────────────────────────────────── */
.admin-note {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin: 0 0 1rem;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.admin-table th,
.admin-table td {
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

.admin-table th {
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.admin-table-number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.admin-table tfoot td {
  font-weight: 600;
  border-bottom: none;
}

.admin-row-empty {
  color: var(--color-text-muted);
}

.admin-user {
  margin-bottom: 2rem;
}

.admin-user h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
}

.admin-user-meta {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.admin-badge {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  background: var(--color-culture);
  color: #fff;
}

.admin-user-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 1.5rem;
  align-items: start;
}

.admin-user-grid h4 {
  margin: 0 0 0.35rem;
}

/* ── Gesundheitstermin: Followup-Todo ────────────────────── */
.followup-fieldset {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}

.followup-fieldset legend {
  font-weight: 600;
  padding: 0 0.4rem;
}

.followup-fieldset .form-group:last-child {
  margin-bottom: 0;
}

.squares-bar-cell {
  width: 30%;
}

.squares-bar {
  height: 0.5rem;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
}

.squares-bar-fill {
  height: 100%;
  background: #2563eb;
}

.route-planner-map {
  width: 100%;
  height: 65vh;
  min-height: 360px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow);
}

.route-planner-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.route-planner-toolbar .btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.route-planner-stats {
  display: flex;
  gap: 1.25rem;
  margin: 0 auto 0 0;
}

.route-planner-stats dt {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.route-planner-stats dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.route-planner-status {
  min-height: 1.4em;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.route-planner-status[data-state="busy"] {
  color: var(--color-text-muted);
}

.route-planner-status[data-state="error"] {
  color: var(--color-error);
}

.route-waypoint-marker {
  background: transparent;
  border: none;
}

.route-waypoint-marker span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #2563eb;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.tour-planned-route {
  margin-bottom: 1rem;
}

/* ── Changelog ───────────────────────────────────────────── */
.changelog-day {
  margin-bottom: 1.5rem;
}

.changelog-date {
  font-size: 1rem;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.changelog-entries {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.changelog-entry {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  padding: 0.6rem 0.9rem;
  border-top: 1px solid var(--color-border);
}

.changelog-entry:first-child {
  border-top: none;
}

.changelog-entry-new {
  background: var(--color-primary-light);
}

.changelog-type {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}

.changelog-type-feat {
  background: var(--color-success-light);
  color: var(--color-success);
}

.changelog-type-fix {
  background: var(--color-error-light);
  color: var(--color-error);
}

.changelog-scope {
  font-weight: 600;
}

.changelog-description {
  flex: 1 1 12rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.changelog-link {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.changelog-unread {
  margin-left: 0;
  align-self: center;
}

/* ── Todo-Board ──────────────────────────────────────────── */
/* So breit wie die Liste mit Habits-Spalte, sonst springt die Seite beim
   Umschalten zwischen Liste und Board. */
@media (min-width: 960px) {
  .container:has(.todo-board) {
    max-width: 1240px;
  }
}

.board-tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
}

@media (max-width: 700px) {
  .board-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}

.board-tile {
  min-width: 0;
  padding: 0.9rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.board-tile-title {
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.board-tile-big,
.board-next-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.board-next-title a {
  color: inherit;
  text-decoration: none;
}

.board-next-when {
  margin-top: 0.25rem;
  font-weight: 600;
  color: var(--color-primary);
}

.board-tile-note {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.board-tile > .board-tile-note {
  margin-top: 0.25rem;
}

.board-projects {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.board-project {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
  font-size: 0.85rem;
}

.board-project:hover {
  border-color: var(--color-primary);
}

.board-project--active {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.board-project-name {
  font-weight: 600;
}

.board-project--other .board-project-name {
  font-weight: 500;
  color: var(--color-text-muted);
}

.board-project-next {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.board-week {
  margin: 1.5rem 0 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.board-days {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 0.75rem;
  align-items: start;
}

.board-day {
  min-width: 0;
  padding: 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.board-day--today {
  border-color: var(--color-primary);
}

.board-day--empty {
  opacity: 0.6;
  box-shadow: none;
}

.board-day-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.board-day-name {
  font-weight: 700;
}

.board-day-today {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
}

.board-day-count {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.board-day-free {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.board-events,
.board-todos {
  list-style: none;
}

.board-events {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.6rem;
}

.board-event {
  display: flex;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  border-left: 3px solid var(--cal-color);
  border-radius: 4px;
  background: color-mix(in srgb, var(--cal-color) 10%, transparent);
  font-size: 0.85rem;
  font-weight: 500;
}

.board-event a,
.board-todo-title a {
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.board-event a:hover,
.board-todo-title a:hover {
  text-decoration: underline;
}

.board-time {
  flex: 0 0 3.2rem;
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.board-group {
  border-top: 1px solid var(--color-border);
}

.board-group summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.1rem;
  cursor: pointer;
  font-size: 0.875rem;
}

.board-group summary::-webkit-details-marker {
  display: none;
}

.board-group summary::before {
  content: "▸";
  width: 0.7rem;
  color: var(--color-text-muted);
  transition: transform 0.15s;
}

.board-group[open] summary::before {
  transform: rotate(90deg);
}

.board-group-name {
  font-weight: 600;
}

.board-group--other .board-group-name {
  font-weight: 500;
  color: var(--color-text-muted);
}

.board-group-count {
  min-width: 1.4rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  font-size: 0.75rem;
  text-align: center;
}

.board-group-high {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-error);
}

.board-todos {
  padding-bottom: 0.4rem;
}

.board-todo {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.25rem 0 0.25rem 0.1rem;
  font-size: 0.85rem;
}

.board-todo-title {
  flex: 1;
  min-width: 0;
}

.board-todo--hoch .board-todo-title a {
  font-weight: 600;
}

.board-todo--niedrig .board-todo-title {
  color: var(--color-text-muted);
}

.board-todo .category-badge {
  margin-left: 0.25rem;
}

.board-overdue {
  margin-left: 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-error);
}

.board-done-form {
  flex: 0 0 auto;
}

.board-todo .todo-row-id {
  flex: 0 0 auto;
  margin-top: 0.1rem;
}

/* Haken aus zwei Rahmenkanten: Das Zeichen ✓ sitzt je nach Schrift schief
   im Kreis. */
.board-done-form .board-done {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.05rem;
  padding: 0;
  border: 1.5px solid var(--color-text-muted);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.board-done-form .board-done::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 0.28rem;
  height: 0.55rem;
  border: solid var(--color-success);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
  opacity: 0;
  transition: opacity 0.15s;
}

.board-done-form .board-done:hover,
.board-done-form .board-done:focus-visible {
  border-color: var(--color-success);
  background: var(--color-success-light);
}

.board-done-form .board-done:hover::after,
.board-done-form .board-done:focus-visible::after {
  opacity: 1;
}

.board-banners:has(> *) {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* Wie in der Todo-Liste: rot ab einer Viertelstunde vor Beginn bis zum Ende. */
.board-event.is-imminent {
  border-left-color: var(--color-error);
  background: var(--color-error-light);
  animation: imminent-pulse 2s ease-in-out infinite;
}

.board-event.is-imminent .board-time {
  color: var(--color-error);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .board-event.is-imminent {
    animation: none;
  }
}

/* ---------- Todo-Shooter (Arcade-Modus der Todo-Liste) ---------- */
.todo-shooter {
  position: fixed;
  inset: 0;
  z-index: 1001;
  /* Mit der Maus bleibt die Seite klickbar (etwa „Rückgängig“ nach einem
     Abschuss); nur auf Touch-Geräten fängt das Feld den Finger zum Steuern. */
  pointer-events: none;
  background:
    radial-gradient(1px 1px at 12% 22%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 14%, #fff6 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 72%, #fff5 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 58%, #fff7 50%, transparent 51%),
    repeating-linear-gradient(0deg, #0000 0 2px, #0001 2px 3px);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

@media (pointer: coarse) {
  .todo-shooter { pointer-events: auto; touch-action: none; }
}

.todo-shooter-hud {
  pointer-events: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.5rem 1rem;
  background: #0b0b1ee6;
  color: #4ade80;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-shadow: 0 0 6px #4ade80aa;
}

.todo-shooter-score { color: #f9f871; }
.todo-shooter-help { flex: 1; opacity: 0.7; }

.todo-shooter-quit {
  background: none;
  border: 1px solid #4ade80;
  color: #4ade80;
  font: inherit;
  padding: 0 0.5rem;
  cursor: pointer;
}

.todo-shooter-ship {
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 22px;
  /* Dunkle Kontur, sonst verschwindet das helle Schiff auf den weißen Karten. */
  filter:
    drop-shadow(1px 0 0 #0f172a) drop-shadow(-1px 0 0 #0f172a)
    drop-shadow(0 1px 0 #0f172a) drop-shadow(0 -1px 0 #0f172a)
    drop-shadow(0 0 4px #3b82f6aa);
  will-change: transform;
}

.todo-shooter-ship svg { width: 100%; height: 100%; }
.todo-shooter-flame { opacity: 0; }
.todo-shooter-ship.is-thrusting .todo-shooter-flame { animation: todo-shooter-flicker 0.08s steps(2) infinite; }

@keyframes todo-shooter-flicker {
  from { opacity: 1; }
  to { opacity: 0.3; }
}

.todo-shooter-laser {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 3px;
  background: linear-gradient(90deg, #0891b2, #22d3ee 50%, #f0abfc);
  box-shadow: 0 0 0 1px #0f172a, 0 0 8px #22d3ee;
  will-change: transform;
}

.todo-shooter-laser.is-left { background: linear-gradient(270deg, #0891b2, #22d3ee 50%, #f0abfc); }

/* Feuerknopf, nur auf Touch-Geräten: Dort lenkt der Finger, geschossen wird
   bewusst per Tippen. Liegt über dem Notizblock-Knopf unten rechts. */
.todo-shooter-fire {
  display: none;
  position: absolute;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(24px + env(safe-area-inset-bottom));
  min-width: 84px;
  height: 84px;
  padding: 0 0.75rem;
  border: 3px solid #f9f871;
  border-radius: 999px;
  background: #0b0b1ee6;
  color: #f9f871;
  font: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  box-shadow: 0 0 12px #f9f87188;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.todo-shooter-fire:active { background: #f9f871; color: #0b0b1e; }
.todo-shooter-fire.is-push { border-color: #22d3ee; color: #22d3ee; box-shadow: 0 0 12px #22d3ee88; }
.todo-shooter-fire.is-idle { opacity: 0.45; }

@media (pointer: coarse) {
  .todo-shooter-fire { display: block; }
}

/* Auf dem Handy bräche die Hilfe mehrzeilig in die Spielleiste. */
@media (max-width: 480px) {
  .todo-shooter-help { visibility: hidden; }
}

/* Zieldatum beim Schieben, schwebt über der geschobenen Zeile. */
.todo-shooter-push-label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.1rem 0.4rem;
  background: #0b0b1e;
  color: #f9f871;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  box-shadow: 0 0 0 2px #f9f871;
  will-change: transform;
}

.todo-shooter-push-label[hidden] { display: none; }

/* Schaden bleibt sichtbar, solange das Spiel läuft: gelb angeschossen, rot,
   wenn der nächste Treffer das Todo erledigt. inset-Schatten statt
   background, damit die Zeile ihren eigenen Hintergrund behält. */
.todo[data-shooter-damage="hit"] {
  box-shadow: inset 0 0 0 999px #f59e0b26, 0 0 0 2px #f59e0b;
}

/* :not(.is-exploding) – sonst überschriebe die Animation hier den Zerfall
   (todo-disintegrate) beim letzten Treffer. */
.todo[data-shooter-damage="critical"]:not(.is-exploding) {
  box-shadow: inset 0 0 0 999px #ef444433, 0 0 0 2px #ef4444;
  animation: todo-shooter-critical 0.6s steps(2) infinite;
}

@keyframes todo-shooter-critical {
  50% { box-shadow: inset 0 0 0 999px #ef444418, 0 0 0 2px #ef444488; }
}

.todo.todo-shooter-hit:not(.is-exploding) { animation: todo-shooter-hit-flash 0.18s steps(2); }

@keyframes todo-shooter-hit-flash {
  from { background: #f9f87166; outline: 2px solid #f9f871; }
  to { background: inherit; }
}


/* ---------- Memory Lane (Tagebuch als Achtziger-Spiel) ---------- */
.memory-lane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Gehäuse eines Commodore-1702-Monitors: beige Rahmen, schwarze Bildröhre. */
.memory-lane-crt {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(10px, 3vw, 28px);
  background: linear-gradient(#e4dccb, #cfc5ae);
  border-radius: 18px;
  box-shadow: 0 10px 30px #0004, inset 0 -4px 0 #0002;
}

.memory-lane-crt::after {
  content: "";
  position: absolute;
  inset: clamp(10px, 3vw, 28px);
  border-radius: 14px;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, #0000 0 2px, #0003 2px 3px),
    radial-gradient(ellipse at center, #0000 60%, #0006 100%);
}

.memory-lane-screen {
  display: block;
  width: 100%;
  aspect-ratio: 320 / 200;
  border-radius: 14px;
  background: #000;
  image-rendering: pixelated;
  cursor: pointer;
}

.memory-lane-help {
  max-width: 960px;
  margin: 0.75rem auto 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  text-align: center;
}

.memory-lane-pad {
  display: none;
  max-width: 960px;
  margin: 1.25rem auto 0;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.memory-lane-key {
  border: none;
  background: #333;
  color: #ddd;
  font: 700 1.1rem ui-monospace, monospace;
  box-shadow: 0 4px 0 #111;
}

.memory-lane-key:active,
.memory-lane-pill:active { transform: translateY(3px); box-shadow: 0 1px 0 #111; }

/* Steuerkreuz: vier Arme in einem 3×3-Raster */
.memory-lane-dpad {
  display: grid;
  grid-template: repeat(3, 46px) / repeat(3, 46px);
}

.memory-lane-dpad .memory-lane-key { border-radius: 6px; }
.memory-lane-up { grid-area: 1 / 2; }
.memory-lane-left { grid-area: 2 / 1; }
.memory-lane-right { grid-area: 2 / 3; }
.memory-lane-down { grid-area: 3 / 2; }

.memory-lane-pills {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.memory-lane-pill {
  padding: 0.35rem 0.8rem;
  border: none;
  border-radius: 999px;
  background: #777;
  color: #fff;
  font: 700 0.7rem ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 0 #444;
}

.memory-lane-ab {
  display: flex;
  gap: 0.8rem;
  transform: rotate(-20deg);
}

.memory-lane-a,
.memory-lane-b {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #880000;
  color: #fcc;
  box-shadow: 0 4px 0 #400;
}

.memory-lane-b { margin-top: 28px; }

@media (pointer: coarse) {
  .memory-lane-pad { display: flex; }
  .memory-lane-help { display: none; }
  /* Waagrechtes Ziehen gehört dem Spiel, senkrecht scrollt die Seite. */
  .memory-lane-screen { touch-action: pan-y; }
}

/* Quer gehaltenes Telefon: Die Seite wird zur Handheld-Konsole über allem,
   Steuerkreuz links, Knöpfe rechts. Hochkant zurückdrehen beendet das. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 600px) {
  .memory-lane {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: #2b2b2b;
  }

  .memory-lane-crt { grid-column: 2; grid-row: 1; padding: 6px; border-radius: 10px; }
  .memory-lane-crt::after { inset: 6px; border-radius: 8px; }
  .memory-lane-screen {
    width: auto;
    height: min(calc(100svh - 52px), calc((100vw - 260px) * 0.625));
    border-radius: 8px;
  }

  .memory-lane-pad { display: contents; }
  .memory-lane-dpad {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    grid-template: repeat(3, 38px) / repeat(3, 38px);
  }
  .memory-lane-ab { grid-column: 3; grid-row: 1; justify-self: center; gap: 0.4rem; }
  .memory-lane-a,
  .memory-lane-b { width: 48px; height: 48px; }
  .memory-lane-b { margin-top: 22px; }
  .memory-lane-pills {
    position: fixed;
    bottom: calc(4px + env(safe-area-inset-bottom));
    left: 50%;
    flex-direction: row;
    transform: translateX(-50%);
  }
  .memory-lane-pill { padding: 0.2rem 0.7rem; }
}

/* ── Feeds (RSS-Reader) ───────────────────────────────────── */
.feeds-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.feeds-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.feeds-toolbar form { display: flex; margin: 0; padding: 0; }

.feeds-list-end {
  justify-content: center;
  margin: 1rem 0;
}

/* Links, Select und button_to-Buttons bringen je eigene Paddings und
   Zeilenhöhen mit; eine feste Höhe bringt sie auf eine Linie. */
.feeds-toolbar .btn-filter,
.feeds-toolbar button[type="submit"].btn-filter,
.feeds-select select,
.feed-article-actions .btn,
.feed-article-actions button[type="submit"].btn-filter {
  height: 2rem;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
}

.feeds-select select {
  max-width: 100%;
  font-size: 0.8125rem;
  padding-left: 0.75rem;
}

.feeds-hint {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}

.feeds-folder {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 1rem 0 0.4rem;
}

.feed-row { justify-content: space-between; }
.feed-row-main { min-width: 0; }

.feed-items {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.feed-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.55rem 0.5rem 0.55rem 0.75rem;
  border-left: 3px solid transparent;
}

.feed-item + .feed-item { border-top: 1px solid var(--color-border); }
.feed-item.is-unread { border-left-color: var(--color-culture); }

.feed-item-link {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
  color: var(--color-text);
  text-decoration: none;
}

.feed-item-link:hover { text-decoration: none; }
.feed-item-link:hover .feed-item-title { color: var(--color-culture); }

.feed-item-title {
  font-size: 0.9375rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.feed-item:not(.is-unread) .feed-item-title { color: var(--color-text-muted); }
.feed-item.is-unread .feed-item-title { font-weight: 600; }

.feed-item-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.feed-item-source {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.feed-item-meta {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  margin-top: 0.15rem;
}

.feed-item-actions {
  display: flex;
  flex-shrink: 0;
  gap: 0.1rem;
}

.feed-item-actions form { display: inline; }

/* button_to rendert Submit-Buttons; ohne die Spezifität hier gewänne der
   globale, orange gefüllte Submit-Stil. */
.feed-item-actions button[type="submit"].feed-item-action {
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  transform: none;
}

.feed-item-actions button[type="submit"].feed-item-action:hover {
  background: var(--color-culture-light);
  color: var(--color-culture);
}

.feed-item-actions button[type="submit"].feed-item-action.is-active { color: var(--color-culture); }

.feeds-toolbar button[type="submit"].btn-filter,
.feed-article-actions button[type="submit"].btn-filter {
  padding: 0.35rem 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 0.8125rem;
  transform: none;
}

.feeds-toolbar button[type="submit"].btn-filter:hover,
.feed-article-actions button[type="submit"].btn-filter:hover {
  border-color: var(--color-culture);
  background: var(--color-culture-light);
  color: var(--color-culture);
}

.feed-article-actions button[type="submit"].btn-filter.active {
  background: var(--color-culture);
  border-color: var(--color-culture);
  color: #fff;
}

.feed-article-header h1 {
  font-size: 1.5rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.feed-article-actions {
  margin: 0.9rem 0 1.25rem;
}

.feed-article-actions form { display: flex; margin: 0; padding: 0; }

.feed-article-content {
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.feed-article-content > * + * { margin-top: 0.9rem; }
.feed-article-content ul,
.feed-article-content ol { padding-left: 1.5rem; }
.feed-article-content img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.feed-article-content pre { overflow-x: auto; padding: 0.75rem; background: var(--color-bg); border-radius: var(--radius-sm); }
.feed-article-content blockquote { border-left: 3px solid var(--color-border); padding-left: 1rem; color: var(--color-text-muted); }
.feed-article-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.feed-article-content th,
.feed-article-content td { border: 1px solid var(--color-border); padding: 0.3rem 0.5rem; }

.feed-row button[type="submit"].btn-link {
  margin: 0;
  padding: 0.3rem 0;
  background: none;
  color: var(--color-error);
  font-size: 0.875rem;
  transform: none;
}

/* ── Umfeld ──────────────────────────────────────────────── */
/* Gleiche Breite und Bausteine wie das Todo-Board (.board-*). */
@media (min-width: 960px) {
  .container:has(.umfeld) {
    max-width: 1240px;
  }
}

.umfeld .board-tiles {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

@media (max-width: 700px) {
  .umfeld .board-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}

.umfeld-later {
  margin: 0.75rem 0 0;
}

.umfeld-event-body {
  min-width: 0;
}

.umfeld-event-meta {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.umfeld-people {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}

.umfeld-person {
  margin: 0;
}

.umfeld-person .board-day-head {
  align-items: center;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .umfeld-people {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .umfeld-person {
    padding: 0.6rem;
  }
}

.umfeld-person-name {
  min-width: 0;
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.umfeld-person-name:hover {
  text-decoration: underline;
}

.umfeld-person--overdue {
  border-color: var(--color-error);
}

.umfeld-overdue {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--color-error);
  color: #fff;
}

.umfeld-last-seen {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-decoration: none;
}

.umfeld-last-seen:hover {
  color: var(--color-primary);
}

.umfeld-more {
  margin-top: 0.6rem;
  font-size: 0.8rem;
}