/* =====================================================================
   Blum CRM - Stylesheet
   Aufbau: Schrift (lokal), :root 1:1 aus der Finance Suite (final, nicht
   anfassen), Hilfstoken --crm-* fuer Werte ohne Finance-Suite-Token,
   danach die Komponenten aus docs/vorschau.html, umgestellt auf die Tokens.
   ===================================================================== */

/* --- Inter, lokal (static/fonts/, Lizenz inter-LICENSE.txt) ------------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fonts/inter-latin-700-normal.woff2") format("woff2"); }

/* --- Design-Tokens: 1:1 aus finance-suite/static/app.css Z. 9-108 -------- */
:root {
  /* --- Hintergrund & Flächen --- */
  --bg-deep:        #05060d;
  --bg-mid:         #0a0f1f;
  --bg-glow-1:      rgba(64, 120, 255, 0.14);
  --bg-glow-2:      rgba(150, 90, 255, 0.12);

  /* --- Glas-Kacheln --- */
  --tile-bg:        rgba(20, 27, 48, 0.55);
  --tile-bg-hover:  rgba(28, 37, 64, 0.68);
  --tile-border:    rgba(255, 255, 255, 0.08);
  --tile-border-hi: rgba(120, 160, 255, 0.35);
  /* Design-Update Stufe 1 (2026-08): 8px statt 22px - App-Karte -> Panel.
     Wirkt auf .tile, .modal-box, .tile-drop-slot, .at-risk, .auth-card. */
  --tile-radius:    8px;
  --tile-shadow:    0 8px 30px rgba(0, 0, 0, 0.45);
  /* Design-Update Stufe 1 (2026-08): Glaseffekt zurueckhaltender. */
  --blur:           8px;

  /* --- Text --- */
  --text-strong:    #f4f7ff;
  --text:           #c7cfe2;
  --text-dim:       #8a93ad;

  /* --- Leuchtende Akzentfarben --- */
  --accent:         #5b8cff;   /* Blau  */
  --accent-2:       #a06bff;   /* Violett */
  --accent-3:       #35e0c8;   /* Türkis */
  --accent-4:       #ffb454;   /* Gold  */
  /* kategoriale Serienfarben (Charts mit mehr als vier Reihen, keine UI-Semantik) */
  --accent-5:       #6ed3ff;   /* Himmelblau */
  --accent-6:       #ff6bd6;   /* Pink */
  --accent-7:       #f2e35c;   /* Gelb */
  --accent-8:       #ffb09a;   /* Lachs */
  --accent-glow:    0 0 10px rgba(91, 140, 255, .35);   /* Stufe 1: gedaempft (vorher 22px/.55) */

  /* --- Semantik --- */
  --pos:            #3ddc84;
  --neg:            #ff5d6c;

  /* --- Maße --- */
  --gap:            var(--sp-4);
  --shell-max:      1180px;
  /* Anschluss an die 64px-Topbar, bewusst ausserhalb der sp-Skala. */
  --shell-pad-top:  28px;

  /* --- Typografie-Skala (Design-Update Stufe 2, 2026-08) ---
     Sieben Stufen, Zuordnung nach Funktion:
     micro  = Kleinstlabels, Einheiten, Metadaten
     meta   = Zeitangaben, Quellen, sekundaere Labels
     body   = Fliesstext, Tabellenzellen, Listenzeilen
     ui     = Bedienelemente, betonte Werte
     sub    = Zwischentitel, Modal-/Panel-Titel
     title  = Abschnitts- und Seitentitel
     display= grosse Zahlen */
  --fs-micro:       .62rem;
  --fs-meta:        .72rem;
  --fs-body:        .8rem;
  --fs-ui:          .9rem;
  --fs-sub:         1.05rem;
  --fs-title:       1.3rem;
  --fs-display:     1.6rem;
  /* Achte Stufe nur fuer Zahlen im Zentrum eines Diagramms (F&G-Ring):
     als Diagramm-Beschriftung braucht sie mehr Masse als --fs-display,
     sonst wirkt der Ring leer. */
  --fs-gauge:       2rem;

  /* --- Tabellendichte (Design-Update Stufe 3, 2026-08) ---
     Zwei Dichten statt vier: Standard fuer Listentabellen
     (~30px Zeile), Kompakt fuer Matrizen und Heatmaps (~26px). */
  --cell-std:       7px 12px;
  --cell-std-head:  8px 12px;
  --cell-compact:   6px 4px;

  /* --- Abstandsskala (Design-Update Stufe 5, 2026-08) ---
     Vierer-Treppe fuer padding und gap. 1-2px (Feinausgleich) und
     Layoutmasse ueber 36px bleiben Literale. */
  --sp-1:           4px;
  --sp-2:           8px;
  --sp-3:           12px;
  --sp-4:           16px;
  --sp-5:           24px;
  --sp-6:           32px;

  /* --- Uebergaenge (Design-Update Stufe 5, 2026-08) ---
     Drei Dauern statt zwoelf. Kurve: ease - bereits an 55 Stellen
     etabliert und ruhiger als das punktuell genutzte
     cubic-bezier(.2,.7,.3,1), das sprunghafter startet; beide ohne
     Nachschwingen. Ausnahmen: Splash-Animation, Globus-Marker. */
  --dur-fast:       100ms;   /* Hover, Fokus, Farbwechsel */
  --dur-base:       160ms;   /* Aufklappen, Einblenden, Panels */
  --dur-slow:       240ms;   /* groessere Bewegungen, Ansichtswechsel */
  /* Dateneffekte, keine UI-Uebergaenge - die Bewegung selbst ist dort
     die Aussage (F&G-Zeiger/-Bogen, Dominanz-, Mover-Balken, Donut). */
  --dur-viz:        600ms;
  --ease:           ease;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
}

