/* ==========================================================================
   [FRAME°IT] — Agenturplattform
   Dunkle Arbeitsoberfläche in den Markenfarben: Acid-Grün auf Schwarz.
   Ausgelegt darauf, den ganzen Tag darin zu arbeiten — ruhige Flächen,
   Farbe nur dort, wo sie etwas bedeutet.
   ========================================================================== */

:root {
  /* Marke */
  --accent:        #c7e63c;
  --accent-soft:   rgba(199, 230, 60, .13);
  --accent-line:   rgba(199, 230, 60, .32);
  --accent-deep:   #a9c72b;
  --on-accent:     #10120e;

  /* Flächen */
  --bg:            #0e100d;
  --surface:       #15180f;
  --card:          #171a14;
  --card-2:        #1d211a;
  --card-3:        #242922;
  --line:          #2a2f26;
  --line-soft:     #21261e;

  /* Schrift */
  --ink:           #f1f4ea;
  --ink-2:         #c3c9b8;
  --muted:         #8b937f;
  --muted-2:       #656b5c;

  /* Status */
  --ok:            #6fd67f;
  --ok-bg:         rgba(111, 214, 127, .13);
  --warn:          #f0b429;
  --warn-bg:       rgba(240, 180, 41, .13);
  --bad:           #e5675c;
  --bad-bg:        rgba(229, 103, 92, .13);
  --info:          #6ea8fe;
  --info-bg:       rgba(110, 168, 254, .13);

  --ff: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --r:    10px;
  --r-lg: 14px;
  --r-sm: 7px;
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.35);
  --ease: cubic-bezier(.22,.61,.36,1);

  --sidebar: 232px;
  --topbar:  60px;
}

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

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ff);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.25; letter-spacing: -.01em; font-weight: 600; }
h1 { font-size: 1.4rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: .95rem; }
::selection { background: var(--accent); color: var(--on-accent); }

/* Scrollbalken dezent halten */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2b3127; border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #3a4134; }

.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ==========================================================================
   Anmeldung
   ========================================================================== */

.login {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(199,230,60,.07), transparent 70%),
    var(--bg);
  padding: 24px;
}
.login__box {
  width: min(400px, 100%);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 34px 30px 28px;
}
.login__mark {
  font-size: 1.35rem; font-weight: 700; color: var(--ink);
  letter-spacing: -.02em; text-align: center; margin-bottom: 4px;
}
.login__mark b { color: var(--accent); font-weight: 700; }
.login__sub { text-align: center; color: var(--muted); font-size: .87rem; margin-bottom: 26px; }
.login__box .field { margin-bottom: 14px; }
.login__box .btn { width: 100%; margin-top: 8px; }
.login__hint { margin-top: 18px; font-size: .8rem; color: var(--muted-2); text-align: center; line-height: 1.5; }

/* ==========================================================================
   Gerüst
   ========================================================================== */

.app { display: none; height: 100vh; }
.app.is-ready { display: grid; grid-template-columns: var(--sidebar) 1fr; }

/* -- Seitenleiste -- */
.side {
  background: #12140f;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.side__head {
  height: var(--topbar); flex: none;
  display: flex; align-items: center; gap: 9px;
  padding: 0 18px; border-bottom: 1px solid var(--line-soft);
}
.side__mark { font-size: 1.02rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.side__mark b { color: var(--accent); }
.side__nav { flex: 1; overflow-y: auto; padding: 12px 10px; }
.side__group { margin-bottom: 4px; }
.side__label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted-2); font-weight: 600; padding: 14px 10px 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px; border-radius: var(--r-sm);
  color: var(--ink-2); font-size: .88rem; font-weight: 500;
  transition: background .13s var(--ease), color .13s var(--ease);
  text-align: left;
}
.nav-item:hover { background: var(--card-2); color: var(--ink); text-decoration: none; }
.nav-item.is-active { background: var(--accent-soft); color: var(--accent); }
.nav-item.is-active .nav-item__icon { color: var(--accent); }
.nav-item__icon { flex: none; width: 17px; height: 17px; color: var(--muted); }
.nav-item.is-active .nav-item__icon { color: var(--accent); }
.nav-item__count {
  margin-left: auto; font-size: .72rem; font-weight: 600;
  background: var(--card-3); color: var(--muted); border-radius: 20px;
  padding: 1px 7px; min-width: 20px; text-align: center;
}
.nav-item.is-active .nav-item__count { background: var(--accent); color: var(--on-accent); }
.nav-item__count.is-alert { background: var(--bad); color: #fff; }
.nav-item.is-soon { opacity: .42; cursor: default; }
.nav-item.is-soon:hover { background: none; color: var(--ink-2); }
.nav-item__soon {
  margin-left: auto; font-size: .6rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted-2); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 4px;
}

/* Der „Mehr“-Eintrag gehört nur in die untere Leiste auf dem Handy */
#moreBtn { display: none; }

.side__foot { flex: none; border-top: 1px solid var(--line-soft); padding: 10px; }
.side__user {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: var(--r-sm); text-align: left;
}
.side__user:hover { background: var(--card-2); }
.avatar {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .74rem; font-weight: 700; color: var(--on-accent);
  background: var(--accent);
}
.side__user-name { font-size: .84rem; color: var(--ink); font-weight: 500; line-height: 1.2; }
.side__user-role { font-size: .72rem; color: var(--muted); }

/* -- Hauptbereich -- */
.main { display: flex; flex-direction: column; overflow: hidden; }

