/* Vertriebs-CRM – Stil. Schriften liegen lokal (SIL Open Font License). */
@font-face{font-family:"Archivo";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/archivo-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/archivo-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/archivo-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2")}

/* Grundstil der Seite */
:root{box-sizing:border-box}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}

/* ---------- Oberfläche (unverändert übernommen) ---------- */
:root{
  color-scheme: light;
  --bg:#eef1f3; --surface:#fbfcfd; --surface-2:#f1f4f6; --surface-3:#e5eaee;
  --line:#dbe1e5; --line-2:#c5ccd2;
  --ink:#101416; --ink-2:#4c545a; --ink-3:#7c858b;
  --accent:#00718c; --accent-2:#005a70; --accent-ink:#ffffff; --accent-soft:#d8eff7;
  --good:#0ca30c; --warn:#fab219; --serious:#ec835a; --crit:#d03b3b;
  --good-ink:#006300; --crit-ink:#a82c2c;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100;
  --s5:#e87ba4; --s6:#008300; --s7:#4a3aa7; --s8:#e34948;
  --o1:#86b6ef; --o2:#5598e7; --o3:#2a78d6; --o4:#256abf; --o5:#184f95;
  --q0:#f1f4f6; --q1:#cde2fb; --q2:#9ec5f4; --q3:#6da7ec; --q4:#3987e5; --q5:#256abf;
  --q-ink-hi:#ffffff; --q-ink-lo:#10130f;
  --shadow:0 1px 2px rgba(16,20,22,.05), 0 8px 24px -12px rgba(16,20,22,.18);
  --shadow-lg:0 2px 6px rgba(16,20,22,.07), 0 24px 60px -20px rgba(16,20,22,.32);
  --ring:rgba(0,113,140,.35);
  --radius:10px;
  --font-d:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-b:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-m:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#0b0e10; --surface:#161a1d; --surface-2:#1d2226; --surface-3:#252b30;
    --line:#2b3136; --line-2:#3a4147;
    --ink:#eff3f5; --ink-2:#b2babf; --ink-3:#828b91;
    --accent:#35cff5; --accent-2:#62ddfa; --accent-ink:#03202a; --accent-soft:#0d2c36;
    --good:#0ca30c; --warn:#fab219; --serious:#ec835a; --crit:#d03b3b;
    --good-ink:#3cc23c; --crit-ink:#e77070;
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
    --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767;
    --o1:#9ec5f4; --o2:#6da7ec; --o3:#3987e5; --o4:#256abf; --o5:#184f95;
    --q0:#1d2226; --q1:#0d366b; --q2:#104281; --q3:#184f95; --q4:#256abf; --q5:#3987e5;
    --q-ink-hi:#ffffff; --q-ink-lo:#cfd8e6;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
    --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 24px 60px -20px rgba(0,0,0,.8);
    --ring:rgba(53,207,245,.4);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0b0e10; --surface:#161a1d; --surface-2:#1d2226; --surface-3:#252b30;
  --line:#2b3136; --line-2:#3a4147;
  --ink:#eff3f5; --ink-2:#b2babf; --ink-3:#828b91;
  --accent:#35cff5; --accent-2:#62ddfa; --accent-ink:#03202a; --accent-soft:#0d2c36;
  --good-ink:#3cc23c; --crit-ink:#e77070;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
  --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767;
  --o1:#9ec5f4; --o2:#6da7ec; --o3:#3987e5; --o4:#256abf; --o5:#184f95;
  --q0:#1d2226; --q1:#0d366b; --q2:#104281; --q3:#184f95; --q4:#256abf; --q5:#3987e5;
  --q-ink-hi:#ffffff; --q-ink-lo:#cfd8e6;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 24px 60px -20px rgba(0,0,0,.8);
  --ring:rgba(53,207,245,.4);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-b); font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-d); margin:0; text-wrap:balance; letter-spacing:-.01em}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms !important; transition-duration:.01ms !important}}

