/* DigitAI CRM — bedienbarer Nachbau der Oberflaeche.
   Farben, Stufen und Beschriftungen entsprechen dem echten Produkt;
   die Daten sind erfunden. Laeuft ohne Server. */

.crm-lede{max-width:74ch;margin:0 0 26px;color:var(--muted);font-size:clamp(15px,1.6vw,17px)}

.crm-bar{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin:0 0 14px}
.crm-kpis{display:flex;flex-wrap:wrap;gap:6px 26px;align-items:baseline}
.crm-kpi b{font-size:23px;font-weight:680;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
.crm-kpi span{margin-left:7px;font-size:12.5px;color:var(--muted)}
.crm-kpi[data-tone="hot"] b,.crm-kpi[data-tone="hot"] span{color:#ff9d4d}
.crm-kpi[data-tone="hot"][hidden]{display:none}
.crm-bar .button{margin-left:auto}

.crm-hint{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 16px;font-size:12.5px;color:var(--muted)}
.crm-hint b{color:var(--ink);font-weight:600}
.crm-hint span{display:inline-flex;align-items:center;gap:7px}
.crm-hint i{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-style:normal;font-size:11px;
  border:1px solid rgba(77,141,255,.4);color:var(--blue);background:rgba(77,141,255,.1)}

/* ---- Fensterrahmen ---- */
.crm-app{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:var(--surface);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.crm-chrome{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.03)}
.crm-chrome i{width:9px;height:9px;border-radius:50%;background:rgba(143,174,220,.28)}
.crm-chrome span{margin-left:10px;font-size:11.5px;color:var(--muted);letter-spacing:.01em}

.crm-body{display:grid;grid-template-columns:186px minmax(0,1fr);min-height:520px}

/* Deckend, damit beim seitlichen Scrollen keine Karte durchscheint. */
.crm-side{border-right:1px solid var(--line);padding:14px 12px;background:#0a111c;z-index:2}
.crm-side-brand{display:flex;align-items:center;gap:8px;padding:0 6px 14px;font-size:12.5px;font-weight:700;letter-spacing:.05em;color:var(--ink)}
.crm-side-brand em{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-style:normal;font-size:12px;
  font-weight:800;color:#fff;background:linear-gradient(135deg,var(--blue),var(--violet))}
.crm-side-title{margin:14px 6px 7px;font-size:10px;font-weight:650;letter-spacing:.16em;color:#788aa2;text-transform:uppercase}
.crm-side a{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:8px;font-size:12.5px;color:var(--muted);cursor:default}
.crm-side a i{font-style:normal;opacity:.75;width:14px;text-align:center}
.crm-side a{cursor:pointer;width:100%;text-align:left;border:0;background:transparent;font:inherit;font-size:12.5px}
.crm-side a:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.crm-side a:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.crm-side a[aria-current]{background:rgba(77,141,255,.14);color:var(--ink);font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(77,141,255,.28)}

/* Der Verlauf am rechten Rand zeigt, dass hinter „Gewonnen" noch etwas kommt. */
.crm-main{position:relative;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;display:flex}
.crm-main:after{content:"";position:sticky;right:0;flex:0 0 0;align-self:stretch;width:0;
  box-shadow:0 0 46px 26px var(--surface);z-index:1;pointer-events:none}
.crm-board{display:flex;gap:12px;padding:14px;min-width:max-content;flex:1 0 auto}

/* Volle Spaltenhoehe: Wer eine Karte unter die letzte Karte zieht, trifft
   trotzdem die Spalte — sonst laeuft das Ablegen ins Leere. */
.crm-col{flex:0 0 228px;width:228px;border-radius:12px;padding:10px;background:rgba(255,255,255,.035);
  border:1px solid transparent;transition:border-color .15s,background .15s;
  display:flex;flex-direction:column}
.crm-col.is-over{border-color:rgba(77,141,255,.55);background:rgba(77,141,255,.08)}
.crm-col-head{display:flex;align-items:center;gap:8px;padding:0 2px 10px;font-size:12.5px;font-weight:650;color:var(--ink)}
.crm-col-head b{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.crm-col-n{margin-left:auto;font-weight:500;font-size:11px;color:var(--muted);background:rgba(255,255,255,.08);
  border-radius:999px;padding:1px 8px;font-variant-numeric:tabular-nums}
.crm-stack{display:flex;flex-direction:column;gap:8px;flex:1;min-height:56px}
.crm-empty{margin:0;padding:14px 0;text-align:center;font-size:11.5px;color:#5b6a7e}

/* ---- Ansichten ausserhalb des Boards ---- */
.crm-content{min-width:0;display:flex;flex-direction:column}
.crm-content > .crm-main{flex:1}
.crm-panel{padding:16px 18px;border-bottom:1px solid var(--line)}
.crm-panel:last-child{border-bottom:0}
.crm-panel-title{margin:0;font-size:13px;font-weight:650;letter-spacing:.02em;color:var(--ink)}
.crm-panel-lede{margin:5px 0 0;font-size:11.5px;color:var(--muted);line-height:1.55;max-width:62ch}

.crm-todo{list-style:none;margin:13px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.crm-todo-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;background:var(--surface-2);cursor:pointer;transition:border-color .15s,transform .15s}
.crm-todo-item:hover{border-color:rgba(77,141,255,.5);transform:translateX(2px)}
.crm-todo-item:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.crm-todo-mark{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:12px;
  background:rgba(255,255,255,.07)}
.crm-todo-mark[data-tone="stale"]{background:rgba(229,72,77,.16)}
.crm-todo-mark[data-tone="hot"]{background:rgba(255,138,61,.16)}
.crm-todo-mark[data-tone="new"]{background:rgba(77,141,255,.14)}
.crm-todo-body{min-width:0;display:flex;flex-direction:column;gap:2px}
.crm-todo-body b{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.35}
.crm-todo-body span{font-size:11px;color:var(--muted)}
.crm-todo-go{margin-left:auto;color:#5b6a7e;font-size:14px}

.crm-bars{display:flex;flex-direction:column;gap:8px;margin-top:13px}
.crm-bar{display:flex;align-items:center;gap:11px;font-size:11.5px}
.crm-bar-name{flex:0 0 108px;color:var(--muted)}
.crm-bar-track{flex:1;height:7px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}
.crm-bar-track i{display:block;height:100%;border-radius:99px;min-width:2px;transition:width .5s ease}
.crm-bar-n{flex:0 0 auto;min-width:104px;text-align:right;color:#c3d0e2;font-variant-numeric:tabular-nums}

.crm-table-wrap{margin-top:13px;overflow-x:auto}
.crm-table{width:100%;border-collapse:collapse;font-size:12px;min-width:520px}
.crm-table th{text-align:left;font-size:9.5px;font-weight:650;letter-spacing:.13em;text-transform:uppercase;
  color:#6d7d93;padding:0 10px 8px;white-space:nowrap}
.crm-table td{padding:9px 10px;border-top:1px solid var(--line);color:#c9d5e5;vertical-align:middle}
.crm-table td:first-child{color:var(--ink);font-weight:580}
.crm-table tr.is-clickable{cursor:pointer;transition:background .15s}
.crm-table tr.is-clickable:hover td{background:rgba(77,141,255,.09)}
.crm-table tr.is-clickable:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.crm-stage-dot{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.crm-stage-dot i{width:7px;height:7px;border-radius:50%;flex:0 0 auto}

.crm-stages{display:flex;flex-direction:column;gap:8px;margin-top:13px}
.crm-stage-row{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;background:rgba(255,255,255,.025)}
.crm-stage-n{flex:0 0 auto;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  font-size:11px;font-weight:700;color:var(--blue);background:rgba(77,141,255,.14)}
.crm-stage-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.crm-stage-body b{font-size:12.5px;color:var(--ink);font-weight:600}
.crm-stage-body span{font-size:11px;color:var(--muted)}

.crm-fields{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:13px}
.crm-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.crm-field label{font-size:10px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:#6d7d93}
.crm-field input,.crm-field textarea{font:inherit;font-size:12px;padding:7px 9px;border-radius:8px;resize:none;
  border:1px solid var(--line);background:rgba(0,0,0,.22);color:#b9c7d9;min-width:0}
.crm-field input:disabled,.crm-field textarea:disabled{opacity:1;cursor:not-allowed}
.crm-testout{margin-top:11px}
.crm-testline{margin:9px 0 0;font-size:12px;color:#c9d5e5}
.crm-testline b{color:var(--green)}

/* ---- Deal-Karte ---- */
.crm-card{position:relative;border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--surface-2);
  cursor:grab;touch-action:none;user-select:none;transition:border-color .15s,transform .15s,box-shadow .15s}
.crm-card:hover{border-color:rgba(77,141,255,.5);box-shadow:0 8px 22px rgba(0,0,0,.3)}
.crm-card:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.crm-card.is-source{opacity:.32}
.crm-card.is-stale{border-color:rgba(229,72,77,.45)}
.crm-card.is-new{animation:crmPop .45s ease}
@keyframes crmPop{from{transform:scale(.94);box-shadow:0 0 0 6px rgba(77,141,255,.18)}to{transform:none}}
.crm-card-title{font-size:12.5px;font-weight:620;color:var(--ink);line-height:1.35}
.crm-card-sub{margin-top:3px;font-size:11px;color:var(--muted)}
.crm-card-row{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:8px;font-size:10.5px}
.crm-tag{border-radius:5px;padding:2px 6px;background:rgba(255,255,255,.08);color:var(--muted)}
.crm-tag[data-heat="hot"]{background:rgba(255,138,61,.16);color:#ff9d4d}
.crm-tag[data-heat="warm"]{background:rgba(240,180,41,.15);color:#f0b429}
.crm-tag[data-heat="cold"]{background:rgba(255,255,255,.08);color:#93a3b8}
.crm-tag[data-tone="stale"]{background:rgba(229,72,77,.15);color:#ff7b7f}
.crm-tag-ask{border:1px dashed rgba(77,141,255,.55);background:rgba(77,141,255,.07);color:#8fb6ff}
.crm-card-val{margin-left:auto;font-weight:650;color:var(--green);font-variant-numeric:tabular-nums}
.crm-card-next{margin-top:8px;padding-left:8px;border-left:2px solid rgba(77,141,255,.6);font-size:11px;color:#c3d0e2;line-height:1.4}

.crm-drag{position:fixed;z-index:60;width:228px;pointer-events:none;transform:rotate(2.5deg);
  box-shadow:0 22px 50px rgba(0,0,0,.55);border-color:rgba(77,141,255,.6)}

/* ---- Schublade ---- */
.crm-drawer{position:absolute;inset:0 0 0 auto;width:min(430px,100%);display:flex;flex-direction:column;
  background:var(--surface);border-left:1px solid var(--line);box-shadow:-30px 0 60px rgba(0,0,0,.5);
  transform:translateX(101%);transition:transform .32s cubic-bezier(.4,0,.2,1);visibility:hidden}
.crm-drawer.is-open{transform:none;visibility:visible}
.crm-drawer-head{display:flex;align-items:flex-start;gap:12px;padding:15px 16px;border-bottom:1px solid var(--line)}
.crm-drawer-head h3{margin:0;font-size:15px;letter-spacing:-.02em;color:var(--ink)}
.crm-drawer-head p{margin:3px 0 0;font-size:11.5px;color:var(--muted)}
.crm-x{margin-left:auto;flex:0 0 auto;width:40px;height:40px;border-radius:8px;border:1px solid var(--line);
  background:transparent;color:var(--muted);cursor:pointer;font-size:15px;line-height:1}
.crm-x:hover{color:var(--ink);border-color:var(--muted)}
.crm-drawer-body{flex:1;overflow-y:auto;padding:15px 16px;display:flex;flex-direction:column;gap:14px}

.crm-facts{display:flex;flex-wrap:wrap;gap:6px}
.crm-fact{font-size:11px;color:var(--muted);background:rgba(255,255,255,.05);border-radius:6px;padding:4px 8px}
.crm-fact b{color:var(--ink);font-weight:600}

.crm-block{border:1px solid var(--line);border-radius:11px;padding:12px;background:rgba(255,255,255,.025)}
.crm-block h4{margin:0 0 8px;font-size:10px;font-weight:650;letter-spacing:.15em;color:#6d7d93;text-transform:uppercase}
.crm-quote{margin:0;font-size:12.5px;line-height:1.6;color:#c9d5e5;white-space:pre-line}

.crm-ai-idle{font-size:12.5px;color:var(--muted);margin:0 0 10px;line-height:1.55}
.crm-actions{display:flex;flex-wrap:wrap;gap:8px}
.crm-btn{min-height:40px;border:1px solid rgba(77,141,255,.42);background:rgba(77,141,255,.12);color:#cfe0ff;border-radius:9px;
  padding:7px 13px;font-size:12px;font-weight:600;cursor:pointer;transition:.15s}
.crm-btn:hover:not(:disabled){background:rgba(77,141,255,.22);color:#fff}
.crm-btn:disabled{opacity:.45;cursor:not-allowed}
.crm-btn-ghost{border-color:var(--line);background:transparent;color:var(--muted)}
.crm-btn-ghost:hover:not(:disabled){color:var(--ink);border-color:var(--muted);background:rgba(255,255,255,.04)}

.crm-chain{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.crm-chain li{display:flex;align-items:center;gap:9px;font-size:11.5px;color:#5b6a7e;transition:color .2s}
.crm-chain li i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto;opacity:.5}
.crm-chain li[data-state="run"]{color:var(--blue)}
.crm-chain li[data-state="run"] i{opacity:1;animation:crmBeat 1s infinite}
.crm-chain li[data-state="ok"]{color:var(--green)}
.crm-chain li[data-state="ok"] i{opacity:1}
.crm-chain li em{margin-left:auto;font-style:normal;font-size:10.5px;opacity:.85}
@keyframes crmBeat{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}

.crm-verdict{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:9px}
.crm-heat{border-radius:7px;padding:4px 10px;font-size:11.5px;font-weight:680;letter-spacing:.02em}
.crm-heat[data-heat="hot"]{background:rgba(255,138,61,.18);color:#ff9d4d}
.crm-heat[data-heat="warm"]{background:rgba(240,180,41,.16);color:#f0b429}
.crm-heat[data-heat="cold"]{background:rgba(255,255,255,.08);color:#93a3b8}
.crm-kv{margin:0 0 7px;font-size:12.5px;color:#c9d5e5;line-height:1.5}
.crm-kv b{color:#8fa3bd;font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:2px}

.crm-mail{border:1px solid var(--line);border-radius:9px;background:rgba(0,0,0,.25);padding:11px;margin-top:10px}
.crm-mail-to{font-size:11px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:7px;margin-bottom:8px}
.crm-mail-to b{color:#c9d5e5;font-weight:600}
.crm-mail-body{margin:0;font-size:12.5px;line-height:1.62;color:#d5dfec;white-space:pre-wrap;min-height:1.6em}
.crm-mail-body:after{content:"▍";color:var(--blue);opacity:0}
.crm-mail.is-typing .crm-mail-body:after{opacity:1;animation:crmCaret .9s steps(1) infinite}
@keyframes crmCaret{50%{opacity:0}}
.crm-note{margin:9px 0 0;font-size:11px;color:#6d7d93;line-height:1.5}
.crm-note b{color:#9fb3cc;font-weight:600}

.crm-log{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.crm-log li{display:flex;gap:9px;font-size:11.5px;color:var(--muted);line-height:1.5}
.crm-log time{flex:0 0 auto;min-width:78px;white-space:nowrap;color:#5b6a7e;font-variant-numeric:tabular-nums}
.crm-log b{color:#c9d5e5;font-weight:600}

/* ---- Kette unterhalb des Boards ---- */
.crm-chain-cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:8px}
.crm-chain-card{border:1px solid var(--line);border-radius:14px;padding:18px;background:rgba(255,255,255,.025)}
.crm-chain-card span{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--blue);
  border:1px solid rgba(77,141,255,.35);background:rgba(77,141,255,.1);border-radius:6px;padding:3px 8px;margin-bottom:11px}
.crm-chain-card h3{margin:0 0 7px;font-size:16px;letter-spacing:-.02em;color:var(--ink)}
.crm-chain-card p{margin:0;font-size:13px;color:var(--muted);line-height:1.6}

@media (max-width:900px){
  .crm-body{grid-template-columns:minmax(0,1fr);min-height:480px}
  .crm-side{display:none}
  .crm-drawer{width:100%}
  /* Wischen gehoert hier der Seite und dem Board, nicht der Karte. */
  .crm-card{touch-action:auto;cursor:pointer}
  .crm-hint span:first-child{display:none}
}
@media (prefers-reduced-motion:reduce){
  .crm-drawer{transition:none}
  .crm-card.is-new,.crm-chain li[data-state="run"] i,.crm-mail.is-typing .crm-mail-body:after{animation:none}
}