.topbar {
  height: var(--topbar); flex: none;
  display: flex; align-items: center; gap: 14px;
  padding: 0 22px; border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.topbar__title { font-size: 1.02rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.topbar__spacer { flex: 1; }

.search { position: relative; width: 280px; }
.search input {
  width: 100%; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 7px 12px 7px 33px;
  color: var(--ink); font-size: .85rem;
}
.search input::placeholder { color: var(--muted-2); }
.search input:focus { outline: none; border-color: var(--accent-line); background: var(--card-2); }
.search__icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--muted-2); pointer-events: none;
}
.search__results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow);
  max-height: 340px; overflow-y: auto; padding: 5px;
}
.search__item {
  display: block; width: 100%; text-align: left;
  padding: 7px 10px; border-radius: var(--r-sm);
}
.search__item:hover, .search__item.is-active { background: var(--card-2); }
.search__item strong { display: block; color: var(--ink); font-size: .86rem; font-weight: 500; }
.search__item span { font-size: .76rem; color: var(--muted); }
.search__empty { padding: 14px; text-align: center; color: var(--muted); font-size: .83rem; }

.view { flex: 1; overflow-y: auto; padding: 22px; }
.view--flush { padding: 0; display: flex; flex-direction: column; }

/* ==========================================================================
   Bausteine
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r-sm);
  font-size: .85rem; font-weight: 600; white-space: nowrap;
  background: var(--card-2); color: var(--ink);
  border: 1px solid var(--line);
  transition: background .13s var(--ease), border-color .13s var(--ease), transform .08s var(--ease);
}
.btn:hover { background: var(--card-3); border-color: #343a2e; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; flex: none; }
.btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn--primary:hover { background: #d3ef4f; border-color: #d3ef4f; }
.btn--ghost { background: none; border-color: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--card-2); color: var(--ink); }
.btn--danger { color: var(--bad); border-color: transparent; background: none; }
.btn--danger:hover { background: var(--bad-bg); }
.btn--sm { padding: 5px 10px; font-size: .79rem; }
.btn--sm svg { width: 13px; height: 13px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-sm);
}
.card__head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid var(--line-soft);
}
.card__head h2, .card__head h3 { flex: 1; }
.card__body { padding: 16px; }
.card__body--flush { padding: 0; }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .72rem; font-weight: 600; padding: 2px 8px;
  border-radius: 20px; background: var(--card-3); color: var(--ink-2);
  white-space: nowrap;
}
.tag--dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}
.tag--ok   { background: var(--ok-bg);   color: var(--ok); }
.tag--warn { background: var(--warn-bg); color: var(--warn); }
.tag--bad  { background: var(--bad-bg);  color: var(--bad); }
.tag--info { background: var(--info-bg); color: var(--info); }
.tag--accent { background: var(--accent-soft); color: var(--accent); }

.empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.empty svg { width: 30px; height: 30px; margin: 0 auto 12px; color: var(--muted-2); }
.empty p { font-size: .87rem; }
.empty p + p { margin-top: 4px; font-size: .8rem; color: var(--muted-2); }

.muted { color: var(--muted); }
.small { font-size: .8rem; }
.mono  { font-family: var(--mono); font-size: .82rem; }
.nowrap { white-space: nowrap; }

/* Formularfelder */
.field { display: block; }
.field + .field { margin-top: 13px; }
.field__label {
  display: block; font-size: .78rem; font-weight: 600;
  color: var(--ink-2); margin-bottom: 5px;
}
.field__label span { color: var(--muted-2); font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--card-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 8px 11px; color: var(--ink); font-size: .87rem;
  transition: border-color .13s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent-line); background: #202519;
}
.field textarea { resize: vertical; min-height: 74px; line-height: 1.5; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b937f' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 15px;
  padding-right: 30px;
}
.field__help { font-size: .75rem; color: var(--muted-2); margin-top: 4px; }
.field--check { display: flex; align-items: center; gap: 9px; }
.field--check input { width: auto; accent-color: var(--accent); }
.field--check .field__label { margin: 0; font-weight: 500; }
.field-row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.field-row .field + .field { margin-top: 0; }
.field-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.field-row--21 { grid-template-columns: 2fr 1fr; }

.form-error {
  background: var(--bad-bg); color: var(--bad); border: 1px solid rgba(229,103,92,.3);
  border-radius: var(--r-sm); padding: 9px 12px; font-size: .82rem; margin-bottom: 14px;
}

/* Tabellen */
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted-2); font-weight: 600; padding: 9px 14px;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); font-size: .87rem; }
.table tbody tr { cursor: pointer; transition: background .1s var(--ease); }
.table tbody tr:hover { background: var(--card-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.table__main { color: var(--ink); font-weight: 500; }
.table__sub { font-size: .77rem; color: var(--muted); }

/* Dialog */
.modal-back {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(6,7,5,.72); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 24px;
  animation: fade .14s var(--ease);
}
@keyframes fade { from { opacity: 0 } }
.modal {
  width: min(560px, 100%); max-height: 88vh; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  animation: pop .16s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.99) } }

.modal--wide { width: min(760px, 100%); }
.modal__head {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--line-soft);
}
.modal__head h2 { flex: 1; }
.modal__body { flex: 1; overflow-y: auto; padding: 20px; }
.modal__foot {
  flex: none; display: flex; align-items: center; gap: 9px; justify-content: flex-end;
  padding: 14px 20px; border-top: 1px solid var(--line-soft);
}
.modal__foot .spacer { flex: 1; }
.icon-btn {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  display: grid; place-items: center; color: var(--muted);
}
.icon-btn:hover { background: var(--card-2); color: var(--ink); }
.icon-btn svg { width: 16px; height: 16px; }

