/* Content-Planner – dunkles UI, angelehnt an die Next.js-Version */

:root {
  --bg: #0b1120;
  --bg2: #0f172a;
  --card: #111a2e;
  --card2: #16213a;
  --border: #24304d;
  --text: #e2e8f0;
  --muted: #8b9bb8;
  --accent: #6366f1;
  --accent2: #818cf8;
  --danger: #f87171;
  --ok: #34d399;
  --radius: 10px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--accent2); text-decoration: none; }
a:hover { text-decoration: underline; }

.app { display: flex; min-height: 100vh; }

/* ---------- Seitenleiste ---------- */
.sidebar {
  width: 240px; flex-shrink: 0;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.brand { font-weight: 700; font-size: 17px; padding: 15px 20px 13px; display: flex; align-items: center; gap: 9px; }
.brand-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.sidebar-search { position: relative; padding: 0 12px 8px; }
.sidebar-search input {
  width: 100%; padding: 7px 30px 7px 11px; font-size: 13.5px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text);
}
.sidebar-search kbd {
  position: absolute; right: 22px; top: 50%; transform: translateY(-60%);
  font: 600 11px/1 inherit; color: var(--muted); pointer-events: none;
  border: 1px solid var(--border); border-radius: 4px; padding: 3px 5px; background: var(--bg2);
}
.sidebar-search input:focus + kbd { display: none; }
.sidebar nav {
  flex: 1; padding: 2px 8px 8px; overflow-y: auto;
  /* Schmale, unauffällige Bildlaufleiste – nur sichtbar, wenn wirklich nötig */
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  scrollbar-gutter: stable;
}
.sidebar nav::-webkit-scrollbar { width: 6px; }
.sidebar nav::-webkit-scrollbar-track { background: transparent; }
.sidebar nav::-webkit-scrollbar-thumb { background: transparent; border-radius: 99px; }
.sidebar:hover nav::-webkit-scrollbar-thumb { background: var(--border); }
.sidebar nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 11px; margin: 1px 0; border-radius: 8px;
  color: var(--muted); font-weight: 500; font-size: 13.5px; line-height: 1.35;
}
.sidebar nav a:hover { background: var(--card); color: var(--text); text-decoration: none; }
.sidebar nav a.active { background: var(--card2); color: var(--text); }
.nav-ico { width: 20px; text-align: center; opacity: .8; }
.nav-count {
  margin-left: auto; background: var(--accent); color: #fff;
  border-radius: 99px; font-size: 11px; padding: 1px 7px; font-weight: 700;
}
.nav-count-warn { background: var(--danger); }

/* ---------- Warn-/Hinweiskacheln auf dem Dashboard ---------- */
.alert-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; margin-bottom: 18px; }
.alert {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--ac) 38%, transparent);
  background: color-mix(in srgb, var(--ac) 11%, transparent);
  color: var(--text); font-size: 13.5px;
}
.alert:hover { text-decoration: none; background: color-mix(in srgb, var(--ac) 18%, transparent); }
.alert-ico { font-size: 20px; flex-shrink: 0; }
.alert-danger { --ac: #f87171; }
.alert-warn   { --ac: #fbbf24; }
.alert-info   { --ac: #818cf8; }

/* ---------- Kompakter Fortschritt in Tabellen ---------- */
.mini-progress { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.mini-bar { width: 46px; height: 6px; background: var(--bg2); border-radius: 99px; overflow: hidden; display: inline-block; }
.mini-bar > span { display: block; height: 100%; border-radius: 99px; }
.mini-num { font-size: 12px; color: var(--muted); }

/* ---------- Kopierzeile (Kalender-Links) ---------- */
.copy-row { display: flex; gap: 8px; }
.copy-row input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }

/* ---------- Trefferhervorhebung in der Suche ---------- */
mark { background: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--text); border-radius: 3px; padding: 0 2px; }

.app-footer { margin-top: 34px; color: var(--muted); font-size: 12px; opacity: .65; }
.sidebar-user {
  border-top: 1px solid var(--border); padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
}
.sidebar-user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sidebar-user-info strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-info span { font-size: 12px; color: var(--muted); }
.logout { font-size: 17px; color: var(--muted); }
.logout:hover { color: var(--danger); text-decoration: none; }

/* ---------- Hauptbereich ---------- */
.main { flex: 1; padding: 26px 32px 60px; min-width: 0; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { margin: 0 0 4px; font-size: 23px; }
.page-head p { margin: 0; color: var(--muted); font-size: 14px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Karten & Raster ---------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.card h2, .card h3 { margin-top: 0; }
.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid-stats { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.stat-card .stat-num { font-size: 26px; font-weight: 700; }
.stat-card .stat-label { color: var(--muted); font-size: 13px; }

/* ---------- Badges & Chips ---------- */
.badge {
  display: inline-block; padding: 2px 9px; border-radius: 99px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--bc, #94a3b8);
  background: color-mix(in srgb, var(--bc, #94a3b8) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--bc, #94a3b8) 32%, transparent);
}
.chip {
  display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 12px;
  color: var(--bc); border: 1px solid color-mix(in srgb, var(--bc) 45%, transparent);
  background: color-mix(in srgb, var(--bc) 12%, transparent);
}
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--card2); border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--accent2);
}

/* ---------- Buttons & Formulare ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  padding: 8px 15px; border-radius: 8px; font-size: 14px; font-weight: 600;
}
.btn:hover { background: var(--accent2); text-decoration: none; color: #fff; }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-ghost:hover { background: var(--card2); }
.btn-danger { background: transparent; border: 1px solid color-mix(in srgb, var(--danger) 50%, transparent); color: var(--danger); }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 15%, transparent); }
.btn-sm { padding: 4px 10px; font-size: 13px; }

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=datetime-local], input[type=number], input[type=color], select, textarea {
  width: 100%; background: var(--bg2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 11px; font-size: 14px; font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); border-color: var(--accent); }
textarea { min-height: 90px; resize: vertical; }
label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 0 5px; }
.field { margin-bottom: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 18px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.checkbox-row { display: flex; align-items: center; gap: 8px; }
.checkbox-row input { width: auto; }
.inline-form { display: inline; }
select.slim, input.slim { width: auto; padding: 5px 9px; font-size: 13px; }

/* ---------- Tabellen ---------- */
table.data { width: 100%; border-collapse: collapse; }
table.data th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); padding: 9px 12px; border-bottom: 1px solid var(--border);
}
table.data td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data tr:hover td { background: color-mix(in srgb, var(--card2) 60%, transparent); }
table.data tr:last-child td { border-bottom: none; }
.t-muted { color: var(--muted); font-size: 13px; }
.t-overdue { color: var(--danger); font-weight: 600; }

/* Kompakte Listen (Dashboard): eine Zeile pro Eintrag, langer Titel wird gekürzt */
.mini-list { display: flex; flex-direction: column; }
.mini-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 4px; border-bottom: 1px solid var(--border);
}
.mini-row:last-child { border-bottom: none; }
.mini-row:hover { background: color-mix(in srgb, var(--card2) 55%, transparent); border-radius: 6px; }
.mini-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mini-title { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-meta { display: flex; align-items: center; gap: 7px; flex-shrink: 0; font-size: 13px; }

/* ---------- Filterleiste ---------- */
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filter-bar input[type=text] { width: 220px; }
.filter-bar select { width: auto; }

/* ---------- Flash ---------- */
.flash { padding: 11px 15px; border-radius: 8px; margin-bottom: 14px; font-weight: 500; }
.flash-success { background: color-mix(in srgb, var(--ok) 14%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); color: var(--ok); }
.flash-error { background: color-mix(in srgb, var(--danger) 14%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger); }

/* ---------- Kanban ---------- */
.kanban-wrap { overflow-x: auto; padding-bottom: 14px; }
.kanban { display: flex; gap: 12px; align-items: flex-start; min-height: 400px; }
.kanban-col { width: 265px; flex-shrink: 0; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); }
.kanban-col-head { padding: 10px 13px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13.5px; position: sticky; top: 0; }
.kanban-dot { width: 9px; height: 9px; border-radius: 50%; }
.kanban-count { margin-left: auto; color: var(--muted); font-size: 12px; }
.kanban-cards { padding: 9px; min-height: 60px; display: flex; flex-direction: column; gap: 8px; }
.kanban-col.dragover .kanban-cards { outline: 2px dashed var(--accent); outline-offset: -4px; border-radius: 8px; }
.kcard { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; cursor: grab; }
.kcard.dragging { opacity: .4; }
.kcard a.kcard-title { color: var(--text); font-weight: 600; font-size: 14px; display: block; margin-bottom: 6px; }
.kcard-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }

/* ---------- Kalender ---------- */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cal-head h2 { min-width: 0; }
/* minmax(0,1fr) verhindert, dass lange Titel die Spalten auseinanderdrücken */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-dow { text-align: center; font-size: 12px; color: var(--muted); font-weight: 700; padding: 4px 0; }
.cal-cell {
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  min-height: 96px; padding: 6px 8px; font-size: 12.5px;
  min-width: 0; overflow: hidden;
}
.cal-cell.other { opacity: .38; }
.cal-cell.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cal-day { font-weight: 700; color: var(--muted); margin-bottom: 5px; }
.cal-item { display: block; margin: 2px 0; padding: 1px 6px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-size: 12px; background: color-mix(in srgb, var(--ic) 18%, transparent); border-left: 3px solid var(--ic); }
.cal-item:hover { text-decoration: none; background: color-mix(in srgb, var(--ic) 32%, transparent); }
.cal-legend { display: flex; gap: 10px 16px; flex-wrap: wrap; margin-top: 10px; color: var(--muted); font-size: 13px; }
.cal-legend span { white-space: nowrap; }
.cal-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }

/* ---------- Projekt-Detail ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; flex-wrap: wrap; }
.tabs a { padding: 8px 14px; border-radius: 8px 8px 0 0; color: var(--muted); font-weight: 600; font-size: 14px; }
.tabs a.active { color: var(--text); background: var(--card); border: 1px solid var(--border); border-bottom-color: var(--card); margin-bottom: -1px; }
.tabs a:hover { text-decoration: none; color: var(--text); }
.detail-grid { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.detail-grid > div { min-width: 0; }
@media (max-width: 1100px) { .detail-grid { grid-template-columns: minmax(0, 1fr); } }
.meta-list { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.meta-list .row { display: flex; justify-content: space-between; gap: 10px; }
.meta-list .row span:first-child { color: var(--muted); }
.content-block { margin-bottom: 18px; }
.content-block h4 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.content-block .box { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 13px; white-space: pre-wrap; word-break: break-word; font-size: 14px; min-height: 20px; }
.copy-btn { float: right; font-size: 12px; }

/* ---------- Checkliste / Aufgaben / Kommentare ---------- */
.check-item { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--border); }
.check-item:last-child { border-bottom: none; }
.check-item.done .check-label { text-decoration: line-through; color: var(--muted); }
.check-label { flex: 1; }
.progressbar { height: 7px; background: var(--bg2); border-radius: 99px; overflow: hidden; margin: 8px 0 14px; }
.progressbar > div { height: 100%; background: var(--ok); border-radius: 99px; }

.comment { border-bottom: 1px solid var(--border); padding: 12px 0; }
.comment:last-child { border-bottom: none; }
.comment-head { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; font-size: 13px; color: var(--muted); }
.comment-body { white-space: pre-wrap; }
.comment.resolved { opacity: .55; }

.activity-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.activity-item:last-child { border-bottom: none; }
.activity-time { color: var(--muted); white-space: nowrap; font-size: 12.5px; }

/* ---------- Statistiken ---------- */
.hbar-row { display: grid; grid-template-columns: 190px 1fr 44px; gap: 10px; align-items: center; margin: 7px 0; font-size: 13.5px; }
.hbar-row-money { grid-template-columns: minmax(0, 170px) 1fr 100px; }
@media (max-width: 700px) { .hbar-row, .hbar-row-money { grid-template-columns: minmax(0, 1fr) 60px; } .hbar-row .hbar { display: none; } }
.hbar { background: var(--bg2); border-radius: 6px; height: 18px; overflow: hidden; }
.hbar > div { height: 100%; border-radius: 6px; min-width: 2px; }
.vbars { display: flex; align-items: flex-end; gap: 10px; height: 160px; padding-top: 10px; }
.vbar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.vbar { width: 100%; max-width: 46px; background: var(--accent); border-radius: 6px 6px 0 0; min-height: 2px; }
.vbar-label { font-size: 11.5px; color: var(--muted); }
.vbar-num { font-size: 12px; font-weight: 700; }