/* --- Hilfstoken ohne Finance-Suite-Entsprechung ---------------------------
   Werte aus docs/vorschau.html. Bewusst ausserhalb von :root, damit der
   :root-Block unveraendert bleibt (docs/spezifikation.md, Sprache und Optik). */
html {
  --crm-bg-2:    #0D1429;                  /* Spalte, Panel, Kachel, Login-Karte, Dialog */
  --crm-panel:   #101A33;                  /* Karte, Popover */
  --crm-panel-2: #152040;                  /* Karte beim Hover */
  --crm-line-2:  rgba(255,255,255,.16);    /* Feld-, Knopf-, Chip-Rahmen */
  --crm-r:       6px;                      /* Radius Panel, Spalte, Band */
  --crm-r-s:     4px;                      /* Radius Knopf, Feld, Karte */
  --crm-top:     48px;                     /* Hoehe Kopfzeile */
  --crm-filters: 50px;                     /* Hoehe Filterleiste */
}

/* --- Grundlage ------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg-deep);color:var(--text-strong);font-family:var(--font);font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{font-size:16px}
a{color:var(--accent);text-decoration:none}
svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* Kopfzeile */
.crm-top{position:fixed;top:0;left:0;right:0;height:var(--crm-top);background:var(--bg-mid);border-bottom:1px solid var(--tile-border);display:flex;align-items:center;padding:0 18px;gap:28px;z-index:40}
body.login .crm-top{display:none}
.crm-brand{display:flex;align-items:baseline;gap:7px;font-weight:700;font-size:15px;letter-spacing:.01em}
.crm-brand span{font-weight:500;color:var(--text-dim);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.crm-nav{display:flex;gap:4px;height:100%}
.crm-nav a{display:flex;align-items:center;padding:0 12px;color:var(--text);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer}
.crm-nav a[hidden]{display:none}
.crm-nav a.on{color:var(--text-strong);border-bottom-color:var(--accent)}
.crm-top .sp{flex:1}
.crm-user{display:flex;align-items:center;gap:10px;color:var(--text)}
.crm-user .crm-avatar{width:24px;height:24px;font-size:11px}
.crm-iconbtn{background:transparent;border:0;color:var(--text-dim);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--crm-r-s)}
.crm-iconbtn:hover:not(:disabled){background:rgba(255,255,255,.06);color:var(--text-strong)}