/* Hinweise */
.toast-wrap {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.toast {
  background: var(--card-3); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 10px 16px; font-size: .85rem; box-shadow: var(--shadow);
  animation: rise .18s var(--ease);
  display: flex; align-items: center; gap: 9px;
}
@keyframes rise { from { opacity: 0; transform: translateY(10px) } }
.toast--ok  { border-color: rgba(111,214,127,.4); }
.toast--ok svg  { color: var(--ok); }
.toast--bad { border-color: rgba(229,103,92,.4); }
.toast--bad svg { color: var(--bad); }
.toast svg { width: 16px; height: 16px; flex: none; }

/* ==========================================================================
   Dashboard
   ========================================================================== */

.dash { display: flex; flex-direction: column; gap: 18px; max-width: 1500px; }

.dash__hello { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.dash__hello h1 { font-size: 1.5rem; }
.dash__date { color: var(--muted); font-size: .88rem; padding-bottom: 3px; }
.dash__hello .btn { margin-left: auto; }

.stats { display: grid; gap: 13px; grid-template-columns: repeat(4, 1fr); }
.stat {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 15px 16px;
  display: flex; flex-direction: column; gap: 3px;
  text-align: left; transition: border-color .13s var(--ease);
}
button.stat:hover { border-color: var(--accent-line); }
.stat__label {
  font-size: .73rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 600;
}
.stat__value { font-size: 1.5rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; line-height: 1.15; }
.stat__value.is-accent { color: var(--accent); }
.stat__note { font-size: .78rem; color: var(--muted); }
.stat__note b { color: var(--ink-2); font-weight: 600; }

.dash__cols { display: grid; gap: 16px; grid-template-columns: 1.15fr 1fr; align-items: start; }

/* Aufgabenzeile */
.task-row {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 10px 16px; border-bottom: 1px solid var(--line-soft);
  transition: background .1s var(--ease);
}
.task-row:last-child { border-bottom: 0; }
.task-row:hover { background: var(--card-2); }
.task-row.is-done .task-row__title { color: var(--muted-2); text-decoration: line-through; }

.check {
  flex: none; width: 18px; height: 18px; margin-top: 1px;
  border: 1.8px solid var(--line); border-radius: 5px;
  display: grid; place-items: center;
  transition: border-color .12s var(--ease), background .12s var(--ease);
}
.check:hover { border-color: var(--accent); }
.check svg { width: 11px; height: 11px; color: var(--on-accent); opacity: 0; }
.check.is-done { background: var(--accent); border-color: var(--accent); }
.check.is-done svg { opacity: 1; }

.task-row__main { flex: 1; min-width: 0; cursor: pointer; }
.task-row__title { color: var(--ink); font-size: .87rem; font-weight: 500; }
.task-row__meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: .76rem; color: var(--muted); margin-top: 2px;
}
.task-row__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted-2); }
.due--over { color: var(--bad); font-weight: 600; }
.due--today { color: var(--warn); font-weight: 600; }
.prio { flex: none; width: 3px; align-self: stretch; border-radius: 3px; background: transparent; }
.prio--2 { background: var(--warn); }
.prio--3 { background: var(--bad); }