/* ---------- shell ---------- */
.app{display:grid; grid-template-columns:236px 1fr; min-height:100vh}
.side{
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:2px; padding:18px 12px;
  position:sticky; top:0; height:100vh; overflow:auto;
}
.brand{display:flex; align-items:center; gap:10px; padding:4px 8px 18px}
.brand .mark{
  width:32px;height:32px;border-radius:8px; flex:none; display:block;
  box-shadow:0 1px 3px rgba(1,213,253,.35);
}
.brand b{font-family:var(--font-d); font-size:15px; font-weight:700; letter-spacing:-.02em; display:block; line-height:1.15}
.brand span{font-family:var(--font-m); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.navlabel{font-family:var(--font-m); font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); padding:14px 8px 6px}
.nav{display:flex; flex-direction:column; gap:1px}
.nav button{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:none; border:0; padding:8px 10px; border-radius:8px; color:var(--ink-2); font-weight:500;
}
.nav button:hover{background:var(--surface-2); color:var(--ink)}
.nav button[aria-current="page"]{background:var(--accent-soft); color:var(--accent-2); font-weight:600}
:root[data-theme="dark"] .nav button[aria-current="page"],
:root:not([data-theme="light"]) .nav button[aria-current="page"]{color:var(--accent-2)}
.nav .ic{width:18px; flex:none; display:grid; place-items:center; opacity:.9}
.nav .cnt{margin-left:auto; font-family:var(--font-m); font-size:11px; color:var(--ink-3)}
.side-foot{margin-top:auto; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:6px}
.dbstate{display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--ink-3); padding:4px 8px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--good); flex:none}
.dot.off{background:var(--warn)}

.main{min-width:0; display:flex; flex-direction:column}
.topbar{
  position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px; padding:12px 24px;
}
.search{position:relative; flex:1; max-width:420px}
.search input{
  width:100%; padding:8px 12px 8px 34px; border-radius:8px; border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink);
}
.search svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--ink-3)}
.results{
  position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--surface);
  border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow-lg); z-index:40;
  max-height:340px; overflow:auto; padding:6px;
}
.results button{display:block; width:100%; text-align:left; background:none; border:0; padding:7px 9px; border-radius:7px; color:var(--ink)}
.results button:hover{background:var(--surface-2)}
.results small{color:var(--ink-3); display:block; font-size:11.5px}
.results .grp{font-family:var(--font-m); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); padding:8px 9px 4px}

.content{padding:22px 24px 64px; max-width:1440px; width:100%}
.viewhead{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:18px}
.viewhead h1{font-size:24px; font-weight:700}
.viewhead p{margin:2px 0 0; color:var(--ink-2); font-size:13px}
.viewhead .sp{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}

/* ---------- controls ---------- */
.btn{
  display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:8px;
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink); font-weight:500; font-size:13px;
}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600}
.btn.primary:hover{background:var(--accent-2); border-color:var(--accent-2)}
.btn.ghost{border-color:transparent; background:transparent; color:var(--ink-2)}
.btn.ghost:hover{background:var(--surface-2); color:var(--ink)}
.btn.danger{color:var(--crit-ink); border-color:var(--line-2)}
.btn.danger:hover{background:color-mix(in srgb, var(--crit) 12%, transparent)}
.btn.sm{padding:4px 9px; font-size:12px}
.filters{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:16px}
.field{display:flex; flex-direction:column; gap:4px}
.field > label, .flabel{font-family:var(--font-m); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
select,input[type=text],input[type=number],input[type=date],input[type=month],input[type=email],input[type=tel],textarea{
  padding:7px 10px; border-radius:8px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink);
  font-size:13px; min-width:0;
}
textarea{resize:vertical; min-height:76px; line-height:1.5}
input[type=range]{accent-color:var(--accent)}
.seg{display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:2px; gap:2px}
.seg button{border:0; background:none; padding:5px 11px; border-radius:6px; font-size:12.5px; color:var(--ink-2); font-weight:500}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow); font-weight:600}

/* ---------- panels ---------- */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius)}
.panel > header{display:flex; align-items:baseline; gap:10px; padding:14px 16px 0}
.panel > header h3{font-size:14.5px; font-weight:600}
.panel > header .sub{font-size:12px; color:var(--ink-3); margin-left:auto; font-family:var(--font-m)}
.panel .body{padding:14px 16px 16px}
.grid{display:grid; gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1080px){.g2,.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}