main{padding-top:var(--crm-top)}
body.login main{padding-top:0}

/* Bausteine */
.crm-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--crm-line-2);border-radius:var(--crm-r-s);padding:0 11px;height:30px;font-weight:500;color:var(--text-strong);cursor:pointer;white-space:nowrap}
.crm-btn:hover:not(:disabled){background:rgba(255,255,255,.05)}
.crm-btn--primary{background:var(--accent);border-color:var(--accent);color:#fff}
.crm-btn--primary:hover:not(:disabled){background:#6d99ff}
/* Sperren nach Finance-Suite-Muster (app.css dort Z. 1906 und 4832):
   waehrend eines Requests (withBusy) .55, dauerhaft gesperrt .4. */
.crm-btn:disabled,.crm-iconbtn:disabled{opacity:.55;cursor:default}
.crm-btn.crm-btn--locked:disabled{opacity:.4;cursor:not-allowed}
.crm-btn--sm{height:26px;padding:0 9px;font-size:12px}
.crm-field{background:var(--bg-deep);border:1px solid var(--crm-line-2);border-radius:var(--crm-r-s);height:30px;padding:0 9px;color:var(--text-strong);outline:none;min-width:0;color-scheme:dark}
/* Datei-Auswahl: das echte input bleibt unsichtbar (der native Knopf
   traegt die Sprache des Browsers), sichtbar ist ein crm-btn, der es oeffnet. */
.crm-file{display:flex;align-items:center;gap:10px;min-width:0}
.crm-file input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.crm-file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-field:focus{border-color:var(--accent)}
select.crm-field{appearance:none;-webkit-appearance:none;padding-right:26px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a93ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:14px}
textarea.crm-field{height:auto;padding:7px 9px;resize:vertical}
.crm-search{position:relative}
.crm-search svg{position:absolute;left:8px;top:7px;color:var(--text-dim)}
.crm-search .crm-field{padding-left:28px;width:220px}
.crm-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:1px 7px;border:1px solid var(--crm-line-2);border-radius:3px;color:var(--text);white-space:nowrap}
.crm-chip .dot{width:6px;height:6px;border-radius:50%;background:var(--text-dim)}
.crm-chip--open .dot{background:var(--accent)}
.crm-chip--setting .dot{background:var(--accent-2)}
.crm-chip--closing .dot{background:var(--accent-3)}
.crm-chip--lost{color:var(--text-dim)}
.crm-chip--won .dot{background:var(--pos)}
.crm-chip--won{color:var(--pos);border-color:rgba(61,220,132,.35)}
.crm-avatar{width:20px;height:20px;border-radius:50%;background:rgba(91,140,255,.18);color:var(--accent);font-size:10px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.crm-avatar--none{background:rgba(255,255,255,.06);color:var(--text-dim)}
.crm-count{min-width:22px;height:18px;padding:0 6px;border-radius:9px;background:rgba(255,255,255,.07);font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;color:var(--text-strong);font-variant-numeric:tabular-nums}
.crm-muted{color:var(--text-dim)}
.crm-num{font-variant-numeric:tabular-nums}
.crm-label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim)}
.crm-panel{background:var(--crm-bg-2);border:1px solid var(--tile-border);border-radius:var(--crm-r)}
.crm-panel-h{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--tile-border);font-weight:600}
.crm-panel-b{padding:14px}
.crm-page{padding:18px 18px 28px;max-width:1480px}
.crm-page-h{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.crm-page-h h1{font-size:18px;font-weight:600}
.crm-page-h .sp{flex:1}

/* Filterleiste */
.crm-filters{height:var(--crm-filters);display:flex;align-items:center;gap:10px;padding:0 18px;border-bottom:1px solid var(--tile-border);background:var(--bg-deep)}
.crm-filters .sp{flex:1}
/* Lange Quellen oder Namen sollen die Leiste nicht sprengen (Stufe 3). */
.crm-filters select.crm-field{max-width:200px}

/* Board */
.crm-board{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;padding:14px 18px 18px;height:calc(100vh - var(--crm-top) - var(--crm-filters))}
.crm-group{display:flex;flex-direction:column;flex:0 0 auto;min-height:0;--g:var(--accent)}
.crm-group--setting{--g:var(--accent-2)}
.crm-group--closing{--g:var(--accent-3)}
.crm-band{display:flex;align-items:center;gap:10px;padding:7px 10px 7px 12px;border-top:2px solid var(--g);background:linear-gradient(180deg,rgba(255,255,255,.035),transparent);border-radius:var(--crm-r) var(--crm-r) 0 0;margin-bottom:8px}
.crm-band b{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.crm-band-range{font-size:11px}
.crm-band .crm-count{margin-left:auto}
.crm-cols{display:flex;gap:8px;flex:1;min-height:0}
.crm-col{width:188px;flex:0 0 auto;display:flex;flex-direction:column;background:var(--crm-bg-2);border:1px solid var(--tile-border);border-radius:var(--crm-r);min-height:0}
.crm-col--won{border-top:2px solid var(--pos)}
.crm-col--lost{background:var(--bg-mid)}
.crm-col--lost .crm-col-name{color:var(--text-dim)}
.crm-col-head{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 10px;border-bottom:1px solid var(--tile-border);flex:0 0 auto}
.crm-col--lost .crm-col-head{cursor:pointer}
.crm-col-name{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-col-body{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px;min-height:0}
.crm-col-body::-webkit-scrollbar{width:6px}
.crm-col-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px}
.crm-empty{color:var(--text-dim);font-size:12px;text-align:center;padding:14px 0}
.crm-col--collapsed{width:40px}
.crm-col--collapsed .crm-col-head{flex-direction:column;justify-content:flex-start;gap:10px;padding:10px 0;border-bottom:0;height:100%}
.crm-col--collapsed .crm-col-name{writing-mode:vertical-rl;transform:rotate(180deg);overflow:visible}
.crm-col--collapsed .crm-col-body{display:none}

.crm-card{background:var(--crm-panel);border:1px solid var(--tile-border);border-radius:var(--crm-r-s);padding:8px 9px;cursor:pointer;position:relative;flex:0 0 auto}
.crm-card:hover{border-color:var(--crm-line-2);background:var(--crm-panel-2)}
.crm-card-name{font-weight:600;padding-right:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-card-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:6px;font-size:11px;color:var(--text-dim)}
.crm-card-foot{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11px;color:var(--text-dim)}
.crm-card-foot .crm-days{margin-left:auto;display:inline-flex;align-items:center;gap:4px}
.crm-card-foot .crm-days svg{width:12px;height:12px}
.crm-days--old{color:var(--text);font-weight:600}
.crm-card .crm-more{position:absolute;top:5px;right:5px;width:22px;height:22px;display:none}
.crm-card:hover .crm-more{display:inline-flex}
/* Drag & Drop (Stufe 2, nicht in der Vorschau): gezogene Karte gedimmt wie
   eine laufende Sperre, Zielspalte mit Akzentrahmen. */
.crm-card--drag{opacity:.55}
.crm-col--drop{border-color:var(--accent)}
/* Waehrend eine Verschiebung laeuft: Karten sichtbar gesperrt (.55, default). */
.crm-board--busy .crm-card{opacity:.55;cursor:default}

/* Stufen-Popover */
.crm-pop{position:fixed;z-index:60;background:var(--crm-panel);border:1px solid var(--crm-line-2);border-radius:var(--crm-r);box-shadow:0 10px 30px rgba(0,0,0,.5);width:250px;max-height:70vh;overflow-y:auto;display:none;padding:6px 0}
.crm-pop.on{display:block}
.crm-pop-h{padding:6px 12px 4px;font-size:11px;color:var(--text-dim);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.crm-pop-g{padding:6px 12px 2px;font-size:11px;color:var(--text);font-weight:600;border-top:1px solid var(--tile-border);margin-top:4px}
.crm-pop-i{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 20px;cursor:pointer;color:var(--text)}
.crm-pop-i:hover{background:rgba(255,255,255,.05);color:var(--text-strong)}
.crm-pop-i.cur{color:var(--text-strong);font-weight:600}
.crm-pop-i .dot{width:6px;height:6px;border-radius:50%;background:var(--text-dim)}
.crm-pop-i.won .dot{background:var(--pos)}
.crm-pop-i.open .dot{background:var(--g)}
/* Gruppenfarbe je Eintrag: in der Vorschau inline (style="--g:..."), hier als Klasse. */
.crm-pop-i--erstkontakt{--g:var(--accent)}
.crm-pop-i--setting{--g:var(--accent-2)}
.crm-pop-i--closing{--g:var(--accent-3)}

/* Tabellen */
.crm-table{width:100%;border-collapse:collapse}
.crm-table th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);padding:8px 12px;border-bottom:1px solid var(--crm-line-2);white-space:nowrap}
.crm-table td{padding:8px 12px;border-bottom:1px solid var(--tile-border);vertical-align:middle;white-space:nowrap}
.crm-table tr:hover td{background:rgba(255,255,255,.025)}
.crm-table td.r,.crm-table th.r{text-align:right}
.crm-table--dense th,.crm-table--dense td{padding:6px 10px}
.crm-link{cursor:pointer;font-weight:600}
.crm-link:hover{color:var(--accent)}
/* Liste (Stufe 3): Name als echter Link, Farbe wie der span der Vorschau. */
a.crm-link{color:var(--text-strong)}
a.crm-link:hover{color:var(--accent)}
.crm-owner{display:inline-flex;align-items:center;gap:6px}
/* Kopfzeile der Liste: Filterfelder hoechstens 160px breit (sonst
   bestimmt die laengste Stufe oder Quelle die Breite), die Sortierung
   behaelt ihre Breite, die Suche gibt zuerst nach. */
.crm-page-h select.crm-field{flex:0 0 auto;max-width:160px}
.crm-page-h select.crm-list-sort{max-width:none}
.crm-page-h .crm-search{flex:0 1 220px;min-width:140px}
.crm-page-h .crm-search .crm-field{width:100%}
.crm-page-h .crm-iconbtn{flex:0 0 auto}
.crm-iconbtn[hidden]{display:none}
/* Lange Werte (Name, E-Mail, Quelle) gekuerzt, voller Text im title; die
   Tabelle scrollt notfalls im Panel statt die Seite zu verbreitern. */
.crm-list-panel{overflow-x:auto}
.crm-table td.crm-cut{max-width:200px;overflow:hidden;text-overflow:ellipsis}
.crm-table td.crm-cut--short{max-width:150px}
.crm-pager{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:12px;font-size:12px;color:var(--text-dim)}

/* Lead-Akte */
.crm-akte{display:grid;grid-template-columns:1fr 360px;gap:14px}
.crm-form{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.crm-form .full{grid-column:1 / -1}
.crm-f{display:flex;flex-direction:column;gap:5px}
.crm-f label{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim)}
.crm-f .crm-field{width:100%}
.crm-kv{display:grid;grid-template-columns:120px 1fr;gap:8px 10px;align-items:center}
.crm-kv .k{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim)}
.crm-hist{list-style:none;display:flex;flex-direction:column;gap:0;position:relative}
.crm-hist li{position:relative;padding:0 0 14px 22px}
.crm-hist li::before{content:"";position:absolute;left:5px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--text-dim);border:2px solid var(--crm-bg-2);box-shadow:0 0 0 1px var(--crm-line-2)}
.crm-hist li.won::before{background:var(--pos)}
.crm-hist li:not(:last-child)::after{content:"";position:absolute;left:8px;top:15px;bottom:0;width:1px;background:var(--crm-line-2)}
.crm-hist .t{font-size:11px;color:var(--text-dim);font-variant-numeric:tabular-nums}
.crm-hist .s{font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.crm-hist .s svg{width:13px;height:13px;color:var(--text-dim)}
.crm-hist .n{color:var(--text);font-size:12px;margin-top:2px}
.crm-act{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--tile-border)}
.crm-act:last-child{border-bottom:0}
.crm-act .ic{width:28px;height:28px;border-radius:var(--crm-r-s);background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;color:var(--text);flex:0 0 auto}
.crm-act .h{display:flex;gap:8px;font-size:11px;color:var(--text-dim);margin-bottom:2px}
.crm-act .h b{color:var(--text);font-weight:600}
.crm-act p{color:var(--text-strong)}
.crm-compose{display:flex;flex-direction:column;gap:8px;margin-bottom:6px;padding-bottom:12px;border-bottom:1px solid var(--tile-border)}
.crm-tabs{display:flex;gap:4px}
.crm-tabs button{background:transparent;border:1px solid var(--crm-line-2);border-radius:var(--crm-r-s);padding:3px 9px;font-size:12px;color:var(--text);cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.crm-tabs button.on{background:rgba(91,140,255,.15);border-color:var(--accent);color:var(--text-strong)}
.crm-tabs svg{width:13px;height:13px}
/* Akte: Inline-Styles der Vorschau als Klassen. */
.crm-back{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.crm-akte-col{display:flex;flex-direction:column;gap:14px}
.crm-form--single{grid-template-columns:1fr}
.crm-akte-kv{margin-top:14px}
.crm-actions{display:flex;justify-content:flex-end;gap:8px}
.crm-akte-delete{margin-top:14px}
/* hidden-Attribut gegen die display-Regeln der Bausteine durchsetzen. */
.crm-f[hidden],.crm-btn[hidden],.crm-akte[hidden],.crm-akte-delete[hidden]{display:none}

/* Auswertung */
.crm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
.crm-tile{background:var(--crm-bg-2);border:1px solid var(--tile-border);border-radius:var(--crm-r);padding:12px 14px;position:relative}
.crm-tile .v{font-size:26px;font-weight:600;letter-spacing:-.01em;margin-top:4px;font-variant-numeric:tabular-nums}
.crm-tile .s{font-size:11px;color:var(--text-dim);margin-top:2px}
.crm-funnel{display:grid;grid-template-columns:1fr 60px 1fr 60px 1fr 60px 1fr;gap:0;align-items:stretch;margin-bottom:12px}
.crm-funnel .crm-tile{border-radius:var(--crm-r)}
.crm-arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--text-dim);font-size:11px;font-variant-numeric:tabular-nums}
.crm-arrow b{color:var(--text);font-weight:600}
.crm-stats2{display:grid;grid-template-columns:1.2fr 1fr;gap:12px;margin-bottom:12px}
.crm-bar{display:grid;grid-template-columns:200px 1fr 34px;gap:10px;align-items:center;padding:3px 0;font-size:12px}
.crm-bar .bt{height:8px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden}
.crm-bar .bf{height:100%;background:var(--g,var(--accent));border-radius:4px}
.crm-bar .n{text-align:right;font-variant-numeric:tabular-nums;color:var(--text)}
.crm-bar.lost .bf{background:var(--text-dim)}
.crm-bar.won .bf{background:var(--pos)}
.crm-foot{font-size:11px;color:var(--text-dim);margin-top:10px}
/* Auswertung, Seitenteile (Stufe 4). Werte aus docs/vorschau.html Z. 357, 359, 594. */
.crm-aw-sub{font-weight:400;font-size:12px}
.crm-aw-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.crm-aw-scroll{overflow-x:auto}
.crm-page-h select.crm-aw-range{max-width:none}
.crm-aw-note{font-size:11px;color:var(--text-dim);padding:8px 10px}
.crm-aw-group{margin:6px 0 4px}
.crm-aw-loading .crm-funnel,.crm-aw-loading .crm-stats,.crm-aw-loading .crm-stats2,.crm-aw-loading .crm-page>.crm-panel{opacity:.55}
.crm-stats2>.crm-panel{min-width:0}
@media (max-width:760px){
  .crm-aw-head{flex-wrap:wrap}
  .crm-funnel{grid-template-columns:1fr}
  .crm-funnel .crm-arrow{flex-direction:row;gap:8px;padding:6px 0}
  .crm-funnel .crm-arrow svg{transform:rotate(90deg)}
  .crm-stats{grid-template-columns:minmax(0,1fr)}
  .crm-stats2{grid-template-columns:minmax(0,1fr)}
  .crm-bar{grid-template-columns:minmax(0,1fr) 34px}
  .crm-bar>span:first-child{grid-column:1/-1}
}