/* Terminzeile */
.ev-row {
  display: flex; gap: 12px; padding: 10px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.ev-row:last-child { border-bottom: 0; }
.ev-row:hover { background: var(--card-2); }
.ev-row__time {
  flex: none; width: 46px; font-size: .82rem; font-weight: 600;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.ev-row__bar { flex: none; width: 3px; border-radius: 3px; background: var(--accent); }
.ev-row__title { color: var(--ink); font-size: .87rem; font-weight: 500; }
.ev-row__meta { font-size: .76rem; color: var(--muted); }

.kind--termin { background: var(--accent); }
.kind--dreh   { background: var(--info); }
.kind--call   { background: var(--warn); }
.kind--intern { background: var(--muted-2); }
.kind--frist  { background: var(--bad); }

/* Lead-Hinweiszeile */
.lead-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 16px; border-bottom: 1px solid var(--line-soft);
  width: 100%; text-align: left;
}
.lead-row:last-child { border-bottom: 0; }
.lead-row:hover { background: var(--card-2); }
.lead-row__main { flex: 1; min-width: 0; }
.lead-row__name { color: var(--ink); font-size: .87rem; font-weight: 500; }
.lead-row__meta { font-size: .76rem; color: var(--muted); }
.lead-row__right { flex: none; text-align: right; }

/* Pipeline-Balken */
.pipe { display: flex; flex-direction: column; gap: 9px; padding: 14px 16px; }
.pipe__row { display: flex; align-items: center; gap: 10px; }
.pipe__name { flex: none; width: 108px; font-size: .8rem; color: var(--ink-2); }
.pipe__track { flex: 1; height: 7px; background: var(--card-3); border-radius: 4px; overflow: hidden; }
.pipe__fill { height: 100%; border-radius: 4px; transition: width .3s var(--ease); }
.pipe__count { flex: none; width: 26px; text-align: right; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pipe__value { flex: none; width: 74px; text-align: right; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Lead-Board
   ========================================================================== */

.board-bar {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 13px 22px; border-bottom: 1px solid var(--line);
}
.board-bar__spacer { flex: 1; }
.board-bar__stat { font-size: .8rem; color: var(--muted); }
.board-bar__stat b { color: var(--ink); font-weight: 600; }

.board {
  flex: 1; display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden;
  padding: 16px 22px 22px;
}
.col {
  flex: none; width: 262px; display: flex; flex-direction: column;
  background: #12140f; border: 1px solid var(--line); border-radius: var(--r);
  max-height: 100%;
}
.col.is-drop { border-color: var(--accent); background: #151a10; }
.col__head {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 11px 13px; border-bottom: 1px solid var(--line-soft);
}
.col__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.col__name { font-size: .82rem; font-weight: 600; color: var(--ink); flex: 1; }
.col__count { font-size: .74rem; color: var(--muted); font-weight: 600; }
.col__sum { font-size: .72rem; color: var(--muted-2); padding: 0 13px 8px; }
.col__list { flex: 1; overflow-y: auto; padding: 9px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.col__add {
  flex: none; padding: 8px; margin: 0 9px 9px; border-radius: var(--r-sm);
  font-size: .8rem; color: var(--muted); border: 1px dashed var(--line);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.col__add:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.col__add svg { width: 13px; height: 13px; }

.lead-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 11px 12px;
  cursor: grab; transition: border-color .12s var(--ease), transform .12s var(--ease);
  text-align: left; width: 100%;
}
.lead-card:hover { border-color: #39412f; }
.lead-card.is-drag { opacity: .4; cursor: grabbing; }
.lead-card__top { display: flex; align-items: flex-start; gap: 7px; }
.lead-card__name { flex: 1; color: var(--ink); font-size: .85rem; font-weight: 600; line-height: 1.3; }
.lead-card__stars { flex: none; display: flex; gap: 1px; margin-top: 2px; }
.lead-card__stars svg { width: 11px; height: 11px; color: var(--muted-2); }
.lead-card__stars svg.is-on { color: var(--accent); }
.lead-card__title { font-size: .78rem; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.lead-card__foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line-soft);
}
.lead-card__value { font-size: .8rem; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.lead-card__next {
  display: flex; align-items: center; gap: 5px;
  font-size: .74rem; color: var(--muted); margin-top: 7px;
}
.lead-card__next svg { width: 11px; height: 11px; flex: none; }
.lead-card__mock { color: var(--info); }

/* ==========================================================================
   Kundenakte / Detailspalte
   ========================================================================== */

.detail { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; max-width: 1500px; }
.detail__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.detail__title h1 { font-size: 1.35rem; }
.detail__sub { color: var(--muted); font-size: .85rem; margin-top: 2px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.detail__actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.detail__col { display: flex; flex-direction: column; gap: 16px; }

.kv { display: grid; grid-template-columns: 104px 1fr; gap: 7px 12px; font-size: .85rem; }
.kv dt { color: var(--muted); }
.kv dd { color: var(--ink-2); word-break: break-word; }

.tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tab {
  padding: 8px 13px; font-size: .85rem; font-weight: 500; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--ink-2); }
.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.tab__count { font-size: .72rem; color: var(--muted-2); margin-left: 4px; }

/* Timeline */
.tl { padding: 6px 16px 14px; }
.tl__item { display: flex; gap: 12px; padding: 9px 0; position: relative; }
.tl__item::before {
  content: ""; position: absolute; left: 11px; top: 30px; bottom: -9px;
  width: 1px; background: var(--line);
}
.tl__item:last-child::before { display: none; }
.tl__dot {
  flex: none; width: 23px; height: 23px; border-radius: 50%;
  display: grid; place-items: center; background: var(--card-3);
  border: 1px solid var(--line); z-index: 1;
}
.tl__dot svg { width: 12px; height: 12px; color: var(--muted); }
.tl__dot--note    { background: var(--card-3); }
.tl__dot--call    svg { color: var(--warn); }
.tl__dot--email   svg { color: var(--info); }
.tl__dot--meeting svg { color: var(--accent); }
.tl__dot--stage   { background: var(--accent-soft); border-color: var(--accent-line); }
.tl__dot--stage   svg { color: var(--accent); }
.tl__dot--mockup  svg { color: var(--info); }
.tl__dot--task    svg { color: var(--ok); }
.tl__body { flex: 1; min-width: 0; padding-top: 1px; }
.tl__title { color: var(--ink); font-size: .85rem; font-weight: 500; }
.tl__text { color: var(--ink-2); font-size: .82rem; margin-top: 2px; white-space: pre-wrap; line-height: 1.5; }
.tl__meta { font-size: .74rem; color: var(--muted-2); margin-top: 3px; }

.note-add { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.note-add textarea { min-height: 56px; }
.note-add__row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.note-add__kinds { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.kind-btn {
  font-size: .76rem; padding: 4px 9px; border-radius: 20px;
  border: 1px solid var(--line); color: var(--muted);
}
.kind-btn:hover { color: var(--ink-2); border-color: #39412f; }
.kind-btn.is-on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }

/* ==========================================================================
   Aufgaben & Kalender
   ========================================================================== */

.list-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px;
}
.list-bar__spacer { flex: 1; }
.seg { display: flex; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px; }
.seg button { padding: 5px 12px; border-radius: 5px; font-size: .81rem; font-weight: 500; color: var(--muted); }
.seg button:hover { color: var(--ink-2); }
.seg button.is-on { background: var(--card-3); color: var(--ink); }

.quick-add { display: flex; gap: 8px; margin-bottom: 16px; }
.quick-add input {
  flex: 1; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 9px 13px; color: var(--ink); font-size: .87rem;
}
.quick-add input:focus { outline: none; border-color: var(--accent-line); }

.task-group + .task-group { margin-top: 18px; }
.task-group__head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 600;
}
.task-group__head .n { color: var(--muted-2); }

/* Kalender */
.cal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.cal-head h2 { min-width: 168px; }
.cal-head__spacer { flex: 1; }

.cal { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--card); }
.cal__week { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal__dow {
  padding: 9px; font-size: .73rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; text-align: center;
  border-bottom: 1px solid var(--line); background: #12140f;
}
.cal__day {
  min-height: 108px; padding: 7px; border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 3px;
  cursor: pointer; transition: background .1s var(--ease);
}
.cal__day:hover { background: var(--card-2); }
.cal__day:nth-child(7n) { border-right: 0; }
.cal__day.is-out { background: #101208; }
.cal__day.is-out .cal__num { color: var(--muted-2); opacity: .5; }
.cal__day.is-today .cal__num {
  background: var(--accent); color: var(--on-accent);
  border-radius: 50%; width: 21px; height: 21px; display: grid; place-items: center;
}
.cal__num { font-size: .78rem; font-weight: 600; color: var(--ink-2); margin-bottom: 2px; }
.cal__ev {
  font-size: .73rem; padding: 2px 6px; border-radius: 4px;
  background: var(--card-3); color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-left: 2px solid var(--accent);
}
.cal__ev.ev--dreh   { border-left-color: var(--info); }
.cal__ev.ev--call   { border-left-color: var(--warn); }
.cal__ev.ev--intern { border-left-color: var(--muted-2); }
.cal__ev.ev--frist  { border-left-color: var(--bad); }
.cal__more { font-size: .71rem; color: var(--muted); padding-left: 6px; }

/* Einstellungen */
.set-grid { display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: start; max-width: 1100px; }
.set-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; }
.set-nav button {
  text-align: left; padding: 8px 12px; border-radius: var(--r-sm);
  font-size: .86rem; color: var(--ink-2);
}
.set-nav button:hover { background: var(--card-2); }
.set-nav button.is-on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.set-sec + .set-sec { margin-top: 18px; }

.copy-row { display: flex; gap: 8px; align-items: center; }
.copy-row input { flex: 1; font-family: var(--mono); font-size: .78rem; }

@media (max-width: 1180px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .dash__cols { grid-template-columns: 1fr; }
  .detail { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  :root { --sidebar: 62px; }
  .side__mark, .nav-item span:not(.nav-item__count), .side__user-name, .side__user-role,
  .side__label, .nav-item__soon { display: none; }
  .nav-item { justify-content: center; }
  .search { width: 190px; }
  .set-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Belege — Listen und Editor
   ========================================================================== */

.doc-head {
  display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; flex-wrap: wrap;
}
.doc-head__title h1 { font-size: 1.35rem; display: flex; align-items: center; gap: 10px; }
.doc-head__sub { color: var(--muted); font-size: .85rem; margin-top: 3px;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.doc-head__actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.doc-grid { display: grid; grid-template-columns: 1fr 310px; gap: 18px; align-items: start;
  max-width: 1500px; }

/* Positionen */
.items { width: 100%; border-collapse: collapse; }
.items th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-2);
  font-weight: 600; text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--line);
}
.items th.num, .items td.num { text-align: right; }
.items td { padding: 6px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.items tr:last-child td { border-bottom: 0; }
.items tr.is-optional { opacity: .62; }

.items input, .items textarea, .items select {
  width: 100%; background: transparent; border: 1px solid transparent; border-radius: 6px;
  padding: 5px 7px; color: var(--ink); font-size: .86rem;
}
.items input:hover, .items textarea:hover, .items select:hover { border-color: var(--line); }
.items input:focus, .items textarea:focus, .items select:focus {
  outline: none; border-color: var(--accent-line); background: var(--card-2);
}
.items input.num, .items td.num input { text-align: right; font-variant-numeric: tabular-nums; }
.items textarea { resize: vertical; min-height: 30px; font-size: .8rem; color: var(--muted); line-height: 1.45; }
.items__name input { font-weight: 500; }
.items__line { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500;
  padding-top: 11px; white-space: nowrap; }
.items__grip { color: var(--muted-2); cursor: grab; padding-top: 10px; width: 18px; }
.items__grip:active { cursor: grabbing; }
.items__tools { width: 62px; white-space: nowrap; padding-top: 8px !important; }
.items__tools .icon-btn { width: 26px; height: 26px; display: inline-grid; }
.items__tools .icon-btn svg { width: 14px; height: 14px; }
.items tr.is-dragging { opacity: .4; }
.items tbody tr.is-over td { border-top: 2px solid var(--accent); }

.items-bar { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line-soft); }
.opt-flag {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
  color: var(--accent); background: var(--accent-soft); border-radius: 20px; padding: 1px 6px;
  margin-left: 6px; vertical-align: 1px;
}

/* Summen */
.sumbox { padding: 14px 16px; }
.sumrow { display: flex; justify-content: space-between; padding: 4px 0; font-size: .86rem; }
.sumrow span:first-child { color: var(--muted); }
.sumrow span:last-child { font-variant-numeric: tabular-nums; }
.sumrow--total {
  border-top: 1px solid var(--line); margin-top: 7px; padding-top: 10px;
  font-size: 1.12rem; font-weight: 700; color: var(--ink);
}
.sumrow--total span:first-child { color: var(--ink); }
.sumrow--open { color: var(--warn); font-weight: 600; }
.sumrow--open span:first-child { color: var(--warn); }

/* Statuszeile in Listen */
.doc-row__num { font-family: var(--mono); font-size: .8rem; color: var(--ink); }
.doc-sum { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.doc-sum__item { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 11px 15px; }
.doc-sum__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 600; }
.doc-sum__value { font-size: 1.15rem; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.doc-sum__value.is-warn { color: var(--warn); }
.doc-sum__value.is-bad { color: var(--bad); }

/* Vorschau der E-Mail */
.mailprev { background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 12px 14px; font-size: .84rem; white-space: pre-wrap; line-height: 1.55;
  max-height: 280px; overflow-y: auto; color: var(--ink-2); }
.mail-hint { background: var(--warn-bg); color: var(--warn); border-radius: var(--r-sm);
  padding: 9px 12px; font-size: .82rem; margin-bottom: 13px; }

/* Zahlungen */
.pay-row { display: flex; align-items: center; gap: 10px; padding: 8px 16px;
  border-bottom: 1px solid var(--line-soft); font-size: .85rem; }
.pay-row:last-child { border-bottom: 0; }
.pay-row__amount { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ok);
  font-weight: 600; }

@media (max-width: 1180px) {
  .doc-grid { grid-template-columns: 1fr; }
}

/* Optionale Positionen im Editor: der Betrag zählt nicht in die Summe,
   deshalb wird er zurückgenommen dargestellt. */
.items tr.is-optional { opacity: 1; }
.items tr.is-optional .items__name input,
.items tr.is-optional .items__line { color: var(--muted); }
.items__line.is-optional { text-decoration: line-through; text-decoration-thickness: 1px; }
.items .opt-flag { display: inline-block; margin: 0 0 3px 7px; }

/* Icons, die mitten im Text stehen (z. B. das Wiederholungszeichen in Listen),
   an der Schrift ausrichten. */
.table__sub svg, .task-row__meta svg, .lead-card__next svg, .doc-head__sub svg {
  vertical-align: -0.13em;
}

/* ==========================================================================
   Projekte
   ========================================================================== */

.proj-card {
  display: block; width: 100%; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 15px 17px; transition: border-color .13s var(--ease);
}
.proj-card:hover { border-color: var(--accent-line); }
.proj-card__top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 4px; }
.proj-card__name { flex: 1; color: var(--ink); font-weight: 600; font-size: .95rem; }
.proj-card__meta { font-size: .8rem; color: var(--muted); margin-bottom: 11px; }
.proj-card__foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: .78rem; color: var(--muted); margin-top: 9px; }
.proj-grid { display: grid; gap: 13px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.bar { height: 6px; background: var(--card-3); border-radius: 4px; overflow: hidden; }
.bar__fill { height: 100%; background: var(--accent); border-radius: 4px;
  transition: width .3s var(--ease); }
.bar__fill.is-done { background: var(--ok); }
.bar__fill.is-late { background: var(--warn); }

/* Phasenleiste */
.phases { display: flex; gap: 3px; padding: 14px 16px; flex-wrap: wrap; }
.phase {
  flex: 1; min-width: 92px; text-align: left; padding: 9px 11px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--card-2); position: relative;
}
.phase:hover { border-color: #3a4133; }
.phase__name { font-size: .8rem; color: var(--ink-2); font-weight: 500; }
.phase__state { font-size: .7rem; color: var(--muted-2); margin-top: 2px; }
.phase.is-active { border-color: var(--accent); background: var(--accent-soft); }
.phase.is-active .phase__name { color: var(--accent); font-weight: 600; }
.phase.is-done { opacity: .6; }
.phase.is-done .phase__name { text-decoration: line-through; }
.phase__check { position: absolute; top: 7px; right: 8px; width: 13px; height: 13px;
  color: var(--ok); }

/* Meilensteine */
.ms-row { display: flex; align-items: center; gap: 10px; padding: 9px 16px;
  border-bottom: 1px solid var(--line-soft); }
.ms-row:last-child { border-bottom: 0; }
.ms-row__name { flex: 1; font-size: .86rem; color: var(--ink-2); }
.ms-row.is-done .ms-row__name { color: var(--muted-2); text-decoration: line-through; }
.ms-dot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--muted-2);
  flex: none; }
.ms-row.is-done .ms-dot { background: var(--ok); border-color: var(--ok); }

/* Zeiterfassung */
.time-row { display: flex; align-items: center; gap: 11px; padding: 8px 16px;
  border-bottom: 1px solid var(--line-soft); font-size: .85rem; }
.time-row:last-child { border-bottom: 0; }
.time-row__dur { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600;
  min-width: 58px; }
.time-row__note { flex: 1; color: var(--ink-2); min-width: 0; }
.time-row__meta { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.time-hint { font-size: .78rem; color: var(--accent); margin-top: 4px; min-height: 1.1em; }

/* Dateien */
.file-grid { display: grid; gap: 11px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  padding: 14px 16px; }
.file-card { background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  overflow: hidden; text-align: left; }
.file-card:hover { border-color: #3a4133; }
.file-card__prev { height: 104px; background: #101208; display: grid; place-items: center;
  overflow: hidden; }
.file-card__prev img { width: 100%; height: 100%; object-fit: cover; }
.file-card__prev svg { width: 26px; height: 26px; color: var(--muted-2); }
.file-card__body { padding: 9px 11px; }
.file-card__name { font-size: .82rem; color: var(--ink); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-card__meta { font-size: .74rem; color: var(--muted); margin-top: 2px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.file-card__tools { display: flex; gap: 3px; padding: 0 7px 8px; }

.dropzone { border: 1.5px dashed var(--line); border-radius: var(--r); padding: 22px;
  text-align: center; color: var(--muted); font-size: .86rem; margin: 14px 16px;
  cursor: pointer; transition: border-color .13s var(--ease), background .13s var(--ease); }
.dropzone:hover, .dropzone.is-over { border-color: var(--accent); background: var(--accent-soft);
  color: var(--accent); }
.dropzone input { display: none; }
.upload-row { display: flex; align-items: center; gap: 10px; padding: 7px 16px; font-size: .82rem; }
.upload-row .bar { flex: 1; }

/* Onboarding-Baukasten */
.fb-field { background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 12px; margin-bottom: 7px; display: flex; align-items: flex-start; gap: 10px; }
.fb-field:hover { border-color: #3a4133; }
.fb-field.is-section { background: transparent; border-style: dashed; }
.fb-field__grip { color: var(--muted-2); cursor: grab; padding-top: 2px; }
.fb-field__main { flex: 1; min-width: 0; }
.fb-field__label { color: var(--ink); font-size: .87rem; font-weight: 500; }
.fb-field__type { font-size: .75rem; color: var(--muted); margin-top: 1px; }
.fb-field__tools { display: flex; gap: 2px; }
.fb-field.is-dragging { opacity: .4; }
.fb-field.is-over { border-top: 2px solid var(--accent); }

/* ==========================================================================
   Buchhaltung
   ========================================================================== */

.book-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.book-head h2 { min-width: 150px; }
.book-head__spacer { flex: 1; }

.kpi { display: grid; gap: 13px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: 18px; }
.kpi__item { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 15px 17px; }
.kpi__label { font-size: .73rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 600; }
.kpi__value { font-size: 1.5rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em;
  line-height: 1.2; font-variant-numeric: tabular-nums; margin-top: 2px; }
.kpi__value.is-in  { color: var(--ok); }
.kpi__value.is-out { color: var(--bad); }
.kpi__value.is-accent { color: var(--accent); }
.kpi__note { font-size: .77rem; color: var(--muted); margin-top: 2px; }

/* Jahresverlauf */
.chart { display: flex; align-items: flex-end; gap: 5px; height: 150px; padding: 16px;
  border-bottom: 1px solid var(--line-soft); }
.chart__col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  gap: 2px; height: 100%; position: relative; }
.chart__bars { display: flex; gap: 2px; align-items: flex-end; height: 100%; }
.chart__bar { flex: 1; border-radius: 3px 3px 0 0; min-height: 2px;
  transition: height .3s var(--ease); }
.chart__bar--in  { background: var(--accent); }
.chart__bar--out { background: #4a5140; }
.chart__label { text-align: center; font-size: .68rem; color: var(--muted-2); padding-top: 5px; }
.chart__col:hover .chart__bar--in  { background: #d4f052; }
.chart-legend { display: flex; gap: 16px; padding: 10px 16px; font-size: .78rem;
  color: var(--muted); }
.chart-legend span { display: flex; align-items: center; gap: 6px; }
.chart-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* Kategorien */
.cat-row { display: flex; align-items: center; gap: 11px; padding: 8px 16px; font-size: .85rem; }
.cat-row__name { width: 150px; color: var(--ink-2); flex: none; }
.cat-row__bar { flex: 1; height: 7px; background: var(--card-3); border-radius: 4px;
  overflow: hidden; }
.cat-row__fill { height: 100%; background: #5a6350; border-radius: 4px; }
.cat-row__value { width: 88px; text-align: right; font-variant-numeric: tabular-nums;
  color: var(--ink-2); }

/* Belegerfassung */
.receipt-drop { border: 1.5px dashed var(--line); border-radius: var(--r); padding: 26px;
  text-align: center; color: var(--muted); cursor: pointer; margin-bottom: 16px;
  transition: border-color .13s var(--ease), background .13s var(--ease); }
.receipt-drop:hover, .receipt-drop.is-over { border-color: var(--accent);
  background: var(--accent-soft); color: var(--accent); }
.receipt-drop input { display: none; }
.receipt-drop b { display: block; color: var(--ink); font-size: .95rem; margin-bottom: 3px; }
.found { background: var(--ok-bg); color: var(--ok); border-radius: var(--r-sm);
  padding: 9px 12px; font-size: .82rem; margin-bottom: 13px; }
.found--none { background: var(--warn-bg); color: var(--warn); }

/* ==========================================================================
   Automatisierungen
   ========================================================================== */

.rule { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  margin-bottom: 11px; overflow: hidden; }
.rule.is-off { opacity: .6; }
.rule__head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; }
.rule__main { flex: 1; min-width: 0; }
.rule__name { color: var(--ink); font-weight: 600; font-size: .95rem; }
.rule__desc { color: var(--muted); font-size: .82rem; margin-top: 2px; line-height: 1.45; }
.rule__trigger { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem;
  color: var(--accent); background: var(--accent-soft); border-radius: 20px;
  padding: 2px 10px; margin-top: 7px; }
.rule__actions { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 5px; }
.rule__action { display: flex; align-items: flex-start; gap: 9px; font-size: .83rem;
  color: var(--ink-2); background: var(--card-2); border-radius: var(--r-sm);
  padding: 8px 11px; }
.rule__action svg { width: 14px; height: 14px; color: var(--muted); flex: none; margin-top: 2px; }
.rule__action b { color: var(--ink); font-weight: 500; }

.switch { position: relative; width: 38px; height: 22px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: var(--card-3); border-radius: 20px;
  cursor: pointer; transition: background .18s var(--ease); }
.switch span::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px;
  top: 3px; background: var(--muted); border-radius: 50%; transition: transform .18s var(--ease),
  background .18s var(--ease); }
.switch input:checked + span { background: var(--accent-soft); }
.switch input:checked + span::before { transform: translateX(16px); background: var(--accent); }

.ph-list { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.ph { font-family: var(--mono); font-size: .72rem; background: var(--card-3);
  color: var(--accent); border-radius: 4px; padding: 1px 6px; cursor: pointer; }
.ph:hover { background: var(--accent-soft); }

/* ==========================================================================
   Handy und kleine Tablets

   Auf dem Handy wird aus der Seitenleiste eine Leiste am unteren Rand — dort
   ist der Daumen. Die Suche versteckt sich hinter einem Symbol und klappt bei
   Bedarf über die volle Breite auf. Tabellen bleiben Tabellen, lassen sich aber
   seitlich schieben, statt abgeschnitten zu werden.
   ========================================================================== */

@media (max-width: 720px) {
  :root { --topbar: 54px; --tabbar: 62px; }

  .app.is-ready { grid-template-columns: 1fr; }

  /* -- Seitenleiste wird zur unteren Leiste -- */
  .side {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 50;
    flex-direction: row; height: var(--tabbar);
    border-right: 0; border-top: 1px solid var(--line);
    background: #12140f;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .side__head, .side__foot { display: none; }
  .side__nav { display: flex; padding: 0; overflow: visible; }
  .side__group { display: contents; }
  .side__label { display: none; }

  /* Nur die Haupteinträge unten zeigen — der Rest steckt hinter „Mehr“ */
  .side__nav .nav-item { display: none; }
  .side__nav .nav-item[data-tab-main], #moreBtn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; flex: 1; padding: 7px 2px 5px; border-radius: 0; min-width: 0;
  }
  .side__nav .nav-item[data-tab-main] span:not(.nav-item__count),
  #moreBtn span {
    display: block; font-size: .63rem; line-height: 1.1; font-weight: 500;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .side__nav .nav-item[data-tab-main] .nav-item__icon,
  #moreBtn .nav-item__icon { width: 21px; height: 21px; }
  .side__nav .nav-item.is-active { background: none; }
  .side__nav .nav-item.is-active .nav-item__icon,
  .side__nav .nav-item.is-active span { color: var(--accent); }
  .nav-item__count {
    position: absolute; top: 3px; left: 50%; margin-left: 4px;
    font-size: .6rem; padding: 0 5px; min-width: 16px; line-height: 15px;
  }
  .side__nav .nav-item[data-tab-main] { position: relative; }

  /* -- Kopfzeile -- */
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar__title { font-size: .98rem; }
  /* Die Suche bleibt ein Symbol und wächst beim Antippen auf volle Breite.
     position bleibt relative — sonst verliert die Lupe ihren Bezugspunkt. */
  .search { width: 40px; flex: none; }
  .search input {
    width: 40px; padding-left: 31px; padding-right: 6px; cursor: pointer;
  }
  .search.is-open { position: absolute; left: 12px; right: 12px; top: 9px;
    z-index: 30; width: auto; }
  .search.is-open input { width: 100%; cursor: text; }
  .search__results { left: 0; right: 0; }
  #newBtn span, .btn--sm span { display: inline; }

  /* -- Inhalt -- */
  .view { padding: 14px 12px calc(var(--tabbar) + 18px); }
  .view--flush { padding-bottom: var(--tabbar); }

  /* -- Kacheln einspaltig -- */
  /* Kennzahlen kompakt halten — sonst scrollt man auf dem Handy erst an
     einer halben Bildschirmhöhe Kacheln vorbei, bevor die Liste kommt. */
  .stats, .kpi { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat, .kpi__item { padding: 10px 12px; }
  .stat__value, .kpi__value { font-size: 1.15rem; }
  .stat__label, .kpi__label { font-size: .64rem; letter-spacing: .04em; }
  .stat__note, .kpi__note { font-size: .7rem; line-height: 1.35; }
  .doc-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .doc-sum__item { padding: 9px 11px; }
  .doc-sum__value { font-size: 1.05rem; }
  .doc-sum__label { font-size: .64rem; }
  .proj-grid, .file-grid { grid-template-columns: 1fr; }
  .dash__cols, .detail, .doc-grid, .set-grid { grid-template-columns: 1fr; }

  /* -- Tabellen seitlich schiebbar statt abgeschnitten -- */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-scroll table { min-width: max-content; }
  .table th, .table td { padding: 9px 11px; }

  /* -- Kopfbereiche von Belegen und Projekten -- */
  .doc-head__actions, .detail__actions { width: 100%; margin-left: 0; }
  .doc-head__actions .btn, .detail__actions .btn { flex: 1; justify-content: center; }
  .doc-head__title h1, .detail__title h1 { font-size: 1.15rem; }

  /* -- Listenkopf -- */
  .list-bar, .book-head { gap: 8px; }
  .list-bar .search, .book-head .search { width: 100%; order: 10; }
  .list-bar .search input { width: 100%; padding-left: 33px; }
  .seg { overflow-x: auto; max-width: 100%; }
  .seg button { white-space: nowrap; }

  /* -- Lead-Board -- */
  .board { padding: 12px 12px calc(var(--tabbar) + 12px); }
  .col { width: 84vw; }
  .board-bar { padding: 11px 12px; flex-wrap: wrap; }

  /* -- Kalender -- */
  .cal__day { min-height: 62px; padding: 4px; }
  .cal__num { font-size: .7rem; }
  .cal__ev { font-size: .62rem; padding: 1px 3px; }
  .cal-head h2 { min-width: 0; font-size: 1rem; }

  /* -- Dialoge füllen den Bildschirm -- */
  .modal-back { padding: 0; align-items: flex-end; }
  .modal, .modal--wide {
    width: 100%; max-height: 92vh; border-radius: var(--r-lg) var(--r-lg) 0 0;
    /* Bewusst ohne Einfahr-Animation: Käme sie aus irgendeinem Grund nicht zum
       Laufen, stünde der Dialog unterhalb des Bildschirms und wäre unerreichbar.
       Ein Dialog, der einfach da ist, tut es genauso. */
    animation: none;
  }
  .modal__foot { flex-wrap: wrap; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .modal__foot .btn { flex: 1; justify-content: center; }
  .modal__foot .spacer { display: none; }
  .field-row, .field-row--3, .field-row--21 { grid-template-columns: 1fr; }

  /* -- Positionen im Beleg-Editor: eigene Zeilen statt enger Spalten -- */
  .items thead { display: none; }
  .items, .items tbody, .items tr, .items td { display: block; width: 100%; }
  .items tr {
    border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: 9px; margin-bottom: 9px; position: relative;
  }
  .items td { border: 0; padding: 3px 0; }
  /* Der Ziehgriff ergibt auf dem Handy keinen Sinn — sortiert wird am Rechner.
     Die Regel braucht dieselbe Genauigkeit wie „.items td“, sonst greift sie nicht. */
  .items td.items__grip { display: none; }
  .items td.num { text-align: left; }
  .items td.num input { text-align: left; }
  .items td[data-line] {
    text-align: right; font-size: 1rem; padding-top: 7px; margin-top: 5px;
    border-top: 1px solid var(--line-soft);
  }
  .items td.items__tools {
    position: absolute; top: 5px; right: 5px; width: auto;
    padding: 0 !important; display: flex; gap: 2px; z-index: 2;
  }
  /* Platz für die Werkzeuge oben rechts */
  .items tr { padding-top: 34px; }
  .items textarea { min-height: 54px; }
  .items td::before {
    content: attr(data-label); display: block; font-size: .68rem;
    text-transform: uppercase; letter-spacing: .05em; color: var(--muted-2);
    font-weight: 600; margin-bottom: 1px;
  }
  .items td[data-line]::before { display: none; }

  /* -- Timeline und Zeilen -- */
  .task-row, .ev-row, .lead-row, .pay-row, .time-row { padding-left: 12px; padding-right: 12px; }
  .kv { grid-template-columns: 92px 1fr; }
  .phases { padding: 12px; }
  .phase { min-width: calc(50% - 3px); }
  .cat-row__name { width: 108px; font-size: .8rem; }
  .cat-row__value { width: 74px; font-size: .8rem; }
  .chart { height: 116px; padding: 12px 8px; }
}

/* Sehr schmale Geräte */
@media (max-width: 360px) {
  .stat__value, .kpi__value, .doc-sum__value { font-size: .98rem; }
  .phase { min-width: 100%; }
}