/* ---------- Login / Installer ---------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth-card { width: 100%; max-width: 420px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 30px; }
.auth-card h1 { margin: 0 0 4px; font-size: 21px; }
.auth-card .sub { color: var(--muted); margin: 0 0 20px; font-size: 14px; }
.install-card { max-width: 640px; }
.step-list { display: flex; gap: 8px; margin-bottom: 22px; }
.step-list span { flex: 1; text-align: center; font-size: 12.5px; padding: 6px; border-radius: 6px; background: var(--bg2); color: var(--muted); border: 1px solid var(--border); }
.step-list span.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.req-table { width: 100%; font-size: 14px; }
.req-table td { padding: 7px 4px; border-bottom: 1px solid var(--border); }
.req-ok { color: var(--ok); font-weight: 700; }
.req-fail { color: var(--danger); font-weight: 700; }

.empty { text-align: center; color: var(--muted); padding: 34px 10px; }
.empty .big { font-size: 30px; margin-bottom: 8px; }

.pagination { display: flex; gap: 6px; margin-top: 16px; }
.pagination a, .pagination span { padding: 6px 12px; border: 1px solid var(--border); border-radius: 7px; font-size: 13.5px; }
.pagination span.cur { background: var(--accent); border-color: var(--accent); color: #fff; }

.notif { display: flex; gap: 12px; padding: 13px 6px; border-bottom: 1px solid var(--border); align-items: flex-start; }
.notif:last-child { border-bottom: none; }
.notif.unread { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.notif-body { flex: 1; }
.notif-title { font-weight: 600; }

/* ---------- Mobile Kopfzeile ---------- */
.mobile-bar { display: none; }
.mobile-toggle {
  background: transparent; border: 1px solid var(--border); border-radius: 8px;
  width: 42px; height: 42px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; cursor: pointer; padding: 0;
}
.mobile-toggle span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .2s, opacity .2s; }
.mobile-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobile-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-title { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.mobile-add {
  width: 42px; height: 42px; border-radius: 8px; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 600;
}
.mobile-add:hover { text-decoration: none; color: #fff; }

/* Karten-Ansicht der Projektliste (nur mobil sichtbar) */
.card-list { display: none; }

@media (max-width: 860px) {
  .app { flex-direction: column; }

  .mobile-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 14px; background: var(--bg2); border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 30;
  }

  /* Seitenleiste wird zum ausklappbaren Menü */
  .sidebar {
    width: 100%; height: auto; position: static;
    border-right: none; border-bottom: 1px solid var(--border);
    display: none;
  }
  .sidebar.open { display: flex; }
  .sidebar .brand { display: none; }
  .sidebar-search { padding: 12px 14px 8px; }
  .sidebar nav a { padding: 13px 14px; font-size: 15px; }   /* größere Touch-Flächen */
  .sidebar-user { padding: 14px 16px; }

  .main { padding: 16px 14px 60px; }
  .page-head h1 { font-size: 20px; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1; justify-content: center; }
  .detail-grid { grid-template-columns: minmax(0, 1fr); }

  /* Bedienelemente größer und fingerfreundlich */
  .btn { padding: 11px 16px; }
  .btn-sm { padding: 8px 12px; }
  input[type=text], input[type=email], input[type=password], input[type=date],
  input[type=datetime-local], input[type=number], select, textarea { padding: 11px 12px; font-size: 16px; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar input[type=text], .filter-bar select { width: 100%; }
  .checkbox-row input[type=checkbox], .checkbox-row input[type=radio] { width: 20px; height: 20px; }
  .check-item { padding: 12px 4px; }
  .check-item input[type=checkbox] { width: 22px; height: 22px; }

  /* Tabellen weichen Karten */
  .table-wrap { display: none; }
  .card-list { display: flex; flex-direction: column; gap: 10px; }

  /* Kanban: eine Spalte fast bildschirmbreit, seitlich wischbar */
  .kanban-col { width: 82vw; max-width: 320px; }
  .kanban-wrap { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .kanban-col { scroll-snap-align: start; }
  .kcard { padding: 13px 14px; }

  /* Kalender kompakter */
  .cal-cell { min-height: 68px; padding: 4px 5px; font-size: 11.5px; }
  .cal-item { font-size: 11px; }
  .cal-head h2 { font-size: 17px; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; }
  .tabs a { white-space: nowrap; }
  .time-summary { gap: 18px; }
}

@media (max-width: 520px) {
  .grid-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cal-grid { gap: 3px; }
  .cal-cell { min-height: 54px; }
  .cal-item { padding: 0 3px; }
}

/* Projekt-Karten für die mobile Ansicht */
.pcard {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 13px 15px;
}
.pcard-title { font-weight: 600; font-size: 15px; display: block; margin-bottom: 8px; }
.pcard-meta { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 8px; }
.pcard-foot { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--muted); }

/* ---------- Zwei-Faktor-Anmeldung ---------- */
.qr-box {
  display: inline-block; background: #fff; padding: 10px;
  border-radius: 10px; line-height: 0; margin: 4px 0 6px;
}
.qr-box svg { display: block; }
.code-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 20px; letter-spacing: 4px; text-align: center; max-width: 200px;
}
.code-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 14px;
}
.code-grid span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px; letter-spacing: 1px; text-align: center; padding: 4px;
}
@media print {
  .sidebar, .page-head, .btn, .app-footer, .flash { display: none !important; }
  body { background: #fff; color: #000; }
  .code-grid { border-color: #000; }
  .code-grid span { color: #000; }
}

/* ---------- Druck / „Als PDF speichern" ---------- */
.print-head { display: none; }
@media print {
  @page { margin: 14mm 12mm; }

  html, body { background: #fff !important; color: #111 !important; }
  .app { display: block !important; }
  .main { padding: 0 !important; max-width: none !important; }

  /* Alles Bedienbare verschwindet – Häkchen bleiben sichtbar */
  .sidebar, .mobile-bar, .page-actions, .tabs, .filter-details, .bulk-bar,
  .dotmenu, .reply-box, .timer-nav, .cal-add, .app-footer, .flash,
  button, select, textarea, .btn, .nav-count,
  input[type="text"], input[type="search"], input[type="number"],
  input[type="password"], input[type="email"], input[type="date"],
  input[type="datetime-local"], input[type="color"], input[type="file"] {
    display: none !important;
  }
  input[type="checkbox"] { -webkit-appearance: none; appearance: none;
    width: 12px; height: 12px; border: 1.2px solid #444; border-radius: 2px;
    display: inline-block !important; vertical-align: -1px; }
  input[type="checkbox"]:checked::after { content: '✓'; display: block;
    font-size: 11px; line-height: 11px; text-align: center; color: #111; }
  .check-item.done .check-label { color: #666 !important; }

  /* Kopfzeile auf jeder Seite */
  .print-head {
    display: flex !important; align-items: baseline; gap: 10px; flex-wrap: wrap;
    border-bottom: 1.5px solid #111; padding-bottom: 6px; margin-bottom: 14px;
  }
  .print-brand { font-weight: 700; font-size: 15px; }
  .print-title { font-size: 15px; }
  .print-date { margin-left: auto; font-size: 11px; color: #555; }

  /* Karten als schlichte Blöcke, nicht auseinanderreißen */
  .card, .stat-card, .comment-thread, .att-card, .hm-row {
    background: #fff !important; border: 1px solid #bbb !important;
    box-shadow: none !important; break-inside: avoid; page-break-inside: avoid;
  }
  .card { margin-bottom: 10px; padding: 10px 12px; }
  h1, h2, h3 { color: #111 !important; break-after: avoid; page-break-after: avoid; }
  a { color: #111 !important; text-decoration: none; }
  .t-muted, .mini-sub, .comment-head { color: #555 !important; }
  .badge, .chip { color: #111 !important; border-color: #999 !important; background: #f2f2f2 !important; }
  .avatar { background: #eee !important; color: #111 !important; }
  table.data th { color: #111 !important; border-color: #999 !important; }
  table.data td { border-color: #ddd !important; }
  .grid-2, .grid-3 { grid-template-columns: 1fr 1fr !important; }
  .grid-stats { grid-template-columns: repeat(3, 1fr) !important; }

  /* Balken und Diagramme in Graustufen sichtbar halten */
  .hbar, .mini-bar, .progressbar { background: #eee !important; }
  .progressbar > div { background: #555 !important; }
  .stat-num { color: #111 !important; }
  .stat-label, .vbar-label, .vbar-num { color: #444 !important; }
  .check-item { border-color: #ddd !important; }
  .vbar { background: #666 !important; }
  .hm-cell { border: 1px solid #ccc; }
  .hm-cell.done { background: #444 !important; }

  /* Auf der Projektseite nur den Inhalt drucken, nicht die Seitenkarten */
  .detail-grid { display: block !important; }
  .detail-grid > div + div { display: none !important; }
  .comment-body { color: #111 !important; }
}

/* ---------- Zeiterfassung ---------- */
.timer-live {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent);
  border-radius: var(--radius); padding: 13px 16px; margin-bottom: 14px;
}
.timer-dot {
  width: 11px; height: 11px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent);
  animation: timer-pulse 2s infinite;
}
@keyframes timer-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.time-summary { display: flex; gap: 28px; margin: 16px 0; flex-wrap: wrap; }
.time-summary div { display: flex; flex-direction: column; gap: 2px; }
.time-summary strong { font-size: 20px; }
.time-summary .t-muted { font-size: 12.5px; }

/* ---------- Ideen ---------- */
.idea-card { display: flex; flex-direction: column; }
.idea-note {
  white-space: pre-wrap; font-size: 13.5px; color: var(--text);
  background: var(--bg2); border-radius: 8px; padding: 9px 11px; margin: 0 0 10px;
}
.timer-nav {
  display: flex; align-items: center; gap: 8px; margin: 0 10px 8px;
  padding: 8px 11px; border-radius: 8px; font-size: 12.5px;
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 32%, transparent);
  color: var(--text);
}
.timer-nav:hover { text-decoration: none; background: color-mix(in srgb, var(--ok) 20%, transparent); }
.timer-nav span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-idea  { --ac: #fbbf24; }

/* ---------- Einklappbare Filterleiste ---------- */
.filter-details > summary { display: none; }
.filter-details[open] > summary { display: none; }
@media (max-width: 860px) {
  .filter-details > summary,
  .filter-details[open] > summary {
    display: block; cursor: pointer; list-style: none;
    padding: 12px 15px; margin-bottom: 12px;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    font-weight: 600; font-size: 14px;
  }
  .filter-details > summary::-webkit-details-marker { display: none; }
  .filter-details > summary::after { content: ' ▾'; float: right; color: var(--muted); }
  .filter-details[open] > summary::after { content: ' ▴'; }
}


/* ---------- Kalender: klickbare Tage ---------- */
.cal-cell.clickable { cursor: pointer; transition: border-color .15s; }
.cal-cell.clickable:hover { border-color: var(--accent); }
.cal-day { display: flex; justify-content: space-between; align-items: center; color: var(--muted); }
.cal-day:hover { text-decoration: none; color: var(--text); }
.cal-add { opacity: 0; font-weight: 700; color: var(--accent2); transition: opacity .15s; }
.cal-cell.clickable:hover .cal-add { opacity: 1; }
.cal-item.done { opacity: .55; }
.cal-more { display: block; font-size: 11px; color: var(--accent2); padding: 1px 6px; }
@media (hover: none) { .cal-add { opacity: .7; } }

/* ---------- Routinen ---------- */
.routine-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 4px; border-bottom: 1px solid var(--border);
}
.routine-row:last-child { border-bottom: none; }
.routine-row input[type=checkbox] { width: 22px; height: 22px; margin-top: 1px; }
.routine-row.done .routine-main > strong { text-decoration: line-through; color: var(--muted); }
.routine-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.routine-main .t-muted { font-size: 12.5px; }
.ai-box {
  margin-top: 6px; padding: 9px 12px; border-radius: 8px; font-size: 13.5px;
  background: color-mix(in srgb, #a78bfa 10%, transparent);
  border: 1px solid color-mix(in srgb, #a78bfa 30%, transparent);
  white-space: normal;
}


/* ---------- Wochenplan ---------- */
.plan-mode { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.plan-layout { display: grid; grid-template-columns: 250px 1fr; gap: 12px; align-items: start; }
.plan-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.plan-col { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); min-height: 220px; }
.plan-col.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.plan-col.dragover .kanban-cards { outline: 2px dashed var(--accent); outline-offset: -4px; border-radius: 8px; }
.plan-col-head {
  padding: 9px 11px; border-bottom: 1px solid var(--border);
  font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 7px;
}
.plan-day-link { margin-left: auto; color: var(--muted); font-size: 12px; }
.plan-card .kcard-title { font-size: 13px; }
.plan-tray { position: sticky; top: 12px; max-height: calc(100vh - 40px); overflow-y: auto; }
@media (max-width: 1100px) {
  .plan-layout { grid-template-columns: 1fr; }
  .plan-tray { position: static; max-height: none; }
  .plan-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .plan-week { grid-template-columns: 1fr; } }

/* ---------- Dateianhänge ---------- */
.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.att-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.att-thumb { display: block; aspect-ratio: 16/10; background: #0a0f1d; }
.att-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-icon { display: flex; align-items: center; justify-content: center; font-size: 34px; height: 100%; color: var(--muted); }
.att-body { padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; }
.att-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-meta { font-size: 11.5px; color: var(--muted); display: flex; justify-content: space-between; gap: 6px; }

/* ---------- Streaks ---------- */
.streak { color: #fbbf24; font-weight: 700; font-size: 12.5px; white-space: nowrap; }

/* ---------- Drei-Punkte-Menü (Schnell-Statuswechsel) ---------- */
.dotmenu { position: relative; display: inline-block; }
.dotmenu > summary {
  list-style: none; cursor: pointer; user-select: none;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; color: var(--muted); font-size: 17px; font-weight: 700; line-height: 1;
}
.dotmenu > summary::-webkit-details-marker { display: none; }
.dotmenu > summary:hover, .dotmenu[open] > summary { background: var(--card2); color: var(--text); }
.dotmenu-pop {
  position: absolute; right: 0; top: 30px; z-index: 60;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  min-width: 230px; max-height: 320px; overflow-y: auto; padding: 6px;
}
.dotmenu-head {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); padding: 5px 9px 6px; font-weight: 700;
}
.dotmenu-form { display: block; }
.dotmenu-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: none; color: var(--text); font: inherit; font-size: 13.5px;
  padding: 7px 9px; border-radius: 7px; cursor: pointer; white-space: nowrap;
}
.dotmenu-item .kanban-dot { flex-shrink: 0; }
button.dotmenu-item:hover, a.dotmenu-item:hover { background: var(--card2); text-decoration: none; color: var(--text); }
a.dotmenu-item { color: var(--text); }
.dotmenu-item.current { color: var(--muted); cursor: default; font-weight: 600; }
@media (max-width: 560px) {
  .dotmenu-pop { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; max-height: 55vh; }
}

/* ---------- Routinen-Heatmap ---------- */
.hm-row { display: flex; align-items: center; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.hm-row:last-child { border-bottom: none; }
.hm-label { flex: 0 0 180px; font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.heatmap-form { flex: 1; min-width: 0; }
.heatmap { display: flex; gap: 3px; overflow-x: auto; padding: 2px 0; }
.hm-col { display: flex; flex-direction: column; gap: 3px; }
.hm-cell {
  width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0;
  background: color-mix(in srgb, var(--border) 55%, transparent);
  border: none; padding: 0; font: inherit; display: block;
}
/* Anklickbare Tage im Verlauf: zum Nachtragen vergessener Haken */
button.hm-cell { cursor: pointer; -webkit-appearance: none; appearance: none; }
button.hm-cell:hover { outline: 2px solid var(--accent2); outline-offset: 1px; }
button.hm-cell:focus-visible { outline: 2px solid var(--accent2); outline-offset: 1px; }
@media (hover: none) { .hm-cell { width: 14px; height: 14px; } }

/* Tageswechsel über der Fällig-Liste */
.day-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.day-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.hm-cell.missed { background: color-mix(in srgb, #f87171 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #f87171 45%, transparent); }
.hm-cell.done { background: #34d399; }
.hm-cell.future { background: transparent; }
@media (max-width: 700px) {
  .hm-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hm-label { flex: none; }
}

/* ---------- Massenaktionen in der Projektliste ---------- */
.bulk-bar {
  position: sticky; top: 8px; z-index: 40;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.bulk-bar[hidden] { display: none; }
.bulk-count { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.bulk-count strong { color: var(--text); font-size: 15px; }
.bulk-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.bulk-actions select { min-width: 150px; }
.bulk-check { width: 17px; height: 17px; cursor: pointer; accent-color: var(--accent); }
table.data td:has(> .bulk-check) { width: 34px; }
.pcard-select { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; font-size: 12px; color: var(--muted); cursor: pointer; }
@media (max-width: 860px) {
  .bulk-bar { position: fixed; top: auto; bottom: 0; left: 0; right: 0; margin: 0; border-radius: 0; border-width: 1px 0 0; }
  .bulk-actions select { min-width: 120px; flex: 1; }
}

/* ---------- @Erwähnungen ---------- */
.mention {
  color: var(--accent); font-weight: 600;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: 5px; padding: 1px 5px;
}

/* ---------- Tastenkürzel-Übersicht ---------- */
.shortcut-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(3, 7, 18, .72);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.shortcut-box {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 24px 26px; max-width: 460px; width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
  max-height: 85vh; overflow-y: auto;
}
.shortcut-box h3 { margin: 0 0 14px; }
.shortcut-list { display: flex; flex-direction: column; gap: 8px; }
.shortcut-row { display: flex; align-items: center; gap: 12px; font-size: 13.5px; }
.shortcut-row kbd {
  flex: 0 0 118px; text-align: center;
  background: var(--bg2); border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 6px; padding: 3px 6px; font-size: 12px; font-family: inherit; color: var(--text);
}
.shortcut-row span { color: var(--muted); }
.app-footer kbd {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 4px;
  padding: 0 5px; font-family: inherit; font-size: 11px;
}

/* ---------- Kommentar-Stränge (Antworten) ---------- */
.comment-thread { border-bottom: 1px solid var(--border); padding: 6px 0 12px; }
.comment-thread:last-child { border-bottom: none; }
.comment-thread .comment { border-bottom: none; padding: 8px 0; }
.comment-reply {
  margin-left: 22px; padding-left: 14px !important;
  border-left: 2px solid var(--border) !important;
}
.reply-box { margin: 4px 0 0 22px; }
.reply-box > summary {
  cursor: pointer; list-style: none; display: inline-block;
  font-size: 12.5px; color: var(--muted); padding: 3px 9px;
  border: 1px solid var(--border); border-radius: 7px;
}
.reply-box > summary::-webkit-details-marker { display: none; }
.reply-box > summary:hover { color: var(--text); background: var(--card2); }
.reply-box[open] > summary { color: var(--text); }
@media (max-width: 560px) {
  .comment-reply { margin-left: 10px; padding-left: 10px !important; }
  .reply-box { margin-left: 10px; }
}

/* ---------- Entwurf-Sicherung ---------- */
.draft-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: color-mix(in srgb, #fbbf24 12%, var(--card));
  border: 1px solid color-mix(in srgb, #fbbf24 40%, transparent);
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px;
  font-size: 13.5px;
}
.draft-banner span { flex: 1; min-width: 200px; }

/* ---------- Dateien per Drag & Drop ---------- */
.dropzone { border: 1.5px dashed var(--border); border-radius: var(--radius); padding: 14px; transition: background .12s, border-color .12s; }
.dropzone.dragover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.dropzone-inner { display: flex; align-items: center; gap: 12px; }
.dropzone-icon { font-size: 22px; color: var(--muted); }
.dropzone-text { font-size: 13.5px; color: var(--muted); }
.dropzone-text strong { color: var(--text); }

/* ---------- Kalender: Wochenansicht mit Uhrzeiten ---------- */
.view-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.view-switch a { padding: 7px 14px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.view-switch a.active { background: var(--accent); color: #fff; }
.view-switch a:hover { text-decoration: none; color: var(--text); }
.view-switch a.active:hover { color: #fff; }

.week-wrap { overflow-x: auto; }
.week-grid {
  display: grid; grid-template-columns: 58px repeat(7, minmax(120px, 1fr));
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; min-width: 780px;
}
.week-corner { background: var(--bg2); border-bottom: 1px solid var(--border); }
.week-dayhead {
  background: var(--bg2); border-bottom: 1px solid var(--border); border-left: 1px solid var(--border);
  padding: 7px 8px; display: flex; flex-direction: column; gap: 1px; color: var(--text);
}
.week-dayhead:hover { background: var(--card2); text-decoration: none; }
.week-dayhead.today { background: color-mix(in srgb, var(--accent) 20%, var(--bg2)); }
.week-dow { font-weight: 700; font-size: 13px; }
.week-date { font-size: 11.5px; color: var(--muted); }
.week-hour {
  background: var(--bg2); border-top: 1px solid var(--border);
  font-size: 11px; color: var(--muted); padding: 4px 6px; text-align: right; white-space: nowrap;
}
.week-allday-label { font-size: 10.5px; }
.week-allday, .week-cell {
  border-top: 1px solid var(--border); border-left: 1px solid var(--border);
  min-height: 30px; padding: 3px; display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.week-allday { min-height: 26px; background: color-mix(in srgb, var(--card2) 45%, transparent); }
.week-allday.today, .week-cell.today { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.week-item {
  display: block; font-size: 11.5px; line-height: 1.35; padding: 3px 6px; border-radius: 5px;
  background: color-mix(in srgb, var(--ic) 16%, transparent);
  border-left: 3px solid var(--ic); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.week-item:hover { text-decoration: none; background: color-mix(in srgb, var(--ic) 28%, transparent); }
.week-item.done { opacity: .55; text-decoration: line-through; }
.week-time { font-weight: 700; font-size: 10.5px; color: var(--muted); }
@media (max-width: 860px) {
  .week-grid { grid-template-columns: 46px repeat(7, minmax(104px, 1fr)); min-width: 700px; }
}

/* ---------- Rechnung ---------- */
.invoice-sheet {
  background: #fff; color: #111; border-radius: var(--radius);
  padding: 34px 38px; max-width: 820px; line-height: 1.55;
}
.invoice-sheet .t-muted { color: #666 !important; }
.invoice-head { display: flex; justify-content: space-between; gap: 20px; border-bottom: 2px solid #111; padding-bottom: 12px; }
.invoice-from { font-weight: 700; font-size: 15px; }
.invoice-meta { text-align: right; font-size: 12.5px; color: #555; }
.invoice-address { margin: 28px 0 26px; }
.invoice-sender-line { font-size: 10px; color: #777; border-bottom: 1px solid #ccc; padding-bottom: 3px; margin-bottom: 10px; }
.invoice-to { font-size: 14.5px; }
.invoice-title { font-size: 21px; margin: 0 0 6px; color: #111; }
.invoice-dates { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; color: #555; margin-bottom: 20px; }
.invoice-table { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.invoice-table th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  color: #555; border-bottom: 1.5px solid #111; padding: 6px 8px;
}
.invoice-table td { padding: 10px 8px; border-bottom: 1px solid #ddd; vertical-align: top; font-size: 13.5px; }
.invoice-table .num { text-align: right; white-space: nowrap; }
.invoice-sums { margin-left: auto; max-width: 320px; font-size: 13.5px; }
.invoice-sums .row { display: flex; justify-content: space-between; gap: 20px; padding: 5px 8px; }
.invoice-sums .row.total { border-top: 1.5px solid #111; margin-top: 4px; font-weight: 700; font-size: 15px; }
.invoice-note { font-size: 12.5px; color: #444; margin: 16px 0 0; }
.invoice-foot {
  display: flex; gap: 30px; flex-wrap: wrap; margin-top: 30px;
  border-top: 1px solid #ccc; padding-top: 12px; font-size: 11.5px; color: #555;
}
@media (max-width: 700px) { .invoice-sheet { padding: 20px 18px; } }
@media print {
  .no-print { display: none !important; }
  /* Auf der Rechnung stört die allgemeine Kopfzeile – die Rechnung steht für sich */
  body:has(.invoice-sheet) .print-head { display: none !important; }
  .invoice-sheet { padding: 0; max-width: none; border-radius: 0; }
  .invoice-sheet, .invoice-sheet * { background: #fff !important; }
  .invoice-table th, .invoice-sums .row.total { border-color: #111 !important; }
}

/* ---------- Breite Tabellen (z. B. Suchergebnisse) scrollbar halten ---------- */
.table-scroll { overflow-x: auto; max-width: 100%; }

/* ---------- Medien-Vorschau in der Freigabe-Ansicht ---------- */
.share-media {
  display: grid; gap: 12px; margin-bottom: 18px; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
}
.share-media-item {
  margin: 0; background: var(--card2, #131a2b); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; min-width: 0;
}
.share-media-item video,
.share-media-item img { display: block; width: 100%; max-width: 100%; height: auto; background: #0b1120; }
.share-media-item video { height: 190px; object-fit: contain; }
.share-media-item img { height: 190px; object-fit: cover; }
.share-media-item audio { display: block; width: 100%; padding: 12px 10px 4px; }
.share-media-doc {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 190px; gap: 6px; padding: 10px; text-decoration: none; color: var(--text);
}
.share-media-doc .big { font-size: 30px; }
.share-media-item figcaption {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--border);
}
.share-media-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.share-media-item figcaption a { white-space: nowrap; }

/* ---------- Doppelbalken (Einnahmen vs. Ausgaben) und Prognose ---------- */
.vbar-pair { display: flex; align-items: flex-end; gap: 3px; width: 100%; justify-content: center; }
.vbar-pair .vbar { max-width: 20px; }
.vbar-stack { display: flex; flex-direction: column-reverse; justify-content: flex-start; width: 100%; align-items: center; }
.vbar-stack .vbar { max-width: 34px; }
.legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; }

/* ---------- Schnell-Bearbeitung direkt in Listen ---------- */
.inline-edit { display: inline-block; position: relative; }
.inline-edit > summary {
  list-style: none; cursor: pointer; border-radius: 7px;
  padding: 2px 5px; margin: -2px -5px; display: inline-flex; align-items: center; gap: 6px;
}
.inline-edit > summary::-webkit-details-marker { display: none; }
.inline-edit > summary::marker { content: ''; font-size: 0; }
.inline-edit > summary:hover { background: var(--card2); outline: 1px dashed var(--border); }
.inline-edit[open] > summary { background: var(--card2); outline: 1px solid var(--accent); }
.ie-value { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ie-empty { color: var(--muted); opacity: .7; font-style: italic; }
.inline-pop {
  position: absolute; left: 0; top: 30px; z-index: 60;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  min-width: 260px; max-height: 340px; overflow-y: auto; padding: 10px;
}
.inline-edit.inline-menu .inline-pop { min-width: 230px; padding: 6px; }
.inline-pop-head {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); padding: 2px 3px 7px; font-weight: 700;
}
.inline-pop input[type=datetime-local] { margin-bottom: 8px; }
.inline-row { display: flex; gap: 6px; flex-wrap: wrap; }
.inline-row .btn { white-space: nowrap; }
/* In den letzten Spalten klappt das Feld nach links auf, damit es nicht
   über den rechten Rand hinausläuft */
td:nth-last-child(-n+3) .inline-pop { left: auto; right: 0; }
@media (max-width: 560px) {
  .inline-pop { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; max-height: 60vh; }
}

/* Sortierbare Spaltenüberschriften */
.sort-link { color: inherit; display: inline-flex; align-items: center; gap: 5px; }
.sort-link:hover { color: var(--text); text-decoration: none; }
th.sorted .sort-link { color: var(--text); }
.sort-arrow { color: var(--accent2); font-size: 11px; }
.sort-link::after { content: '⇅'; font-size: 10px; opacity: .3; }
th.sorted .sort-link::after, .sort-link:has(.sort-arrow)::after { content: none; }
.quiet-link { color: inherit; }
.quiet-link:hover { text-decoration: none; opacity: .8; }

/* Projektliste: Titel bekommt Platz, Datumsspalten brechen nicht um */
.projects-table td:nth-child(2), .projects-table th:nth-child(2) { min-width: 200px; }
.projects-table .col-date { white-space: nowrap; }

/* Schmalere Bildschirme: weniger wichtige Spalten ausblenden, damit die
   Projektliste in die Karte passt und die Seite nicht seitlich wegläuft.
   Reihenfolge: 5 Format · 7 Checkliste · 6 Plattformen · 4 Priorität */
@media (max-width: 1500px) {
  .projects-table th:nth-child(5), .projects-table td:nth-child(5) { display: none; }
}
@media (max-width: 1360px) {
  .projects-table th:nth-child(7), .projects-table td:nth-child(7) { display: none; }
}
@media (max-width: 1220px) {
  .projects-table th:nth-child(6), .projects-table td:nth-child(6) { display: none; }
}
@media (max-width: 1080px) {
  .projects-table th:nth-child(4), .projects-table td:nth-child(4) { display: none; }
}
/* Zusätzlich Platz sparen: engere Zellen, nur noch das Kürzel statt des Namens */
@media (max-width: 1440px) {
  .projects-table td, .projects-table th { padding-left: 8px; padding-right: 8px; }
  .projects-table .assignee-name { display: none; }
}
@media (max-width: 1300px) {
  .projects-table td:nth-child(2), .projects-table th:nth-child(2) { min-width: 150px; }
  .projects-table td, .projects-table th { padding-left: 6px; padding-right: 6px; }
}

/* Passt die Tabelle nicht in die Karte, darf sie darin seitlich scrollen.
   Weil ein scrollender Bereich aufklappende Felder abschneiden würde,
   erscheinen sie in diesem Fall als kleines Fenster am unteren Rand. */
@media (max-width: 1500px) {
  .table-wrap { overflow-x: auto; }
  .inline-pop, .dotmenu-pop {
    position: fixed; left: 50%; right: auto; transform: translateX(-50%);
    top: auto; bottom: 18px; width: min(420px, calc(100vw - 28px));
    max-height: 62vh;
  }
  td:nth-last-child(-n+3) .inline-pop { left: 50%; right: auto; }
}
@media (max-width: 560px) {
  .inline-pop, .dotmenu-pop {
    left: 12px; right: 12px; transform: none; width: auto; bottom: 12px; max-height: 60vh;
  }
}

/* Sicherheits-Check: Ampelzeilen */
.check-row { align-items: flex-start; gap: 10px; padding: 10px 8px; }
.check-dot {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #0b1120; margin-top: 1px;
}
.check-row .mini-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.check-row .mini-title { white-space: normal; }
.check-row .mini-sub { line-height: 1.45; }
.check-row .mini-meta { align-self: center; }
@media (max-width: 640px) {
  .check-row { flex-wrap: wrap; }
  .check-row .mini-meta { width: 100%; padding-left: 32px; }
}

/* Passwortfelder: Augen-Schalter und Stärke-Anzeige */
.pw-wrap { position: relative; display: block; flex: 1 1 auto; min-width: 0; }
.pw-wrap input[type="password"], .pw-wrap input[type="text"] { width: 100%; padding-right: 40px; }
.pw-eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: 15px;
  line-height: 1; padding: 6px; opacity: .7; border-radius: 6px;
}
.pw-eye:hover { opacity: 1; background: var(--card2); }
.pw-meter { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.pw-bar { flex: 1; height: 5px; border-radius: 4px; background: var(--card2); overflow: hidden; }
.pw-bar i { display: block; height: 100%; width: 0; background: #f87171; transition: width .15s ease, background .15s ease; }
.pw-meter[data-stufe="2"] .pw-bar i { background: #fbbf24; }
.pw-meter[data-stufe="3"] .pw-bar i { background: #60a5fa; }
.pw-meter[data-stufe="4"] .pw-bar i { background: #34d399; }
.pw-text { font-size: 12px; color: var(--muted); min-width: 68px; }

/* Dezenter Hinweis auf die vorherige Anmeldung (Dashboard) */
.last-login { font-size: 12.5px; margin: -6px 0 14px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.last-login code { font-size: 12px; }
.pw-caps {
  position: absolute; right: 0; top: calc(100% + 4px);
  font-size: 11.5px; color: #fbbf24; white-space: nowrap;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 7px; z-index: 3;
}

/* ==========================================================================
   Gestaltungssystem 3.0 – Grundlage
   Diese Ebene steht bewusst am Ende: Sie setzt die Grundwerte (Farben,
   Schrift, Abstände) neu, die alle älteren Regeln über var() ohnehin
   benutzen. Dadurch zieht das gesamte Programm mit, ohne dass jede
   einzelne Regel angefasst werden muss.
   ========================================================================== */

@font-face {
  font-family: 'InterVar';
  src: url('fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Helle Oberfläche: warme Neutraltöne statt Blaugrau –
     dadurch wirkt die Fläche wie Papier, nicht wie ein Terminal. */
  --bg:        #f6f5f3;
  --bg2:       #fbfaf9;
  --card:      #ffffff;
  --card2:     #f2f1ee;
  --border:    #e4e2dd;
  --border-2:  #d5d3cc;
  --text:      #1b1a18;
  --text-2:    #5e5c56;
  --muted:     #86847c;

  /* Kein eigener Markenfarbton: Bedienelemente sind schwarz/weiß,
     Farbe ist ausschließlich Bedeutung vorbehalten. */
  --accent:    #1b1a18;
  --accent2:   #2b5cba;
  --on-accent: #ffffff;

  --danger:    #b4291d;
  --warn:      #a1620a;
  --ok:        #1c7048;
  --info:      #2b5cba;

  --radius:    8px;
  --radius-sm: 6px;
  --ring:      0 0 0 3px color-mix(in srgb, var(--accent2) 22%, transparent);
  --shadow:    0 1px 2px rgba(24,22,18,.05), 0 1px 3px rgba(24,22,18,.04);
  --shadow-pop:0 8px 28px rgba(24,22,18,.14), 0 2px 6px rgba(24,22,18,.08);
}

:root[data-theme="dark"] {
  /* Dunkel: warme Grautöne statt Blauschwarz */
  --bg:        #171614;
  --bg2:       #1c1b19;
  --card:      #201f1d;
  --card2:     #2a2926;
  --border:    #333230;
  --border-2:  #45443f;
  --text:      #eceae5;
  --text-2:    #a5a29a;
  --muted:     #85827b;

  --accent:    #eceae5;
  --accent2:   #8fb3f0;
  --on-accent: #171614;

  --danger:    #f08c80;
  --warn:      #e0ac5a;
  --ok:        #62c295;
  --info:      #8fb3f0;

  --ring:      0 0 0 3px color-mix(in srgb, var(--accent2) 28%, transparent);
  --shadow:    0 1px 2px rgba(0,0,0,.4);
  --shadow-pop:0 10px 34px rgba(0,0,0,.5);
}

body {
  font-family: 'InterVar', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.011em;
  font-feature-settings: 'cv05' 1, 'ss03' 1;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
}
h1, h2, h3, h4 { letter-spacing: -0.021em; font-weight: 600; }
a { color: var(--accent2); }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }
.ico { flex-shrink: 0; vertical-align: -0.18em; }

/* Zahlen laufen in Tabellen sonst nicht untereinander */
table, .stat-num, .money, time, .mini-num { font-variant-numeric: tabular-nums; }

/* ---------- Seitenleiste ---------- */
.sidebar { width: 236px; background: var(--bg2); }
.brand {
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.015em;
  padding: 16px 16px 12px; gap: 9px;
}
.brand-dot {
  width: 18px; height: 18px; border-radius: 5px; box-shadow: none;
  background: var(--accent); position: relative;
}
.brand-dot::after {
  content: ''; position: absolute; inset: 5px 5px auto auto;
  width: 6px; height: 6px; border-radius: 2px; background: var(--on-accent);
}
.sidebar-search { padding: 0 12px 10px; }
.sidebar-search input {
  background: var(--card); border-color: var(--border); border-radius: var(--radius-sm);
  padding: 6px 30px 6px 10px; font-size: 13px;
}
.sidebar-search input::placeholder { color: var(--muted); }
.sidebar-search kbd { background: var(--card2); border-color: var(--border); }

.sidebar nav { padding: 0 8px 8px; }
.nav-group {
  padding: 14px 10px 5px; font-size: 11px; font-weight: 600;
  letter-spacing: .045em; text-transform: uppercase; color: var(--muted);
}
.nav-group:first-child { padding-top: 2px; }
.sidebar nav a {
  gap: 10px; padding: 6px 10px; margin: 0; border-radius: var(--radius-sm);
  font-size: 13.2px; font-weight: 450; color: var(--text-2);
  position: relative;
}
.sidebar nav a .ico { color: var(--muted); }
.sidebar nav a:hover { background: var(--card2); color: var(--text); }
.sidebar nav a:hover .ico { color: var(--text-2); }
.sidebar nav a.active { background: var(--card2); color: var(--text); font-weight: 550; }
.sidebar nav a.active .ico { color: var(--text); }
.sidebar nav a.active::before {
  content: ''; position: absolute; left: -8px; top: 6px; bottom: 6px;
  width: 2.5px; border-radius: 0 3px 3px 0; background: var(--accent);
}
.nav-count {
  background: none; color: var(--muted); font-weight: 550; font-size: 11.5px;
  padding: 0; border-radius: 0;
}
.nav-count-warn { background: none; color: var(--danger); }

.sidebar-user { padding: 10px 12px; gap: 9px; }
.sidebar-user-info strong { font-size: 13px; font-weight: 550; }
.sidebar-user-info span { font-size: 11.5px; }
.sidebar-tools { display: flex; gap: 2px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  background: none; border: none; cursor: pointer; color: var(--muted); padding: 0;
}
.icon-btn:hover { background: var(--card2); color: var(--text); text-decoration: none; }

/* ---------- Hauptbereich ---------- */
.main { padding: 22px 28px 64px; }
.page-head { margin-bottom: 18px; align-items: center; }
.page-head h1 { font-size: 19px; margin-bottom: 2px; }
.page-head p { font-size: 13px; color: var(--muted); }

/* ---------- Flächen ---------- */
.card {
  background: var(--card); border-color: var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px;
}
.card h3 { font-size: 14px; margin-bottom: 12px; }
.stat-card {
  background: none; border: none; box-shadow: none; padding: 0 0 0 12px;
  border-left: 2px solid var(--border);
}
.stat-card .stat-num { font-size: 21px; font-weight: 600; letter-spacing: -0.03em; color: var(--text) !important; }
.stat-card .stat-label { font-size: 12px; color: var(--muted); }
.grid-stats { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px 8px; }

/* ---------- Schaltflächen ---------- */
.btn {
  background: var(--accent); color: var(--on-accent);
  border-radius: var(--radius-sm); padding: 7px 13px;
  font-size: 13.2px; font-weight: 550; letter-spacing: -0.008em;
  border: 1px solid transparent; gap: 6px;
}
.btn:hover { background: color-mix(in srgb, var(--accent) 86%, var(--bg)); color: var(--on-accent); }
.btn-ghost {
  background: var(--card); border: 1px solid var(--border-2); color: var(--text);
  box-shadow: var(--shadow); font-weight: 500;
}
.btn-ghost:hover { background: var(--card2); }
.btn-sm { padding: 4px 9px; font-size: 12.5px; }
.btn-danger { background: none; border: 1px solid var(--border-2); color: var(--danger); box-shadow: var(--shadow); }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 9%, transparent); }

input, select, textarea {
  border-radius: var(--radius-sm) !important;
  border-color: var(--border-2) !important;
  background: var(--card) !important;
  color: var(--text) !important;
  font-family: inherit; font-size: 13.2px;
}
input::placeholder, textarea::placeholder { color: var(--muted); }
label { color: var(--text-2); font-size: 12.5px; font-weight: 500; }

/* ---------- Zustände: Punkt + Wort statt bunter Pille ---------- */
.badge {
  background: none !important; border: none !important;
  color: var(--text-2) !important; padding: 0; font-size: 12.8px; font-weight: 450;
  display: inline-flex; align-items: center; gap: 6px; border-radius: 0;
}
.badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--bc, var(--muted));
}
.chip {
  background: none; border: none; padding: 0; color: var(--muted);
  font-size: 12.5px; display: inline-flex; align-items: center; gap: 5px;
}
.chip::before {
  content: ''; width: 6px; height: 6px; border-radius: 2px; background: var(--bc);
}
.avatar {
  width: 22px; height: 22px; font-size: 10px; font-weight: 600;
  background: var(--card2); border-color: var(--border); color: var(--text-2);
}

/* ---------- Tabellen: dichter, ruhiger ---------- */
table.data { font-size: 13.2px; }
table.data th {
  font-size: 11.5px; font-weight: 550; letter-spacing: .03em;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--border); padding: 8px 10px;
}
table.data td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr:hover, table.data tr:hover { background: var(--card2); }
.cell-title {
  font-weight: 500; color: var(--text); display: block;
  max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cell-title:hover { text-decoration: none; color: var(--accent2); }

/* ---------- Hinweiszeilen ---------- */
.alert {
  border: 1px solid var(--border); border-left: 3px solid var(--ac);
  background: var(--card); box-shadow: var(--shadow);
  border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; gap: 10px;
}
.alert:hover { background: var(--card2); }
.alert-ico { font-size: inherit; color: var(--ac); display: flex; }
.alert-danger { --ac: var(--danger); }
.alert-warn   { --ac: var(--warn); }
.alert-info   { --ac: var(--info); }
.alert-row { gap: 10px; margin-bottom: 16px; }

.flash {
  border-radius: var(--radius-sm); font-size: 13.2px; box-shadow: var(--shadow);
}
.empty { color: var(--muted); font-size: 13px; padding: 28px 10px; }
.empty .big { display: none; }
.empty .ico { display: block; margin: 0 auto 10px; color: var(--border-2); }

.app-footer { font-size: 11.5px; opacity: 1; color: var(--muted); }

/* ---------- Aufklappfelder ---------- */
.inline-pop, .dotmenu-pop {
  background: var(--card); border-color: var(--border);
  box-shadow: var(--shadow-pop); border-radius: var(--radius);
}
.mini-bar { background: var(--card2); }

/* Dunkel automatisch, wenn das Betriebssystem es so möchte und nichts
   anderes eingestellt wurde. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #171614; --bg2: #1c1b19; --card: #201f1d; --card2: #2a2926;
    --border: #333230; --border-2: #45443f;
    --text: #eceae5; --text-2: #a5a29a; --muted: #85827b;
    --accent: #eceae5; --accent2: #8fb3f0; --on-accent: #171614;
    --danger: #f08c80; --warn: #e0ac5a; --ok: #62c295; --info: #8fb3f0;
    --ring: 0 0 0 3px color-mix(in srgb, var(--accent2) 28%, transparent);
    --shadow: 0 1px 2px rgba(0,0,0,.4);
    --shadow-pop: 0 10px 34px rgba(0,0,0,.5);
  }
}

/* Nachzügler aus der alten Ebene, die noch weiß auf Akzent gesetzt haben –
   im hellen Modus ist der Akzent fast schwarz, im dunklen fast weiß. */
.view-switch a.active, .view-switch a.active:hover,
.pagination span.cur, .step-list span.on, .mobile-add, .mobile-add:hover {
  color: var(--on-accent);
}
.hm-cell.done { background: var(--ok); }
.shortcut-overlay { background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(3px); }
.att-thumb, .share-media-item img { background: var(--card2); }
.mobile-bar { background: var(--bg2); border-bottom: 1px solid var(--border); }

/* ---------- Filterleiste: Wichtiges oben, Selten eingeklappt ---------- */
.filter-bar { display: block; margin-bottom: 14px; }
.fb-row { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.fb-row select { max-width: 190px; padding: 6px 8px !important; }
.fb-search { position: relative; display: flex; align-items: center; flex: 1 1 240px; max-width: 320px; }
.fb-search .ico { position: absolute; left: 9px; color: var(--muted); pointer-events: none; }
.fb-search input { width: 100%; padding: 6px 10px 6px 31px !important; }
.fb-more { margin-top: 8px; }
.fb-more > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--muted); padding: 3px 0;
}
.fb-more > summary::-webkit-details-marker { display: none; }
.fb-more > summary::marker { content: ''; }
.fb-more > summary:hover { color: var(--text); }
.fb-more[open] > summary { margin-bottom: 8px; }

/* ---------- Zellen in der Projektliste ---------- */
.cell-sub {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--muted); margin-left: 8px; white-space: nowrap;
}
.cell-sub .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.projects-table td:first-child { max-width: 0; }
.projects-table td > .cell-title { display: inline-block; vertical-align: middle; }
.money { font-variant-numeric: tabular-nums; }

/* Überschrift mit Zähler */
.card h3 .h-count { color: var(--muted); font-weight: 450; margin-left: 4px; }
.card h3 { display: flex; align-items: center; gap: 8px; }
.card h3 .ico { color: var(--muted); }
.streak {
  font-size: 11.5px; font-weight: 500; color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  border-radius: 99px; padding: 0 7px; margin-left: 6px;
}
.last-login { font-size: 12px; }
.ai-box { font-size: 13px; }

/* ---------- Nachbesserungen aus dem ersten Durchgang ---------- */

/* Auswahlfelder sahen als einzige noch nach Betriebssystem aus */
select {
  -webkit-appearance: none; appearance: none;
  padding: 6px 30px 6px 10px !important;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2386847c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 9.5 12 16l6.5-6.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-color: var(--card) !important;
}
select.slim { padding: 4px 26px 4px 8px !important; background-position: right 6px center !important; }

/* Listentitel: Farbe erst beim Überfahren – sonst leuchtet jede Liste blau */
.mini-title a, a.mini-title, .pcard-title a, .cell-title { color: var(--text); font-weight: 500; }
.mini-title a:hover, a.mini-title:hover, .cell-title:hover { color: var(--accent2); text-decoration: none; }
.chip { color: var(--muted); }

/* Projektliste: die Titelspalte darf schrumpfen, damit nichts abgeschnitten wird */
.projects-table { width: 100%; table-layout: auto; }
.projects-table td:first-child { max-width: none; }
.projects-table td:nth-child(2) { max-width: 0; width: 32%; }
.cell-title { max-width: 100%; }

/* Anklickbare Werte sollen sich auch als anklickbar zeigen */
.inline-edit > summary { border-radius: var(--radius-sm); padding: 1px 4px; margin: -1px -4px; }
.inline-edit > summary:hover { background: var(--card2); box-shadow: inset 0 0 0 1px var(--border); }

/* Kennzahlen: Nullen treten zurück, echte Zahlen nach vorn */
.stat-card .stat-num.is-null { color: var(--muted) !important; font-weight: 500; }

/* ==========================================================================
   Farbsignale – Farbe arbeitet, statt zu schmücken
   Regel: Eine Zeile trägt höchstens ein Signal. Es beantwortet immer dieselbe
   Frage – „muss ich hier etwas tun?". Alles andere bleibt neutral, damit die
   wenigen farbigen Stellen wirklich ins Auge springen.
   ========================================================================== */
:root {
  --sig-late:   #c0392b;   /* überfällig */
  --sig-today:  #b8791f;   /* heute fällig */
  --sig-wait:   #7a6bb5;   /* wartet auf Rückmeldung */
  --sig-done:   #2f8a5f;   /* erledigt */
}
:root[data-theme="dark"] {
  --sig-late: #e8776a; --sig-today: #dda94f; --sig-wait: #a294dd; --sig-done: #55b98a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sig-late: #e8776a; --sig-today: #dda94f; --sig-wait: #a294dd; --sig-done: #55b98a;
  }
}

/* Zeilenkante links – schmal, aber über die ganze Höhe gut zu sehen */
tr.sig td:first-child, .sig-card, .mini-row.sig {
  box-shadow: inset 3px 0 0 var(--sig);
}
tr.sig td:first-child { border-radius: 3px 0 0 3px; }
.sig-late   { --sig: var(--sig-late); }
.sig-today  { --sig: var(--sig-today); }
.sig-wait   { --sig: var(--sig-wait); }
.sig-urgent { --sig: var(--sig-late); }
tr.sig-late  { background: color-mix(in srgb, var(--sig-late) 4.5%, transparent); }
tr.sig-today { background: color-mix(in srgb, var(--sig-today) 5%, transparent); }
tr.sig-late:hover  { background: color-mix(in srgb, var(--sig-late) 9%, transparent); }
tr.sig-today:hover { background: color-mix(in srgb, var(--sig-today) 10%, transparent); }

/* Datumsangaben: nur auffällig, wenn der Termin drückt */
.date-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 7px; border-radius: 5px; font-weight: 550; font-size: 12.6px;
  white-space: nowrap;
}
.date-tag.is-late  { color: var(--sig-late);  background: color-mix(in srgb, var(--sig-late) 12%, transparent); }
.date-tag.is-today { color: var(--sig-today); background: color-mix(in srgb, var(--sig-today) 14%, transparent); }
.date-tag.is-soon  { color: var(--text-2);    background: var(--card2); }
.date-word { font-weight: 450; opacity: .8; }

/* Kennzahlen: gefärbt wird nur, was zum Handeln auffordert */
.stat-card.is-alert { border-left-color: var(--sig-late); }
.stat-card.is-alert .stat-num { color: var(--sig-late) !important; }
.stat-card.is-wait  { border-left-color: var(--sig-today); }
.stat-card.is-wait .stat-num  { color: var(--sig-today) !important; }
.stat-card.is-good  { border-left-color: var(--sig-done); }
.stat-card.is-good .stat-num  { color: var(--sig-done) !important; }

/* Zustandspunkte etwas kräftiger, damit die Farbe überhaupt trägt */
.badge::before { width: 7px; height: 7px; }

/* Fertige Checkliste wird grün – das ist die Belohnung fürs Abhaken */
.mini-progress.is-full .mini-num { color: var(--sig-done); font-weight: 550; }

/* Ausgewählte Zeilen der Massenauswahl */
tr:has(.bulk-check:checked) { background: color-mix(in srgb, var(--accent2) 9%, transparent); }
tr:has(.bulk-check:checked) td:first-child { box-shadow: inset 3px 0 0 var(--accent2); }

/* Kanban: Spaltenkopf trägt die Farbe der Produktionsphase */
.kanban-col-head { border-top: 2px solid var(--kc, var(--border)); padding-top: 9px; }
.mini-row.sig { padding-left: 11px; border-radius: 3px; }
.sig-done { --sig: var(--sig-done); }
tr.sig-done td:first-child { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--sig-done) 60%, transparent); }

/* „Heute" spricht überall dieselbe Sprache wie „heute fällig" */
.cal-cell.today, .plan-col.today {
  border-color: var(--sig-today);
  box-shadow: inset 0 0 0 1px var(--sig-today);
  background: color-mix(in srgb, var(--sig-today) 5%, transparent);
}
.week-dayhead.today { background: color-mix(in srgb, var(--sig-today) 16%, var(--bg2)); }
.week-allday.today, .week-cell.today { background: color-mix(in srgb, var(--sig-today) 6%, transparent); }

/* Balkendiagramme dürfen am Handy in ihrer Karte scrollen,
   statt die ganze Seite breiter zu machen */
.vbars { overflow-x: auto; max-width: 100%; }
/* Balken ohne eigene Bedeutung: ruhiges Grau statt Buntstift */
:root { --bar-neutral: #b9b6ad; }
:root[data-theme="dark"] { --bar-neutral: #57554f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bar-neutral: #57554f; } }

/* ---------- Faktenleiste auf der Projektseite ---------- */
.factbar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 16px;
}
.fact { background: var(--card); padding: 10px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fact-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--muted); font-weight: 500;
}
.fact-label .ico { color: var(--muted); }
.fact-value { font-size: 13.5px; font-weight: 500; display: flex; align-items: center; gap: 7px; min-width: 0; }
.fact-value .inline-edit { min-width: 0; }
@media (max-width: 560px) { .factbar { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Eingeklappte Nebenaktionen (Projektseite) ---------- */
.more-actions { margin-bottom: 14px; }
.more-actions > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 7px;
  padding: 9px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow);
  font-size: 13.2px; font-weight: 550; color: var(--text-2);
}
.more-actions > summary::-webkit-details-marker { display: none; }
.more-actions > summary::marker { content: ''; }
.more-actions > summary::after {
  content: ''; margin-left: auto; width: 7px; height: 7px;
  border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s ease;
}
.more-actions[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.more-actions > summary:hover { background: var(--card2); color: var(--text); }
.more-actions[open] > summary { margin-bottom: 14px; }

/* ---------- Meldung mit Rückgängig ---------- */
.flash { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.flash > span { flex: 1; min-width: 0; }
.flash-undo { margin: 0; flex-shrink: 0; }
.flash-undo button {
  background: var(--card); border: 1px solid var(--border-2); color: var(--text);
  border-radius: var(--radius-sm); padding: 4px 11px;
  font: inherit; font-size: 12.5px; font-weight: 550; cursor: pointer;
  box-shadow: var(--shadow);
}
.flash-undo button:hover { background: var(--card2); }

/* ---------- Anklickbare Werte erkennbar machen ----------
   Bisher sah man Deadline, Status, Priorität und Verantwortlich nicht an,
   dass sie sich direkt ändern lassen. Eine feine gepunktete Linie ist das
   übliche, leise Zeichen dafür: sie stört beim Lesen nicht, beantwortet aber
   die Frage „kann ich da draufklicken?" ohne Ausprobieren. */
.inline-edit > summary .ie-value {
  text-decoration: underline dotted color-mix(in srgb, var(--muted) 55%, transparent);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.inline-edit > summary:hover .ie-value,
.inline-edit[open] > summary .ie-value {
  text-decoration-color: var(--text-2);
}
/* Auf Datums-Fähnchen und Zustandspunkten wirkt eine Unterstreichung unruhig –
   dort trägt der umgebende Rahmen das Signal. */
.inline-edit > summary .ie-value.date-tag,
.inline-edit > summary .ie-value:has(.badge) { text-decoration: none; }
.inline-edit > summary .ie-value.date-tag { box-shadow: inset 0 -1px 0 color-mix(in srgb, currentColor 35%, transparent); }
.inline-edit > summary:hover { background: var(--card2); outline: none; box-shadow: inset 0 0 0 1px var(--border-2); }
.inline-edit[open] > summary { background: var(--card2); outline: none; box-shadow: inset 0 0 0 1px var(--accent2); }
.ie-empty { font-style: normal; opacity: 1; text-decoration: none !important; }
.ie-empty::before { content: '+ '; }

/* ---------- Installer: Angebot, vorhandene Daten weiterzuverwenden ---------- */
.reuse-box {
  border: 1px solid color-mix(in srgb, var(--sig-today) 45%, var(--border));
  background: color-mix(in srgb, var(--sig-today) 7%, var(--card));
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 18px;
}
.reuse-box h3 { font-size: 15px; }
.reuse-box p { font-size: 13.5px; }
.reuse-box code { font-size: 12.5px; }

/* --- Mahnstufen: Vorschau wie eine Mail ---------------------------------- */
.preview-mail { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.preview-subject {
  padding: 10px 12px; background: var(--surface-2, var(--bg));
  border-bottom: 1px solid var(--border); font-weight: 550; font-size: 13.5px;
}
.preview-body {
  margin: 0; padding: 12px; white-space: pre-wrap; word-break: break-word;
  font: inherit; font-size: 13px; line-height: 1.55; color: var(--text);
}

/* --- Belege: fotografieren oder Datei wählen ----------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.beleg-wahl { display: flex; gap: 8px; flex-wrap: wrap; }
.beleg-wahl label.btn { cursor: pointer; }
.beleg-wahl input:focus-visible + label.btn { outline: 2px solid var(--accent); outline-offset: 2px; }
.datei-liste { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.datei-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; font-size: 12.5px;
  background: var(--card2); color: var(--text-2); border: 1px solid var(--border);
}

/* --- Schnittstelle: Befehlsbeispiele ------------------------------------- */
.code-block {
  margin: 0 0 4px; padding: 11px 13px; overflow-x: auto;
  background: var(--card2); border: 1px solid var(--border); border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.6; color: var(--text-2); white-space: pre;
}
.mini-title code, code.mini-title {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
}