/* Scribble font for the anonymised mode (privacy.js): derived from Redacted Script, SIL OFL 1.1.
   Only the Private Use Area is covered, so normal text never touches it. */
@font-face { font-family: "AJ Scribble"; font-weight: 400; font-display: block; unicode-range: U+E000-E03F;
  src: url("/static/fonts/AJScribble-Regular.woff2") format("woff2"); }
@font-face { font-family: "AJ Scribble"; font-weight: 700; font-display: block; unicode-range: U+E000-E03F;
  src: url("/static/fonts/AJScribble-Bold.woff2") format("woff2"); }
:root {
  --bg: #f4f6fa;
  --panel: #ffffff;
  --ink: #1f2733;
  --muted: #7a8798;
  --line: #e3e8f0;
  --primary: #2f5496;
  --primary-d: #24417a;
  --primary-l: #eaf0fb;
  --ok: #1f8a55;
  --ok-l: #e6f4ec;
  --warn: #b7791f;
  --warn-l: #fbf1e0;
  --tomorrow: #2b7fa8;
  --danger: #c0392b;
  --danger-l: #fbe9e7;
  --radius: 6px;
  --shadow: none;
  --shadow-pop: 0 10px 34px rgba(20, 30, 50, .18);
  --sans: "AJ Scribble", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
/* form controls do not inherit the font by default; the scribble font of the anonymised mode needs it */
button, input, select, textarea { font-family: var(--sans); }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 14px; line-height: 1.45;
}
h1 { font-size: 20px; margin: 0; font-weight: 650; }
h3 { font-size: 15px; margin: 0 0 12px; font-weight: 650; color: var(--ink); }
a { color: var(--primary); }