/* KPI tiles */
.kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:16px}
@media (max-width:1080px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.kpis{grid-template-columns:minmax(0,1fr)}}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; display:flex; flex-direction:column; gap:3px}
.kpi .k{font-family:var(--font-m); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.kpi .v{font-family:var(--font-d); font-size:27px; font-weight:700; letter-spacing:-.02em; line-height:1.1}
.kpi .n{font-size:12px; color:var(--ink-2)}
.kpi.lead{border-left:3px solid var(--accent)}

/* ---------- charts ---------- */
.hbars{display:flex; flex-direction:column; gap:9px}
.hbar{display:grid; grid-template-columns:minmax(88px,auto) 1fr minmax(72px,auto); gap:10px; align-items:center}
.hbar .lb{font-size:12.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hbar .tr{background:var(--surface-2); border-radius:4px; height:16px; position:relative; overflow:hidden}
.hbar .fl{height:100%; border-radius:0 4px 4px 0; min-width:2px; transition:width .3s ease}
.hbar .vl{font-family:var(--font-b); font-variant-numeric:tabular-nums; font-size:12.5px; text-align:right; color:var(--ink); font-weight:500}
.hbar .sub{font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums}

.cols{display:flex; align-items:flex-end; gap:6px; height:190px; padding-top:22px}
.col{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; height:100%; min-width:0}
.col .stack{width:100%; display:flex; flex-direction:column; justify-content:flex-end; gap:2px; position:relative}
.col .seg2{border-radius:0; min-height:2px}
.col .stack > :first-child{border-radius:4px 4px 0 0}
.col .cap{position:absolute; bottom:100%; left:0; right:0; text-align:center; font-size:10.5px; color:var(--ink-2); font-variant-numeric:tabular-nums; padding-bottom:4px; white-space:nowrap}
.col .xl{font-size:10.5px; color:var(--ink-3); font-family:var(--font-m); text-align:center; white-space:nowrap}
.axis{border-top:1px solid var(--line-2); margin-top:0}

.legend{display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; padding-top:10px; border-top:1px solid var(--line)}
.legend span{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-2)}
.legend i{width:10px;height:10px;border-radius:3px; display:inline-block}

.heat{display:grid; gap:2px; overflow-x:auto}
.heat .hc{padding:9px 8px; border-radius:4px; font-size:12px; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
.heat .hh{font-family:var(--font-m); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding:4px 8px; text-align:right; white-space:nowrap}
.heat .hr{font-size:12px; color:var(--ink-2); padding:9px 8px 9px 0; white-space:nowrap}

#tip{
  position:fixed; z-index:200; pointer-events:none; background:var(--surface); color:var(--ink);
  border:1px solid var(--line-2); border-radius:8px; box-shadow:var(--shadow-lg);
  padding:7px 10px; font-size:12px; max-width:260px; opacity:0; transition:opacity .12s;
}
#tip b{font-weight:600; display:block; margin-bottom:2px}
#tip .r{display:flex; justify-content:space-between; gap:14px; font-variant-numeric:tabular-nums; color:var(--ink-2)}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
table{border-collapse:collapse; width:100%; font-size:13px}
th{
  text-align:left; font-family:var(--font-m); font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500; padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap;
  position:sticky; top:0; background:var(--surface); z-index:1;
}
th.sortable{cursor:pointer} th.sortable:hover{color:var(--ink)}
td{padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{cursor:pointer}
tbody tr:hover td{background:var(--surface-2)}
.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.strong{font-weight:600}
.muted{color:var(--ink-3)}
.empty{padding:44px 20px; text-align:center; color:var(--ink-3)}
.empty h4{font-size:15px; color:var(--ink-2); margin-bottom:6px}

/* ---------- chips ---------- */
.chip{
  display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:999px;
  font-size:11.5px; font-weight:500; background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line);
  white-space:nowrap;
}
.chip i{width:8px;height:8px;border-radius:50%; display:inline-block}
.chip.solid{border-color:transparent; color:#fff}
.bu-heating i{background:var(--s2)} .bu-batteries i{background:var(--s3)}
.bu-solar i{background:var(--s4)} .bu-sonstige i{background:var(--s1)}
.chip.won{background:color-mix(in srgb,var(--good) 16%,transparent); color:var(--good-ink); border-color:color-mix(in srgb,var(--good) 34%,transparent)}
.chip.lost{background:color-mix(in srgb,var(--crit) 14%,transparent); color:var(--crit-ink); border-color:color-mix(in srgb,var(--crit) 34%,transparent)}
.chip.due{background:color-mix(in srgb,var(--warn) 20%,transparent); color:var(--ink); border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.avatar{
  width:24px;height:24px;border-radius:50%; display:inline-grid; place-items:center; flex:none;
  background:var(--surface-3); color:var(--ink-2); font-family:var(--font-m); font-size:10px; font-weight:600;
  border:1px solid var(--line);
}
.mixbar{display:flex; gap:2px; height:6px; border-radius:3px; overflow:hidden; min-width:60px}
.mixbar i{display:block; height:100%}

/* ---------- kanban ---------- */
.board{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(262px,1fr); gap:12px; overflow-x:auto; padding-bottom:10px; align-items:start}
.lane{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-direction:column; min-height:140px}
.lane.over{border-color:var(--accent); background:var(--accent-soft)}
.lane > header{padding:11px 12px 9px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px}
.lane > header .nm{font-weight:600; font-size:13px; display:flex; align-items:center; gap:7px}
.lane > header .nm i{width:8px;height:8px;border-radius:2px}
.lane > header .amt{margin-left:auto; font-family:var(--font-m); font-size:11px; color:var(--ink-3); text-align:right}
.lane .cards{padding:9px; display:flex; flex-direction:column; gap:8px}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:10px 11px;
  display:flex; flex-direction:column; gap:7px; cursor:grab; box-shadow:var(--shadow);
}
.card:hover{border-color:var(--line-2)}
.card.dragging{opacity:.45}
.card .t{font-weight:600; font-size:13px; line-height:1.3}
.card .c{font-size:12px; color:var(--ink-2); display:flex; align-items:center; gap:6px}
.card .m{display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.card .m .v{color:var(--ink); font-weight:600; font-size:13px; font-family:var(--font-d)}

/* ---------- drawer & modal ---------- */
.scrim{position:fixed; inset:0; background:rgba(8,10,8,.42); z-index:90; opacity:0; animation:fade .18s forwards}
@keyframes fade{to{opacity:1}}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(620px,100%); background:var(--bg);
  border-left:1px solid var(--line); z-index:100; display:flex; flex-direction:column;
  box-shadow:var(--shadow-lg); transform:translateX(12px); opacity:0; animation:slide .2s forwards;
}
@keyframes slide{to{transform:none; opacity:1}}
.drawer > header{padding:16px 20px 12px; border-bottom:1px solid var(--line); background:var(--surface)}
.drawer .dbody{padding:16px 20px 40px; overflow:auto; flex:1; display:flex; flex-direction:column; gap:14px}
.drawer h2{font-size:19px; font-weight:700}
.tabs{display:flex; gap:2px; margin-top:12px}
.tabs button{background:none; border:0; padding:7px 11px; border-radius:7px 7px 0 0; color:var(--ink-3); font-size:13px; font-weight:500; border-bottom:2px solid transparent}
.tabs button[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent); font-weight:600}
.kv{display:grid; grid-template-columns:130px 1fr; gap:7px 14px; font-size:13px}
.kv dt{color:var(--ink-3); font-size:12px}
.kv dd{margin:0; color:var(--ink)}

.modal{
  position:fixed; z-index:100; top:50%; left:50%; transform:translate(-50%,-48%);
  width:min(700px, calc(100% - 32px)); max-height:88vh; overflow:auto;
  background:var(--surface); border:1px solid var(--line-2); border-radius:14px; box-shadow:var(--shadow-lg);
  opacity:0; animation:pop .18s forwards;
}
@keyframes pop{to{opacity:1; transform:translate(-50%,-50%)}}
.modal > header{padding:18px 20px 4px}
.modal h2{font-size:18px; font-weight:700}
.modal form{padding:14px 20px 18px; display:grid; gap:13px}
.modal footer{display:flex; gap:8px; justify-content:flex-end; padding:14px 20px 18px; border-top:1px solid var(--line); position:sticky; bottom:0; background:var(--surface)}
.frow{display:grid; gap:13px; grid-template-columns:repeat(2,minmax(0,1fr))}
.frow.f3{grid-template-columns:repeat(3,minmax(0,1fr))}
.frow.f4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:560px){.frow,.frow.f3,.frow.f4{grid-template-columns:minmax(0,1fr)}}
.fieldset{border:1px solid var(--line); border-radius:10px; padding:12px 14px 14px; display:grid; gap:12px}
.fieldset > legend{font-family:var(--font-m); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); padding:0 6px}
.hint{font-size:11.5px; color:var(--ink-3)}
.sumline{display:flex; justify-content:space-between; align-items:baseline; padding-top:6px; border-top:1px dashed var(--line-2)}
.sumline b{font-family:var(--font-d); font-size:18px}