/* Login */
.crm-login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.crm-login-card{width:360px;background:var(--crm-bg-2);border:1px solid var(--tile-border);border-radius:var(--crm-r);padding:28px 26px}
.crm-login-card .crm-brand{justify-content:center;margin-bottom:22px;font-size:18px}
.crm-login-card .crm-form{grid-template-columns:1fr}
.crm-login-card .crm-btn{width:100%;justify-content:center;height:34px;margin-top:4px}
.crm-login-card .crm-field{height:34px}
.crm-login-error{margin-top:12px;font-size:12px;color:var(--neg)}

/* Modal */
.crm-modal{position:fixed;inset:0;background:rgba(3,6,14,.7);display:none;align-items:center;justify-content:center;z-index:70;padding:20px}
.crm-modal.on{display:flex}
.crm-dialog{width:560px;max-width:100%;background:var(--crm-bg-2);border:1px solid var(--crm-line-2);border-radius:var(--crm-r);box-shadow:0 20px 60px rgba(0,0,0,.6)}
.crm-dialog .crm-panel-h{font-size:15px}
.crm-dialog-f{display:flex;justify-content:flex-end;gap:8px;padding:12px 14px;border-top:1px solid var(--tile-border)}
.crm-hint{font-size:11px;color:var(--text-dim);margin-top:4px}
.crm-dialog-hint{margin-top:10px}
.crm-dialog-error{margin-top:10px;font-size:12px;color:var(--neg)}
.crm-dialog--confirm{width:420px}