/* ---------------- login ---------------- */
#app { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; }
#app.has-shell { display: block; padding: 0; }
.shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; width: 100%; }
.login-form {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 28px 30px; width: 360px; max-width: 92vw;
}
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.brand-logo {
  width: 46px; height: 46px; border-radius: 12px; background: var(--primary);
  color: #fff; font-weight: 700; font-size: 18px; display: grid; place-items: center;
  letter-spacing: .5px;
}
.brand-logo.sm { width: 34px; height: 34px; font-size: 14px; border-radius: 9px; }
.brand-name { font-size: 19px; font-weight: 700; letter-spacing: .3px; }
.pin-form { text-align: center; }
.pin-lbl { margin-bottom: 10px; font-size: 14px; }
.pin-inp { -webkit-text-security: disc; text-align: center; font-size: 32px; letter-spacing: .4em; padding: 12px; margin-bottom: 8px; }
/* on-screen PIN pad (phones: no device keyboard) */
.pin-dots { display: flex; gap: 14px; justify-content: center; margin: 4px 0 18px; }
.pin-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--primary); transition: background .1s; }
.pin-dot.filled { background: var(--primary); }
.pin-dots.shake { animation: pin-shake .4s ease; }
@keyframes pin-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 280px; margin: 0 auto 12px; }
.pin-key { font: 600 22px/1 var(--sans); padding: 16px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel, #fff); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pin-key:hover, .pin-key:focus-visible { background: var(--primary-l); }
.pin-key:active { background: var(--primary-l); transform: translateY(1px); }
.pin-key.ghost { visibility: hidden; pointer-events: none; }
.pin-key.del { font-size: 20px; color: var(--muted); }
.todo-prompt { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow: auto; margin: 8px 0; }
/* e-mail: compose body, settings templates, communication log */
.mail-body { font-family: "AJ Scribble", Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5; resize: vertical; white-space: pre-wrap; }
.mail-sig { border: 1px dashed var(--line); border-radius: 8px; padding: 10px 12px; font: 14px/1.5 "AJ Scribble", Arial, Helvetica, sans-serif; color: #555; min-height: 38px; }
.mail-sig p { margin: 0 0 8px; } .mail-sig p:last-child { margin-bottom: 0; }
.mail-from { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 38px; font-size: 14px; }
.pin-modal { text-align: center; max-width: 360px; }
.pin-modal .inp { max-width: 260px; margin: 0 auto; }
.pin-modal .form-actions { justify-content: center; }
.pin-alt { display: block; margin: 0 auto 4px; }
.mail-tpl { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-top: 12px; }
.mail-tpl h4 { margin: 0 0 8px; }
.comm-entry { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.comm-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
/* direction of mails / calls: icon only (↘ in, ↖ out) */
.dir { display: inline-flex; align-self: center; vertical-align: -2px; }
.dir.in { color: #2f5496; }
.dir.out { color: #8a47b5; }
.act-row .dir { margin-right: 6px; }
.brand-version { font-size: 12px; color: var(--muted); margin-top: 1px; text-align: left; font-weight: 400; }
.brand > div:not(.brand-logo) { text-align: left; }
.comm-edit { margin-left: auto; }
.comm-acts { margin-left: auto; display: flex; gap: 14px; flex-wrap: wrap; }
.comm-acts:empty { display: none; }
.comm-acts .comm-edit { margin-left: 0; }
@media (max-width: 640px) { .comm-acts { flex-basis: 100%; margin-left: 0; } }
.confirm-status { align-self: center; }
.locked-note { border: 1px dashed var(--line); border-radius: 8px; padding: 10px 12px; color: var(--muted); background: #f7f9fc; }
.comm-entry.locked { background: #fafbfd; }
.field.name-parts { flex-direction: row; flex-wrap: wrap; gap: 12px 18px; }
.name-parts > .field.grow { flex: 2 1 180px; }
.name-parts > .field:not(.grow) { flex: 1 1 110px; }
.name-parts > .hint { flex-basis: 100%; margin-top: -6px; }
.inp.caps { text-transform: uppercase; }
.confirm-status .ok-text { color: var(--ok); }
.inp.invalid, .inp.invalid:focus { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-l); }
.comm-body { white-space: pre-wrap; word-break: break-word; line-height: 1.45; margin-top: 4px; }
.badge.danger { background: var(--danger-l); color: var(--danger); }
.login-err { color: var(--danger); min-height: 18px; margin: 4px 0 2px; font-size: 13px; }

/* ---------------- shell / nav ---------------- */
.side {
  background: #17233a; color: #cdd6e6; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.side-brand { display: flex; align-items: center; gap: 10px; padding: 18px 16px 12px; }
.side-title { color: #fff; font-weight: 700; font-size: 16px; line-height: 1.1; }
.side-sub { color: #8ea0c0; font-size: 11px; font-weight: 400; }
.side-nav { list-style: none; margin: 8px 0; padding: 0; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: 0; color: #cdd6e6; padding: 11px 16px; cursor: pointer;
  font-size: 14px;
}
.nav-item:hover { background: rgba(255, 255, 255, .06); }
.nav-item.active { background: var(--primary); color: #fff; }
.nav-icon { width: 16px; text-align: center; opacity: .85; }
.side-foot { padding: 14px 16px; border-top: 1px solid rgba(255, 255, 255, .08); display: flex; flex-direction: column; gap: 8px; }
.side-user { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.side-version { padding: 0; margin-left: 6px; font-size: 11px; font-weight: 400; color: #6b7c9e; vertical-align: 1px; }
.panel.danger { border-color: var(--danger); }
.content {
  display: flex; flex-direction: column; min-width: 0;
  height: 100vh; overflow-y: auto;
}
.topbar {
  display: flex; align-items: center; justify-content: flex-start;
  padding: 14px 24px; background: var(--panel); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
}
.topbar-title { font-size: 16px; font-weight: 650; }
.menu-btn {
  display: none; background: none; border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); font-size: 15px; width: 36px; height: 36px; cursor: pointer;
  align-items: center; justify-content: center; margin-right: 8px; flex-shrink: 0;
}
.side-backdrop { display: none; }
.view { padding: 22px 24px 48px; }

/* ---------------- cards / panels ---------------- */
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; }
.page-actions, .export-btns { display: flex; gap: 8px; }
/* sub pages: "← Zurück" + title on the left, actions pushed right */
.page-head.with-back { justify-content: flex-start; }
.page-head.with-back > .page-actions { margin-left: auto; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); margin-bottom: 18px; }
.panel.grow { flex: 1; }
.panel-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .panel-row { grid-template-columns: 1fr; } }

/* ---------------- tables ---------------- */
.scroll { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; padding: 9px 12px; border-bottom: 2px solid var(--line); color: var(--muted); font-weight: 600; white-space: nowrap; }
.tbl td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th.r, .tbl td.r { text-align: right; }
.tbl tr.clickable { cursor: pointer; }
.tbl tbody tr:hover { background: var(--primary-l); }
.tbl td.acts { white-space: nowrap; text-align: right; }

/* ---------------- buttons ---------------- */
.btn {
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  padding: 8px 14px; border-radius: 5px; cursor: pointer; font-size: 13px; font-family: inherit;
}
.btn:hover { border-color: #c2ccda; background: #fafbfd; }
.btn:disabled { opacity: .55; cursor: default; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-d); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger:hover { filter: brightness(.93); }
.btn.block { width: 100%; }
.btn.small { padding: 5px 10px; font-size: 12px; }
.link { background: none; border: 0; color: var(--primary); cursor: pointer; padding: 2px 6px; font-size: 13px; font-family: inherit; }
.link:hover { text-decoration: underline; }
.link.danger { color: var(--danger); }
.link.disabled { opacity: .4; cursor: not-allowed; }

/* ---------------- forms ---------------- */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar-l { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex: 1; min-width: 0; }
/* filters sit side by side: text inputs grow, selects keep their natural width */
.toolbar-l > .inp { width: auto; min-width: 0; }
.toolbar-l > input.inp { flex: 1 1 220px; }
.toolbar-l > select.inp { flex: 0 1 auto; max-width: 280px; }
@media (max-width: 640px) {
  .toolbar-l { flex-basis: 100%; }
  .toolbar-l > input.inp { flex-basis: 100%; }
  .toolbar-l > select.inp { flex: 1 1 140px; max-width: none; }
  .toolbar > .btn, .toolbar > .row-acts { margin-left: auto; }
}
.form { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.field.full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; }
.field.grow { flex: 1; }
.lbl { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.inp {
  border: 1px solid var(--line); border-radius: 5px; padding: 8px 10px; font-size: 14px;
  font-family: inherit; background: #fff; color: var(--ink); width: 100%;
}
.inp:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-l); }
.inp.grow { flex: 1; }
textarea.inp { resize: vertical; min-height: 44px; }
input.inp[type=date], input.inp[type=number] { width: 100%; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.hint { font-size: 12px; color: var(--warn); min-height: 15px; margin-top: 4px; }
.check { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.check.small { font-size: 12px; color: var(--muted); margin-top: 4px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.chip { background: var(--primary-l); border: 1px solid #d3ddf3; color: var(--primary-d); border-radius: 4px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.chip:hover { background: var(--primary); color: #fff; }
.chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ---------------- badges ---------------- */
.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; background: #eef1f6; color: var(--muted); }
.badge.laufend, .badge.ok, .badge.user { background: var(--ok-l); color: var(--ok); }
.badge.abgeschlossen { background: #eef1f6; color: var(--muted); }
.badge.uebernahme, .badge.neu { background: var(--warn-l); color: var(--warn); }
.badge.admin { background: var(--primary-l); color: var(--primary-d); }
.badge.einzeln { background: #eef1f6; }
.badge.gruppe { background: #f0ebfa; color: #6a4fb0; }

/* lifecycle + profile */
.lifecycle-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; }
.lifecycle-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.kv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 20px; }
.kv { display: flex; flex-direction: column; }
.kv-l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.kv-contact { display: flex; align-items: center; gap: 6px; }
.link-copy { background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 13px; padding: 2px 4px; border-radius: 4px; line-height: 1; }
.link-copy:hover { background: var(--bg); color: var(--primary); }

/* progress bars */
.tbl .bar-col { vertical-align: middle; }
.tbl td.nr { font-size: 1.5rem; line-height: 1.1; white-space: nowrap; }
.kl-bar { margin-top: 5px; max-width: 260px; }
.kl-bar .bar { min-width: 80px; }
.kl-bar .small { white-space: nowrap; }
.bar-cell { display: flex; align-items: center; gap: 8px; }
.bar { flex: 1; height: 8px; background: var(--line); border-radius: 6px; overflow: hidden; min-width: 60px; }
.bar-fill { height: 100%; background: var(--primary); transition: width .3s; }
.bar-fill.over { background: var(--danger); }
.bar-num { font-size: 12px; color: var(--muted); width: 34px; }

/* Kohorte groups (Klienten → Budget, Planung → Monatliche Entwicklung) */
.tbl tr.grp-head th { background: var(--primary-l); color: var(--primary-d); border-bottom: 1px solid var(--line); padding: 6px 12px; font-size: 12px; text-transform: none; }
.tbl tbody tr.grp-head:hover, .tbl tbody tr.grp-total:hover, .tbl tbody tr.quota-row:hover { background: transparent; }
.tbl tbody tr.grp-head:hover th { background: var(--primary-l); }
.tbl tr.grp-total td { font-weight: 600; border-top: 2px solid var(--line); }
.tbl tr.quota-row td { color: var(--muted); font-style: italic; }
.tbl tr.quota-row td.neg { color: var(--danger); }
.tbl.fixed { table-layout: fixed; }
.tbl.fixed th:first-child { width: 34%; }
.cohort-block { margin-top: 14px; }
.cohort-block h4 { margin: 0 0 6px; font-size: 13px; color: var(--primary-d); }
.cohort-block .quota { margin-top: 6px; }

/* export */
.export-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }

/* ---------------- responsive (mobile) ---------------- */
@media (max-width: 768px) {
  .shell { grid-template-columns: 1fr; }
  .side {
    position: fixed; left: 0; top: 0; bottom: 0; width: 264px; z-index: 30;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: none;
  }
  .side.open { transform: none; box-shadow: 0 0 44px rgba(10, 20, 40, .4); }
  .menu-btn { display: inline-flex; }
  .side-backdrop { display: block; position: fixed; inset: 0; background: rgba(20, 30, 50, .45); z-index: 25; }
  .topbar { padding: 10px 14px; }
  .view { padding: 16px 16px 40px; }
  .form-grid { grid-template-columns: 1fr; }
  .lifecycle-row { grid-template-columns: 1fr; }
  .page-head { flex-wrap: wrap; }
  .panel { padding: 14px; }
  .kv-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 640px) {
  /* hide the least useful columns so the two main tables fit without scroll */
  .tbl.kl .col-opt { display: none; } /* Eintritt, Austritt, Beendigungsgrund */
  .tbl td.nr { font-size: 1.25rem; }
  .tbl.kl th, .tbl.kl td { padding: 8px 6px; }

  /* to-do add bar: input on its own row, chips left + button right */
  .todo-add { flex-direction: column; align-items: stretch; }
  .todo-add .inp { width: 100%; }
  .todo-add-ctrl { justify-content: flex-start; }
  .todo-add-ctrl .btn { margin-left: auto; }
  /* to-do rows: check + text on row one, flags/meta/delete on row two */
  .todo-meta { flex-basis: 100%; justify-content: flex-start; }
  .li-row { flex-wrap: wrap; }
  .li-row .inp { flex-basis: 100%; }
  h1 { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .side { transition: none; }
  .toast { transition: none; }
  .pin-dots.shake { animation: none; }
}

/* ---------------- help / workflow pages ---------------- */
.help-tabs { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.tab-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 0;
  padding: 8px 12px; cursor: pointer; font-size: 13px; color: var(--muted); font-family: inherit;
}
.tab-btn:hover { color: var(--ink); }
.tab-btn.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--primary); }
.help-actions { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.help-actions a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-bottom: 18px; }
.team-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px;
}
.team-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.team-name { font-weight: 650; font-size: 14px; }
.team-role { font-size: 12px; color: var(--muted); margin-top: 2px; }
.team-links { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.team-links a { text-decoration: none; }
.link-group { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); margin-bottom: 18px; }
.link-sub { margin-top: 14px; }
.link-sub h5 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.link-sub ul { list-style: none; margin: 0; padding: 0; }
.link-sub li { padding: 5px 0; border-bottom: 1px solid var(--line); }
.link-sub li:last-child { border-bottom: 0; }
.link-label { font-size: 13px; }
.link-sub a { font-size: 12px; word-break: break-all; }
.step-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; box-shadow: var(--shadow); margin-bottom: 14px; }
.step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.step-head h3 { margin: 0; }
.step-num { width: 22px; height: 22px; border-radius: 50%; background: var(--primary-l); color: var(--primary-d); font-weight: 700; font-size: 12px; display: grid; place-items: center; flex-shrink: 0; }
.step-card ul { margin: 0; padding-left: 18px; }
.step-card li { margin: 4px 0; }
.tab-dot { color: var(--warn); font-size: 10px; margin-left: 4px; vertical-align: 1px; }

/* ---------------- help moderation editor ---------------- */
.rec-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.rec {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px;
  background: #fff; display: flex; flex-direction: column; gap: 10px;
}
.rec .field { margin: 0; }
.rec-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 2px; }
.li-list { display: flex; flex-direction: column; }
.li-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.li-row .inp { flex: 1 1 auto; min-width: 0; }
.li-del {
  background: none; border: 0; color: var(--danger); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 6px; flex-shrink: 0;
}
.li-del:hover { background: var(--danger-l); }
.sec-status.adapted { color: var(--warn); font-weight: 600; }

/* ---------------- client to-dos ---------------- */
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.panel-head h3 { margin: 0; }
.todo-add { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.todo-add .inp { flex: 1 1 auto; min-width: 140px; width: auto; }
.todo-add-ctrl { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.todo-list { display: flex; flex-direction: column; }
.todo-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); flex-wrap: wrap; row-gap: 6px; }
.todo-row:last-child { border-bottom: 0; }
.todo-row input[type=checkbox] { flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
/* one line on wide screens: [check] [text …] [flags + meta + delete];
   the meta block drops to its own row on narrow screens (see 640px block) */
.todo-text { flex: 1 1 auto; min-width: 0; cursor: text; }
.todo-text.done { text-decoration: line-through; color: var(--muted); }
.todo-meta { display: flex; align-items: center; gap: 8px; row-gap: 4px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.todo-ts { font-size: 11px; color: var(--muted); white-space: nowrap; }
.todo-inp { flex: 1 1 auto; min-width: 0; }
.tag {
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  border-radius: 4px; padding: 2px 10px; font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: inherit; line-height: 1.6; flex-shrink: 0;
}
.tag:hover { border-color: #c2ccda; }
.tag.flag-me.on { background: var(--primary-l); border-color: var(--primary); color: var(--primary-d); }
.tag.flag-kl.on { background: var(--ok-l); border-color: var(--ok); color: var(--ok); }
.tag.off { opacity: .5; }
.todo-row .tag { font-size: 10px; padding: 1px 8px; }
.todo-del { background: none; border: 0; color: var(--danger); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.todo-del:hover { background: var(--danger-l); }
.todo-filter { display: flex; gap: 6px; margin: 0 0 8px; }
.todo-filter .chip { font-size: 11px; padding: 2px 10px; }

/* ---------------- toast + modal ---------------- */
.toast-box { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.toast { background: var(--ink); color: #fff; padding: 11px 16px; border-radius: 6px; box-shadow: var(--shadow-pop); font-size: 13px; opacity: 1; transition: opacity .3s; max-width: 340px; }
.toast.ok { background: #21402f; }
.toast.err { background: var(--danger); }
.toast.hide { opacity: 0; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(20, 30, 50, .45); display: grid; place-items: center; z-index: 40; overflow-y: auto; }
/* Tall modals (e.g. the mail composer, e.g. on phones) get their own scroll area,
   so the action buttons at the bottom stay reachable even when the page behind
   is blocked by the fixed backdrop. `dvh` follows the mobile browser chrome. */
.modal { background: var(--panel); border-radius: 8px; padding: 22px; width: 440px; max-width: 92vw;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch; box-shadow: var(--shadow-pop); }
.modal-msg { margin: 0 0 18px; font-size: 14px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* misc */
.muted { color: var(--muted); }
.small { font-size: 12px; }
.err { color: var(--danger); }
.warn-text { color: var(--warn); }
.warn { color: var(--warn); background: var(--warn-l); padding: 8px 12px; border-radius: 8px; }
code { background: #eef1f6; padding: 1px 6px; border-radius: 5px; font-size: 12px; }

/* import result */
.ok-box { margin-top: 10px; padding: 8px 12px; border-radius: 6px; background: #e8f5ec; color: #1d5c32; font-size: 13px; }
.scroll + .panel { margin-top: 18px; }

/* ---------------------------------------------------------------- documents */
.doc-upload { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; margin-bottom: 14px; }
.doc-upload .inp { flex: 1 1 220px; }
.doc-drop { flex: 2 1 340px; border: 2px dashed var(--line); border-radius: 10px; padding: 10px 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.doc-drop.over { border-color: var(--primary); background: var(--primary-l); }
.modal.chat-import { width: 680px; }
.chat-drop { justify-content: center; min-height: 72px; margin-bottom: 10px; }
.ci-bar { display: flex; gap: 10px; align-items: baseline; margin: 10px 0 6px; }
.ci-list { max-height: 45vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 14px; }
.ci-row { display: grid; grid-template-columns: auto 8.5em 1.2em 1fr; gap: 8px; align-items: start; padding: 6px 10px; border-bottom: 1px solid var(--line); cursor: pointer; }
.ci-row:last-child { border-bottom: 0; }
.ci-row[hidden] { display: none; }
.ci-dir { color: var(--primary); text-align: center; }
.ci-text { white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.inp.inp-sm { padding: 2px 6px; font-size: 12px; width: auto; display: inline-block; }
@media (max-width: 640px) {
  .ci-row { grid-template-columns: auto 1.2em 1fr; }
  .ci-row > input { grid-row: 1 / span 2; }
  .ci-when { grid-column: 2 / -1; }
}
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.doc-card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); display: flex; flex-direction: column; }
.doc-card.is-hidden { opacity: .55; border-style: dashed; }
.doc-thumb { display: block; width: 100%; height: 150px; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: #eef1f6; cursor: zoom-in; overflow: hidden; }
.doc-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.doc-docx-prev { width: 100%; height: 100%; overflow: hidden; position: relative; background: #fff; pointer-events: none; }
.doc-docx-prev iframe { border: 0; width: 400%; height: 400%; transform: scale(.25); transform-origin: 0 0; position: absolute; top: 0; left: 0; }
.doc-icon { height: 100%; display: grid; place-items: center; font-weight: 600; color: var(--muted); font-size: 18px; }
.doc-info { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.doc-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-kind { font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 4px; background: var(--primary-l); color: var(--primary); vertical-align: 1px; }
.doc-kind.pdf { background: var(--danger-l); color: var(--danger); }
.doc-kind.image { background: var(--ok-l); color: var(--ok); }
.doc-meta { font-size: 11px; color: var(--muted); }
.doc-note { width: 100%; box-sizing: border-box; font: inherit; font-size: 12px; border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; resize: vertical; background: #f7f9fc; }
.doc-note:focus { border-color: var(--primary); background: #fff; outline: none; }
.doc-note[readonly] { resize: none; }
.doc-note.doc-title { font-size: 13px; font-weight: 600; color: var(--ink); background: transparent; padding: 2px 4px; margin: 0 -4px; resize: none; overflow: hidden; line-height: 1.35; }
.doc-note.doc-title:hover:not([readonly]) { background: #f7f9fc; }
.doc-file { cursor: help; color: var(--muted); margin-left: 2px; }
.doc-file:focus { outline: 1px dotted var(--muted); }
.doc-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; font-size: 12px; }

.doc-viewer-bg { z-index: 60; }
.doc-viewer { background: var(--panel); border-radius: 8px; width: min(1280px, 96vw); height: 92vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-pop); }
.doc-v-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.doc-v-title { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.doc-v-tools { margin-left: auto; display: flex; gap: 6px; flex-shrink: 0; }
.doc-v-body { flex: 1; display: flex; min-height: 0; }
.doc-v-stage { flex: 1; min-width: 0; background: #525a66; display: grid; place-items: center; overflow: auto; }
.doc-v-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.doc-v-stage iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.doc-v-stage .muted { color: #dfe4ea; }
.doc-v-side { width: 280px; flex-shrink: 0; border-left: 1px solid var(--line); padding: 14px; display: flex; flex-direction: column; gap: 8px; overflow: auto; }
.doc-v-meta { font-size: 12px; color: var(--muted); margin: 6px 0; }
@media (max-width: 800px) {
  .doc-v-body { flex-direction: column; }
  .doc-v-side { width: auto; border-left: 0; border-top: 1px solid var(--line); max-height: 40%; }
  .doc-v-tools > .btn:nth-child(3) { display: none; }
}
.doc-v-stage { position: relative; }
.doc-v-hint { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); font-size: 11px; color: #fff; background: rgba(0,0,0,.45); padding: 2px 8px; border-radius: 4px; pointer-events: none; }

.tbl td.neg { color: var(--danger); font-weight: 600; }

.doc-card { position: relative; }
.doc-handle { position: absolute; top: 6px; left: 6px; z-index: 2; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.92); color: var(--muted); font-size: 16px; line-height: 1; cursor: grab; touch-action: none; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.doc-printed { position: absolute; top: 6px; right: 6px; z-index: 2; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.92); box-shadow: 0 1px 3px rgba(0,0,0,.1); display: flex; align-items: center; justify-content: center; gap: 0; cursor: pointer; font-size: 15px; }
.doc-printed input { margin: 0; position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.doc-printed:has(input:checked) { background: var(--ok-l); border-color: var(--ok); }
.doc-v-printed { display: flex; align-items: center; gap: 6px; }
.doc-handle:hover, .doc-handle:focus-visible { color: var(--primary); border-color: var(--primary); }
.dragging { opacity: .6; outline: 2px dashed var(--primary); outline-offset: 2px; }
.dragging .doc-handle { cursor: grabbing; }

.cons-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.cons-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.cons-row.inactive { opacity: .6; }
.cons-row .cons-handle { position: static; flex-shrink: 0; }
.cons-row .cons-name { flex: 1; min-width: 0; }
.cons-count { width: 80px; text-align: right; }
.cons-quotas { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 6px 18px; padding-left: 50px; }
.cons-quota-field { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cons-row .cons-quota-field input.cons-quota { flex: none; width: 84px; }
.cons-add { display: flex; gap: 8px; }
.cons-add .inp { flex: 1; }
.hint.muted { color: var(--muted); }

/* audit log */
.tbl.audit td { vertical-align: top; }
.nowrap { white-space: nowrap; }
.audit-details { font-size: 12px; color: var(--muted); max-width: 460px; }
.warn-row td { background: var(--warn-l); }
.badge.a-delete, .badge.a-login_failed, .badge.a-clear, .badge.a-anonymize, .badge.a-purge { background: var(--danger-l); color: var(--danger); }
.badge.a-create, .badge.a-upload { background: var(--ok-l); color: var(--ok); }
.pager { display: flex; align-items: center; gap: 8px; margin-top: 10px; }

/* Heute: Achtung */
.warn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.warn-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; background: #f7f9fc; font-size: 13px; }
.warn-item:hover { background: var(--primary-l); }
.warn-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.lvl-2 .warn-dot { background: var(--warn); }
.lvl-3 .warn-dot { background: var(--danger); }
.lvl-3 { background: var(--danger-l); }
/* Planung: Aktivität calendar */
.hm-wrap { overflow: hidden; }
.hm-scroll { overflow-x: auto; padding-bottom: 4px; }
.hm-months { position: relative; height: 16px; margin-left: 26px; font-size: 10px; color: var(--muted); }
.hm-months span { position: absolute; top: 0; }
.hm-body { display: flex; gap: 4px; }
.hm-days { display: grid; grid-template-rows: repeat(7, 11px); gap: 3px; width: 22px; font-size: 9px; color: var(--muted); line-height: 11px; }
.hm-grid { display: flex; gap: 3px; }
.hm-col { display: grid; grid-template-rows: repeat(7, 11px); gap: 3px; }
.hm-cell { width: 11px; height: 11px; border-radius: 2px; background: #ebedf0; display: inline-block; }
.hm-cell[data-day] { cursor: default; }
.hm-cell.l1 { background: #c6d5ee; } .hm-cell.l2 { background: #8eaadb; } .hm-cell.l3 { background: #4f74b8; } .hm-cell.l4 { background: #24417a; }
.hm-cell.fut.l1, .hm-cell.fut.l2, .hm-cell.fut.l3, .hm-cell.fut.l4 { outline: 1.5px dashed var(--primary); outline-offset: -1.5px; background: #fff; }
.hm-cell.today { outline: 1.5px solid var(--ink); outline-offset: 0; }
.hm-cell:not(.l0)[data-day] { cursor: pointer; }
/* Sa light yellow, So + gesetzliche Feiertage light red, non-usual Termin days (selected Berater) hatched */
.hm-cell.l0.sat { background: #fbf0c2; } .hm-cell.l0.sun, .hm-cell.l0.hol { background: #f7d4d2; }
.hm-cell.l0.off { background: repeating-linear-gradient(45deg, #f1f2f5 0 2px, #fcfcfd 2px 4px); }
.hm-cell.l0.abs { background: #ddd0f0; }
.hm-cell.abs:not(.l0) { box-shadow: inset 0 -3px 0 #9b7fd1; }
.hm-cell.hol:not(.l0) { box-shadow: inset 0 -2px 0 #e08a85; }

/* Kontingent-Plan (quota.js) */
.q-tbl .q-row { cursor: pointer; }
.q-tbl .q-row:hover td { background: #f7f9fc; }
.q-chev .ic { transition: transform .15s; color: var(--muted); } .q-chev.open .ic { transform: rotate(90deg); }
.q-detail > td { background: #fbfcfe; padding: 10px 8px 14px; }
.q-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 32px; align-items: start; }
.q-side { padding-top: 4px; }
.q-side .q-chart { margin-top: 0; height: 200px; }
@media (max-width: 900px) { .q-card { grid-template-columns: 1fr; } .q-side .q-chart { height: 120px; margin-top: 8px; } }
.q-card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.q-badge { border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; background: #eef1f6; color: var(--muted); }
.q-badge.q-ok { background: var(--ok-l); color: var(--ok); } .q-badge.q-warn { background: var(--warn-l); color: var(--warn); }
.q-badge.q-bad { background: var(--danger-l); color: var(--danger); }
.q-bar { position: relative; height: 16px; border-radius: 8px; background: #eef1f6; margin: 24px 0 4px; }
.q-seg { position: absolute; top: 0; bottom: 0; }
.q-done { background: var(--primary); }
.q-bar .q-done { left: 0; border-radius: 8px 0 0 8px; }
.q-plan { background: repeating-linear-gradient(45deg, #9db3dc 0 5px, #c7d5ee 5px 10px); }
.q-tick { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--ink); }
.q-tick span { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 11px; white-space: nowrap; }
.q-scale { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--muted); }
.q-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 6px; }
.q-kpi { background: #f3f6fb; border-radius: 8px; padding: 8px 10px; }
.q-kpi .k, .q-kpi .s { font-size: 11px; color: var(--muted); } .q-kpi .v { font-size: 20px; font-weight: 700; }
.q-kpi .v.neg { color: var(--danger); } .q-kpi .v.pos { color: var(--ok); }
.q-sent { margin: 6px 0 0; font-size: 13px; }
.q-book { margin: 8px 0 0; font-size: 13px; color: var(--muted); } .q-book.warn-text { color: var(--warn); }
.q-chart { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; height: 110px; margin-top: 14px; border-bottom: 1px solid var(--line); }
.q-col { position: relative; height: 100%; }
.q-col.now { background: #f3f6fb; border-radius: 3px 3px 0 0; }
.q-stack { position: absolute; left: 12%; right: 12%; bottom: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.q-stack > div:last-child { border-radius: 0; } .q-stack > div:first-child { border-radius: 3px 3px 0 0; }
.q-need { position: absolute; left: 4%; right: 4%; bottom: 0; border: 1.5px dashed var(--warn); border-bottom: 0; border-radius: 3px 3px 0 0; }
.q-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; font-size: 10px; color: var(--muted); text-align: center; margin-top: 3px; }
.q-months .now { color: var(--ink); font-weight: 700; }
.q-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--muted); margin: 6px 0 4px; }
.q-sw { display: inline-block; width: 11px; height: 11px; border-radius: 2px; vertical-align: -1px; margin-right: 4px; }
.q-needsw { border: 1.5px dashed var(--warn); }
/* Neue Klient:innen (Kontingent card) */
.q-new { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.q-start { display: inline-block; background: #eef1f6; border-radius: 999px; padding: 1px 8px; margin: 2px 4px 2px 0; font-size: 12px; white-space: nowrap; }
.q-calc .chip.q-calc-ok:not(.active) { border-color: #9cd3b3; background: #eef8f2; }
.q-new b.pos { color: var(--ok, #1e7b4a); font-weight: 600; }
/* the Kontingent table may scroll sideways on phones; its expanded card stays within the screen */
@media (max-width: 640px) { .q-detail .q-card { position: sticky; left: 0; max-width: calc(100vw - 48px); box-sizing: border-box; } }
/* Meine Kapazität: 26 weekly columns, capacity as a dashed line per week, the free slot highlighted */
.q-chart.cap-chart, .q-months.cap-kw { grid-template-columns: repeat(26, 1fr); gap: 2px; }
.q-side .q-chart.cap-chart { height: 150px; }
.cap-col .q-stack { left: 8%; right: 8%; }
.cap-col.slot { background: var(--ok-l); border-radius: 3px 3px 0 0; }
.cap-line { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--warn); z-index: 1; }
.cap-sw { border-top: 2px dashed var(--warn); height: 0; width: 13px; border-radius: 0; vertical-align: 3px; }
.cap-slotsw { background: var(--ok-l); border: 1px solid var(--ok); }
/* Terminplan of one client: SVG timeline (x in percent so the dots stay round) */
.tp-sent { margin: 0; }
.tp-line { margin: 8px 0 0; }
.tp-svg { display: block; width: 100%; height: 60px; overflow: visible; }
.tp-svg text { font-size: 11px; fill: var(--muted); }
.tp-svg .tp-today-t { fill: var(--warn); font-weight: 600; }
.tp-axis { stroke: var(--line); stroke-width: 2; }
.tp-ideal { stroke: #b9c5da; stroke-width: 1.5; }
.tp-soft { stroke: var(--ok); stroke-width: 1.5; stroke-dasharray: 3 3; }
.tp-today { stroke: var(--warn); stroke-width: 2; }
circle.tp-held { fill: var(--primary); stroke: var(--primary); stroke-width: 1.5; }
circle.tp-booked { fill: #fff; stroke: var(--primary); stroke-width: 2; }
circle.tp-projected { fill: #fff; stroke: #98a2b3; stroke-width: 1.5; stroke-dasharray: 2 2; }
.tp-sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; margin-right: 4px; box-sizing: border-box; }
.tp-sw.tp-held { background: var(--primary); }
.tp-sw.tp-booked { border: 2px solid var(--primary); }
.tp-sw.tp-projected { border: 1.5px dashed #98a2b3; }
.tp-sw.tp-idealsw { width: 2px; border-radius: 0; background: #b9c5da; height: 11px; }
.tp-sw.tp-softsw { width: 0; border-radius: 0; border-left: 2px dashed var(--ok); height: 11px; }
.tp-tbl td { vertical-align: middle; }
.tp-panel .kv span.neg, .q-new b.neg { color: var(--danger); font-weight: 600; }
.abs-block { margin-top: 14px; }
.abs-add { align-items: end; }
.abs-btn { justify-content: flex-end; }
.abs-list { margin-top: 8px; }
.abs-row { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--line); }
.abs-row > :nth-child(2) { flex: 1; }
.abs-row.past { opacity: .6; }
.wd-pick { display: inline-flex; gap: 4px; flex-wrap: wrap; vertical-align: middle; }
.wd-pick .chip { min-width: 34px; padding: 3px 6px; }
@media (max-width: 640px) {
  .q-tbl .q-opt, .tp-tbl .tp-opt { display: none; }
  .tp-tbl th, .tp-tbl td { padding: 8px 4px; font-size: 12px; }
  .tp-tbl .q-badge { white-space: normal; display: inline-block; padding: 2px 5px; font-size: 11px; }
  .q-months.cap-kw span:nth-child(even) { visibility: hidden; }
  .q-kpis .v { font-size: 17px; }
  .q-kpi { padding: 6px 7px; }
  .wd-pick .chip { min-width: 40px; min-height: 36px; }
}
.hm-legend { display: flex; align-items: center; gap: 3px; font-size: 11px; color: var(--muted); margin-top: 6px; justify-content: flex-end; }
.small-sel { width: auto; padding: 4px 8px; font-size: 12px; }

.side-acts { display: flex; gap: 6px; }
.side-acts .btn { flex: 1; }
.feed-url { display: flex; gap: 6px; margin: 6px 0; }
.feed-url .inp { flex: 1; font-family: "AJ Scribble", monospace; font-size: 12px; }

/* quick entry */
.fab { position: fixed; right: 22px; bottom: 22px; z-index: 30; width: 56px; height: 56px; border-radius: 50%; border: 0;
  background: var(--primary); color: #fff; font-size: 30px; line-height: 1; box-shadow: 0 4px 14px rgba(20,40,80,.35); cursor: pointer; }
.fab:hover { background: var(--primary-d); }
.quick-modal { width: 460px; }
.quick-row { display: grid; grid-template-columns: 1.4fr 1fr .7fr; gap: 8px; }
@media (max-width: 800px) {
  .fab { right: 16px; bottom: 16px; }
  .quick-modal { width: 100%; max-width: 100vw; border-radius: 14px 14px 0 0; align-self: end; }
  .modal-backdrop:has(.quick-modal) { place-items: end center; }
  .quick-modal .inp { font-size: 16px; } /* no iOS zoom on focus */
  .quick-row { grid-template-columns: 1fr 1fr; }
  .quick-row .field:last-child { grid-column: span 2; }
  .page-actions { flex-wrap: wrap; }
  .tbl th, .tbl td { padding: 6px 8px; }
}

/* 2FA */
.twofa-setup { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.qr svg { width: 190px; height: 190px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.secret { display: block; font-size: 13px; margin: 4px 0 10px; letter-spacing: .5px; }
pre.codes { font: 14px/1.6 monospace; background: #fff; padding: 8px 12px; border-radius: 6px; columns: 2; }

/* Heute */
.task-list { display: flex; flex-direction: column; gap: 6px; }
.task { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.task input[type=checkbox] { width: 18px; height: 18px; margin-top: 2px; }
.task.done { opacity: .6; }
.task.done .task-title { text-decoration: line-through; }
.task.overdue { border-color: var(--warn); background: var(--warn-l); }
.task.important { border-color: var(--danger); background: var(--danger-l); }
.task.important .task-status { color: var(--danger); font-weight: 600; }
.task.important.done { border-color: var(--line); background: var(--panel); }
.task.chore { background: #f7f9fc; }
.task-main { flex: 1; min-width: 0; }
.task-title { font-weight: 600; }
.task-note { font-size: 12px; color: var(--muted); }
.task-status { font-size: 12px; color: var(--primary); margin-top: 2px; }
.task.overdue .task-status { color: var(--warn); font-weight: 600; }
.task-acts { display: flex; gap: 6px; flex-shrink: 0; }
.task-count { min-width: 30px; height: 26px; padding: 0 6px; border-radius: 13px; background: var(--primary); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 13px; }
.tab-btn.is-today { color: var(--warn); font-weight: 600; }
.week-grid td.wg { text-align: center; width: 60px; }
.week-grid td.ok { background: var(--ok-l); color: var(--ok); font-weight: 700; }
.week-grid td.miss { background: var(--danger-l); color: var(--danger); }
.week-grid td.plan { color: var(--muted); }
.week-grid th.sel { color: var(--primary); }
.nav-badge { margin: -4px 0 -4px auto; background: var(--warn); color: #fff; border-radius: 10px; font-size: 11px; padding: 0 7px; line-height: 18px; }  /* negative margins: the pill never changes the row height */
.nav-item { display: flex; align-items: center; }
/* Angebote */
.client-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.cpill { border: 1px solid var(--line); background: var(--panel); border-radius: 4px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.cpill.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.reg-box { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.offer-list h3.grp { font-size: 13px; color: var(--muted); margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .5px; }
.offer-row { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); margin-bottom: 6px; outline: none; }
.offer-row.is-new { background: var(--primary-l); border-color: color-mix(in srgb, var(--primary) 28%, var(--line)); }
.offer-row.cursor { box-shadow: 0 0 0 2px var(--primary); }
.offer-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; }
.offer-main { flex: 1; min-width: 0; }
.offer-title { font-weight: 600; }
.offer-meta { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.src-badge { width: 24px; height: 24px; border-radius: 6px; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }
.tag { display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 4px; background: var(--primary-l); color: var(--primary); }
.tag.warn { background: var(--warn-l); color: var(--warn); }
.tag.wb { background: #e0f2f1; color: #0f766e; }
.tag.muted-tag { background: #f1f3f6; color: var(--muted); }
.chips-row { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: 45%; }
.cchip { font-size: 11px; border-radius: 4px; padding: 2px 8px; border: 1px solid var(--line); background: #fff; cursor: pointer; white-space: nowrap; }
.cchip.st-sugg { border-style: dashed; border-color: var(--primary); color: var(--primary); }
.cchip.st-short { background: var(--primary); border-color: var(--primary); color: #fff; }
.cchip.st-rejected { text-decoration: line-through; color: var(--muted); }
.cchip.st-sent { background: var(--ok-l); border-color: var(--ok); color: var(--ok); }
.offer-detail { padding: 4px 12px 12px 44px; display: flex; flex-direction: column; gap: 6px; }
.offer-links { display: flex; gap: 6px; flex-wrap: wrap; }
.why-box summary, .fulltext summary { cursor: pointer; font-size: 12px; color: var(--primary); }
.tbl.why td { font-size: 12px; padding: 4px 8px; }
.fulltext-body { white-space: pre-wrap; font-size: 12px; max-height: 360px; overflow: auto; background: #f7f9fc; padding: 8px; border-radius: 6px; }
.score { font-weight: 700; color: var(--primary); min-width: 30px; text-align: right; }
.row-acts { display: flex; gap: 6px; }
.prof-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
.prof-preview { background: #f7f9fc; border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.term-input { display: flex; flex-wrap: wrap; gap: 4px; border: 1px solid var(--line); border-radius: 7px; padding: 5px; background: #fff; }
.term-input .term { background: var(--primary-l); color: var(--primary); border-radius: 4px; padding: 2px 4px 2px 9px; font-size: 12px; display: inline-flex; align-items: center; gap: 2px; }
.term-input .term button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 13px; }
.term-input .term-new { border: 0; outline: none; flex: 1; min-width: 160px; font: inherit; padding: 3px; }
.hint-box { background: var(--primary-l); color: var(--primary-d); padding: 8px 12px; border-radius: 6px; margin-top: 10px; font-size: 13px; }
.modal.wide { width: 760px; }
@media (max-width: 800px) { .prof-grid { grid-template-columns: 1fr; } .chips-row { max-width: none; justify-content: flex-start; } .offer-head { flex-wrap: wrap; } }

.eg-box { background: #f7f9fc; border: 1px dashed var(--primary); border-radius: 9px; padding: 10px 12px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 6px; }
.eg-terms { display: flex; flex-wrap: wrap; gap: 6px; }
.eg-term { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 4px; padding: 2px 9px; background: #fff; cursor: pointer; font-size: 13px; }
.eg-term.on { border-color: var(--primary); }

.reason-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.btn.danger-outline { color: var(--danger); border-color: var(--danger); background: #fff; }
.btn.danger-outline:hover { background: var(--danger-l); }

.ft-form { display: flex; flex-direction: column; gap: 6px; padding: 6px 0; }

/* ---- Avatars (Klienten / Berater) ---- */
.avatar { --av: var(--primary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  border-radius: 28%; background: var(--av); color: #fff; font-weight: 600; letter-spacing: .02em; line-height: 1;
  overflow: hidden; vertical-align: middle; user-select: none; box-sizing: border-box; }
.avatar.has-img { background: #fff; border: 2px solid var(--av); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.editable { cursor: pointer; position: relative; }
.avatar.editable:hover, .avatar.editable:focus-visible { outline: 2px solid var(--primary-l); box-shadow: 0 0 0 3px var(--av); }
.who { display: inline-flex; align-items: center; gap: 8px; }
.av-modal { width: 340px; text-align: center; }
.av-modal h3 { margin: 0 0 12px; }
.av-stage { display: inline-block; padding: 8px; border: 2px dashed var(--line); border-radius: 14px; }
.av-stage.over { border-color: var(--primary); background: var(--primary-l); }
.av-canvas { display: block; border: 3px solid; border-radius: 28%; touch-action: none; cursor: grab; background: #fff; }
.av-hint { margin: 8px 0; }
.av-zoom { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 10px; }
.av-zoom input { width: 180px; }
.av-actions { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }

/* Terminprotokolle (Klient-Detail): dictated recaps + next steps */
textarea.protocol { min-height: 180px; line-height: 1.5; resize: vertical; }
.protocols { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow: auto; }.proto-entry { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--panel, #fff); }
.proto-head { display: flex; gap: 8px; align-items: baseline; cursor: pointer; margin-bottom: 6px; }
.proto-head:hover { color: var(--primary); }
.proto-text { white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
.proto-next { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.proto-next > .lbl { display: block; margin-bottom: 2px; color: var(--warn); }
/* small speech bubble in the Termine list when a protocol is stored */
.proto-bubble { margin-right: 6px; font-size: 12px; line-height: 1; vertical-align: -1px; opacity: .75; }
/* reveal completed "Wichtig" tasks on demand */
.done-toggle { align-self: flex-start; margin-top: 4px; padding: 4px 10px; border: 1px dashed var(--line); border-radius: 4px; background: none; color: var(--muted); font-size: 12px; cursor: pointer; }
.done-toggle:hover { color: var(--ink); background: #f4f6fa; }

/* sortable table headers + "today" marker row */
.tbl th.sortable { cursor: pointer; user-select: none; }
.tbl th.sortable:hover, .tbl th.sorted { color: var(--ink); }
.tbl th.sortable:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.sort-arrow { font-size: 10px; }
.tbl tr.today-row td, .panel.flush .tbl tr.today-row td:first-child, .panel.flush .tbl tr.today-row td:last-child { padding: 0; border-bottom: 0; background: none; }
.tbl tr.today-row:hover { background: none; }
/* today's Termine: tint + bold date so they stand out from the rest of the list */
.tbl tr.is-today > td { background: var(--warn-l); }
.tbl tr.is-today > td:first-child { color: var(--warn); font-weight: 700; }
.tbl tr.is-today:hover > td { background: #f6e7cd; }
.today-bar { display: flex; align-items: center; gap: 10px; padding: 4px 12px; color: var(--warn); font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; background: var(--warn-l); border-top: 2px solid var(--warn); border-bottom: 2px solid var(--warn); }

/* cancelled Termine stay listed, struck through and muted */
.badge.cancelled { background: var(--danger-l); color: var(--danger); text-decoration: none; margin-left: 6px; }
.tbl tr.is-cancelled > td { color: var(--muted); }
.tbl tr.is-cancelled td.c-date, .tbl tr.is-cancelled td.c-who .who,
.ts-item.is-cancelled .ts-date { text-decoration: line-through; color: var(--muted) !important; font-weight: 400; }
.ts-item.is-cancelled { opacity: .75; }

/* ---- client detail (1.10.1): header facts, status/⋯ menus, tabs, overview ---- */
.client-head { justify-content: flex-start; flex-wrap: wrap; }
.client-head h1 { margin: 0; }
.client-head .page-actions { margin-left: auto; }
.menu-wrap { position: relative; display: inline-flex; align-items: center; }
.client-head .page-actions { display: flex; align-items: center; gap: 8px; }
.menu-trigger { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.status-btn { cursor: pointer; font-size: 12px; padding: 4px 10px; }
.menu { position: fixed; z-index: 200; min-width: 220px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(20, 30, 60, .12); padding: 4px; }
.menu-item { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 14px; color: var(--ink); }
.menu-item:hover, .menu-item:focus-visible { background: var(--primary-l); }
.menu-item.danger { color: var(--danger); }
.client-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 12px 16px; margin: -6px 0 16px; }
.client-facts .fact { display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.client-facts .fact .lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.client-facts .kl-bar { min-width: 180px; }
.client-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; }
.client-tabs .tab-btn { white-space: nowrap; }
.ov-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
.ov-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ov-col > .panel { margin: 0; }
.kv-grid.one { grid-template-columns: 1fr 1fr; }
.kv b.neg { color: var(--danger); }
.act-row { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px solid #eef1f6; }
.act-row .act-when { margin-left: auto; white-space: nowrap; }
.act-proto { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.proto-text.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.budget-hist { margin-top: 12px; }
.budget-hist summary { cursor: pointer; color: var(--primary); }
.ts-list { display: flex; flex-direction: column; }
.ts-item { border-bottom: 1px solid #eef1f6; }
.ts-item > summary { list-style: none; cursor: pointer; }
.ts-item > summary::-webkit-details-marker { display: none; }
.ts-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 9px 4px; }
.ts-item.future .ts-date { font-weight: 600; }
.ts-date { min-width: 150px; }
.day-today, .day-today .muted { color: var(--warn) !important; font-weight: 700; }
.day-tomorrow, .day-tomorrow .muted { color: var(--tomorrow) !important; font-weight: 600; }
.ts-note { color: var(--ink); font-size: 13px; }
.ts-head .proto-bubble { margin-left: auto; }
details.ts-item[open] > summary .ts-head { background: #f7f9fc; }
.ts-notes { padding: 4px 8px 14px 18px; display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 900px) {
  .ov-grid { grid-template-columns: 1fr; }
  .client-head .page-actions { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .client-head .page-actions .btn { padding: 7px 10px; font-size: 13px; white-space: nowrap; }
  .client-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
  .client-facts .fact { min-width: 0; }
  .client-facts .kl-bar { min-width: 0; }
  .client-facts a { word-break: break-all; }
  .todo-add { flex-direction: column; align-items: stretch; }
  .todo-add > .inp { width: 100%; }
}

/* ---- area colour coding (1.11.0) ----------------------------------------
 * Each work area has a hue; tools (export, help, admin, account) stay slate.
 * Colour sits in icon tiles, tinted surfaces and header rows, never in edge
 * stripes. body.area-colors switches it on (Mein Konto → Darstellung);
 * --grad scales the top-bar gradient. Status colours (ok/warn/danger) are
 * not used as area hues. */
:root {
  --c-heute: #c23d74; --c-planung: #2f5496; --c-clients: #13827a; --c-sessions: #4b4fc4;
  --c-todos: #0f7fa6; --c-kommunikation: #8a47b5; --c-offers: #9a5b2e; --c-tools: #5b6b82;
  --grad: 1;
}
[data-area="heute"]         { --area: var(--c-heute); }
[data-area="planung"]       { --area: var(--c-planung); }
[data-area="clients"]       { --area: var(--c-clients); }
[data-area="sessions"]      { --area: var(--c-sessions); }
[data-area="todos"]         { --area: var(--c-todos); }
[data-area="kommunikation"] { --area: var(--c-kommunikation); }
[data-area="offers"]        { --area: var(--c-offers); }
[data-area="tools"]         { --area: var(--c-tools); }
[data-area] {
  --area-l: color-mix(in srgb, var(--area) 8%, white);
  --area-m: color-mix(in srgb, var(--area) 20%, white);
  --area-d: color-mix(in srgb, var(--area) 78%, black);
}
/* inside an area, the generic accent becomes the area colour */
body.area-colors .content[data-area] { --primary: var(--area); --primary-d: var(--area-d); --primary-l: var(--area-l); }

/* icon tile */
.tile { flex-shrink: 0; width: 30px; height: 30px; border-radius: 6px; display: inline-grid; place-items: center;
  font-size: 15px; line-height: 1; font-weight: 400; background: #eef1f6; color: var(--muted); }
.tile.sm { width: 22px; height: 22px; font-size: 12px; border-radius: 5px; }
body.area-colors .tile[data-area] { background: var(--area-m); color: var(--area-d); }

/* sidebar: icon tint, active item = solid block in its own colour */
body.area-colors .nav-item[data-area] .nav-icon { color: color-mix(in srgb, var(--area) 50%, white); opacity: 1; }
body.area-colors .nav-item.active[data-area] { background: var(--area); }
body.area-colors .nav-item.active[data-area] .nav-icon { color: #fff; }
.nav-item.active .nav-badge { background: #fff; color: var(--warn); }

/* top bar: soft gradient band + hairline */
.topbar-title { display: flex; align-items: center; gap: 10px; }
body.area-colors .content[data-area] > .topbar {
  background: linear-gradient(90deg, color-mix(in srgb, var(--area) calc(var(--grad) * 14%), white) 0%, white 70%);
  border-bottom-color: color-mix(in srgb, var(--area) 25%, var(--line));
}
body.area-colors .content[data-area] .page-head h1 { color: var(--area-d); }

/* panels of an area: tinted full-width header row with a tile */
.panel[data-area] > h3:first-child, .panel[data-area] > .panel-head:first-child {
  margin: -18px -18px 14px; padding: 10px 18px; border-bottom: 1px solid var(--line);
  background: #f8f9fb; border-radius: var(--radius) var(--radius) 0 0;
}
.panel[data-area] > h3:first-child { font-size: 14px; }
h3.has-tile { display: flex; align-items: center; gap: 9px; }
body.area-colors .panel[data-area] > h3:first-child, body.area-colors .panel[data-area] > .panel-head:first-child {
  background: var(--area-l); border-bottom-color: var(--area-m);
}
body.area-colors .panel[data-area] h3.has-tile { color: var(--area-d); }
@media (max-width: 768px) {
  .panel[data-area] > h3:first-child, .panel[data-area] > .panel-head:first-child { margin: -14px -14px 12px; padding: 9px 14px; }
}

/* tasks: tile instead of an edge stripe; area tint for status + counters */
.task { align-items: center; }
.task input[type=checkbox] { margin-top: 0; }
body.area-colors .task[data-area]:not(.overdue):not(.important) .task-status { color: var(--area-d); }
body.area-colors .task[data-area] .task-count { background: var(--area); }

/* tabs of an area (client detail) keep their own colour */
body.area-colors .tab-btn.active[data-area] { border-bottom-color: var(--area); color: var(--area-d); }
body.area-colors .fab[data-area] { background: var(--area); }
body.area-colors .fab[data-area]:hover { background: var(--area-d); }
input[type=range], input[type=checkbox], input[type=radio] { accent-color: var(--primary); }
@media (max-width: 640px) {
  .task { flex-wrap: wrap; }
  .task-main { flex: 1 1 180px; }
  .task-acts { flex-wrap: wrap; margin-left: auto; justify-content: flex-end; }
  .task > .tile:not(.sm) { width: 26px; height: 26px; font-size: 13px; }
}

/* page sections (Heute: Klienten / Angebote-Routine) */
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin: 26px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.page-head + .sec-head { margin-top: 4px; }
.sec-head h2 { font-size: 15px; font-weight: 650; margin: 0; }
/* compact one-line rows: name · details · actions */
.crow-list { display: flex; flex-direction: column; }
.crow { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #eef1f6; }
.crow-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.crow-who { font-weight: 600; color: var(--ink); text-decoration: none; }
.crow-who:hover { text-decoration: underline; }
.crow-meta, .crow-note { font-size: 12px; color: var(--muted); }
.crow-note { font-style: italic; }
.crow-meta.warn-text { color: var(--warn); }
.crow-acts { display: flex; gap: 6px; flex-shrink: 0; }
.crow.resting { opacity: .6; }
.crow-list > .done-toggle { margin-top: 10px; }
@media (max-width: 640px) {
  .crow { flex-wrap: wrap; row-gap: 6px; }
  .crow-acts { width: 100%; justify-content: flex-end; }
}
/* Heute → Achtung: hints grouped per client */
.warn-who { white-space: nowrap; }
.warn-tags { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.warn-tag { font-size: 12px; padding: 1px 7px; border-radius: 4px; background: #eef1f6; color: var(--ink); }
.warn-tag.lvl-2 { background: var(--warn-l); color: #8a5a12; }
.warn-tag.lvl-3 { background: var(--danger-l); color: var(--danger); }
.warn-list + .done-toggle { margin-top: 8px; }
.lvl-3.warn-item { background: #f7f9fc; }
@media (max-width: 640px) { .warn-item { flex-wrap: wrap; align-items: baseline; } }
/* Heute: Kontingent in one line, links to Planung */
.brief-line { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 18px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; font-size: 13px; }
.brief-line[hidden] { display: none; }
.brief-line:hover { border-color: var(--primary); }
body.area-colors .brief-line[data-area] { background: var(--area-l); border-color: var(--area-m); }
.brief-text { flex: 1; min-width: 0; }
.brief-go { color: var(--area-d, var(--primary)); font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) { .brief-go { display: none; } }
/* Klienten: Liste | Budget */
.toolbar-l > .view-mode { margin-left: auto; }
/* table panels without inner padding (cells bring their own) */
.panel.flush { padding: 4px 0; }
.panel.flush .tbl th:first-child, .panel.flush .tbl td:first-child { padding-left: 16px; }
.panel.flush .tbl th:last-child, .panel.flush .tbl td:last-child { padding-right: 16px; }
.panel.flush .tbl tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 640px) {
  /* status chips: one scrollable row */
  .toolbar-l > .chips { flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .toolbar-l > .chips .chip { white-space: nowrap; }
  /* client list: one compact block per client instead of a wide table */
  .tbl.kl thead { display: none; }
  .tbl.kl tr { display: grid; grid-template-columns: 44px 1fr auto; grid-template-areas: "nr who st" "nr next next";
    column-gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .tbl.kl td { border: 0; padding: 0 !important; }
  .tbl.kl td.nr { grid-area: nr; font-size: 1.1rem; text-align: left; }
  .tbl.kl td.c-who { grid-area: who; }
  .tbl.kl td.c-st { grid-area: st; }
  .tbl.kl td.c-next { grid-area: next; font-size: 12px; margin-top: 4px; }
  .tbl.kl td.c-next .muted { display: inline; margin-left: 6px; }
  .tbl.kl td.c-n { display: none; }
  .tbl.kl .kl-bar { max-width: none; }
}
.ts-group { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); padding: 10px 4px 2px; }
.ts-list > .ts-group:first-child { padding-top: 0; }
/* form sections (Klient: Person · Kontakt · Förderung · Anmerkung) */
.form-sec + .form-sec { margin-top: 18px; padding-top: 16px; border-top: 1px solid #eef1f6; }
.form-sec > h4 { margin: 0 0 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.form-grid.three { grid-template-columns: repeat(3, 1fr); }
.field-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 18px; }
.field-row-sub { display: contents; }
@media (max-width: 768px) {
  .form-grid.three, .field-row { grid-template-columns: 1fr; }
}
.c-date-time { display: none; }
@media (max-width: 640px) {
  /* Termine: one compact block per Termin */
  .tbl.tm thead { display: none; }
  .tbl.tm tr:not(.today-row) { display: grid; grid-template-columns: 92px 1fr auto; grid-template-areas: "date who le" "date anm anm";
    column-gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
  .tbl.tm tr.today-row, .tbl.tm tr.today-row td { display: block; }
  .tbl.tm tr:not(.today-row) td { border: 0; padding: 0 !important; }
  .tbl.tm tr.is-today { background: var(--warn-l); }
  .tbl.tm tr.is-today:hover { background: #f6e7cd; }
  .tbl.tm tr.is-today > td { background: none; }
  .tbl.tm td.c-date { grid-area: date; font-size: 13px; }
  .tbl.tm .c-date-time { display: inline; }
  .tbl.tm td.c-who { grid-area: who; }
  .tbl.tm td.c-le { grid-area: le; }
  .tbl.tm td.c-le::after { content: " LE"; color: var(--muted); font-size: 11px; }
  .tbl.tm td.c-anm { grid-area: anm; font-size: 12px; color: var(--muted); }
  .tbl.tm td.c-time, .tbl.tm td.c-ve, .tbl.tm td.c-art, .tbl.tm td.c-ber { display: none; }
}
/* Termin form: 4 columns (who / when + how much) */
.form-grid.four { grid-template-columns: repeat(4, 1fr); }
.form-grid.four > .full { grid-column: 1 / -1; }
.form-grid.four > .span2 { grid-column: span 2; }
.confirm-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.notes-block > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--primary); padding: 4px 0; }
.notes-block[open] > summary { margin-bottom: 10px; }
.notes-block > .field + .field { margin-top: 14px; }
@media (max-width: 900px) {
  .form-grid.four { grid-template-columns: 1fr 1fr; }
  .form-grid.four > .field:not(.pair) { grid-column: 1 / -1; }
}
/* Hilfe pflegen: records as a two-column grid, quiet remove link */
.rec.rec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.rec.rec-grid > .rec-actions { grid-column: 1 / -1; }
.rec-actions .rec-del { margin-right: auto; padding-left: 0; }
.rec-actions { justify-content: flex-end; }
@media (max-width: 640px) { .rec.rec-grid { grid-template-columns: 1fr; } }
/* Hilfe pflegen: records as a two-column grid, quiet remove link */
.rec.rec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.rec.rec-grid > .rec-actions { grid-column: 1 / -1; }
.rec-actions .rec-del { margin-right: auto; padding-left: 0; }
@media (max-width: 640px) { .rec.rec-grid { grid-template-columns: 1fr; } }
/* foldable panel (Angebote: manuell anlegen) */
.panel-fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.panel-fold > summary::-webkit-details-marker { display: none; }
.panel-fold > summary::before { content: "▸"; color: var(--muted); }
.panel-fold[open] > summary::before { content: "▾"; }
.panel-fold > summary h3 { margin: 0; }
.panel-fold[open] > summary { margin-bottom: 14px; }
.days-box { flex-wrap: nowrap; gap: 2px 8px; }
.days-box .check { gap: 3px; }
@media (max-width: 640px), (hover: none) { .kbd-hint { display: none; } }
@media (max-width: 640px) {
  .cons-row { flex-wrap: wrap; }
  .cons-row > .inp, .cons-row .cons-name { flex: 1 1 calc(100% - 90px); min-width: 0; }
  .cons-count { width: auto; margin-left: auto; }
  /* Kontingent fields: one per line, label left, field right (no 50px indent) */
  .cons-quotas { padding-left: 0; flex-direction: column; flex-wrap: nowrap; gap: 6px; }
  .cons-quota-field { justify-content: space-between; white-space: normal; }
  /* Kohorte tables (Dashboard): tighter cells, headers may wrap, no bar column in the Kontingent table */
  .tbl.fixed th, .tbl.fixed td { padding: 8px 4px; }
  .tbl.fixed th { font-size: 10px; white-space: normal; letter-spacing: -.2px; }
  .tbl.fixed th:first-child { width: 32%; }
  .tbl.fixed.quota { table-layout: auto; }
  .tbl.fixed.quota th:first-child { width: auto; }
  .tbl.fixed.quota th, .tbl.fixed.quota td { padding-left: 10px; }
  .tbl.fixed.quota th:first-child, .tbl.fixed.quota td:first-child { padding-left: 4px; }
  .tbl.fixed.quota th:last-child, .tbl.fixed.quota td:last-child { display: none; }
}
/* sidebar groups */
.nav-group { padding: 14px 19px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: #6b7c9e; }
/* top-bar breadcrumbs */
#view-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; }
#view-title .crumb { color: var(--muted); text-decoration: none; font-weight: 500; white-space: nowrap; }
#view-title .crumb:hover { color: var(--ink); text-decoration: underline; }
#view-title .crumb-sep { color: var(--muted); font-weight: 400; }
#view-title .crumb-cur { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-title { min-width: 0; }
@media (max-width: 640px) {
  /* phones: only the current page (the page itself has "← Zurück") */
  #view-title .crumb, #view-title .crumb-sep { display: none; }
}
/* styled file field */
.file-pick { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.file-name { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }

/* ---- Angebote as cards (desktop: grid, phone: one column) ---- */
.offer-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.offer-list > h3.grp, .offer-list > p { grid-column: 1 / -1; margin-bottom: 0; }
.offer-list > .offer-row { margin: 0; display: flex; flex-direction: column; }
.offer-list > .offer-row:has(.offer-detail) { grid-column: 1 / -1; }   /* opened card uses the full width */
.offer-list .offer-head { flex-wrap: wrap; align-items: flex-start; padding: 12px; gap: 8px 10px; flex: 1; }
.offer-list .offer-main { flex: 1 1 0; min-width: 0; }
.offer-list .offer-title { line-height: 1.35; }
.offer-list .offer-head > .chips-row, .offer-list .offer-head > .row-acts, .offer-list .offer-head > select {
  flex-basis: 100%; max-width: none; justify-content: flex-start; margin-top: 2px; }
.offer-list .offer-head > .row-acts { justify-content: flex-end; }
.offer-list .offer-detail { padding: 4px 12px 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.weak-hits { margin-top: 14px; }
.weak-hits > summary { cursor: pointer; color: var(--muted); font-size: 13px; margin-bottom: 10px; }
/* generic info cards (Klient:innen, Quellen) */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ocard { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px; }
.ocard.clickable { cursor: pointer; }
.ocard.clickable:hover, .ocard.clickable:focus-visible { border-color: var(--primary); outline: none; }
.ocard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ocard-title { font-weight: 600; min-width: 0; }
.ocard-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ocard-row > .lbl { margin: 0; }
.ocard-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; border-top: 1px solid #eef1f6; }
.ocard-stats { display: flex; gap: 14px; font-size: 12px; color: var(--muted); margin-top: auto; }
.ocard-stats b { color: var(--ink); font-size: 14px; }
@media (max-width: 640px) { .offer-list, .card-grid { grid-template-columns: 1fr; } }
.ocard-title .link { padding-left: 0; }
/* sidebar footer: quiet outline buttons instead of bright white ones */
.side-acts .btn { background: transparent; border-color: rgba(255, 255, 255, .16); color: #b9c5da; }
.side-acts .btn:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .3); color: #fff; }
.side-user .badge { background: rgba(255, 255, 255, .1); color: #b9c5da; }
/* actions that lead into another area wear that area's colour
   (e.g. "+ Termin" on a client page = Termine colour) */
body.area-colors .btn.primary[data-area] { background: var(--area); border-color: var(--area); color: #fff; }
body.area-colors .btn.primary[data-area]:hover { background: var(--area-d); border-color: var(--area-d); }
body.area-colors .btn:not(.primary):not(.danger)[data-area] { color: var(--area-d); border-color: var(--area-m); }
body.area-colors .btn:not(.primary):not(.danger)[data-area]:hover { background: var(--area-l); border-color: var(--area); }
body.area-colors .btn[data-area]:disabled { opacity: .5; }
/* Berichte panel on the client page */
.rep-list { display: flex; flex-direction: column; }
.rep-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid var(--line); }
.rep-row:last-child { border-bottom: 0; }
.rep-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rep-label { font-weight: 500; }
.rep-acts { display: flex; gap: 6px; }
.rep-list + .muted { margin-top: 10px; }
/* confidential Bericht of another Berater: no preview, no zoom */
.doc-card.locked .doc-thumb { cursor: default; }
.doc-card.locked .doc-icon { font-size: 28px; opacity: .55; }

/* ---------------- Betreuungsaktivität (Heatmap) ---------------- */
.heat-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.heat-controls .heat-right { margin-left: auto; }
.heat-flex { display: flex; align-items: flex-start; gap: 10px; }
.heat-vscroll { max-height: 262px; overflow-y: auto; }
.heat-ylabels { flex: none; width: 150px; }
.heat-lrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; }
.heat-lname { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.heat-lrow b { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); }
.heat-swatch { width: 9px; height: 9px; border-radius: 2.5px; display: inline-block; flex: none; }
.heat-scroll { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; padding-bottom: 3px; }
svg.heat { display: block; }
.heat-xlab { font-size: 10px; fill: var(--muted); }
.heat-hint { font-size: 11px; color: var(--muted); margin-top: 4px; }
.heat-tip { position: fixed; z-index: 60; pointer-events: none; background: #17233a; color: #fff; border-radius: 6px; padding: 7px 10px; font-size: 12px; line-height: 1.45; box-shadow: var(--shadow-pop); max-width: 280px; }
.heat-tip-r { color: #c7d2e4; }
.heat-tip-br { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, .2); }
.heat-stat { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.heat-stat .k { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 650; }
.heat-stat .v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.heat-stat .s { font-size: 11.5px; color: var(--muted); }
.heat-stat > div { display: flex; flex-direction: column; gap: 1px; }

/* kleiner Schalter (Browser-Einstellung, z. B. „Lücken“) */
.switch { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: 12.5px; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track { width: 32px; height: 18px; border-radius: 999px; background: #d6dde8; position: relative; transition: background .15s; flex: none; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.switch input:checked + .track { background: var(--primary); }
.switch input:checked + .track::after { left: 16px; }
@media (max-width: 900px) { .heat-ylabels { width: 118px; } }

/* Schnellsuche (Strg/Cmd+K) */
.pal-backdrop { place-items: start center; padding-top: 12vh; z-index: 70; }
.pal { background: var(--panel); border-radius: 10px; width: 640px; max-width: 94vw; box-shadow: var(--shadow-pop); overflow: hidden; }
.pal-input { width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 14px 16px; font-size: 16px; box-sizing: border-box; }
.pal-input:focus { outline: none; box-shadow: none; }
.pal-list { max-height: min(56vh, 460px); overflow-y: auto; padding: 4px 6px 8px; }
.pal-group { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 650; padding: 10px 10px 4px; }
.pal-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.pal-item.sel { background: var(--primary-l, #eef3fb); }
.pal-txt { min-width: 0; }
.pal-title { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-empty { padding: 18px 12px; text-align: center; }
.pal-foot { border-top: 1px solid var(--line); padding: 7px 14px; font-size: 11.5px; color: var(--muted); }
.palette-btn kbd { font: inherit; font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; margin-left: 6px; }
@media (max-width: 700px) { .palette-btn kbd { display: none; } }
.mail-att { margin: 6px 0; padding: 6px 8px; border: 1px dashed var(--line); border-radius: 6px; }
.mail-att.attention { border-style: solid; border-color: var(--warn, #b7791f); background: var(--warn-l, #fdf6e7); }
.file-hint { display: inline-block; margin-left: 6px; }
.file-hint summary { cursor: pointer; color: var(--primary, #2f5496); display: inline; }
.file-hint[open] { display: block; margin: 2px 0 0; }

/* Postausgang: "wird gesendet … Rückgängig" */
.mail-bars { position: fixed; left: 16px; bottom: 16px; z-index: 90; display: flex; flex-direction: column; gap: 8px; max-width: min(520px, 92vw); }
.mail-bar { display: flex; align-items: center; gap: 12px; background: #17233a; color: #fff; border-radius: 8px; padding: 10px 14px; font-size: 13px; box-shadow: var(--shadow-pop); }
.mail-bar .btn { margin-left: auto; }
.mail-bar.ok { background: #1f5a3a; } .mail-bar.err { background: #8a2a2a; }
.mail-bar .link { color: #fff; margin-left: auto; }
.danger-panel { border-color: #c0392b; box-shadow: 0 0 0 1px #c0392b33; }

/* whole card opens its text (Kommunikation) */
.comm-entry.click-open { cursor: pointer; transition: background .12s, border-color .12s; }
.comm-entry.click-open:hover { background: var(--primary-l, #f2f6fc); border-color: var(--primary, #2f5496); }
.comm-entry.click-open:focus-visible { outline: 2px solid var(--primary, #2f5496); outline-offset: 1px; }
.comm-entry.click-open .comm-body { cursor: text; }
.comm-entry.click-open summary { cursor: pointer; }

/* ---------------------------------------------------------------- icons ---- */
[hidden] { display: none !important; }
.ic { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.ic.filled { fill: currentColor; stroke: none; }
.ic-tri-up, .ic-tri-down, .ic-dot { width: .7em; height: .7em; vertical-align: 0; }
.nav-icon { display: inline-flex; align-items: center; justify-content: center; }
.nav-icon .ic { width: 17px; height: 17px; }
.ai-star { width: 1em; height: 1em; vertical-align: -0.12em; color: var(--ink); }
.info-wrap { display: inline; position: relative; }
.info-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; min-height: 22px; padding: 0 2px; margin: 0 2px;
  border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 50%; vertical-align: middle; }
.info-btn:hover, .info-btn[aria-expanded="true"] { color: var(--primary); }
.info-tip { display: block; margin: 6px 0 2px; padding: 8px 10px; border-radius: 6px; background: #f4f6fa; color: var(--ink);
  font-size: 12.5px; line-height: 1.45; font-weight: 400; }
.proto-bubble { color: var(--muted); }

/* ---------------------------------------------------------- Termin-Seite ---- */
.termin-form, .termin-form.form { display: flex; flex-direction: column; gap: 12px; background: none; border: 0; box-shadow: none; padding: 0; }
.termin-form > * { order: 5; margin: 0; }
.termin-head { order: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.termin-head h1 { margin: 0; font-size: 20px; }
.termin-actions { order: 1; display: flex; flex-wrap: wrap; gap: 8px; }
.termin-actions:empty { display: none; }
.termin-data.collapsed { order: 8; }
.termin-extra { order: 6; display: flex; flex-direction: column; gap: 12px; }
.termin-extra:empty { display: none; }
.save-bar { order: 10; position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; gap: 8px;
  padding: 10px 0; background: linear-gradient(to top, var(--bg) 70%, transparent); }
.who-link { color: var(--primary); font-weight: 600; text-decoration: none; }
.who-link.plain { color: var(--ink); }
a.who-link:hover { text-decoration: underline; }
.badge.attn { background: var(--warn-l); color: var(--warn); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 8px; }
.card-head h3 { margin: 0; font-size: 14px; }
.card-head .link { margin-left: auto; }
.data-summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; font-size: 13px; }
.termin-proto textarea.protocol { min-height: 180px; }
.ai-line { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.gist { margin: 0 0 10px; font-size: 15px; font-weight: 600; line-height: 1.4; }
.ai-card .sec { margin: 0 0 10px; }
.ai-card .sec .lbl { margin-bottom: 1px; }
.ai-card.draft { border-style: dashed; }
.draft-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.ai-wait { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; padding: 4px 0; }
.spin { width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 3s; } }
details.raw > summary { cursor: pointer; color: var(--primary); font-size: 13px; }
details.raw .raw-text { margin-top: 8px; }
.step-row { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px solid #eef1f6; }
.step-row:first-of-type { border-top: 0; }
.step-row.busy { opacity: .55; pointer-events: none; }
.step-text { flex: 1 1 220px; min-width: 0; line-height: 1.4; }
.proto-edit .link { align-self: flex-start; }
.step-pick { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; flex: none; }
.step-pick .pick { border: 0; border-right: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-size: 13px;
  padding: 7px 14px; cursor: pointer; }
.step-pick .pick:last-child { border-right: 0; }
.step-pick .pick:hover { background: var(--primary-l); color: var(--primary-d); }
.step-done { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-size: 13px; }
.step-done .link { margin-left: 8px; color: var(--muted); }
.page-foot { margin-top: 24px; }
.termin-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.termin-foot:empty { display: none; }
.ts-item.click-open { cursor: pointer; }
.ts-item.click-open:hover .ts-head, .ts-item.click-open:focus-visible .ts-head { background: #f7f9fc; }
.ts-gist { padding: 0 4px 10px; color: var(--ink); font-size: 13px; line-height: 1.45; }
.crow-gist { flex-basis: 100%; font-size: 13px; line-height: 1.45; padding-top: 2px; }
.ai-consent { background: #f7f9fc; border: 1px dashed var(--primary); border-radius: 8px; padding: 10px 12px; margin: 10px 0; }
.ai-row { display: flex; gap: 8px; }
.ai-row-grow { flex: 1; min-width: 0; }
.ai-prompt-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; }
a.who-link .avatar, .who.who-link { vertical-align: middle; }
td.c-who a.who-link { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; color: var(--ink); border-bottom: 1px dotted var(--muted); }
td.c-who a.who-link:hover { color: var(--primary); border-bottom-color: var(--primary); text-decoration: none; }
.cc-slot { display: flex; align-items: flex-end; }
.cc-toggle { align-self: flex-end; padding: 10px 0; }

/* phones: the Protokolle are dictated there: big tap targets, 16px fields (no zoom on focus on iOS) */
@media (max-width: 800px) {
  .termin-head h1 { font-size: 18px; }
  .termin-actions .btn, .termin-foot .btn { flex: 1 1 140px; min-height: 44px; }
  .termin-form .inp { font-size: 16px; }
  textarea.protocol { min-height: 230px; font-size: 16px; }
  textarea.protocol::placeholder { font-size: 14px; line-height: 1.5; }   /* the reminder list stays complete */
  .save-bar { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .save-bar .btn { flex: 1; min-height: 46px; }
  .draft-actions .btn { flex: 1 1 140px; min-height: 44px; }
  .card-head .link, .data-summary .link { min-height: 32px; }
  .step-row { flex-direction: column; align-items: stretch; }
  .step-text { flex: 0 0 auto; }
  .step-pick { width: 100%; }
  .step-pick .pick { flex: 1; min-height: 44px; font-size: 14px; }
  .step-done { min-height: 32px; }
  .info-btn { min-width: 32px; min-height: 32px; }
  td.c-who a.who-link { min-height: 36px; }
  .ts-gist, .crow-gist { font-size: 14px; }
  .ai-panel .inp { font-size: 16px; }
  .ai-panel textarea.inp { font-size: 15px; }
  .ai-row { flex-wrap: wrap; }
  .ai-row .btn { flex: 1 1 100%; min-height: 44px; }
  .ai-panel .btn, .ai-consent .btn { min-height: 44px; }
}

/* KI activity (topbar) and admin job list */
.ai-activity { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.ai-activity[hidden] { display: none; }
.ai-activity + .palette-btn { margin-left: 10px; }
@media (max-width: 700px) { .ai-activity-text { display: none; } }
.ai-jobs-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.ai-jobs-filter .inp { width: auto; }
.ai-sum-line { font-size: 13px; color: var(--muted); }
.ai-sum-line b { color: var(--ink); }
.ai-bar { display: inline-block; width: 70px; height: 6px; border-radius: 3px; background: var(--line); vertical-align: middle; margin-right: 6px; overflow: hidden; }
.ai-bar > i { display: block; height: 100%; background: var(--primary); }
.doc-tag { width: auto; max-width: 100%; padding: 1px 4px; font-size: 11px; height: auto; }

/* KI profile builder */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.strike { text-decoration: line-through; }
.ai-modal { max-width: min(760px, 94vw); }
.ai-modal .lbl { margin-top: 12px; }
.ai-group { margin: 0 0 6px; }
.ai-src { display: flex; align-items: flex-start; gap: 8px; padding: 6px 4px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.ai-src:hover { background: var(--primary-l); }
.ai-src.off { opacity: .55; cursor: default; }
.ai-src.off:hover { background: none; }
.ai-src input { margin-top: 3px; flex: none; }
.ai-send { margin: 14px 0 4px; }
.ai-peek { font-size: 13px; margin: 0 0 12px; }
.ai-peek summary { cursor: pointer; color: var(--primary); }
.ai-peek-src { margin: 8px 0; }
.ai-peek-src pre { white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 12px; background: #f7f9fc; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; max-height: 180px; overflow: auto; margin: 4px 0 0; }
.ai-draft-box:empty { display: none; }
.ai-draft-box { margin: 0 0 12px; }
.ai-card-lite { background: #f7f9fc; border: 1px dashed var(--primary); border-radius: 8px; padding: 10px 12px; }
.ai-review .ai-changes { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ai-ch { display: flex; gap: 10px; align-items: baseline; padding: 6px 10px; border-radius: 6px; font-size: 13px; line-height: 1.4; }
.ai-ch.add { background: var(--ok-l); }
.ai-ch.rm { background: var(--danger-l); }
.ai-ch.chg { background: var(--primary-l); }
.ai-sign { flex: none; width: 1.1em; text-align: center; font-weight: 700; }
.ai-ch.add .ai-sign { color: var(--ok); } .ai-ch.rm .ai-sign { color: var(--danger); } .ai-ch.chg .ai-sign { color: var(--primary); }
.ai-src-tag { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: #fff; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.ai-impact { margin: 6px 0 10px; font-size: 13px; }
@media (max-width: 800px) {
  .ai-modal { width: 100%; max-width: 100vw; border-radius: 14px 14px 0 0; align-self: end; }
  .modal-backdrop:has(.ai-modal) { place-items: end center; }
  .ai-src { padding: 10px 4px; }
  .ai-src input { width: 20px; height: 20px; }
  .ai-modal .btn, .ai-review .btn { min-height: 44px; }
  .ai-ch { padding: 8px 10px; }
}
.ai-modal .modal-actions { position: sticky; bottom: -22px; background: var(--panel); padding: 12px 0 2px; margin-top: 8px; }
.head-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

/* KI search */
.ai-mode { margin: 0 0 12px; }
.ai-profile-card { background: #f7f9fc; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 8px 0 12px; }
.ai-prof-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.ai-prof-line .term { padding: 1px 8px; border-radius: 4px; background: var(--primary-l); color: var(--primary-d); font-size: 12px; }
.ai-prof-line .term.minus { background: var(--danger-l); color: var(--danger); }
.ai-examples { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.ai-opts { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 4px; }
.ai-opts .btn.primary { margin-left: auto; }
.ai-results { margin-top: 14px; padding-bottom: 70px; }
.ai-band { margin: 14px 0; }
.ai-band-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 6px; }
.ai-band-head h4 { margin: 0; font-size: 14px; }
.ai-pick { display: flex; align-items: center; padding: 0 4px; }
.ai-pick input { width: 18px; height: 18px; }
.offer-row.decided { opacity: .65; }
.offer-list .ai-line { margin-top: 3px; }
.ai-actionbar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 60; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  background: #17233a; color: #fff; border-radius: 10px; padding: 10px 14px; box-shadow: var(--shadow-pop); font-size: 13px; max-width: 94vw; }
.ai-actionbar[hidden] { display: none; }
.ai-actionbar .link { color: #fff; }
@media (max-width: 800px) {
  .head-acts { flex-basis: 100%; margin-left: 0; }
  .head-acts .btn { flex: 1 1 auto; }
  .ai-opts .btn.primary { margin-left: 0; width: 100%; min-height: 44px; }
  .ai-actionbar { left: 8px; right: 8px; bottom: 8px; transform: none; justify-content: space-between; }
  .ai-actionbar .btn { min-height: 44px; }
}
.mail-bar .ai-star { color: #fff; }
/* a spinner next to long text must never be squeezed into an oval */
.spin { flex: none; box-sizing: border-box; width: 18px; height: 18px; aspect-ratio: 1; }

/* ---- Anonymisierter Modus ---- */
.privacy-btn { display: inline-flex; align-items: center; justify-content: center; padding: 6px 8px; line-height: 0; }
.privacy-btn.on { background: #8e44ad; border-color: #8e44ad; color: #fff; }
.privacy-btn.on:hover { background: #7d3c98; }
.login-form, .pin-form { position: relative; }
.privacy-corner { position: absolute; top: 12px; right: 12px; }
body.privacy-on::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; background: #8e44ad; z-index: 60; pointer-events: none; }
body.privacy-on .fab, body.privacy-on [data-w] { display: none !important; }
.pin-key.pin-privacy { display: grid; place-items: center; background: transparent; border-color: transparent; color: var(--muted); padding: 0; line-height: 0; }
.pin-key.pin-privacy:hover { color: var(--ink); }
.pin-key.pin-privacy.on { color: #8e44ad; }
body.privacy-on [data-blocked] { visibility: hidden; }
.avatar.anon { background: color-mix(in srgb, var(--av) 16%, #fff); border: 2px solid color-mix(in srgb, var(--av) 55%, #fff); }
.avatar.anon svg { width: 78%; height: 78%; fill: var(--av); margin-top: 14%; }

/* ---- Branding + Über-Dialog ---- */
.brand-by { font-size: 11px; color: var(--muted); text-align: center; margin-top: 16px; }
.app-foot { margin-top: auto; padding: 22px 16px 26px; text-align: center; font-size: 12px; color: var(--muted); }
.version-link { background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit; }
button.brand-version { padding: 0; }
.version-link:hover, .version-link:focus-visible { text-decoration: underline; }
.about-modal { width: 640px; }
.about-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.about-head h3 { margin: 0; }
.about-by { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.about-legal { font-size: 12px; color: var(--muted); margin: 8px 0 12px; }
.about-list { max-height: 46vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; }
.about-list table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.about-list th, .about-list td { padding: 5px 8px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.about-list th { position: sticky; top: 0; background: var(--panel); font-weight: 600; }
.about-grp td { background: rgba(0, 0, 0, .03); font-weight: 600; }
.about-list + .modal-actions { margin-top: 12px; }
.pin-privacy svg { width: 24px; height: 24px; }
body.privacy-on .cchip { pointer-events: none; }  /* shortlist decisions: read only in the anonymised mode */
/* topbar: title left, everything else right (the hidden KI indicator must not decide the alignment) */
.topbar-title { margin-right: auto; }
.topbar .ai-activity { margin-left: 0; }
.topbar .topbar-privacy { margin-left: 12px; }
.copy-code { cursor: pointer; }
.copy-code:hover, .copy-code:focus-visible { background: #dbe5f7; outline: 1px solid #2f5496; }
.crow-termin { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--muted); }
.crow-termin:hover { color: var(--accent, #2f5496); border-bottom-style: solid; }
.crow-proto { font-size: 13px; padding-top: 2px; }
.client-name-block { display: flex; flex-direction: column; min-width: 0; }
.client-name-block h1 { margin: 0; overflow-wrap: anywhere; }
.client-name-block .client-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
/* phones: back button is just the arrow; avatar + name share the first row (status and actions wrap below) */
@media (max-width: 600px) {
  .client-head .back-label { display: none; }
  .client-head .client-name-block { flex: 1 1 200px; min-width: 0; }
}

/* ---------------- Feedback + Betrieb (CoachDesk WI-004) ---------------- */
.fb-btn { white-space: nowrap; margin-left: 8px; }
.feedback-modal { width: 520px; }
.feedback-modal .fb-kinds { margin: 0 0 14px; }
.feedback-modal .fb-kinds .chip { font-size: 13px; padding: 5px 14px; }
.fb-warn { margin: 4px 0 12px; padding: 8px 10px; border-left: 3px solid var(--warn); background: var(--warn-l); border-radius: 4px; font-size: 13px; line-height: 1.45; }
.fb-shot-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.fb-shot { display: flex; align-items: flex-start; gap: 10px; }
.fb-shot:empty { display: none; }
.fb-shot img { max-width: 260px; max-height: 160px; border: 1px solid var(--line); border-radius: 4px; }
.fb-item { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; margin-bottom: 10px; background: var(--panel); }
.fb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.fb-text { white-space: pre-wrap; font-size: 14px; }
.fb-ctx { margin-top: 4px; word-break: break-word; }
.fb-reply { margin-top: 8px; padding: 8px 10px; background: var(--primary-l); border-radius: 4px; white-space: pre-wrap; font-size: 13px; }
.fb-reply .lbl { margin-bottom: 2px; }
.fb-edit { display: grid; grid-template-columns: 200px 1fr auto; gap: 8px; align-items: start; margin-top: 8px; }
.fb-acts { display: flex; gap: 6px; }
.fb-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.fb-filters .inp { width: auto; }
.fb-op.st-new { border-left: 3px solid var(--warn); }
.badge.fb-st-new { background: var(--warn-l); color: var(--warn); }
.badge.fb-st-planned { background: var(--primary-l); color: var(--primary-d); }
.badge.fb-st-done { background: var(--ok-l); color: var(--ok); }
@media (max-width: 720px) {
  .fb-edit { grid-template-columns: 1fr; }
  .feedback-modal { width: 100%; }
}

/* Einnahmen (WI-013, income.js / pricing.js): Soll and Ist side by side per month, goal per month dashed */
.in-col .q-stack { left: 6%; right: 52%; }
.in-col .in-ist { position: absolute; left: 52%; right: 6%; bottom: 0; background: #3c9a6a; border-radius: 3px 3px 0 0; }
.in-exp { opacity: .55; }
.in-sw-ist { background: #3c9a6a; }
.in-goal { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--warn); z-index: 1; }
.in-years { display: flex; gap: 10px; align-items: baseline; }
.in-goal-edit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.in-goal-inp { width: 120px; }
.in-tbl td.r, .in-tbl th.r { text-align: right; white-space: nowrap; }
.in-ku .q-bar { margin-top: 26px; }
.in-ku-ist { left: 0; background: #3c9a6a; border-radius: 8px 0 0 8px; }
.in-ku-prog { background: repeating-linear-gradient(45deg, #9cd3b3 0 5px, #d3eedd 5px 10px); }
.pay-modal { max-width: 560px; }
.pay-sessions { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; font-size: 13px; }
.pay-sess { display: flex; gap: 6px; align-items: center; }
.type-tbl .inp { min-width: 0; }
.type-tbl td.c, .type-tbl th.c { text-align: center; }
.type-tbl td:first-child .inp { min-width: 160px; }
.type-tbl td.r .inp { width: 100px; text-align: right; }
/* ---- Konto anlegen / bestätigen / Passwort (WI-003, views_public.js) ---- */
.login-form.public-form { width: 460px; }
.public-title { font-size: 18px; margin: 0 0 6px; }
.public-text { margin: 0 0 12px; line-height: 1.5; }
.public-foot { text-align: center; font-size: 13px; margin: 14px 0 0; color: var(--muted); }
.public-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .public-form .row2 { grid-template-columns: 1fr; gap: 0; } }
.code-row { display: flex; align-items: center; gap: 8px; }
.code-inp { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.code-state { font-size: 12px; min-width: 58px; }
.code-state.ok { color: var(--ok, #2e7d32); }
.code-state.bad { color: var(--danger); }
.consents { display: grid; gap: 8px; margin: 6px 0 4px; }
.check.consent { align-items: flex-start; line-height: 1.45; }
.check.consent input { margin-top: 3px; flex: none; }

/* ---- Meine Einladungen (Mein Konto) ---- */
.inv-quota { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; }
.inv-dots { display: inline-flex; gap: 5px; }
.inv-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--primary); }
.inv-dot.used { background: var(--line); }
.inv-list { display: grid; gap: 8px; }
.inv-row { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: center;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.inv-row.done { background: color-mix(in srgb, var(--line) 22%, transparent); }
.inv-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; letter-spacing: .06em; }
.inv-meta { font-size: 12px; color: var(--muted); }
.inv-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.inv-badge.offen { border-color: var(--primary); color: var(--primary); }
.inv-badge.benutzt { background: var(--line); }
.inv-badge.abgelaufen { color: var(--muted); }
@media (max-width: 600px) { .inv-row { grid-template-columns: 1fr auto; } .inv-row .inv-actions { grid-column: 1 / -1; } }

/* "In Entwicklung" (feature shown, not usable yet) */
.soon { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; margin-left: 8px;
  vertical-align: middle; color: var(--primary); border: 1px dashed var(--primary); }
.panel.teaser { opacity: .8; }
.panel.teaser .inp { pointer-events: none; }
.inv-btns { display: inline-flex; gap: 6px; }
.sender-now { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.sender-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sender-row .inp { max-width: 260px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sender-dom { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); }
.sender-status { font-size: 13px; margin: 8px 0 0; }
.sender-status.pending { color: var(--primary); }
.sender-status.rejected { color: var(--danger); }
.tag-free, .tag-paid { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; margin-left: 8px; vertical-align: middle; }
.tag-free { color: var(--ok); background: var(--ok-l); }
.tag-paid { color: var(--muted); border: 1px solid var(--line); }
/* Betrieb -> Einladungen: invitation tree (views_betrieb.js inviteGraph) */
.inv-sub { font-size: 13px; margin: 18px 0 6px; color: var(--muted); }
.inv-graph { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; padding: 6px; background: var(--panel); }
.inv-graph svg { display: block; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.ig-edge { fill: none; stroke: var(--primary); stroke-width: 1.4; opacity: .55; }
.ig-edge.pending { stroke: var(--muted); stroke-dasharray: 4 4; }
.ig-node circle { fill: var(--primary); }
.ig-node text { fill: var(--ink, #1d2533); }
.ig-node.root circle { fill: var(--ok); }
.ig-node.root text { font-weight: 700; }
.ig-node.pending circle { fill: var(--panel); stroke: var(--muted); stroke-dasharray: 2 2; }
.ig-node.pending text { fill: var(--muted); }
.ig-node.manual circle { fill: var(--panel); stroke: var(--primary); stroke-width: 1.5; }
.inv-table { overflow-x: auto; }
.inv-code.copyable { background: none; border: 1px dashed var(--line); border-radius: 6px; padding: 2px 8px; cursor: copy; color: inherit; }
.inv-code.copyable:hover { border-color: var(--primary); color: var(--primary); }
.inv-btns { flex-wrap: wrap; justify-content: flex-end; }

/* ---------------- KI-Zugang (CoachDesk WI-008) ---------------- */
.ai-flow { display: grid; grid-template-columns: 170px 1fr; gap: 6px 14px; margin: 0 0 16px; padding: 12px 14px; background: var(--primary-l); border-radius: 6px; font-size: 13px; }
.ai-flow dt { font-weight: 600; }
.ai-flow dd { margin: 0; }
.ai-req-state { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.ai-req-text { padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; }
.ai-req-edit { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; margin-top: 8px; }
@media (max-width: 720px) { .ai-flow, .ai-req-edit { grid-template-columns: 1fr; } }

/* ---- CoachDesk onboarding (WI-005, onboarding.js) ---- */
.onb-modal { width: 640px; }
.onb-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.onb-dots { display: flex; gap: 6px; }
.onb-dot { width: 26px; height: 4px; border-radius: 2px; background: var(--line); }
.onb-dot.done { background: color-mix(in srgb, var(--primary) 45%, white); }
.onb-dot.now { background: var(--primary); }
.onb-modal h3 { margin: 4px 0 12px; font-size: 19px; }
.onb-body { max-height: min(62vh, 560px); overflow-y: auto; margin: 0 -4px 16px; padding: 0 4px; }
.onb-body > div > p:first-child { margin-top: 0; }
.onb-body .panel { margin-bottom: 12px; padding: 14px; }
.onb-mail .panel h3 { font-size: 14px; margin: 0 0 6px; }
.onb-actions { align-items: center; }
.onb-actions .grow, .onb-demo .grow, .onb-banner .grow { flex: 1; }
.onb-later { padding-left: 0; color: var(--muted); }
.onb-name { align-items: flex-end; }
.onb-choice { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.onb-card .panel-head { margin-bottom: 8px; }
.onb-bar { height: 6px; margin-bottom: 10px; }
.onb-list { list-style: none; margin: 0; padding: 0; }
.onb-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.onb-item:first-child { border-top: 0; }
.onb-check { flex: 0 0 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #fff; margin-top: 1px; }
.onb-item.is-done .onb-check { background: var(--ok); border-color: var(--ok); }
.onb-item.is-done .onb-title { color: var(--muted); text-decoration: line-through; }
.onb-item.is-hidden { opacity: .6; }
.onb-text { flex: 1; min-width: 0; }
.onb-text .link.onb-title { padding: 0; font-size: 14px; font-weight: 600; text-align: left; }
.onb-opt { margin-left: 6px; }
.onb-x { flex: 0 0 auto; }
.onb-more { padding-top: 6px; }
.onb-demo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; }
.onb-demo .link { padding: 0; }
.badge.onb-demo-tag { background: var(--warn-l); color: var(--warn); margin-left: 6px; }
.onb-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--warn-l); border: 1px solid color-mix(in srgb, var(--warn) 30%, white);
  border-radius: var(--radius); padding: 10px 14px; margin: 0 0 14px; font-size: 13px; }
.onb-banner .badge.onb-demo-tag { margin-left: 0; background: #fff; }
.empty-state { background: var(--panel); border: 1px dashed var(--line); border-radius: var(--radius); padding: 22px; text-align: center; }
.empty-state .empty-title { font-weight: 600; margin: 0 0 4px; }
.empty-state .muted { margin: 0 0 8px; }
.qh-topic h3 { margin-top: 0; }
.qh-topic ul { margin: 0; padding-left: 20px; }
.qh-topic li { margin: 4px 0; }
.qh-focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-l); }
.logo-box { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.logo-prev { max-height: 64px; max-width: 220px; border: 1px solid var(--line); border-radius: 6px; padding: 8px; background:
  repeating-conic-gradient(#f2f4f8 0% 25%, #fff 0% 50%) 50% / 14px 14px; }
.logo-empty { width: 160px; height: 64px; border: 1px dashed var(--line); border-radius: 6px; display: grid; place-items: center; }
.logo-acts { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
@media (max-width: 640px) {
  .onb-modal { padding: 16px; }
  .onb-body { max-height: 58vh; }
  .onb-item { flex-wrap: wrap; }
  .onb-text { flex-basis: calc(100% - 40px); }
  .onb-item > .btn { margin-left: 30px; }
}
.onb-option { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; }
.onb-option p { margin: 6px 0 0; }
.onb-sender { margin-top: 10px; }
.onb-sender .field { margin: 0; }
.pdf-sample { width: 100%; height: 520px; border: 1px solid var(--line); border-radius: var(--radius); background: #f2f4f8; }
.panel-head a.btn { text-decoration: none; }
.qh-topic { scroll-margin-top: 76px; }

/* Termine nachtragen (WI-015, views_import.js) */
.im-help { background: var(--primary-l, #eef3ff); border-radius: 8px; padding: 10px 14px; margin: 0 0 14px; font-size: 13px; line-height: 1.5; }
.im-grid td { padding: 3px 4px; vertical-align: middle; } .im-grid .inp { padding: 5px 7px; font-size: 13px; }
.im-grid .im-c-client .inp { min-width: 190px; } .im-grid .im-c-price .inp { width: 80px; text-align: right; }
.im-grid .im-c-time .inp { width: 95px; }
.im-actions { justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.im-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; font-size: 13px; }
.im-steps span { padding: 3px 10px; border-radius: 999px; background: #eef1f6; color: var(--muted); white-space: nowrap; }
.im-steps span.on { background: var(--primary); color: #fff; }
.im-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 6px 14px; align-items: center; font-size: 13px; }
.im-map b { word-break: break-word; }
.im-map .ex { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.im-sum { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 12px; } .im-sum .q-kpi { min-width: 130px; }
.im-prev tr.err td { background: #fdecec; } .im-prev tr.dup td { background: #fff6e0; }
.st { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.st.ok { background: var(--ok-l); color: var(--ok); } .st.new { background: #e8efff; color: var(--primary); }
.st.dup { background: var(--warn-l); color: var(--warn); } .st.err { background: var(--danger-l); color: var(--danger); }
.kbd { font-family: monospace; font-size: 11px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; background: #fff; }
@media (max-width: 640px) {
  .im-map { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .im-map .ex { grid-column: 1 / -1; margin: -4px 0 6px; } .im-map .hdr-ex { display: none; }
}
.im-opts { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: 13px; margin: 6px 0; }
.im-opts .inp, .im-opts select { width: auto; display: inline-block; }
.im-opts p { flex-basis: 100%; margin: 0; }
/* ---- Eigener Schlüssel / Notfall-Kit (WI-014, userkeys.js) ---- */
.keys-card .keys-startover { margin-top: 14px; font-size: 13px; }
.keys-card .keys-startover summary { cursor: pointer; color: var(--muted); }
.keys-card .keys-startover .inp { margin: 6px 0; }
.kit-modal { width: 600px; max-width: 94vw; }
.kit-steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: 4px 0 16px; counter-reset: k; }
.kit-steps li { flex: 1; font-size: 12px; color: var(--muted); padding: 6px 4px 0; border-top: 3px solid var(--line); counter-increment: k; }
.kit-steps li::before { content: counter(k) ". "; }
.kit-steps li.on { color: var(--ink, #1d2533); border-color: var(--primary); font-weight: 600; }
.kit-steps li.done { border-color: var(--ok); }
.kit-code { font: 600 22px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; padding: 12px 14px;
  border: 2px solid var(--danger); border-radius: 10px; margin: 6px 0 10px; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.kit-confirm { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.kit-confirm .kit-part { width: 92px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.kit-mask { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); }
.kit-banner { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  border: 1px solid var(--danger); background: color-mix(in srgb, var(--danger) 7%, transparent); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 14px; font-size: 14px; }

/* ---------------- Konto & Daten, Rechtstexte (CoachDesk WI-006) ---------------- */
.legal-list { margin: 0 0 8px; padding-left: 18px; }
.legal-list li { margin: 3px 0; }
.legal-gate-form { max-width: 560px; width: 100%; }
.legal-gate-form .btn.block + .btn.block { margin-top: 8px; }
.legal-gate-data { margin-top: 14px; }
.legal-gate-data summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.legal-gate-data .panel { box-shadow: none; padding: 12px; margin: 10px 0 0; }
.deletion-banner { margin: 0 0 0; padding: 8px 16px; background: var(--danger-l); color: var(--danger); font-size: 13px; border-bottom: 1px solid var(--danger); }
.deletion-banner a { color: inherit; font-weight: 600; margin-left: 6px; }
.legal-gate-form .check { margin: 6px 0 14px; }
.legal-gate-form .btn.primary.block { margin-bottom: 4px; }
.legal-gate-data { margin-bottom: 14px; }