/* ---------- Design-Tokens ---------- */
:root {
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #eef1f7;
  --border: #dde2ec;
  --text: #1e2430;
  --muted: #6b7688;
  --primary: #3b82f6;
  --primary-ink: #ffffff;
  --danger: #ef4444;
  --shadow: 0 1px 3px rgba(20, 30, 55, .08), 0 8px 24px rgba(20, 30, 55, .06);
  --radius: 14px;
  --radius-sm: 9px;
}
:root[data-theme="dark"] {
  --bg: #0f141c;
  --surface: #182028;
  --surface-2: #202a36;
  --border: #2b3543;
  --text: #e7ecf3;
  --muted: #93a0b3;
  --primary: #4f8ff7;
  --shadow: 0 1px 3px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.45;
  -webkit-font-smoothing: antialiased; padding-bottom: 40px;
}
h1, h2, h3 { margin: 0; font-weight: 650; }
h2 { font-size: 1.05rem; }
h3 { font-size: .92rem; margin: 18px 0 8px; }
code { background: var(--surface-2); padding: 1px 5px; border-radius: 5px; font-size: .85em; }
.muted { color: var(--muted); }
.small { font-size: .8rem; }
.hidden { display: none !important; }
@media (max-width: 620px) { .hide-mobile { display: none; } }

