/* =========================================================
   KI-Partnersysteme · Designsystem für Portale (Team-Portal, Kundenportal, künftige Projekte)
   Dunkle Seitenleiste in Graphit mit dem bunten Logo, helle Arbeitsfläche, Systemschrift (keine Webfonts, DSGVO).
   Jede Logofarbe hat eine Bedeutung: Blau = Kunden & Anfragen, Grün = Umsetzung, Pink = Support,
   Lila = Verträge, Orange = Zusammenarbeit & Zähler. Ampelfarben nur für Zustände. Beschreibung: DESIGN.md
   ========================================================= */
:root{
  --ground:#F5F5F7; --surface:#FFFFFF; --surface-2:#FAFAFC; --sunken:#EDEDF0; --hover:#F0F0F3;
  --ink:#1D1D1F; --ink-2:#424245; --ink-3:#6E6E73; --ink-4:#8E8E93; --line:#D2D2D7; --line-2:#E8E8ED;
  --btn:#1D1D1F; --btn-ink:#FFFFFF; --btn-hover:#000000; --btn-2:#E8E8ED; --btn-2-hover:#DCDCE1;
  --blau:#1AABE2; --gruen:#86C538; --lila:#961A8C; --pink:#EA0C7B; --orange:#FEAB21;
  --ok:#1E7F4B; --ok-bg:#E3F4EA; --warn:#935B00; --warn-bg:#FFF2D9; --crit:#C4312C; --crit-bg:#FDE8E7;
  --info:#0A6F9C; --info-bg:#E3F3FB; --neutral-bg:#EFEFF2;
  --shadow:0 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04), 0 4px 18px rgba(0,0,0,.035);
  --shadow-hover:0 0 0 1px rgba(0,0,0,.07), 0 2px 6px rgba(0,0,0,.05), 0 14px 34px rgba(0,0,0,.09);
  --shadow-lift:0 24px 70px rgba(0,0,0,.20);
  --logo-light:block; --logo-dark:none;
  --font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, Helvetica, Arial, sans-serif;
  --font-display:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, Helvetica, Arial, sans-serif;
  --mono:ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --r:12px; --r-lg:18px; --r-xl:22px;
  --rail:272px;
  --rail-bg:#141417; --rail-bg-2:#1C1C20; --rail-ink:#F2F2F5; --rail-ink-2:#A1A1AA; --rail-ink-3:#71717A;
  --rail-hover:rgba(255,255,255,.06); --rail-aktiv:rgba(255,255,255,.10); --rail-linie:rgba(255,255,255,.08);
  --akzent:#1AABE2; --akzent-text:#0A79A8; --fokus:color-mix(in srgb, #1AABE2 45%, transparent);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#000000; --surface:#161618; --surface-2:#1C1C1E; --sunken:#232326; --hover:#1F1F22;
    --ink:#F5F5F7; --ink-2:#C7C7CC; --ink-3:#98989D; --ink-4:#7C7C80; --line:#38383A; --line-2:#2A2A2D;
    --btn:#F5F5F7; --btn-ink:#000000; --btn-hover:#FFFFFF; --btn-2:#2C2C2E; --btn-2-hover:#3A3A3C;
    --ok:#4CD38A; --ok-bg:rgba(76,211,138,.14); --warn:#FFC266; --warn-bg:rgba(255,194,102,.14);
    --crit:#FF6961; --crit-bg:rgba(255,105,97,.15); --info:#64C8F0; --info-bg:rgba(26,171,226,.16); --neutral-bg:#2A2A2D;
    --shadow:0 0 0 1px rgba(255,255,255,.05); --shadow-hover:0 0 0 1px rgba(255,255,255,.09); --shadow-lift:0 24px 70px rgba(0,0,0,.7);
    --logo-light:none; --logo-dark:block; color-scheme:dark;
    --rail-bg:#0E0E10; --rail-bg-2:#16161A; --akzent-text:#5CC8F0;
  }
}
:root[data-theme="dark"]{
  --ground:#000000; --surface:#161618; --surface-2:#1C1C1E; --sunken:#232326; --hover:#1F1F22;
  --ink:#F5F5F7; --ink-2:#C7C7CC; --ink-3:#98989D; --ink-4:#7C7C80; --line:#38383A; --line-2:#2A2A2D;
  --btn:#F5F5F7; --btn-ink:#000000; --btn-hover:#FFFFFF; --btn-2:#2C2C2E; --btn-2-hover:#3A3A3C;
  --ok:#4CD38A; --ok-bg:rgba(76,211,138,.14); --warn:#FFC266; --warn-bg:rgba(255,194,102,.14);
  --crit:#FF6961; --crit-bg:rgba(255,105,97,.15); --info:#64C8F0; --info-bg:rgba(26,171,226,.16); --neutral-bg:#2A2A2D;
  --shadow:0 0 0 1px rgba(255,255,255,.05); --shadow-hover:0 0 0 1px rgba(255,255,255,.09); --shadow-lift:0 24px 70px rgba(0,0,0,.7);
  --logo-light:none; --logo-dark:block; color-scheme:dark;
  --rail-bg:#0E0E10; --rail-bg-2:#16161A; --akzent-text:#5CC8F0;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{ margin:0; }
body{ font-family:var(--font); font-size:14px; line-height:1.47; color:var(--ink); background:var(--ground); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); letter-spacing:-.015em; text-wrap:balance; }
p{ margin:0; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--fokus); outline-offset:2px; border-radius:8px; }
a{ text-underline-offset:3px; }
.num{ font-variant-numeric:tabular-nums; }
.mono{ font-family:var(--mono); font-size:12px; letter-spacing:-.01em; color:var(--ink-3); }
.muted{ color:var(--ink-3); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ic{ width:18px; height:18px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.t-blau{ color:var(--blau); } .t-gruen{ color:#5E9E1C; } .t-lila{ color:var(--lila); } .t-pink{ color:var(--pink); } .t-orange{ color:#D98A00; } .t-ink{ color:var(--ink); } .t-crit{ color:var(--crit); }
.eyebrow{ font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--ink-3); margin-bottom:4px; }
.grow{ flex:1; }

/* ---------------- Rahmen ---------------- */
.app{ display:grid; grid-template-columns:var(--rail) minmax(0,1fr); min-height:100vh; }
.rail{ position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:22px; padding:24px 14px 18px;
  background:var(--rail-bg); color:var(--rail-ink); overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent;
  box-shadow:inset -1px 0 0 var(--rail-linie); }
.rail-brand{ padding:2px 12px 14px; border-bottom:1px solid var(--rail-linie); margin:0 -2px; }
.rail .logo-on-light{ display:none; }
.rail .logo-on-dark{ display:block; }
.logo{ height:24px; width:auto; display:block; }
.logo-on-light{ display:var(--logo-light); }
.logo-on-dark{ display:var(--logo-dark); }
.role-switch{ display:grid; grid-template-columns:1fr 1fr; gap:2px; padding:3px; background:rgba(255,255,255,.06); border-radius:10px; }
.role-switch button{ border:0; background:transparent; padding:7px 6px; border-radius:8px; font-weight:600; font-size:12.5px; color:var(--rail-ink-2); cursor:pointer; }
.role-switch button[aria-selected="true"]{ background:rgba(255,255,255,.14); color:#fff; }
.nav{ display:flex; flex-direction:column; gap:2px; }
.nav-label{ font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--rail-ink-3); padding:18px 12px 7px; }
.nav button{ position:relative; display:flex; align-items:center; gap:12px; width:100%; border:0; background:transparent; text-align:left; padding:9px 12px; border-radius:10px;
  color:var(--rail-ink-2); font-weight:500; font-size:14px; cursor:pointer; transition:background .15s, color .15s; --akzent-nav:var(--blau); }
.nav button:hover{ background:var(--rail-hover); color:var(--rail-ink); }
.nav button[aria-current="page"]{ background:var(--rail-aktiv); color:#fff; font-weight:600; }
.nav button[aria-current="page"]::before{ content:""; position:absolute; left:-14px; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:var(--akzent-nav); }
.nav button[data-farbe="ink"]{ --akzent-nav:#fff; } .nav button[data-farbe="blau"]{ --akzent-nav:var(--blau); } .nav button[data-farbe="gruen"]{ --akzent-nav:var(--gruen); }
.nav button[data-farbe="pink"]{ --akzent-nav:var(--pink); } .nav button[data-farbe="lila"]{ --akzent-nav:#C04BB6; } .nav button[data-farbe="orange"]{ --akzent-nav:var(--orange); }
.nav-ic{ display:inline-flex; color:var(--akzent-nav); opacity:.78; transition:opacity .15s; }
.nav button:hover .nav-ic, .nav button[aria-current="page"] .nav-ic{ opacity:1; }
.nav button[data-farbe="ink"] .nav-ic{ color:var(--rail-ink); }
.nav-ic .ic{ width:19px; height:19px; }
.nav-lang{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.nav-kurz{ display:none; }
.nav .count{ margin-left:auto; min-width:21px; height:21px; padding:0 7px; border-radius:11px; display:inline-grid; place-items:center;
  font-size:11.5px; font-weight:700; color:#1D1D1F; background:var(--orange); font-variant-numeric:tabular-nums; }
.nav .count.alert{ color:#fff; background:#E5484D; }
.area-dot{ width:8px; height:8px; border-radius:50%; flex:0 0 8px; background:var(--ink-3); }
.a-blau{ background:var(--blau); } .a-gruen{ background:var(--gruen); } .a-lila{ background:var(--lila); } .a-pink{ background:var(--pink); } .a-orange{ background:var(--orange); } .a-ink{ background:var(--ink); }
.rail-foot{ margin-top:auto; display:flex; flex-direction:column; gap:8px; padding:16px 12px 0; border-top:1px solid var(--rail-linie); font-size:12.5px; line-height:1.5; color:var(--rail-ink-3); }
.rail-foot b{ color:var(--rail-ink-2); font-weight:600; }
.proto-chip{ display:inline-flex; align-items:center; gap:7px; font-weight:600; color:var(--warn); }
.proto-chip::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--warn); }
.live-chip{ color:#4CD38A; }
.live-chip::before{ background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.linkish{ border:0; background:none; padding:0; color:var(--ink-2); text-decoration:underline; text-underline-offset:2px; cursor:pointer; font-size:12.5px; text-align:left; }
.rail .linkish{ color:var(--rail-ink-2); }
.rail .linkish:hover{ color:#fff; }

.main{ min-width:0; display:flex; flex-direction:column; }
.topbar{ position:sticky; top:0; z-index:20; display:flex; align-items:flex-end; gap:20px; padding:30px 40px 20px;
  background:color-mix(in srgb, var(--ground) 82%, transparent); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); }
.topbar h1{ font-size:32px; font-weight:700; letter-spacing:-.03em; line-height:1.08; }
.topbar .crumb{ color:var(--ink-3); font-size:14px; margin-top:5px; }
.topbar-tools{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.search-wrap{ position:relative; display:flex; align-items:center; }
.search-wrap .ic{ position:absolute; left:11px; width:16px; height:16px; color:var(--ink-4); pointer-events:none; }
.search{ width:260px; padding:8px 12px 8px 34px; border:1px solid transparent; border-radius:10px; background:var(--btn-2); transition:background .15s, border-color .15s, box-shadow .15s; }
.search::placeholder{ color:var(--ink-4); }
.search:focus{ outline:none; background:var(--surface); border-color:var(--akzent); box-shadow:0 0 0 4px color-mix(in srgb, var(--akzent) 16%, transparent); }
.who{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink-2); font-weight:500; }
.avatar{ width:30px; height:30px; border-radius:50%; display:inline-grid; place-items:center; font-size:11px; font-weight:700; color:#fff; background:var(--ink-2); flex:0 0 30px; letter-spacing:.02em; }
.view{ padding:6px 40px 72px; display:flex; flex-direction:column; gap:24px; max-width:1380px; width:100%; }
.view > *{ animation:auftauchen-sanft .28s cubic-bezier(.2,.8,.2,1) both; }
.view > *:nth-child(2){ animation-delay:.03s; } .view > *:nth-child(3){ animation-delay:.06s; } .view > *:nth-child(n+4){ animation-delay:.09s; }
@keyframes auftauchen-sanft{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* ---------------- Bausteine ---------------- */
.grid{ display:grid; gap:16px; }
.g-4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.g-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.g-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.g-main{ grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); align-items:start; }
.panel{ background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow); min-width:0; }
.panel-head{ display:flex; align-items:baseline; gap:12px; padding:18px 22px 10px; }
.panel-head h2{ font-size:17px; font-weight:650; }
.panel-head .aside{ margin-left:auto; font-size:12.5px; color:var(--ink-3); text-align:right; }
.panel-body{ padding:8px 22px 20px; }
.panel-body.flush{ padding:0 0 6px; }

.kpi{ padding:18px 20px 18px; display:flex; flex-direction:column; gap:6px; text-align:left; border:0; font:inherit; color:inherit; }
button.kpi{ cursor:pointer; transition:box-shadow .2s, transform .2s; }
button.kpi:hover{ box-shadow:var(--shadow-hover); transform:translateY(-1px); }
.kpi-label{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-2); font-weight:500; }
.kpi-ic{ display:inline-grid; place-items:center; width:30px; height:30px; border-radius:9px; background:color-mix(in srgb, currentColor 12%, transparent); }
.kpi-ic .ic{ width:17px; height:17px; }
.kpi-value{ font-family:var(--font-display); font-size:34px; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1.08; margin-top:6px; }
.kpi-value small{ font-size:15px; font-weight:600; color:var(--ink-3); margin-left:3px; letter-spacing:0; }
.kpi-foot{ font-size:12.5px; color:var(--ink-3); }
.spark{ width:100%; height:34px; display:block; }

.pill{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; background:var(--neutral-bg); color:var(--ink-2); line-height:1.35; }
.pill.ok{ background:var(--ok-bg); color:var(--ok); }
.pill.warn{ background:var(--warn-bg); color:var(--warn); }
.pill.crit{ background:var(--crit-bg); color:var(--crit); }
.pill.info{ background:var(--info-bg); color:var(--info); }
.pill.dot::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.tag{ display:inline-block; padding:2px 8px; border-radius:7px; font-size:12px; color:var(--ink-2); background:var(--sunken); white-space:nowrap; font-weight:500; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 17px; border-radius:980px; border:1px solid transparent;
  font-weight:600; font-size:13.5px; cursor:pointer; white-space:nowrap; text-decoration:none; transition:background .15s, color .15s, box-shadow .15s; }
.btn .ic{ width:16px; height:16px; }
.btn-primary{ background:var(--btn); color:var(--btn-ink); }
.btn-primary:hover{ background:var(--btn-hover); }
.btn-quiet{ background:var(--btn-2); color:var(--ink); }
.btn-quiet:hover{ background:var(--btn-2-hover); }
.btn-ghost{ background:transparent; color:var(--ink-2); border:1px dashed var(--line); }
.btn-ghost:hover{ color:var(--ink); border-color:var(--ink-4); background:var(--surface-2); }
.btn-danger{ background:var(--crit); color:#fff; }
.btn-danger:hover{ filter:brightness(.92); }
.btn-danger-quiet{ background:transparent; color:var(--crit); padding-left:4px; padding-right:4px; }
.btn-danger-quiet:hover{ text-decoration:underline; text-underline-offset:3px; }
.btn-sm{ padding:6px 13px; font-size:12.5px; gap:6px; }
.btn-sm .ic{ width:15px; height:15px; }
.icon-btn{ display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; color:var(--ink-2); background:var(--btn-2); text-decoration:none; flex:0 0 32px; transition:background .15s, color .15s; }
.icon-btn:hover{ background:var(--btn-2-hover); color:var(--ink); }
.icon-btn .ic{ width:16px; height:16px; }

/* Listen */
.rows{ list-style:none; margin:0; padding:0 0 6px; }
.rows > li{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:center; padding:12px 22px; position:relative; }
.rows > li + li::before{ content:""; position:absolute; top:0; right:22px; left:68px; border-top:1px solid var(--line-2); }
.row-ic{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--neutral-bg); color:var(--ink-3); }
.row-ic .ic{ width:17px; height:17px; }
.row-ic.crit{ background:var(--crit-bg); color:var(--crit); } .row-ic.warn{ background:var(--warn-bg); color:var(--warn); }
.row-ic.info{ background:var(--info-bg); color:var(--info); } .row-ic.ok{ background:var(--ok-bg); color:var(--ok); }
.row-text{ min-width:0; }
.row-title{ font-weight:600; font-size:14px; }
.row-meta{ font-size:12.5px; color:var(--ink-3); margin-top:2px; }
.row-actions{ display:flex; gap:6px; align-items:center; }
.row-when{ font-size:12.5px; color:var(--ink-3); white-space:nowrap; }
.empty-row{ display:flex !important; align-items:center; gap:10px; color:var(--ink-3); padding:18px 22px !important; }
.empty-row .ic{ color:var(--ok); }
/* ältere Zeilen (Kundenportal): schmaler Farbbalken statt Symbol */
.sev{ width:4px; align-self:stretch; border-radius:2px; background:var(--line); }
.sev.crit{ background:var(--crit); } .sev.warn{ background:var(--orange); } .sev.info{ background:var(--blau); } .sev.ok{ background:var(--ok); }
.rows > li:has(> .sev) + li::before{ left:22px; }
.datebadge{ width:44px; height:50px; border-radius:11px; background:var(--sunken); display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.05; }
.datebadge b{ font-family:var(--font-display); font-size:18px; font-weight:700; letter-spacing:-.02em; }
.datebadge small{ font-size:10px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em; }
.termine > li + li::before{ left:80px; }

/* Tabellen */
.table-wrap{ overflow-x:auto; padding:0 8px 8px; }
.tbl{ width:100%; border-collapse:collapse; min-width:720px; }
.tbl th{ text-align:left; font-size:12px; font-weight:600; color:var(--ink-3); padding:8px 14px 10px; border-bottom:1px solid var(--line-2); white-space:nowrap; }
.tbl td{ padding:13px 14px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
.tbl tr:last-child td{ border-bottom:0; }
.tbl tbody tr.clickable{ cursor:pointer; }
.tbl tbody tr.clickable:hover td{ background:var(--hover); }
.tbl .r{ text-align:right; font-variant-numeric:tabular-nums; }
.tbl td.empty{ text-align:left; color:var(--ink-3); padding:18px 14px; }
.cell-strong{ font-weight:600; }
.cell-sub{ font-size:12.5px; color:var(--ink-3); margin-top:2px; }

/* Werkzeugleiste mit Kennzahlen */
.toolbar{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.stats{ display:flex; gap:10px; flex-wrap:wrap; margin-right:auto; }
.stat{ display:flex; flex-direction:column; padding:10px 16px; background:var(--surface); border-radius:14px; box-shadow:var(--shadow); min-width:120px; }
.stat-wert{ font-family:var(--font-display); font-size:20px; font-weight:700; letter-spacing:-.02em; }
.stat-label{ font-size:12px; color:var(--ink-3); }

/* ---------------- Pipeline ---------------- */
.board{ display:grid; gap:14px; align-items:start; }
.col{ background:color-mix(in srgb, var(--sunken) 70%, transparent); border-radius:var(--r-xl); padding:12px; display:flex; flex-direction:column; gap:10px; min-width:0; }
.col-head{ display:flex; align-items:center; gap:8px; padding:4px 6px 2px; }
.col-head h3{ font-size:13px; font-weight:650; line-height:1.25; }
.col-nr{ width:20px; height:20px; border-radius:50%; display:inline-grid; place-items:center; font-size:11px; font-weight:700; background:var(--surface); color:var(--ink-3); flex:0 0 20px; }
.col-head .sum{ margin-left:auto; font-size:12px; font-weight:650; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.col-cards{ display:flex; flex-direction:column; gap:10px; }
.col-empty{ font-size:12.5px; color:var(--ink-4); padding:6px 6px 8px; }
.col.leer{ background:transparent; border:1.5px dashed var(--line-2); }
.col.leer .col-head h3{ color:var(--ink-3); }

.lead{ background:var(--surface); border-radius:16px; padding:14px 15px 12px; display:flex; flex-direction:column; gap:8px; box-shadow:var(--shadow); cursor:pointer; transition:box-shadow .2s, transform .2s; min-width:0; }
.lead:hover{ box-shadow:var(--shadow-hover); transform:translateY(-1px); }
.lead-top{ display:flex; gap:10px; align-items:baseline; }
.lead-name{ font-size:14.5px; font-weight:650; line-height:1.3; letter-spacing:-.01em; min-width:0; overflow-wrap:anywhere; }
.lead-wert{ margin-left:auto; font-weight:650; font-size:13.5px; white-space:nowrap; }
.lead-meta{ display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; font-size:12.5px; color:var(--ink-3); }
.branche{ display:inline-flex; align-items:center; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; color:var(--ink-2); background:var(--sunken); }
.branche-fehlt{ padding:2px 9px 2px 7px; font-size:12px; gap:4px; }
.branche-fehlt .ic{ width:13px; height:13px; }
.meta-ic{ display:inline-flex; align-items:center; gap:4px; }
.meta-ic .ic, .lead-line .ic{ width:14px; height:14px; color:var(--ink-4); }
.lead-line{ display:flex; gap:7px; align-items:center; font-size:12.5px; color:var(--ink-2); }
.lead-tags{ display:flex; flex-wrap:wrap; gap:5px; }
.lead-note{ font-size:12.5px; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line-2); border-radius:10px; padding:7px 10px; line-height:1.4; }
.lead-foot{ display:flex; align-items:center; gap:8px; padding-top:8px; margin-top:2px; border-top:1px solid var(--line-2); }
.lead-tools{ margin-left:auto; display:flex; gap:6px; align-items:center; }
.lead-tools .icon-btn{ width:30px; height:30px; flex-basis:30px; }
.stufe-select select{ appearance:none; -webkit-appearance:none; border:0; border-radius:980px; background:var(--btn-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 9px center / 12px;
  padding:6px 28px 6px 12px; font-size:12.5px; font-weight:600; cursor:pointer; max-width:150px; }
.stufe-select select:hover{ background-color:var(--btn-2-hover); }
.lead-schluss{ display:flex; }
.lead-schluss .btn{ flex:1; }

/* Kundenkarten */
.cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:16px; }
.kcard{ padding:20px 22px 16px; display:flex; flex-direction:column; gap:14px; cursor:pointer; transition:box-shadow .2s, transform .2s; }
.kcard:hover{ box-shadow:var(--shadow-hover); transform:translateY(-1px); }
.kcard-head{ display:flex; gap:12px; align-items:flex-start; }
.kcard-head > div{ flex:1; min-width:0; }
.kcard-head h3{ font-size:18px; font-weight:700; letter-spacing:-.02em; }
.kcard-head p{ margin-top:3px; font-size:13px; }
.kcard-kv{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0; }
.kcard-kv div{ background:var(--surface-2); border:1px solid var(--line-2); border-radius:12px; padding:9px 12px; }
.kcard-kv dt{ font-size:11.5px; color:var(--ink-3); font-weight:600; }
.kcard-kv dd{ margin:2px 0 0; font-weight:600; font-size:13px; }
.kcard-foot{ display:flex; align-items:center; gap:10px; padding-top:12px; border-top:1px solid var(--line-2); font-size:12.5px; }
.kcard-foot .icon-btn{ margin-left:auto; }

/* ---------------- Projekte ---------------- */
.projekt-head{ display:flex; gap:16px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; padding:22px 24px 6px; }
.projekt-head h2{ font-size:21px; font-weight:700; letter-spacing:-.022em; }
.projekt-head p{ margin-top:3px; font-size:13px; }
.projekt .panel-body{ padding:14px 24px 24px; display:flex; flex-direction:column; gap:22px; }
.projekt-grid{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:28px; }
.sub-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:10px; }
.sub-head h3{ font-size:15px; font-weight:650; }
.sub-head .muted{ margin-left:auto; font-size:12.5px; }
.stepper{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:6px; }
.stepper li{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.step-bar{ height:6px; border-radius:3px; background:var(--line-2); overflow:hidden; display:block; }
.step-bar i{ display:block; height:100%; background:var(--gruen); border-radius:3px; }
.stepper li.now .step-bar i{ background:var(--ink); }
.step-name{ font-size:12px; color:var(--ink-4); line-height:1.3; }
.step-name b{ font-weight:700; margin-right:2px; }
.stepper li.done .step-name, .stepper li.now .step-name{ color:var(--ink); }
.stepper li.now .step-name{ font-weight:600; }
/* ältere Phasenleiste (Kundenportal) */
.phases{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:6px; }
.phase{ display:flex; flex-direction:column; gap:8px; }
.phase-bar{ height:6px; border-radius:3px; background:var(--line-2); overflow:hidden; }
.phase-bar i{ display:block; height:100%; background:var(--gruen); }
.phase.now .phase-bar i{ background:var(--ink); }
.phase-name{ font-size:12px; color:var(--ink-4); line-height:1.3; }
.phase.done .phase-name, .phase.now .phase-name{ color:var(--ink); font-weight:600; }

.checklist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.check-row{ display:flex; gap:12px; align-items:flex-start; width:100%; text-align:left; border:0; background:transparent; padding:8px 10px; margin:0 -10px; border-radius:10px; cursor:pointer; font-size:13.5px; line-height:1.4; color:var(--ink); width:calc(100% + 20px); }
.check-row:hover{ background:var(--hover); }
.check{ width:20px; height:20px; flex:0 0 20px; border-radius:6px; border:1.6px solid var(--line); display:grid; place-items:center; background:var(--surface); margin-top:-1px; transition:background .15s, border-color .15s; }
.check .ic{ width:13px; height:13px; stroke-width:3; color:#fff; opacity:0; }
.check-row.on .check, .check.on{ background:var(--gruen); border-color:var(--gruen); }
.check-row.on .check .ic{ opacity:1; }
.check-row.on > span:last-child{ color:var(--ink-3); text-decoration:line-through; text-decoration-color:var(--ink-4); }
/* ältere Checkliste (Kundenportal) */
.checklist li.on span{ color:var(--ink-3); text-decoration:line-through; }
.check.on::after{ content:""; width:9px; height:5px; border:2px solid #fff; border-top:0; border-right:0; transform:rotate(-45deg) translate(1px,-1px); }

.callout{ display:flex; gap:12px; align-items:flex-start; padding:13px 15px; border-radius:14px; margin-bottom:16px; font-size:13.5px; }
.callout .ic{ margin-top:1px; }
.callout b{ display:block; font-size:12.5px; }
.callout.warn{ background:var(--warn-bg); color:var(--warn); }
.callout.info{ background:var(--info-bg); color:var(--info); }

/* Reaktionszeit */
.sla{ display:flex; flex-direction:column; gap:5px; min-width:140px; }
.sla-track{ height:5px; border-radius:3px; background:var(--line-2); overflow:hidden; }
.sla-track i{ display:block; height:100%; background:var(--ok); }
.sla.warn .sla-track i{ background:var(--orange); }
.sla.crit .sla-track i{ background:var(--crit); }
.sla-text{ font-size:12px; color:var(--ink-2); font-variant-numeric:tabular-nums; }

/* Module / Assistenten */
.mods{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:12px; }
.mod{ border-radius:var(--r); padding:14px 16px; display:flex; flex-direction:column; gap:9px; background:var(--surface-2); border:1px solid var(--line-2); }
.mod-head{ display:flex; align-items:center; gap:8px; font-weight:600; }
.mod-stats{ display:flex; gap:14px; font-size:12.5px; color:var(--ink-3); flex-wrap:wrap; }
.mod-stats b{ color:var(--ink); font-variant-numeric:tabular-nums; }

/* Freigaben (Kundenportal) */
.approval{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; padding:16px 22px; border-top:1px solid var(--line-2); }
.approval:first-child{ border-top:0; }
.approval-src{ display:flex; gap:8px; align-items:center; font-size:12.5px; color:var(--ink-3); }
.approval-title{ font-weight:600; margin:4px 0 8px; }
.draft{ background:var(--surface-2); border:1px solid var(--line-2); border-radius:12px; padding:11px 13px; font-size:13.5px; color:var(--ink-2); max-width:68ch; }
.approval-actions{ display:flex; flex-direction:column; gap:7px; align-items:stretch; }
.approval.done{ opacity:.55; }

/* ---------------- Formulare ---------------- */
.form{ display:flex; flex-direction:column; gap:18px; }
.fs{ border:0; margin:0; padding:18px 20px 20px; background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow); min-width:0; }
.fs legend{ float:left; width:100%; font-family:var(--font-display); font-size:16px; font-weight:700; letter-spacing:-.01em; margin-bottom:14px; padding:0; }
.fs legend + *{ clear:both; }
.fs-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 16px; }
.field{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.field.breit{ grid-column:1 / -1; }
.field label{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.pflicht{ color:var(--crit); }
.field input, .field select, .field textarea{ width:100%; min-height:44px; padding:10px 13px; border:1px solid var(--line-2); border-radius:12px; background:var(--surface-2); transition:border-color .15s, box-shadow .15s, background .15s; min-width:0; font-size:14.5px; }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--line); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; background:var(--surface); border-color:var(--akzent); box-shadow:0 0 0 4px color-mix(in srgb, var(--akzent) 16%, transparent); }
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-4); }
.field textarea{ min-height:70px; resize:vertical; line-height:1.45; }
.hint{ font-size:12px; color:var(--ink-3); }
.chips-auswahl{ display:flex; flex-wrap:wrap; gap:8px; clear:both; }
.chip-check{ position:relative; cursor:pointer; }
.chip-check input{ position:absolute; opacity:0; pointer-events:none; }
.chip-check span{ display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:980px; background:var(--btn-2); font-size:13px; font-weight:600; color:var(--ink-2); transition:background .15s, color .15s; }
.chip-check input:checked + span{ background:var(--btn); color:var(--btn-ink); }
.chip-check input:focus-visible + span{ outline:3px solid color-mix(in srgb, var(--blau) 55%, transparent); outline-offset:2px; }
.form-actions{ position:sticky; bottom:0; display:flex; gap:10px; align-items:center; justify-content:flex-end; padding:14px 0 4px;
  background:linear-gradient(to top, var(--ground) 70%, transparent); }
.fehlt{ color:var(--ink-4); font-style:italic; }

/* ---------------- Kundenakte (Seitenblatt) ---------------- */
.drawer{ position:fixed; inset:0; z-index:50; display:flex; justify-content:flex-end; background:rgba(0,0,0,.28); backdrop-filter:blur(2px); animation:einblenden .18s ease-out; }
.sheet{ width:min(700px, 100%); height:100%; overflow-y:auto; background:var(--ground); box-shadow:var(--shadow-lift); display:flex; flex-direction:column; animation:reinschieben .24s cubic-bezier(.2,.8,.2,1); }
.sheet-head{ position:sticky; top:0; z-index:2; display:flex; gap:14px; align-items:flex-start; padding:22px 26px 18px;
  background:color-mix(in srgb, var(--ground) 86%, transparent); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--line-2); }
.sheet-titel{ flex:1; min-width:0; }
.sheet-head h2{ font-size:24px; font-weight:700; letter-spacing:-.025em; line-height:1.15; }
.sheet-head .muted{ margin-top:4px; font-size:13px; }
.sheet-tools{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.sheet-body{ padding:20px 26px 36px; display:flex; flex-direction:column; gap:16px; }
.kv{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:9px 16px; font-size:13.5px; margin:0; }
.kv dt{ color:var(--ink-3); }
.kv dd{ margin:0; }
.kv a{ color:var(--info); text-decoration:none; }
.kv a:hover{ text-decoration:underline; }
.close{ border:0; background:var(--btn-2); width:32px; height:32px; border-radius:50%; cursor:pointer; display:inline-grid; place-items:center; color:var(--ink-2); flex:0 0 32px; }
.close:hover{ background:var(--btn-2-hover); color:var(--ink); }
.close .ic{ width:16px; height:16px; }
@keyframes einblenden{ from{ opacity:0; } to{ opacity:1; } }
@keyframes reinschieben{ from{ transform:translateX(32px); opacity:.4; } to{ transform:none; opacity:1; } }

/* Rückfrage */
.modal{ position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.34); backdrop-filter:blur(3px); animation:einblenden .15s ease-out; }
.dialog{ width:min(440px, 100%); background:var(--surface); border-radius:var(--r-xl); box-shadow:var(--shadow-lift); padding:24px 24px 18px; animation:auftauchen .2s cubic-bezier(.2,.8,.2,1); }
.dialog h2{ font-size:19px; font-weight:700; letter-spacing:-.02em; line-height:1.25; }
.dialog p{ margin-top:10px; color:var(--ink-2); font-size:14px; line-height:1.5; }
.dialog-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:22px; flex-wrap:wrap; }
@keyframes auftauchen{ from{ transform:scale(.96); opacity:0; } to{ transform:none; opacity:1; } }

/* Hinweis unten */
.toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:80; display:flex; align-items:center; gap:14px; max-width:calc(100% - 32px);
  background:color-mix(in srgb, #1D1D1F 92%, transparent); color:#fff; padding:11px 12px 11px 18px; border-radius:980px; font-weight:500; font-size:13.5px;
  box-shadow:0 12px 40px rgba(0,0,0,.28); backdrop-filter:blur(16px); animation:hochkommen .22s cubic-bezier(.2,.8,.2,1); }
.toast:not(:has(button)){ padding-right:18px; }
.toast button{ display:inline-flex; align-items:center; gap:6px; border:0; background:rgba(255,255,255,.14); color:#fff; font-weight:650; font-size:13px; padding:6px 13px; border-radius:980px; cursor:pointer; white-space:nowrap; }
.toast button:hover{ background:rgba(255,255,255,.24); }
.toast .ic{ width:15px; height:15px; }
@keyframes hochkommen{ from{ transform:translate(-50%, 12px); opacity:0; } to{ transform:translate(-50%, 0); opacity:1; } }

.empty{ padding:22px 18px; color:var(--ink-3); text-align:center; }
.note{ font-size:13px; color:var(--ink-3); line-height:1.5; }
.panel-body .note + .btn{ margin-top:12px; }
.hello{ display:flex; flex-direction:column; gap:4px; }
.hello h2{ font-size:26px; font-weight:700; letter-spacing:-.025em; }
.split{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* ---------------- Mittel: Seitenleiste schmaler ---------------- */
@media (max-width: 1280px){
  .g-4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
/* Pipeline: passt die Tafel nicht nebeneinander, setzt team.js die Klasse „gestapelt" → Stufen untereinander */
.board.gestapelt{ grid-template-columns:minmax(0,1fr) !important; }
.board.gestapelt .col{ padding:14px; }
.board.gestapelt .col-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(270px,1fr)); }
.board.gestapelt .col.leer{ flex-direction:row; align-items:center; padding:8px 12px; }
.board.gestapelt .col.leer .col-empty{ padding:0; margin-left:auto; }
.board.gestapelt .col.leer .col-head{ padding:0; flex:1; }
.board.gestapelt .col.leer .col-head .sum{ display:none; }
@media (max-width: 1180px){
  .g-main{ grid-template-columns:minmax(0,1fr); }
  .projekt-grid{ grid-template-columns:minmax(0,1fr); gap:22px; }
}
@media (max-width: 1100px){
  .g-3{ grid-template-columns:minmax(0,1fr); }
  .topbar{ padding:22px 26px 14px; }
  .view{ padding:6px 26px 56px; }
}

/* ---------------- Schmal: Navigation oben ---------------- */
@media (max-width: 900px){
  .app{ grid-template-columns:minmax(0,1fr); }
  .rail{ position:sticky; top:0; z-index:30; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:12px 16px 0; box-shadow:none; overflow:visible; }
  .rail-brand{ padding:0; border:0; margin:0; }
  .nav button[aria-current="page"]::before{ left:12px; right:12px; top:auto; bottom:-8px; width:auto; height:3px; border-radius:3px 3px 0 0; }
  .logo{ height:21px; }
  .role-switch{ margin-left:auto; }
  .nav{ order:3; flex-basis:100%; flex-direction:row; gap:2px; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:0 12px 8px; scroll-snap-type:x proximity; }
  .nav::-webkit-scrollbar{ display:none; }
  .nav-label, .rail-foot{ display:none; }
  .nav button{ width:auto; flex:0 0 auto; padding:8px 12px; gap:8px; font-size:13.5px; scroll-snap-align:start; }
  .nav-lang{ display:none; }
  .nav-kurz{ display:inline; }
  .nav .count{ min-width:18px; height:18px; font-size:11px; margin-left:2px; }
  .topbar{ position:static; flex-wrap:wrap; align-items:center; gap:12px; padding:20px 16px 8px; }
  .topbar h1{ font-size:26px; }
  .topbar-tools{ margin-left:0; width:100%; }
  .search-wrap{ flex:1; }
  .search{ width:100%; }
  .who-name{ display:none; }
  .view{ padding:10px 16px 48px; gap:16px; }
  .g-2{ grid-template-columns:minmax(0,1fr); }
  .approval{ grid-template-columns:minmax(0,1fr); }
  .approval-actions{ flex-direction:row; flex-wrap:wrap; }
  .sheet-head{ padding:18px 18px 14px; flex-wrap:wrap; }
  .sheet-body{ padding:16px 16px 30px; }
  .kv{ grid-template-columns:minmax(0,1fr); gap:2px 0; }
  .kv dd{ margin-bottom:9px; }
  .fs{ padding:16px; }
  .fs-grid{ grid-template-columns:minmax(0,1fr); }
  .stepper{ grid-template-columns:repeat(5, minmax(0,1fr)); gap:4px; }
  .step-name{ font-size:11px; }
  .rows > li{ padding:12px 16px; gap:12px; }
  .rows > li + li::before{ left:62px; right:16px; }
  .panel-head{ padding:16px 16px 8px; flex-wrap:wrap; }
  .panel-head .aside{ margin-left:0; text-align:left; flex-basis:100%; }
  .panel-body{ padding:6px 16px 18px; }
  .projekt-head{ padding:18px 16px 4px; }
  .projekt .panel-body{ padding:12px 16px 20px; }
}
@media (max-width: 560px){
  .g-4{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
  .kpi{ padding:14px; }
  .kpi-value{ font-size:26px; }
  .kpi-foot{ font-size:12px; }
  .row-actions .btn{ padding:6px 10px; }
  .rows > li{ grid-template-columns:auto minmax(0,1fr); }
  .rows > li > .row-actions, .rows > li > .row-when{ grid-column:2; justify-self:start; }
  .stats{ width:100%; }
  .stat{ flex:1; min-width:0; padding:9px 12px; }
  .stat-wert{ font-size:17px; }
  .toolbar > .btn{ width:100%; }
  .step-name{ font-size:10.5px; hyphens:auto; overflow-wrap:anywhere; }
  .cards{ grid-template-columns:minmax(0,1fr); }
  .col-cards{ grid-template-columns:minmax(0,1fr); }
  .dialog-actions .btn{ flex:1; }
}
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

.rows .empty, .tbl td.empty{ color:var(--ink-3); }

/* ---------------- Zusammenarbeit: Verbesserungen & Updates ---------------- */
.hinweis{ display:flex; align-items:center; gap:14px; padding:14px 18px; flex-wrap:wrap; background:color-mix(in srgb, var(--orange) 12%, var(--surface)); }
.hinweis p{ flex:1; min-width:200px; font-size:14px; }
.hinweis-ic{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--orange); color:#fff; flex:0 0 36px; }
.segmente{ display:inline-flex; gap:2px; padding:3px; background:var(--sunken); border-radius:11px; margin-right:auto; flex-wrap:wrap; }
.segmente button{ border:0; background:transparent; padding:7px 13px; border-radius:9px; font-weight:600; font-size:13px; color:var(--ink-3); cursor:pointer; display:inline-flex; gap:6px; align-items:center; }
.segmente button .num{ font-size:11.5px; color:var(--ink-4); }
.segmente button[aria-selected="true"]{ background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.1); }
.vliste{ display:grid; grid-template-columns:repeat(auto-fill, minmax(330px,1fr)); gap:14px; }
.vkarte{ padding:18px 20px 14px; display:flex; flex-direction:column; gap:10px; cursor:pointer; transition:box-shadow .2s, transform .2s; }
.vkarte:hover{ box-shadow:var(--shadow-hover); transform:translateY(-1px); }
.vkarte-kopf{ display:flex; gap:12px; align-items:flex-start; }
.vkarte-kopf h3{ flex:1; font-size:15.5px; font-weight:650; line-height:1.3; letter-spacing:-.01em; }
.vkarte-text{ font-size:13.5px; color:var(--ink-2); line-height:1.5; white-space:pre-line; }
.vkarte-fuss{ display:flex; align-items:center; gap:9px; padding-top:10px; border-top:1px solid var(--line-2); font-size:12.5px; color:var(--ink-3); }
.vkarte-fuss .avatar{ width:24px; height:24px; flex-basis:24px; font-size:9.5px; }
.vkarte-fuss .stufe-select{ margin-left:auto; }
.uliste{ display:flex; flex-direction:column; gap:14px; max-width:860px; }
.ukarte{ padding:18px 22px 16px; display:flex; flex-direction:column; gap:12px; border-left:4px solid transparent; }
.ukarte.neu{ border-left-color:var(--orange); }
.ukarte-kopf{ display:flex; gap:12px; align-items:flex-start; }
.ukarte-kopf > div{ flex:1; min-width:0; }
.ukarte-kopf h3{ font-size:16px; font-weight:650; letter-spacing:-.01em; line-height:1.3; }
.ukarte-text{ font-size:14px; color:var(--ink-2); line-height:1.55; }
.ukarte-fuss{ display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; padding-top:10px; border-top:1px solid var(--line-2); }
.ukarte-fuss .btn:first-of-type{ margin-left:auto; }
.lesestand{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-3); }
.lesestand .ic{ width:15px; height:15px; }
.lesestand.ok{ color:var(--ok); }
.kommentare{ list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:12px; clear:both; }
.kommentar{ display:flex; gap:10px; align-items:flex-start; }
.kommentar .avatar{ width:26px; height:26px; flex-basis:26px; font-size:10px; }
.kommentar p{ margin-top:2px; font-size:13.5px; white-space:pre-line; }
.kommentar-neu{ clear:both; }
@media (max-width: 900px){
  .vliste{ grid-template-columns:minmax(0,1fr); }
  .segmente{ width:100%; }
  .segmente button{ flex:1; justify-content:center; }
  .ukarte-fuss .btn:first-of-type{ margin-left:0; }
}

/* Antworten unter Updates, Aufträge an Claude */
.antworten{ display:flex; flex-direction:column; gap:10px; padding-top:12px; border-top:1px solid var(--line-2); }
.antworten .kommentare{ margin:0; }
.antwort-form{ display:flex; flex-direction:column; gap:8px; }
.antwort-form textarea{ width:100%; min-height:44px; padding:9px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); resize:vertical; line-height:1.45; transition:border-color .15s, box-shadow .15s, background .15s; }
.antwort-form textarea:focus{ outline:none; background:var(--surface); border-color:var(--blau); box-shadow:0 0 0 4px color-mix(in srgb, var(--blau) 18%, transparent); }
.antwort-knoepfe{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.antwort-knoepfe button[value="claude"]{ color:#9A5220; background:color-mix(in srgb, #C2703D 14%, var(--surface)); }
.antwort-knoepfe button[value="claude"]:hover{ background:color-mix(in srgb, #C2703D 22%, var(--surface)); }

/* Kundenwünsche */
.kunde-avatar{ background:var(--ink-3) !important; }
.kunden-fs{ box-shadow:0 0 0 2px color-mix(in srgb, var(--blau) 35%, transparent), var(--shadow); }