/* Import-Dialog (Stufe 3): Aufbau mit crm-dialog, crm-form, crm-kv. */
.crm-import-summary{margin-top:14px}
.crm-import-summary .crm-kv{margin-top:8px}
.crm-import-skipped{list-style:none;margin-top:10px;max-height:180px;overflow-y:auto;font-size:12px;border-top:1px solid var(--tile-border)}
.crm-import-skipped li{display:flex;gap:8px;padding:4px 0;border-bottom:1px solid var(--tile-border)}
.crm-import-skipped li span:first-child{flex:0 0 auto}

/* Toast fuer Fehler und 409-Saetze (Stufe 2, nicht in der Vorschau):
   unten rechts, dunkle Flaeche wie das Popover, linker Rand in --neg. */
.crm-toast{position:fixed;right:18px;bottom:18px;z-index:80;max-width:380px;background:var(--crm-panel);border:1px solid var(--crm-line-2);border-left:3px solid var(--neg);border-radius:var(--crm-r-s);padding:10px 14px;box-shadow:0 10px 30px rgba(0,0,0,.5);color:var(--text-strong)}
.crm-toast--ok{border-left-color:var(--pos)}

/* Nutzerverwaltung (Stufe 5): Aktionsknoepfe einer Zeile nebeneinander. */
.crm-us-actions{display:inline-flex;gap:6px;justify-content:flex-end}

/* Konto (eigenes Passwort aendern): Name in der Kopfzeile als Link, Formular schmal. */
.crm-ko-link{color:inherit}
.crm-ko-link:hover{color:var(--accent)}
.crm-ko-panel{max-width:420px}