button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.primary-btn { background: var(--primary); color: var(--primary-ink); border-radius: var(--radius-sm); padding: 10px 16px; font-weight: 600; transition: filter .15s, transform .05s; }
.primary-btn:hover { filter: brightness(1.07); }
.primary-btn:active { transform: translateY(1px); }
.primary-btn.small { padding: 8px 12px; font-size: .88rem; }
.ghost-btn { background: var(--surface-2); color: var(--text); border-radius: var(--radius-sm); padding: 9px 14px; font-weight: 550; border: 1px solid var(--border); }
.ghost-btn:hover { border-color: var(--primary); }
.ghost-btn.small { padding: 6px 10px; font-size: .82rem; }
.ghost-btn.active { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.ghost-btn.full { width: 100%; margin-bottom: 10px; }
.icon-btn { width: 38px; height: 38px; border-radius: 10px; font-size: 1.15rem; display: inline-flex; align-items: center; justify-content: center; color: var(--text); }
.icon-btn:hover { background: var(--surface-2); }
.danger-btn { background: transparent; color: var(--danger); border: 1px solid var(--danger); border-radius: var(--radius-sm); padding: 9px 14px; font-weight: 600; }
.danger-btn:hover { background: var(--danger); color: #fff; }

input, select, textarea { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 11px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,130,246,.16); }
textarea::placeholder, input::placeholder { color: var(--muted); }
input[type="color"] { padding: 2px; width: 44px; height: 40px; }

/* ---------- Kopfzeile ---------- */
.app-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--border); padding-top: max(10px, env(safe-area-inset-top)); }
.icon-btn.on { background: var(--primary); color: #fff; }
/* Erklär-Modus (Hilfe) */
.help-hint-bar { position: sticky; top: 0; z-index: 29; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 16px; background: var(--primary); color: #fff; font-size: .85rem;
  padding-top: max(8px, env(safe-area-inset-top)); }
.help-hint-bar[hidden] { display: none; }
.help-hint-bar b { font-weight: 700; }
.help-hint-bar .ghost-btn { background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.help-hint-bar .ghost-btn:hover { background: rgba(255,255,255,.3); }
body.help-mode { cursor: help; }
/* dezenter Hinweis, dass Elemente erklärbar sind */
body.help-mode .icon-btn:not(#helpBtn), body.help-mode button[title], body.help-mode [data-act] { outline: 1px dashed color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 1px; }
.help-bubble { position: fixed; z-index: 1200; max-width: 260px; background: #111827; color: #f9fafb;
  border-radius: 8px; padding: 8px 11px; font-size: .82rem; line-height: 1.3; box-shadow: 0 8px 28px rgba(0,0,0,.4);
  pointer-events: none; }
.app-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.1rem; }
.app-logo { font-size: 1.3rem; }
.date-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.date-nav input[type="date"] { padding: 7px 9px; }
.header-actions { display: flex; gap: 4px; align-items: center; }
.net-status { font-size: .72rem; font-weight: 600; white-space: nowrap; padding: 3px 8px;
  border-radius: 999px; background: #f9731622; color: #ea580c; align-self: center; }
.net-status.ok { background: #22c55e22; color: #16a34a; }
.net-status.hidden { display: none; }
.gt-pending-chip { font-size: .68rem; padding: 1px 6px; border-radius: 999px;
  background: #f9731622; color: #ea580c; }
/* Blocker-Muster */
.blocker-top { margin: 2px 0 8px; }
.blocker-tip { margin: 8px 0 2px; font-size: .82rem; }
.blocker-hotspots { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.td-blockers { margin: 12px 0 4px; padding-top: 10px; border-top: 1px solid var(--border, #8883); }
.td-blockers-head { font-size: .85rem; font-weight: 600; margin-bottom: 6px; }
.blocker-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.blocker-btn { font-size: .76rem; padding: 4px 9px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border, #8884); color: var(--text); cursor: pointer; }
.blocker-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.blocker-nudge { margin-top: 8px; min-height: 1em; }
.rout-rem-lbl { display: inline-flex; align-items: center; gap: 3px; font-size: .82rem; }
.rout-rem { width: 92px; }
/* Routinen-Heatmap + Statistik (aufklappbar) */
.rout-stats { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border, #8884); }
.rout-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
  gap: 8px; margin-bottom: 8px; max-width: 420px; }
.rst { display: flex; flex-direction: column; line-height: 1.15; align-items: center; text-align: center;
  background: var(--surface-2); border-radius: 8px; padding: 5px 4px; }
.rst b { font-size: .9rem; } .rst span { font-size: .68rem; color: var(--muted); }
.hm-wrap { overflow-x: auto; }
.hm-grid { display: inline-flex; gap: 3px; }
.hm-col { display: flex; flex-direction: column; gap: 3px; }
.hm-cell { width: 12px; height: 12px; border-radius: 3px; background: var(--surface-2); }
.hm-done { background: #22c55e; }
.hm-miss { background: #ef444455; }
.hm-missx { background: #dc2626; position: relative; }
.hm-x { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: .55rem; line-height: 1; pointer-events: none; }
.hm-off { background: var(--surface-2); opacity: .5; }
.hm-pad { background: transparent; }
.hm-skip { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 2px, transparent 2px, transparent 4px); }
.rout-skip { flex: none; background: transparent; border: 1px solid var(--border, #8884); color: var(--muted);
  border-radius: 8px; padding: 2px 8px; cursor: pointer; font-size: .9rem; }
.rout-skip:hover { color: var(--text); }
.rout-freqn { width: 84px; }
.rd.skip { color: #64748b; }
.rout-measure { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.rm-btn { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--border, #8884);
  background: var(--surface-2); color: var(--text); font-size: 1rem; line-height: 1; cursor: pointer; }
.rm-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.rm-val { font-size: .8rem; font-variant-numeric: tabular-nums; min-width: 72px; }
.rm-bar { flex: 1; height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; max-width: 160px; }
.rm-bar i { display: block; height: 100%; background: #22c55e; }
.rm-target { width: 70px; } .rm-unit { width: 72px; }
.hm-legend { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: .7rem; color: var(--muted); flex-wrap: wrap; }
.hm-legend .hm-cell { width: 10px; height: 10px; }
.hm-click { cursor: pointer; }
.hm-click:hover { outline: 2px solid var(--primary); outline-offset: 1px; }
/* Heatmap/Kalender: Umschalter */
.hm-tabs { display: flex; gap: 6px; margin: 8px 0 6px; }
.hm-tab { background: var(--surface-2); border: 1px solid var(--border, #8884); color: var(--muted);
  border-radius: 8px; padding: 3px 10px; font-size: .78rem; cursor: pointer; }
.hm-tab.on { background: var(--primary); color: #fff; border-color: var(--primary); }
/* Monatskalender */
.mc-wrap { margin-top: 4px; }
.mc-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; max-width: 280px; }
.mc-title { font-weight: 600; font-size: .85rem; text-transform: capitalize; }
.mc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 280px; }
.mc-head { margin-bottom: 4px; }
.mc-wd { text-align: center; font-size: .62rem; color: var(--muted); font-weight: 600; }
.mc-day { position: relative; aspect-ratio: 1; border-radius: 6px; background: var(--surface-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.mc-day b { font-size: .68rem; font-weight: 600; }
.mc-day i { font-size: .6rem; font-style: normal; height: .7em; }
.mc-pad { background: transparent; }
.mc-nodata { opacity: .55; }
.mc-future { opacity: .3; }
.mc-off { opacity: .5; }
.mc-done { background: #22c55e; color: #05310f; }
.mc-miss { background: #ef444455; }
.mc-missx { background: #dc2626; color: #fff; }
.mc-note { position: absolute; top: 1px; right: 2px; font-size: .5rem; text-decoration: none; line-height: 1; }
.mc-skip { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 3px, transparent 3px, transparent 6px); }
.mc-today { outline: 2px solid var(--primary); outline-offset: -2px; }
.mc-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
/* Tages-Aktionsmenü (Erledigt / Nicht erledigt / Ruhetag / Offen) */
.rdm-menu { position: fixed; z-index: 1000; width: 200px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border, #8884); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.35);
  padding: 6px; display: flex; flex-direction: column; gap: 3px; }
.rdm-head { font-size: .72rem; color: var(--muted); font-weight: 600; padding: 2px 6px 4px; }
.rdm-opt { text-align: left; background: transparent; border: none; color: var(--text); border-radius: 7px;
  padding: 7px 8px; font-size: .82rem; cursor: pointer; }
.rdm-opt:hover { background: var(--surface-2); }
.rdm-opt.on { background: var(--primary); color: #fff; }
.rdm-note { display: flex; flex-direction: column; gap: 5px; padding: 5px 4px 3px; border-top: 1px dashed var(--border, #8884); margin-top: 3px; }
.rdm-noteinput { width: 100%; resize: vertical; font: inherit; font-size: .8rem; border-radius: 7px;
  border: 1px solid var(--border, #8884); background: var(--surface-2); color: var(--text); padding: 6px 8px; }
.rdm-save { align-self: flex-end; background: #dc2626; color: #fff; border: none; border-radius: 7px;
  padding: 5px 12px; font-size: .8rem; font-weight: 600; cursor: pointer; }
.rdm-save:hover { filter: brightness(1.08); }
.wdm-row { display: flex; gap: 6px; align-items: flex-end; height: 34px; }
.wdm { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.wdm i { width: 10px; background: var(--primary); border-radius: 2px; display: block; }
.wdm b { font-size: .6rem; color: var(--muted); font-weight: 600; margin-top: 2px; }
@media (max-width: 640px) {
  .app-header { flex-wrap: wrap; }
  .date-nav { margin-left: 0; order: 3; width: 100%; justify-content: center; }
  .header-actions { margin-left: auto; }
}

/* ---------- Laufender Timer ---------- */
/* `--header-h` wird in app.js aus der echten Kopfzeilenhöhe gesetzt: die bricht auf
   schmalen Geräten auf zwei Zeilen um, ein fester Wert würde die Leiste überlappen. */
.running-bar { position: sticky; top: var(--header-h, 59px); z-index: 25; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: linear-gradient(90deg, var(--primary), #6aa4fb); color: #fff; box-shadow: var(--shadow); }
.running-info { flex: 1; min-width: 0; }
.running-title { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.running-meta { display: flex; align-items: center; gap: 8px; font-size: .8rem; opacity: .92; }
.running-elapsed { font-variant-numeric: tabular-nums; font-size: 1.5rem; font-weight: 700; }
.stop-btn { background: rgba(255,255,255,.22); color: #fff; border-radius: var(--radius-sm); padding: 9px 16px; font-weight: 650; }
.stop-btn:hover { background: rgba(255,255,255,.34); }
.pulse-dot { width: 11px; height: 11px; border-radius: 50%; background: #fff; animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.6);} 70% { box-shadow: 0 0 0 10px rgba(255,255,255,0);} 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0);} }

/* ---------- Schnellstart ---------- */
.quick-start { display: flex; gap: 8px; padding: 14px 16px 6px; max-width: none; margin: 0 auto; width: 100%; }
.quick-start #quickInput { flex: 1; }
@media (max-width: 620px) { .quick-start { flex-wrap: wrap; } .quick-start #quickInput { flex-basis: 100%; } .quick-start #quickCat { flex: 1; } }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 4px; padding: 8px 16px 0; max-width: none; margin: 0 auto; width: 100%; flex-wrap: wrap; }
.tab { padding: 9px 16px; border-radius: 10px 10px 0 0; font-weight: 600; color: var(--muted); white-space: nowrap; touch-action: none; cursor: grab; }
.tab.active { color: var(--text); background: var(--surface); box-shadow: 0 -1px 0 var(--border) inset; }
.tab:hover { color: var(--text); }
.tab.tab-dragging { opacity: .55; cursor: grabbing; }

/* ---------- Schmale Geräte (iPhone): eine wischbare Tab-Zeile ----------
   Umgebrochen belegen die elf Tabs fünf Zeilen (230 px) – zusammen mit Kopfzeile und
   Schnellstart über die Hälfte des Bildschirms, bevor Inhalt kommt. Als eine scrollbare
   Zeile bleibt die Reihenfolge erhalten und es kostet 44 px.
   `touch-action: pan-x` gibt die Wischgeste an den Browser: auf dem Telefon wird damit
   gescrollt statt umsortiert (Umsortieren bleibt auf Zeigegeräten). */
@media (max-width: 680px) {
  .tabs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
          scroll-snap-type: x proximity; scrollbar-width: none; padding: 8px 12px 0; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; scroll-snap-align: center; padding: 9px 13px; touch-action: pan-x; }
}

/* ---------- Inhalt ---------- */
.content { max-width: none; margin: 0 auto; padding: 14px 16px; width: 100%; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fade .2s; }
@keyframes fade { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: none; } }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } }
/* Einstellungen-Tab */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.settings-card p { margin: 8px 0; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 4px; }
#accInviteEmail { flex: 0 1 240px; min-width: 160px; }
/* Version & System */
.ver-list { margin: 8px 0 4px; display: flex; flex-direction: column; gap: 6px; }
.ver-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ver-list dt { color: var(--muted); font-size: 0.9rem; }
.ver-list dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
/* KI/Coach-Einstellungen */
.llm-status { margin: 8px 0 10px; padding: 8px 12px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border); font-size: .9rem; }
.llm-ok { color: #10b981; font-weight: 700; }
.llm-off { color: #f59e0b; font-weight: 700; }
#llmCard .field input, #llmCard .field select { padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface); color: var(--text); font-size: .9rem; width: 100%; }
#llmCard .field { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--muted); }
.settings-actions .ghost-btn, .settings-actions .primary-btn { padding: 9px 14px; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.panel + .panel { margin-top: 16px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }

/* ---------- Kalender-Filter ---------- */
.cal-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cal-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: .8rem; cursor: pointer; user-select: none; }
.cal-toggle input { display: none; }
.cal-toggle .cal-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cat); flex-shrink: 0; }
.cal-toggle.off { opacity: .4; }
.cal-toggle.error { border-color: var(--danger); }
.demo-note { background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.4); color: var(--text); padding: 9px 11px; border-radius: var(--radius-sm); font-size: .8rem; margin-bottom: 12px; }

/* ---------- Listen ---------- */
.item-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid transparent; border-left: 4px solid var(--cat, var(--primary)); }
.item.running { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(59,130,246,.2); }
.item.clickable { cursor: pointer; }
.item.clickable:hover { border-color: var(--primary); }
.item-main { flex: 1; min-width: 0; }
.item-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-sub { font-size: .78rem; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.item-actions { display: flex; gap: 2px; flex-shrink: 0; }
.item-actions button { width: 32px; height: 32px; border-radius: 8px; font-size: 1rem; }
.item-actions button:hover { background: rgba(120,130,150,.18); }
.play-btn { color: var(--primary); font-weight: 700; }
.dur-badge { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); background: var(--surface); padding: 2px 7px; border-radius: 6px; font-size: .78rem; }
.cat-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; padding: 1px 8px; border-radius: 999px; background: rgba(120,130,150,.16); }
.cat-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cat, var(--primary)); }
.allday-badge { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; background: var(--cat); color: #fff; padding: 1px 6px; border-radius: 5px; }
.empty-hint { color: var(--muted); font-size: .86rem; text-align: center; padding: 18px 8px; }

/* ---------- Zeitleiste ---------- */
.timeline-legend { display: flex; gap: 18px; margin-bottom: 10px; font-size: .82rem; color: var(--muted); }
.legend-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: var(--primary); vertical-align: -2px; margin-right: 4px; }
.plan-swatch { background: repeating-linear-gradient(45deg, var(--primary), var(--primary) 3px, transparent 3px, transparent 6px); border: 1px solid var(--primary); }
.timeline { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 8px 8px 56px; box-shadow: var(--shadow); overflow: hidden; }
.tl-hour { position: relative; height: 46px; border-top: 1px dashed var(--border); }
.tl-hour::before { content: attr(data-h); position: absolute; left: -50px; top: -8px; font-size: .72rem; color: var(--muted); width: 44px; text-align: right; }
.tl-now { position: absolute; left: 56px; right: 4px; height: 2px; background: var(--danger); z-index: 5; }
.tl-now::before { content: ""; position: absolute; left: -5px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
.tl-block { position: absolute; border-radius: 6px; padding: 3px 7px; font-size: .74rem; overflow: hidden; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.tl-block.plan { left: 4px; width: 42%; background: transparent; color: var(--text); border: 1.5px dashed var(--cat, var(--primary)); cursor: pointer; }
.tl-block.real { right: 4px; width: 42%; background: var(--cat, var(--primary)); }
.tl-block.running { outline: 2px solid #fff; outline-offset: -2px; }
.tl-block b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Auswertung ---------- */
.report-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 620px) { .report-cards { grid-template-columns: 1fr 1fr; } }
.report-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.report-card .big { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.report-card .lbl { font-size: .78rem; color: var(--muted); }
.cat-bars { display: flex; flex-direction: column; gap: 12px; }
.cat-bar-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 10px; align-items: center; font-size: .85rem; }
@media (max-width: 500px) { .cat-bar-row { grid-template-columns: 95px 1fr auto; } }
.cat-bar-label { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-bar-track { background: var(--surface-2); border-radius: 999px; height: 12px; overflow: hidden; }
.cat-bar-fill { height: 100%; border-radius: 999px; background: var(--cat, var(--primary)); min-width: 3px; transition: width .3s; }
.cat-bar-val { font-variant-numeric: tabular-nums; font-weight: 600; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cat); flex-shrink: 0; }
/* Trendverläufe (Dashboard) */
.trend-metric { margin: 10px 0 4px; }
.trend-metric + .trend-metric { border-top: 1px solid var(--border); padding-top: 10px; }
.trend-metric-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: .85rem; font-weight: 600; margin-bottom: 8px; }
.trend-bars { display: flex; align-items: flex-end; gap: 6px; height: 64px; }
.trend-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.trend-bar-track { width: 100%; max-width: 26px; height: 48px; display: flex; align-items: flex-end; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.trend-bar { width: 100%; background: var(--primary); border-radius: 5px 5px 0 0; min-height: 0; transition: height .3s; }
.trend-col.current .trend-bar { background: var(--accent, #f97316); }
.trend-col.current .trend-x { color: var(--primary); font-weight: 700; }
.trend-x { font-size: .68rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.trend-up { color: #22c55e; } .trend-down { color: #ef4444; }
.report-secondary { margin: -6px 0 16px; text-align: center; }

/* ---------- Abgleich-Töpfe ---------- */
.buckets { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .buckets { grid-template-columns: 1fr; } }
.bucket { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.bucket-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-weight: 650; font-size: .9rem; background: var(--surface-2); }
.bucket-head .b-icon { font-size: 1rem; }
.bucket-head .b-count { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; font-size: .82rem; }
.bucket.done    .bucket-head { box-shadow: inset 3px 0 0 #10b981; }
.bucket.open    .bucket-head { box-shadow: inset 3px 0 0 #f59e0b; }
.bucket.unplan  .bucket-head { box-shadow: inset 3px 0 0 #8b5cf6; }
.bucket.gap     .bucket-head { box-shadow: inset 3px 0 0 #94a3b8; }
.bucket-list { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.b-row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 7px; background: var(--surface-2); border-left: 3px solid var(--cat, var(--primary)); font-size: .84rem; }
.b-row .b-main { flex: 1; min-width: 0; }
.b-row .b-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-row .b-sub { font-size: .74rem; color: var(--muted); }
.b-var { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .78rem; padding: 1px 7px; border-radius: 6px; flex-shrink: 0; }
.b-var.over  { color: #dc2626; background: rgba(220,38,38,.12); }
.b-var.under { color: #0891b2; background: rgba(8,145,178,.12); }
.b-var.ok    { color: #059669; background: rgba(5,150,105,.12); }
.b-empty { color: var(--muted); font-size: .8rem; padding: 8px 9px; }

/* ---------- Overlays ---------- */
.overlay { position: fixed; inset: 0; z-index: 50; background: rgba(15,20,30,.5); display: flex; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(2px); }
.overlay-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; max-width: 480px; max-height: 90vh; overflow: auto; }
.overlay-card.narrow { max-width: 380px; }
.overlay-head { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); }
.overlay-body { padding: 16px; }
.field { display: flex; flex-direction: column; gap: 5px; font-size: .82rem; color: var(--muted); margin-bottom: 12px; }
.field input, .field select { color: var(--text); }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }
.overlay-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; }
/* Abschließen ohne Erfolg: bewusst ruhiger als die beiden Erledigt-Knöpfe */
.done-alt { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.done-alt p { margin: 6px 0 0; }
.gtd-task.obsolete-row .gt-title { color: var(--muted); }
.cat-editor { display: flex; flex-direction: column; gap: 8px; }
.cat-editor-row { display: flex; align-items: center; gap: 10px; }
/* min-width: 0 – ein <input> bringt eine Standardbreite von rund 20 Zeichen mit; ohne das
   schrumpft das Namensfeld auf schmalen Geräten nicht und die Zeile läuft über den Rand. */
.cat-editor-row input[type="text"] { flex: 1; min-width: 0; }
.add-cat { display: flex; gap: 8px; margin-top: 10px; }
.add-cat input[type="text"] { flex: 1; min-width: 0; }
/* Kategorie-Zeile: Farbe · Symbol · Name. Nur der Name darf wachsen; Farbe und
   Symbol behalten ihre feste Breite, sonst drückt der Name sie zu Strichen zusammen. */
.cat-editor-row input[type="color"], .add-cat input[type="color"] { flex: 0 0 44px; }
.cat-icon-input { flex: 0 0 52px !important; width: 52px; text-align: center; font-size: 1.05rem; }

/* ---------- Toast ---------- */
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 11px 18px; border-radius: 999px; font-size: .88rem; font-weight: 550; box-shadow: var(--shadow); z-index: 60; animation: toastIn .2s; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px);} to { opacity: 1; transform: translate(-50%, 0);} }

/* ---------- Planung (GTD) ---------- */
.capture { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; box-shadow: var(--shadow); margin-bottom: 16px; }
.capture .cap-plus { color: var(--primary); font-weight: 800; font-size: 1.2rem; line-height: 1; }
#micBtn.recording { background: #dc2626; color: #fff; border-color: #dc2626; animation: micPulse 1.2s infinite; }
@keyframes micPulse { 0% { box-shadow: 0 0 0 0 rgba(220,38,38,.5);} 70% { box-shadow: 0 0 0 8px rgba(220,38,38,0);} 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0);} }
.capture input { flex: 1; border: none; background: transparent; padding: 6px 2px; }
.capture input:focus { box-shadow: none; }
/* Auf dem iPhone passten Eingabefeld und vier Knöpfe nicht in eine Zeile: „Erfassen" war
   angeschnitten, „Daily Review" lag ganz außerhalb des Bildschirms. Eingabe auf eine
   eigene Zeile, Knöpfe darunter – damit bleibt alles erreichbar. */
@media (max-width: 680px) {
  .capture { flex-wrap: wrap; row-gap: 8px; }
  .capture .cap-plus { display: none; }
  .capture input { flex: 1 1 100%; }
  .capture .btn, .capture .ghost-btn, .capture .primary-btn { flex: 0 1 auto; }
}

.gtd { display: grid; grid-template-columns: var(--gtd-nav-w, 288px) 1fr; gap: 16px; align-items: start; }
/* `.panel + .panel` schob die rechte Spalte 16 px nach unten, sodass die beiden
   Kästen nicht auf einer Linie begannen. Im Gitter macht `gap` den Abstand. */
.gtd > .panel { margin-top: 0; }
@media (max-width: 820px) { .gtd { grid-template-columns: 1fr; } .gtd-resize { display: none; } }
.gtd-nav { padding: 10px; position: relative; min-width: 0; }

/* Umschalter für die Listenauswahl – nur auf schmalen Geräten sichtbar. Dort steht die
   Seitenleiste (Listen, Kontexte, Lebensbereiche, Organisationen) sonst mit rund 1500 px
   über den Aufgaben: man scrollt an der gesamten Navigation vorbei, bevor die erste
   Aufgabe kommt. Eingeklappt zeigt der Knopf die gerade gewählte Liste samt Anzahl. */
.gtd-navtoggle { display: none; }
@media (max-width: 680px) {
  .gtd-navtoggle { display: flex; align-items: center; gap: 9px; width: 100%; margin-bottom: 12px;
    padding: 11px 14px; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); box-shadow: var(--shadow); color: var(--text);
    font-weight: 650; font-size: .95rem; text-align: left; }
  .gtd-navtoggle .nt-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gtd-navtoggle .nt-caret { color: var(--muted); transition: transform .15s; }
  .gtd-navtoggle[aria-expanded="true"] { border-color: var(--primary); color: var(--primary); }
  .gtd-navtoggle[aria-expanded="true"] .nt-caret { transform: rotate(180deg); }
  .gtd .gtd-nav { display: none; }
  .gtd.nav-open .gtd-nav { display: block; margin-bottom: 12px; }
}
/* Ziehfeld zum Verbreitern der Seitenleiste */
.gtd-resize { position: absolute; top: 0; right: -8px; width: 12px; height: 100%; cursor: col-resize;
  z-index: 5; touch-action: none; display: flex; align-items: center; justify-content: center; }
.gtd-resize::before { content: ''; width: 3px; height: 46px; border-radius: 3px; background: var(--border);
  transition: background .15s; }
.gtd-resize:hover::before, .gtd-resize.dragging::before { background: var(--primary); }
.gtd-listnav { list-style: none; margin: 0; padding: 0; }
.gtd-listnav li { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: .9rem; color: var(--muted); cursor: pointer; user-select: none; }
.gtd-listnav li:hover { background: var(--surface-2); color: var(--text); }
.gtd-listnav li.active { background: rgba(59,130,246,.14); color: var(--primary); font-weight: 650; }
.gtd-listnav li .co { margin-left: auto; font-size: .72rem; font-variant-numeric: tabular-nums; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); padding: 0 6px; border-radius: 999px; }
.gtd-listnav li.active .co { background: var(--surface); border-color: var(--primary); color: var(--primary); }
.gtd-listnav li .delctx, .gtd-listnav li .editctx { margin-left: 4px; opacity: 0; border: none; background: none; color: var(--muted); font-size: .9rem; padding: 0 3px; cursor: pointer; }
.gtd-listnav li:hover .delctx, .gtd-listnav li:hover .editctx { opacity: .7; }
.gtd-listnav li .delctx:hover { color: var(--danger); opacity: 1; }
.gtd-listnav li .editctx:hover { color: var(--primary); opacity: 1; }
/* Touch-Geräte (iPhone) kennen kein Hover -> Aktionen immer sichtbar */
@media (hover: none) { .gtd-listnav li .delctx, .gtd-listnav li .editctx { opacity: .55; } }
.gtd-listnav li .nav-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gtd-nav-head { font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 14px 10px 4px; }
.gtd-addctx { display: flex; gap: 6px; padding: 6px 6px 2px; }
.gtd-addctx input { flex: 1; padding: 7px 9px; font-size: .84rem; }

.twomin-hint { background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.4); color: var(--text); padding: 8px 11px; border-radius: var(--radius-sm); font-size: .8rem; margin-bottom: 12px; }
.gtd-content { display: flex; flex-direction: column; gap: 14px; }
.ctx-group { display: flex; flex-direction: column; gap: 8px; }
.ctx-group-head { display: flex; align-items: center; gap: 8px; font-size: .98rem; font-weight: 700; color: var(--primary);
  margin: 16px 0 2px; padding: 7px 12px; border-radius: 8px; border-left: 4px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 13%, transparent); letter-spacing: .01em; }
.ctx-group:first-child .ctx-group-head { margin-top: 2px; }
.ctx-group-head .n { color: var(--muted); font-weight: 600; font-size: .82rem; }

.gtd-task { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); flex-wrap: wrap; }
.gtd-task.proj { border-left: 3px solid var(--primary); }
/* Body behält eine Mindestbreite; passt die Aktionsleiste nicht mehr daneben (schmale/
   eingerückte Spalten, iPad), bricht sie unter den Titel um statt ihn zu zerquetschen. */
.gt-body { flex: 1 1 200px; min-width: min(100%, 170px); }
.gt-actions { flex: 0 1 auto; }
.gt-title { font-weight: 600; font-size: .92rem; word-break: normal; overflow-wrap: anywhere; }
.gt-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.gt-meta select { padding: 4px 8px; font-size: .78rem; border-radius: 7px; }
/* Kontext · Lebensbereich · Organisation zusammen in einer Zeile */
.gt-tags { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Abschluss des Verarbeitens: Unteraufgabe · Notiz · in Arbeit · Liste.
   Steht am Ende der Zeile, weil das Einsortieren der letzte Schritt ist. */
.gt-step { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
           margin-left: auto; padding-left: 10px; border-left: 1px solid var(--border); }
.gt-step .mv { font-weight: 600; }
.gt-tags .gt-ctx { max-width: 150px; }
.gt-tags .gt-area, .gt-tags .gt-org { max-width: 170px; }
.gt-est-chips { display: inline-flex; gap: 3px; align-items: center; }
.gt-est-chips button { font-size: .74rem; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); }
.gt-est-chips button.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.gt-est-chips button:hover { border-color: var(--primary); }
.gt-est-none { color: #d97706; font-size: .76rem; font-weight: 600; }
.gt-est-chips button.est-plus { font-weight: 600; }
.gt-proj-badge { font-size: .72rem; font-weight: 600; color: var(--primary); background: rgba(59,130,246,.12); padding: 1px 7px; border-radius: 6px; cursor: pointer; }
.gt-due { font-size: .72rem; font-weight: 600; color: var(--danger); background: rgba(239,68,68,.1); padding: 1px 7px; border-radius: 6px; }
.gt-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.gtd-task .mv { font-size: .78rem; padding: 4px 8px; border-radius: 7px; }
.gt-actions .del { border: 1px solid var(--border); border-radius: 7px; width: 28px; height: 28px; color: var(--muted); }
.gt-actions .del:hover { border-color: var(--danger); color: var(--danger); }
.gt-actions .done { border: 1px solid var(--border); border-radius: 7px; padding: 4px 9px; font-size: .78rem; color: #16a34a; }
.gt-actions .done:hover { background: rgba(22,163,74,.12); border-color: #16a34a; }

/* Verschachtelte Unteraufgaben: vollwertige, eingerückte Aufgaben (rekursiv) */
/* Unterbaum als eigene, volle Breite unter Titel+Aktionen (nicht in der Body-Spalte
   eingezwängt) – so nutzen eingerückte Unteraufgaben die ganze verfügbare Breite. */
.gtd-task > .gt-childlist { flex: 1 1 100%; width: 100%; }
.gt-childlist { list-style: none; margin: 8px 0 0; padding: 8px 0 0 16px; border-top: 1px dashed var(--border); border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.gt-childlist > .gtd-task { background: var(--surface-2); }
/* Kompakter Zeit-Knopf in Unteraufgaben (ein Feld, klappt die Auswahl auf) */
.gt-est-btn { border: 1px solid var(--border); border-radius: 7px; padding: 4px 9px; font-size: .78rem; color: var(--muted); }
.gt-est-btn.on { color: var(--primary); border-color: var(--primary); }
.gt-est-btn:hover { border-color: var(--primary); color: var(--primary); }
.gt-subs { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 6px; }
.gt-sub { display: flex; align-items: center; gap: 8px; font-size: .85rem; }
.gt-sub .s-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex: none; }
.gt-sub.done .s-title { text-decoration: line-through; color: var(--muted); }
.gt-sub .s-title { flex: 1; }
.gt-sub .s-est { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.gt-sub button { color: var(--muted); font-size: .9rem; padding: 0 3px; }
.gt-sub button:hover { color: var(--text); }
.gt-addsub { display: flex; gap: 6px; margin-top: 8px; }
.gt-addsub input { flex: 1; padding: 6px 9px; font-size: .82rem; }

/* ---------- Planung: Erweiterungen ---------- */
.gtd-head-right { display: flex; align-items: center; gap: 10px; }
.gtd-listnav li.nav-sec { font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 12px 10px 3px; cursor: default; }
.gtd-listnav li.nav-sec:hover { background: none; color: var(--muted); }
.gtd-listnav li.nav-sec:first-child { padding-top: 2px; }

.gt-meta select.gt-area { border-color: var(--border); }
.gt-area-chip { font-size: .72rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: rgba(120,130,150,.16); color: var(--text); }
.gt-age-chip { font-size: .72rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: rgba(217,119,6,.16); color: #b45309; }
.gt-block-chip { font-size: .72rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: rgba(220,38,38,.14); color: #dc2626; }
.gt-review-chip { font-size: .72rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: rgba(37,99,235,.14); color: #2563eb; }
.detail-btn { opacity: .7; }
.detail-btn:hover { opacity: 1; }
/* Detail-/Steuerungspanel */
.td-title { width: 100%; font-size: 1.05rem; font-weight: 650; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); margin-bottom: 14px; }
.td-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.td-grid .field { margin-bottom: 0; }
.td-grid .td-wide { grid-column: 1 / -1; }
.td-grid input, .td-grid select, #td-note { padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); }
#td-note { width: 100%; }
.td-meta { margin: 12px 0; line-height: 1.5; }
.td-links { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: -4px 0 6px; }
.td-links:empty { display: none; }
.td-links a { overflow-wrap: anywhere; }
.gt-llm-chip { font-size: .72rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: rgba(124,58,237,.14); color: #7c3aed; }
.td-llm { margin: 6px 0 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.td-llm-head { font-weight: 650; margin-bottom: 4px; }
.td-llm-info { margin-bottom: 8px; }
#td-llm-instr { width: 100%; padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); margin-bottom: 8px; }
.td-exec { width: 100%; }
.td-llm-q { margin-top: 10px; font-size: .84rem; }
.td-llm-q ul { margin: 4px 0 0; padding-left: 18px; }
.td-llm-result { margin-top: 12px; }
.td-llm-rhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.td-result { white-space: pre-wrap; word-wrap: break-word; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; font: inherit; font-size: .88rem; line-height: 1.5; max-height: 340px; overflow: auto; margin: 0; }
.td-claude { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.linklike { background: none; border: none; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: .8rem; padding: 0; }
.linklike:hover { color: var(--primary); }
.aging-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .8rem; color: var(--muted); margin: 2px 0 12px; }
.aging-pick { padding: 4px 10px; font-size: .78rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
.aging-pick.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.gt-actions .star { border: 1px solid var(--border); border-radius: 7px; width: 28px; height: 28px; color: var(--muted); font-size: .95rem; }
.gt-actions .star.on { color: #f59e0b; border-color: #f59e0b; background: rgba(245,158,11,.12); }
.gt-actions .star:hover { border-color: #f59e0b; }
.gt-actions .play-btn { border: 1px solid var(--border); border-radius: 7px; width: 28px; height: 28px; color: var(--primary); font-size: .82rem; }
.gt-actions .play-btn:hover { border-color: var(--primary); background: rgba(59,130,246,.12); }
.gt-actions .play-btn.running { color: #dc2626; border-color: #dc2626; background: rgba(220,38,38,.12); animation: pulseRun 1.6s ease-in-out infinite; }
@keyframes pulseRun { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.gtd-task .note-btn { border: 1px solid var(--border); border-radius: 7px; width: 28px; height: 28px; color: var(--muted); }
.gtd-task .note-btn.has { color: var(--primary); border-color: var(--primary); }

.gt-note { margin-top: 8px; }
.gt-note textarea { width: 100%; min-height: 54px; resize: vertical; font: inherit; font-size: .85rem; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.gt-note textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,130,246,.16); outline: none; }

.gt-goal-rank { flex: none; width: 22px; height: 22px; border-radius: 6px; background: #f59e0b; color: #fff; font-size: .78rem; font-weight: 800; display: grid; place-items: center; }
.gtd-task.goal { border-left: 3px solid #f59e0b; }
.gtd-task.done-row { opacity: .7; }
.gtd-task.done-row .gt-title { text-decoration: line-through; }

.est-presets { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 4px; }
.est-presets button { font-size: .82rem; padding: 5px 11px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
.est-presets button:hover { border-color: var(--primary); }
.gtd-task .subs-btn { border: 1px solid var(--border); border-radius: 7px; width: 28px; height: 28px; color: var(--muted); font-size: .95rem; }
.gtd-task .subs-btn.has { color: var(--primary); border-color: var(--primary); }
.gtd-task .subs-btn.open { background: rgba(59,130,246,.12); color: var(--primary); border-color: var(--primary); }
.gtd-task .subs-btn:hover { border-color: var(--primary); color: var(--primary); }
.gt-title { cursor: text; border-radius: 5px; padding: 1px 4px; margin: -1px -4px; display: inline-block; }
.gt-title:hover { background: var(--surface-2); }
.gt-title.editing { background: var(--surface); box-shadow: 0 0 0 2px rgba(59,130,246,.4); outline: none; }
.gt-due-input { font-size: .76rem; padding: 3px 7px; border-radius: 7px; color: var(--muted); max-width: 145px; }
.gt-due-input.set { color: var(--text); border-color: var(--primary); }
.gt-due-input.overdue { color: var(--danger); border-color: var(--danger); background: rgba(239,68,68,.08); }
.ctx-group-head.overdue { color: var(--danger); border-left-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 13%, transparent); }

/* ---------- Tagesplanung ---------- */
.tp-grid { display: grid; grid-template-columns: 360px 1fr; gap: 16px; align-items: start; }
@media (max-width: 820px) { .tp-grid { grid-template-columns: 1fr; } }
.tp-hint { margin: 0 0 12px; }
.tp-candidates-list { display: flex; flex-direction: column; gap: 8px; }
.tp-group-h { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 10px 2px 2px; }
.tp-group-h:first-child { margin-top: 0; }
.tp-cand { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: grab; }
.tp-cand:active { cursor: grabbing; }
.tp-cand.dragging { opacity: .45; }
.tp-cand-main { flex: 1; min-width: 0; }
.tp-cand-title { font-weight: 600; font-size: .9rem; }
.tp-cand-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.tp-cand-meta .badge { font-size: .68rem; padding: 1px 6px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); }
.tp-cand-meta .badge.due { color: var(--danger); border-color: var(--danger); background: rgba(239,68,68,.08); }
.tp-est { font-size: .74rem; font-weight: 600; color: var(--primary); font-variant-numeric: tabular-nums; }
.tp-add { flex: none; width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 8px; color: var(--primary); font-size: 1.05rem; }
.tp-add:hover { background: rgba(59,130,246,.12); border-color: var(--primary); }

.tp-timeline { position: relative; background-color: var(--surface); background-image: repeating-linear-gradient(to bottom, rgba(128,132,148,.13) 0, rgba(128,132,148,.13) 1px, transparent 1px, transparent 11.5px); background-position: 0 8px; border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 8px 8px 56px; box-shadow: var(--shadow); min-height: 300px; transition: box-shadow .15s; }
.tp-timeline.drop { box-shadow: inset 0 0 0 2px var(--primary); }
.tp-appt { position: absolute; left: 4px; width: 44%; border-radius: 6px; padding: 3px 7px; font-size: .74rem; overflow: hidden; color: var(--text); background: transparent; border: 1.5px dashed var(--cat, var(--primary)); }
.tp-appt b, .tp-block b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-time { font-size: .68rem; opacity: .8; font-variant-numeric: tabular-nums; }
.tp-block { position: absolute; right: 4px; width: 44%; border-radius: 6px; padding: 3px 7px; font-size: .74rem; overflow: hidden; color: #fff; background: var(--primary); box-shadow: 0 1px 2px rgba(0,0,0,.15); cursor: grab; }
.tp-block:active { cursor: grabbing; }
.tp-block.dragging { opacity: .45; }
.tp-unplan { position: absolute; top: 2px; right: 3px; width: 18px; height: 18px; border-radius: 5px; color: #fff; background: rgba(0,0,0,.18); font-size: .7rem; line-height: 1; }
.tp-unplan:hover { background: rgba(0,0,0,.4); }

/* Kompakte Blöcke fürs 15-Min-Raster */
.tp-appt, .tp-block { padding: 1px 6px; line-height: 1.15; }
.tp-appt b, .tp-block b { font-size: .72rem; }
.tp-appt.short, .tp-block.short { padding: 0 6px; display: flex; align-items: center; }
.tp-appt.short b, .tp-block.short b { font-size: .68rem; line-height: 1; }
.tp-unplan { width: 15px; height: 15px; font-size: .6rem; top: 1px; right: 2px; display: grid; place-items: center; }
.tp-block.short .tp-unplan { top: 50%; transform: translateY(-50%); }

/* Verplant-Liste + erledigte Blöcke */
.tp-left { display: flex; flex-direction: column; gap: 16px; }
.tp-sched-list { display: flex; flex-direction: column; gap: 7px; }
.tp-sched { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.tp-sched-main { flex: 1; min-width: 0; }
.tp-sched-title { font-weight: 600; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-sched-time { font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.tp-check { flex: none; width: 28px; height: 28px; border: 1.5px solid #16a34a; border-radius: 8px; color: #16a34a; font-size: .95rem; font-weight: 700; }
.tp-check:hover { background: rgba(22,163,74,.14); }
.tp-back { flex: none; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); font-size: 1rem; }
.tp-back:hover { border-color: var(--primary); color: var(--primary); }
.tp-block.done { background: var(--surface-2); color: var(--muted); border: 1px dashed var(--border); box-shadow: none; cursor: default; }
.tp-block.done b { text-decoration: line-through; }
/* Routine-Blöcke in der Tagesplanung */
.tp-rout { position: absolute; right: 4px; width: 44%; border-radius: 6px; padding: 1px 6px 1px 22px;
  font-size: .72rem; overflow: hidden; color: var(--text); background: var(--surface-2);
  border: 1.5px solid #a855f7; border-left: 4px solid #a855f7; line-height: 1.15; display: flex; align-items: center; }
.tp-rout b { font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-rout.done { opacity: .6; }
.tp-rout.done b { text-decoration: line-through; }
.tp-rcheck { position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; border-radius: 5px; font-size: .68rem; line-height: 1; display: grid; place-items: center;
  background: transparent; border: none; cursor: pointer; }
.tp-rcheck:disabled { cursor: default; opacity: .7; }
.tp-sched-rout { border-left: 4px solid #a855f7; }
.tp-sched-rout.done { opacity: .62; }
.tp-sched-rout.done .tp-sched-title { text-decoration: line-through; }
.tp-sched-rout .tp-check { border-color: #a855f7; color: #a855f7; }
.tp-sched-rout .tp-check:hover { background: rgba(168,85,247,.14); }

/* ---------- LLM Daily Review ---------- */
.overlay-card.wide { max-width: 720px; }
.review-list { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 14px; }
.rev-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--surface-2); }
.rev-accept { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); font-weight: 600; cursor: pointer; }
.rev-accept input { width: 16px; height: 16px; }
.rev-title { font-weight: 600; font-size: .95rem; margin: 4px 0; }
.rev-old { color: var(--muted); text-decoration: line-through; font-weight: 500; }
.rev-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.rev-badge { font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.rev-badge.due { color: var(--danger); border-color: var(--danger); }
.rev-badge.two { color: #d97706; border-color: #d97706; }
.rev-badge.llm { color: var(--primary); border-color: var(--primary); }
.rev-note { font-size: .82rem; color: var(--text); margin-top: 4px; }
.rev-subs { font-size: .8rem; color: var(--primary); margin-top: 3px; }
.rev-reason { font-size: .78rem; color: var(--muted); margin-top: 4px; font-style: italic; }

/* ---------- Dashboard / Weekly Review ---------- */
.dash-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.dash-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-presets .chip { font-size: .8rem; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); cursor: pointer; }
.dash-presets .chip:hover { border-color: var(--primary); color: var(--primary); }
.dash-presets .chip.on { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.dash-range { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); flex-wrap: wrap; }
.dash-range input[type="date"] { padding: 5px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: .82rem; }
.dash-range .btn.small { font-size: .8rem; padding: 6px 12px; border-radius: var(--radius-sm); background: var(--primary); color: var(--primary-ink); font-weight: 600; }
.dash-range .btn.small:hover { filter: brightness(1.05); }
.report-card .kpi-sub { font-size: .68rem; color: var(--muted); margin-top: 2px; }
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.dash-grid > .panel { margin-top: 0; }
@media (max-width: 680px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-open-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); cursor: pointer; }
.dash-chip b { font-variant-numeric: tabular-nums; color: var(--primary); }
.dash-chip:hover { border-color: var(--primary); color: var(--primary); }
.dash-chip.jump { background: var(--surface); }
.dash-done-list { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; }
.dash-done-list .b-row { border-left-color: #22c55e; }
.b-row.frog { border-left-color: #f97316; cursor: pointer; }
.b-row.frog:hover { background: var(--surface); }
.unstuck-btn { flex: none; white-space: nowrap; border-color: #f97316; color: #f97316; background: transparent; }
.unstuck-btn:hover { background: #f97316; color: #fff; }
.dash-review .dash-chip { background: var(--surface-2); }

/* ---------- Coach (LLM) ---------- */
.coach-layout { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
@media (max-width: 820px) { .coach-layout { grid-template-columns: 1fr; } }
/* min-width: 0 – ohne das wächst das Grid-Element an seinem breitesten Kind (lange
   Aufgabentitel im Lagebild) über den Viewport hinaus und der Text wird abgeschnitten. */
.coach-main { display: flex; flex-direction: column; min-height: 420px; min-width: 0; }
/* Morgen-Brief (Chief of Staff) */
.coach-brief:empty { display: none; }
.coach-brief { background: color-mix(in srgb, var(--primary) 9%, var(--surface)); border: 1px solid var(--border);
  border-left: 4px solid var(--primary); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.db-head { display: flex; align-items: center; gap: 10px; }
.db-greet { font-weight: 700; font-size: 1.05rem; }
.db-head .db-refresh { margin-left: auto; width: 30px; height: 30px; font-size: .95rem; }
.db-line { margin-top: 6px; font-size: .9rem; }
.db-sub { margin-top: 12px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.db-top3 { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.db-top3 li { display: flex; align-items: center; gap: 9px; }
.db-rank { width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; font-size: .78rem;
  font-weight: 700; display: grid; place-items: center; flex: none; }
.db-t { font-weight: 600; }
.db-why { font-size: .72rem; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 1px 8px; }
.db-actions { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.db-routs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.db-rout { font-size: .78rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; }
.db-rout.done { opacity: .6; }
.db-shutlink { margin-top: 12px; }
/* Abend-Shutdown (Chief of Staff Phase 1b) – nächtliche Variante der Brief-Karte */
.db-shutdown { background: color-mix(in srgb, #6366f1 10%, var(--surface)); border-left-color: #6366f1; }
.db-seeds { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.db-seed { font-size: .78rem; background: color-mix(in srgb, #10b981 14%, var(--surface)); border: 1px solid color-mix(in srgb, #10b981 35%, var(--border));
  border-radius: 999px; padding: 2px 9px; }
.db-times { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.db-time { font-size: .78rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; }
.db-time-k { background: color-mix(in srgb, #0891b2 12%, var(--surface)); }
.db-carrylist { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.db-carry { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.db-carry input { flex: none; }
.db-field { display: flex; gap: 8px; margin-top: 6px; }
.db-field input { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font-size: .88rem; }
/* Chief-of-Staff-Lagebild (Phase 2) */
.coach-board { border-left-color: #f59e0b; background: color-mix(in srgb, #f59e0b 8%, var(--surface)); }
.bd-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.bd-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; }
.bd-card.bd-overdue { border-left: 3px solid #ef4444; }
.bd-card.bd-stalled_goals { border-left: 3px solid #6366f1; }
.bd-card.bd-goalless { border-left: 3px solid #0891b2; }
.bd-card.bd-cleanup { border-left: 3px solid #a855f7; }
.bd-card.bd-trend { border-left: 3px solid #64748b; }
.bd-head { display: flex; align-items: center; gap: 8px; }
.bd-icon { font-size: 1.05rem; }
.bd-title { font-weight: 700; font-size: .92rem; }
.bd-hint { margin-top: 2px; }
.bd-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bd-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bd-t { font-weight: 600; font-size: .88rem; }
.bd-why { font-size: .72rem; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 1px 8px; }
.bd-acts { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.bd-cardacts { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.bd-card.bd-blocker { border-left: 3px solid #14b8a6; }
.btn.xsmall { font-size: .74rem; padding: 2px 8px; border-radius: 7px; }
/* Fokus-Sitzung (Phase 3) */
.db-focus { margin-left: auto; }
.focus-card { text-align: center; }
.focus-body { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.focus-task { font-size: 1.15rem; font-weight: 700; margin: 2px 0 0; }
.focus-clock { font-size: 3rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em;
  margin: 10px 0; color: var(--primary); }
.focus-hint { max-width: 34ch; }
.focus-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.focus-anker { max-width: 40ch; margin: 2px auto 0; padding: 6px 10px; border-radius: 8px;
  background: color-mix(in srgb, #10b981 12%, var(--surface)); font-size: .9rem; font-weight: 600; }
.focus-prompt { margin-top: 10px; }
.focus-prompt-title { font-weight: 700; margin: 0 0 6px; }
.focus-prompt-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
/* Momentum-Anzeige + Positiv-Anker in der Aufgabe */
.db-momline { margin-top: 6px; }
.db-momentum { font-size: .84rem; font-weight: 700; background: color-mix(in srgb, #f59e0b 16%, var(--surface));
  border: 1px solid color-mix(in srgb, #f59e0b 40%, var(--border)); border-radius: 999px; padding: 2px 10px; }
.td-anker { margin: 10px 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.td-anker-text { padding: 6px 10px; border-radius: 8px; font-size: .9rem;
  background: color-mix(in srgb, #10b981 12%, var(--surface)); }
/* Stufe 2/3: Wenn-Dann-Plan, Anker-Zeile im Brief, Pause/Park, Belohnung */
.db-plan { flex-basis: 100%; margin: 2px 0 0 31px; font-size: .8rem; color: var(--muted); }
.db-anker-line { color: color-mix(in srgb, #10b981 80%, var(--text)); }
.focus-park { display: flex; gap: 8px; margin-top: 12px; }
.focus-park input { flex: 1; min-width: 0; padding: 6px 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface); color: var(--text); font-size: .85rem; }
.anker-ai { margin-top: 8px; }
.anker-suggestion { margin-top: 6px; padding: 6px 10px; border-radius: 8px; font-weight: 600;
  background: color-mix(in srgb, #6366f1 12%, var(--surface)); }
.ziel-reward { margin-top: 6px; font-size: .9rem;
  background: color-mix(in srgb, #f59e0b 14%, var(--surface)); border-radius: 8px; padding: 4px 10px; display: inline-block; }
.coach-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.coach-head .coach-title { font-weight: 600; font-size: .95rem; }
.coach-log { display: flex; flex-direction: column; gap: 10px; padding: 4px; min-height: 300px; max-height: 62vh; overflow-y: auto; }
.coach-msg { display: flex; }
.coach-msg.user { justify-content: flex-end; }
.coach-msg .bubble { max-width: 86%; padding: 10px 13px; border-radius: 14px; font-size: .9rem; line-height: 1.45; box-shadow: var(--shadow); }
.coach-msg.assistant .bubble { background: var(--surface); border: 1px solid var(--border); border-top-left-radius: 4px; }
.coach-msg.user .bubble { background: var(--primary); color: var(--primary-ink); border-top-right-radius: 4px; }
.coach-msg .bubble ul { margin: 6px 0 2px; padding-left: 18px; }
.coach-msg .bubble li { margin: 2px 0; }
.coach-msg .bubble.typing { color: var(--muted); font-style: italic; }
.coach-msg .bubble.err { background: var(--surface-2); color: var(--danger); border: 1px solid var(--danger); }
.coach-msg .bubble.result { background: var(--surface-2); border: 1px dashed var(--primary); max-width: 100%; }
.coach-msg .bubble.result .res-head { font-weight: 700; color: var(--primary); margin-bottom: 4px; }
.coach-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-self: flex-start; }
.coach-act { font-size: .8rem; padding: 6px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--primary); color: var(--primary); font-weight: 600; cursor: pointer; }
.coach-act:hover { background: var(--primary); color: var(--primary-ink); }
.coach-act.done { background: var(--surface-2); border-color: var(--border); color: var(--muted); cursor: default; }
.coach-input { display: flex; gap: 8px; margin-top: 10px; }
.coach-input textarea { flex: 1; resize: vertical; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 9px 11px; font: inherit; font-size: .9rem; }
.coach-input .primary-btn { align-self: stretch; }
.coach-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.coach-quick .chip { font-size: .78rem; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); cursor: pointer; }
.coach-quick .chip:hover { border-color: var(--primary); color: var(--primary); }
.coach-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.coach-side .panel { margin-top: 0; }
.coach-side .panel + .panel { margin-top: 0; }
.goals-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.goal { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); }
.goal.done .goal-title { text-decoration: line-through; color: var(--muted); }
.goal-check { font-size: 1rem; line-height: 1; }
.goal-main { flex: 1; min-width: 0; }
.goal-title { font-weight: 600; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goal-sub { font-size: .72rem; color: var(--muted); }
.goal-add { display: flex; gap: 6px; }
.goal-add input { flex: 1; min-width: 0; padding: 7px 9px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: .82rem; }
.goal-add select { border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: .78rem; }
.goal-add .btn.small, .coach-side .btn.small { font-size: .85rem; padding: 6px 11px; border-radius: var(--radius-sm); background: var(--primary); color: var(--primary-ink); font-weight: 700; }
.coach-notes { display: flex; flex-direction: column; gap: 5px; }
.coach-note { display: flex; align-items: flex-start; gap: 7px; font-size: .8rem; padding: 5px 7px; border-radius: 7px; background: var(--surface-2); }
.coach-note .cn-ic { flex: none; }
.coach-note .cn-tx { flex: 1; min-width: 0; }
.coach-note.weakness { border-left: 3px solid #f97316; }
.coach-note.strength { border-left: 3px solid #22c55e; }
.coach-note.report { border-left: 3px solid var(--primary); }
.coach-report { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 10px; font-size: .82rem; }
.coach-report .rep-sum { font-weight: 600; margin-bottom: 6px; }
.coach-report .rep-row { margin: 3px 0; }

/* ---------- Tagesziele: Tages-Navigation ---------- */
.goalday-nav { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; }
.goalday-nav .ghost-btn.small { padding: 4px 10px; font-size: .82rem; line-height: 1; }
.goalday-label { font-size: .86rem; font-weight: 600; color: var(--text); }
.goalday-nav .goalday-today { margin-left: auto; color: var(--primary); border-color: var(--primary); }

/* ---------- Aufgaben-Suche ---------- */
.task-search { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 10px; box-shadow: var(--shadow); }
.task-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,130,246,.16); }
.task-search .ts-ic { color: var(--muted); font-size: .95rem; }
.task-search input[type="search"] { flex: 1; border: 0; background: transparent; color: var(--text); font: inherit; font-size: .9rem; padding: 6px 2px; outline: none; }
.task-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.task-search .ghost-btn.small { padding: 3px 9px; }

/* ---------- Fälligkeit/Review: Löschen (✕) ---------- */
.gt-due-wrap { display: inline-flex; align-items: center; gap: 3px; }
.gt-due-clear { border: 1px solid var(--border); border-radius: 6px; width: 22px; height: 24px; line-height: 1; color: var(--muted); font-size: .72rem; }
.gt-due-clear:hover { border-color: var(--danger); color: var(--danger); background: rgba(239,68,68,.08); }
.due-field { display: inline-flex; align-items: center; gap: 6px; }
.due-field input[type="date"] { flex: 1; min-width: 0; }
.due-field .due-clear { flex: none; border: 1px solid var(--border); border-radius: 7px; width: 30px; height: 30px; color: var(--muted); font-size: .8rem; }
.due-field .due-clear:hover { border-color: var(--danger); color: var(--danger); background: rgba(239,68,68,.08); }

/* ---------- Coach: Auto-Ausführen-Schalter ---------- */
.coach-auto { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; font-size: .8rem; color: var(--muted); cursor: pointer; user-select: none; }
.coach-auto input { width: 16px; height: 16px; accent-color: var(--primary); }
.coach-auto:hover { color: var(--text); }

/* ---------- Web-Push: Erinnerungen ---------- */
.push-box { display: flex; flex-direction: column; gap: 8px; }
.push-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.push-box .btn.small.ghost { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); font-weight: 600; }
.push-box .btn.small.ghost:hover { border-color: var(--primary); color: var(--primary); }
.push-hint { margin-top: 2px; }

/* ---------- Web-Push: Erinnerungs-Schalter ---------- */
.push-toggles { display: flex; flex-direction: column; gap: 7px; margin: 4px 0 10px; }
.push-toggle { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .84rem; cursor: pointer; }
.push-toggle input { width: 16px; height: 16px; accent-color: var(--primary); }
.push-toggle .push-sub { flex-basis: 100%; margin-left: 24px; font-size: .72rem; color: var(--muted); }
.push-toggle-row { display: flex; align-items: flex-start; gap: 10px; }
.push-toggle-row .push-toggle { flex: 1; }
.push-time { padding: 3px 6px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface); color: var(--text); font-size: .8rem; }

/* ---------- "In Bearbeitung"-Status ---------- */
.gtd-task .inprog-btn { border: 1px solid var(--border); border-radius: 7px; width: 28px; height: 28px; color: var(--muted); font-size: .9rem; }
.gtd-task .inprog-btn:hover { border-color: #2563eb; color: #2563eb; }
.gtd-task .inprog-btn.on { border-color: #2563eb; color: #2563eb; background: rgba(37,99,235,.12); }
.gtd-task.inprog { border-left: 3px solid #2563eb; }
.gt-inprog-chip { font-size: .72rem; font-weight: 600; color: #1d4ed8; background: rgba(37,99,235,.12); padding: 1px 7px; border-radius: 6px; }
.td-check { flex-direction: row; align-items: center; gap: 8px; }
.td-check input { width: 16px; height: 16px; accent-color: #2563eb; }

/* ---------- Wiederkehrende Aufgaben ---------- */
.gt-recur-chip { font-size: .72rem; font-weight: 600; color: #7c3aed; background: rgba(124,58,237,.12); padding: 1px 7px; border-radius: 6px; }

/* ---------- Undo-Toast & Papierkorb ---------- */
.toast-action { margin-left: 12px; font-weight: 700; color: #fff; text-decoration: underline; background: rgba(255,255,255,.18); border-radius: 6px; padding: 3px 10px; }
.toast-action:hover { background: rgba(255,255,255,.32); }
.trash-bar { margin-bottom: 10px; }
.gtd-task.trash-row { opacity: .82; border-left: 3px solid var(--muted); }
.gtd-task.trash-row .gt-title { text-decoration: line-through; color: var(--muted); }

/* ---------- Routinen / Habits ---------- */
.rout-group { margin-bottom: 14px; }
.rout-group-head { font-size: .8rem; font-weight: 700; color: var(--muted); margin: 4px 2px 6px; }
.rout-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; background: var(--surface-2); margin-bottom: 6px; }
.rout-row.done { opacity: .7; }
.rout-check { font-size: 1.25rem; line-height: 1; }
.rout-main { flex: 1; min-width: 0; }
.rout-title { font-weight: 600; font-size: .9rem; }
.rout-row.done .rout-title { text-decoration: line-through; }
.rout-sub { font-size: .74rem; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rd-row { letter-spacing: 2px; }
.rd { color: var(--border); } .rd.done { color: #22c55e; } .rd.off { color: var(--border); opacity: .5; }
.rout-add { display: flex; flex-direction: column; gap: 10px; }
.rout-add input[type="text"] { width: 100%; }
.rout-add-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rout-goalsel { max-width: 240px; }
.rout-goalchip { display: inline-flex; align-items: center; gap: 5px; max-width: 260px;
  background: var(--surface-2); border: 1px solid var(--border, #8884); border-left: 4px solid var(--gc, var(--primary));
  border-radius: 999px; padding: 3px 10px; font-size: .76rem; color: var(--text); cursor: pointer; line-height: 1.25; }
.rout-goalchip:hover { border-color: var(--gc, var(--primary)); }
.rout-goalchip span { overflow-wrap: anywhere; }
.rout-goalchip em { font-style: normal; color: var(--muted); font-size: .7rem; white-space: nowrap; }
.rout-weekdays { display: flex; flex-wrap: wrap; gap: 4px; }
.wd-chip { font-size: .76rem; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); }
.wd-chip.on { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.wd-chip:hover { border-color: var(--primary); }
.rout-all { display: flex; flex-direction: column; gap: 10px; }
.rout-manage { border: 1px solid var(--border); border-radius: 9px; padding: 10px; }
.rout-manage.inactive { opacity: .55; }
.rout-manage-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rout-manage-top .rout-title { flex: 1; }
.rout-manage-ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rout-active { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); }
.rout-active input { width: 15px; height: 15px; accent-color: var(--primary); }

/* ==================== 🎯 Ziele-Modul ==================== */
.ziele-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ziele-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.ziele-filters .chip { padding: 5px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: .82rem; cursor: pointer; }
.ziele-filters .chip.on { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.ziele-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.ziel-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--gc, var(--primary)); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); cursor: pointer; transition: transform .05s, border-color .15s; }
.ziel-card:hover { border-color: var(--gc, var(--primary)); transform: translateY(-1px); }
.ziel-card-head { display: flex; align-items: center; gap: 8px; }
.ziel-ico { font-size: 1.2rem; }
.ziel-title { font-weight: 650; flex: 1; min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.ziel-pct { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--gc, var(--primary)); }
.ziel-bar { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin: 10px 0 8px; }
.ziel-bar i { display: block; height: 100%; background: var(--gc, var(--primary)); border-radius: 999px; transition: width .3s; }
.ziel-meta { font-size: .82rem; color: var(--muted); }
.ziel-sub { font-size: .78rem; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
/* Mein Plan */
.ziel-plan-head { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--gc, var(--primary)); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); margin: 10px 0 16px; }
.ziel-plan-title { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 700; }
.ziel-plan-meta { font-size: .84rem; color: var(--muted); margin: 4px 0 10px; }
.ziel-plan-pct { font-size: .82rem; color: var(--muted); margin-top: 4px; }
.ziel-measure { margin-top: 10px; display: flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; font-weight: 600; }
.ziel-plan-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ziel-refl-hint { margin-top: 10px; font-size: .82rem; color: var(--muted); }
.ziel-sec { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); margin-bottom: 14px; }
.ziel-sec h3 { margin: 0 0 10px; }
.ziel-ms-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ziel-ms { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.ziel-ms-check { background: none; border: none; cursor: pointer; font-size: 1.05rem; }
.ziel-ms-title { flex: 1; }
.ziel-ms.done .ziel-ms-title { text-decoration: line-through; color: var(--muted); }
.ziel-ms-meta { font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ziel-ms-del { background: none; border: none; color: var(--muted); cursor: pointer; }
.ziel-ms-del:hover { color: var(--danger); }
.ziel-addms, .ziel-addtask { display: flex; gap: 6px; flex-wrap: wrap; }
.ziel-addms input, .ziel-addtask input { flex: 1; min-width: 120px; padding: 7px 10px; font-size: .84rem; }
.ziel-addms .ziel-msnum { flex: 0 0 90px; min-width: 70px; }
.ziel-addms input[type="date"] { flex: 0 0 150px; }
.ziel-subs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.ziel-subcard { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border-left: 3px solid var(--gc, var(--primary)); border-radius: var(--radius-sm); padding: 8px 12px; cursor: pointer; }
.ziel-subcard .ziel-title { flex: 1; }
.ziel-sub-lbl { font-size: .76rem; color: var(--muted); }
.ziel-tasks { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: .9rem; }
.ziel-task.done { color: var(--muted); text-decoration: line-through; }
/* Formular */
.ziel-form-h { margin: 10px 0 12px; }
.ziel-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.ziel-form .field { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; color: var(--muted); }
.ziel-form .field input, .ziel-form .field select, .ziel-form .field textarea { color: var(--text); font-size: .92rem; }
.ziel-form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.ziel-form-row .field { flex: 1; min-width: 130px; }
.ziel-form .td-check { flex-direction: row; align-items: center; gap: 8px; color: var(--text); font-size: .9rem; }
.ziel-sw-row, .ziel-ico-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ziel-sw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.ziel-sw.on { border-color: var(--text); }
.ziel-icopick { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); font-size: 1.1rem; cursor: pointer; }
.ziel-icopick.on { border-color: var(--primary); background: rgba(59,130,246,.12); }
.ziel-form-btns { display: flex; gap: 8px; margin-top: 4px; }

/* Ziele – Feedback-Fixes: auto-grow Textfelder, adaptiver Zeitraum-Picker, Aufgaben-Suche */
.ziel-grow { resize: vertical; overflow: hidden; min-height: 40px; }
.ziel-period-pick select, .ziel-period-pick input { width: 100%; }
.ziel-period-multi { display: flex; gap: 6px; }
.ziel-period-multi select { flex: 1; }
.ziel-task { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ziel-task-t { flex: 1; min-width: 0; }
.ziel-task-unlink { background: none; border: none; color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.ziel-task-unlink:hover { color: var(--danger); }
.ziel-tasklink { position: relative; margin-bottom: 8px; }
.ziel-tasklink input { width: 100%; }
.ziel-task-results { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.ziel-task-hit { text-align: left; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 10px; font-size: .86rem; color: var(--text); cursor: pointer; }
.ziel-task-hit:hover { border-color: var(--primary); color: var(--primary); }

/* ==================== 📓 Journal-Modul ==================== */
.jr-form { max-width: 720px; margin-bottom: 18px; }
.jr-list { display: flex; flex-direction: column; gap: 12px; max-width: 820px; }
.jr-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow); }
.jr-head { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--muted); }
.jr-date { font-variant-numeric: tabular-nums; }
.jr-mood { font-size: 1.1rem; }
.jr-goal { background: var(--surface-2); border-radius: 999px; padding: 2px 10px; }
.jr-actions { margin-left: auto; display: flex; gap: 6px; }
.jr-title { font-weight: 650; margin-top: 6px; }
.jr-body { margin-top: 4px; font-size: .92rem; }
.jr-tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.jr-tag { font-size: .74rem; color: var(--primary); background: rgba(59,130,246,.12); border-radius: 999px; padding: 2px 8px; }

/* Konto & Login (Phase 1 / 2a) */
.auth-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.auth-tab { flex: 1; padding: 8px; border: 1px solid var(--border); background: transparent; color: var(--muted); border-radius: 8px; cursor: pointer; font: inherit; }
.auth-tab.active { color: var(--text); border-color: #3b82f6; font-weight: 600; }
.auth-error { color: #dc2626; font-size: .85rem; min-height: 1.2em; margin: 8px 0 0; }
.overlay.locked { backdrop-filter: blur(6px); }
.badge-ok { color: #16a34a; font-size: .8rem; margin-left: 6px; }
#accInviteOut code { font-size: 1.05rem; user-select: all; }
.acc-pw { margin-top: 8px; }
.acc-pw form { margin-top: 10px; }

/* hidden-Attribut muss auch gegen eigene display-Regeln (.field, .icon-btn, .panel) gewinnen */
[hidden] { display: none !important; }

.acc-tz { align-items: flex-end; gap: 10px; }
.acc-tz .field { flex: 1; margin-bottom: 0; }

/* Kalender je Mandant */
.cal-source-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 8px; align-items: center;
  margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--border); }
.cal-source-row input { min-width: 0; }
.cal-source-row input[type=color] { width: 44px; height: 34px; padding: 2px; }
.cal-source-row input[type=url] { grid-column: 1 / -1; }

/* Konto löschen */
.ghost-btn.danger { color: #b91c1c; border-color: #fca5a5; }
.acc-del { margin-top: 8px; }
.acc-del .field { margin-top: 6px; }

/* API-Schlüssel */
.acc-key-list { list-style: none; padding: 0; margin: 6px 0; }
.acc-key-list li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.acc-keys { margin-top: 8px; }
.acc-keys .add-cat { flex-wrap: wrap; }
.acc-keys .add-cat input[type="text"] { min-width: 12em; }
#accKeyOut code { word-break: break-all; }

/* ---------- Schnell-Eingabezeile (auf jedem Tab) ----------
   Unten angeheftet, damit sie auf dem Telefon über der Tastatur sitzt und überall
   gleich erreichbar ist. `body` bekommt unten Platz, damit sie nichts verdeckt. */
.quick-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  border-top: 2px solid var(--primary);
  box-shadow: 0 -8px 24px rgba(0,0,0,.22);
  padding: 8px 16px max(8px, env(safe-area-inset-bottom)); }
.quick-row { display: flex; align-items: center; gap: 8px; max-width: 980px; margin: 0 auto; }
.quick-row .qb-ic { font-size: 1.05rem; }
.quick-row input { flex: 1; min-width: 0; padding: 9px 11px; }
.quick-row .primary-btn { flex: 0 0 auto; min-width: 42px; }
.quick-bar.busy .quick-row input { opacity: .7; }

.quick-panel { max-width: 980px; margin: 0 auto 8px; max-height: 46vh; overflow-y: auto;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: .92rem; }
.quick-panel .bubble { background: none; padding: 0; }
.quick-panel .coach-actions { margin-top: 8px; }
.quick-panel .qp-ask { color: var(--muted); font-size: .84rem; margin-bottom: 4px; }
.quick-panel .qp-foot { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); }
.quick-panel .qp-handover { background: none; border: 0; padding: 0; color: var(--primary);
  font-size: .84rem; font-weight: 600; cursor: pointer; text-decoration: underline; }
.quick-panel .qp-err { color: var(--danger); }

/* Platz für die Leiste – sonst verdeckt sie das Ende der Seite. Die Klasse setzt
   app.js beim Einblenden; `:has()` wäre eleganter, aber nicht überall verlässlich. */
body.has-quickbar { padding-bottom: 78px; }

/* Suche: aktiver Zustand des 🔎-Umschalters in der Erfassen-Zeile. */
#searchToggle.on { border-color: var(--primary); color: var(--primary); background: rgba(59,130,246,.12); }

/* ---------- Eigene Symbole in der Tab-Leiste ----------
   Das Emoji bleibt im Markup als Rückfall stehen. Lädt das Bild, blendet der
   Geschwister-Wähler es aus; scheitert es, entfernt `onerror` das <img> – der
   Wähler greift dann nicht mehr und das Emoji erscheint. So bricht nichts,
   falls eine Datei fehlt. */
.tab-ic { width: 24px; height: 24px; vertical-align: -6px; margin-right: 3px;
  opacity: .72; transition: opacity .15s; }
.tab-ic + .tab-emoji { display: none; }
.tab.active .tab-ic, .tab:hover .tab-ic { opacity: 1; }

/* Das Eingabefeld hob sich kaum vom Untergrund ab – eigene Fläche und kräftigerer
   Rand, damit man sieht, dass man hineinschreiben kann. */
.quick-row input { background: var(--surface); border: 1px solid var(--border); }
.quick-row input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,130,246,.22); }
/* Coach-Symbol statt Emoji; das Emoji bleibt als Rückfall daneben stehen. */
.qb-ic-img { width: 28px; height: 28px; flex: 0 0 auto; }
.qb-ic-img + .qb-ic { display: none; }