/* ---------- timeline ---------- */
.tl{display:flex; flex-direction:column; gap:0}
.tl .it{display:grid; grid-template-columns:26px 1fr; gap:12px; padding-bottom:14px; position:relative}
.tl .it::before{content:""; position:absolute; left:12px; top:26px; bottom:0; width:1px; background:var(--line)}
.tl .it:last-child::before{display:none}
.tl .ic{width:26px;height:26px;border-radius:50%; display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2); z-index:1}
.tl .hd{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.tl .hd b{font-size:13px; font-weight:600}
.tl .hd time{font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; margin-left:auto; font-family:var(--font-m)}
.tl .tx{font-size:12.5px; color:var(--ink-2); margin-top:3px; white-space:pre-wrap; line-height:1.5}
.tl .meta{display:flex; gap:7px; align-items:center; margin-top:6px; flex-wrap:wrap}

.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:300;
  background:var(--ink); color:var(--bg); padding:9px 16px; border-radius:999px; font-size:13px;
  box-shadow:var(--shadow-lg); opacity:0; animation:toast 3s forwards;
}
@keyframes toast{8%{opacity:1} 88%{opacity:1} 100%{opacity:0}}
.skel{background:var(--surface-2); border-radius:6px; height:12px; animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.5}}

@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .side{position:static; height:auto; flex-direction:row; align-items:center; gap:8px; overflow-x:auto; padding:10px 12px; border-right:0; border-bottom:1px solid var(--line)}
  .brand{padding:0 8px 0 0} .brand .txt{display:none}
  .navlabel,.side-foot{display:none}
  .nav{flex-direction:row; gap:4px}
  .nav button{white-space:nowrap} .nav .cnt{display:none}
  .content{padding:16px 14px 60px} .topbar{padding:10px 14px}
}

/* ---------- Ergänzungen für die selbst gehostete Fassung ---------- */
.crm-login{min-height:100vh; display:grid; place-items:center; padding:24px}
.crm-login .panel{width:min(400px,100%); box-shadow:var(--shadow-lg)}
.crm-login .body{display:grid; gap:14px; padding:26px 26px 24px}
.crm-login .brand{padding:0 0 6px}
.crm-login h1{font-size:20px; font-weight:700}
.crm-login .msg{font-size:12.5px; color:var(--crit-ink); min-height:18px}
.crm-login input{width:100%; padding:9px 11px; font-size:14px}
.crm-login .btn{justify-content:center; padding:9px 12px; font-size:14px}
.crm-setup{max-width:640px; margin:0 auto; padding:32px 20px 64px; display:grid; gap:16px}
.crm-setup h1{font-size:24px; font-weight:700}
.crm-setup p{margin:0; color:var(--ink-2)}
.crm-setup .body{display:grid; gap:13px}
.crm-setup input{width:100%}
.crm-setup .note{padding:10px 12px; border-radius:8px; background:var(--surface-2); border:1px solid var(--line); font-size:12.5px; color:var(--ink-2)}
.crm-setup .err{background:color-mix(in srgb,var(--crit) 12%,transparent); border-color:color-mix(in srgb,var(--crit) 34%,transparent); color:var(--crit-ink)}
.crm-setup code{font-family:var(--font-m); font-size:12px; word-break:break-all}
.crm-acct{display:inline-flex; align-items:center; gap:8px; padding:4px 10px 4px 4px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); font-size:13px; font-weight:500; color:var(--ink)}
.crm-acct:hover{background:var(--surface-2)}
.crm-acct .nm{max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (max-width:680px){.crm-acct .nm{display:none} .crm-acct{padding:4px}}
.crm-list{display:flex; flex-direction:column; gap:8px}
.crm-list .rowx{display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:9px; background:var(--surface)}
.crm-list .rowx .grow{flex:1; min-width:0}
.crm-list .rowx small{display:block; color:var(--ink-3); font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.crm-menu{display:flex; flex-direction:column; gap:8px}
.crm-menu .btn{justify-content:flex-start}
/* Am Handy: Navigation oben bleibt flach, auch wenn die Seite darunter kurz ist. */
@media (max-width:860px){.app{grid-template-rows:auto 1fr}}
/* Passwortfelder im selben Stil wie die übrigen Eingabefelder. */
input[type=password]{padding:7px 10px; border-radius:8px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); font-size:13px; min-width:0}
/* „Alle Daten löschen“ gibt es in der selbst gehosteten Fassung nicht mehr als Knopf. */
[data-act="wipe"]{display:none!important}

/* Knopf für nicht umkehrbare Aktionen */
.btn.primary.danger{background:var(--crit); border-color:var(--crit); color:#fff}
.btn.primary.danger:hover{background:var(--crit-ink); border-color:var(--crit-ink)}
label.rowx input[type=checkbox]{flex:none; width:16px; height:16px; accent-color:var(--crit)}
.modal .note{padding:10px 12px; border-radius:8px; background:var(--surface-2); border:1px solid var(--line); font-size:12.5px; color:var(--ink-2)}
.modal .note.err{border-color:var(--crit); color:var(--crit-ink)}
.modal .note .btn{margin-left:6px}