/* ============================================================
   Vertriebs-Terminal — Design-System
   Hell: Weiß / kühles Grau.  Dunkel: fast schwarz mit Blaustich.
   Ein blauer Akzent. Weiche Schatten, ruhige Flächen.
   Umschaltbar über [data-theme], sonst Systemvorgabe.
   ============================================================ */

:root {
  /* ---------- HELL (Standard) ---------- */
  --bg:            #F5F6F8;   /* App-Fläche */
  --bg-deep:       #ECEEF1;   /* Eingaben, Chips, Tabellenköpfe (leicht versenkt) */
  --panel:         #FFFFFF;   /* Karten, Sidebar, Topbar */
  --panel-raised:  #FFFFFF;   /* hervorgehoben (Tiefe über Rahmen/Schatten) */

  --line:          #E4E6EA;
  --line-strong:   #D3D6DC;
  --line-soft:     #EEF0F2;

  --ink:           #1A1D23;
  --ink-dim:       #5B616E;
  --ink-faint:     #8A909C;

  --accent:        #2563EB;
  --accent-deep:   #1B4FD1;
  --accent-ink:    #FFFFFF;
  --ok:            #12894E;
  --ok-deep:       #0F7343;
  --danger:        #D24444;
  --danger-deep:   #B23636;
  --warn:          #B26C12;

  --accent-wash:   #EEF3FE;
  --ok-wash:       #E8F5EF;
  --danger-wash:   #FBECEC;

  /* Diagramm-Kategorien — eine Farbe je Kennzahl, über alle Diagrammarten gleich */
  --cat-anrufe:      #2A78D6;
  --cat-erreicht:    #1BAF7A;
  --cat-termine:     #EB6834;
  --cat-abschluesse: #EDA100;

  /* Anruf-Ergebnisse (Verlauf + Verteilung) */
  --out-termin:  #12894E;
  --out-wv:      #2A78D6;
  --out-kein:    #E0930B;
  --out-nie:     #D24444;
  --out-weg:     #98A0AE;
  --out-tot:     #6E63A6;

  --shadow-sm: 0 1px 2px rgba(18, 22, 31, 0.05);
  --shadow:    0 1px 2px rgba(18, 22, 31, 0.05), 0 4px 12px -2px rgba(18, 22, 31, 0.07);
  --shadow-md: 0 8px 28px -6px rgba(18, 22, 31, 0.14), 0 2px 8px rgba(18, 22, 31, 0.06);
  --shadow-lg: 0 24px 56px -12px rgba(18, 22, 31, 0.22);

  --scrim: rgba(23, 28, 38, 0.32);

  /* ---------- Typografie ---------- */
  --font-display: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

  --fs-11: 0.6875rem;  --fs-12: 0.75rem;   --fs-13: 0.8125rem;  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;  --fs-16: 1rem;      --fs-18: 1.125rem;   --fs-20: 1.25rem;
  --fs-24: 1.5rem;     --fs-30: 1.875rem;  --fs-38: 2.375rem;

  --s-2: 2px; --s-4: 4px; --s-6: 6px; --s-8: 8px; --s-12: 12px; --s-16: 16px;
  --s-20: 20px; --s-24: 24px; --s-32: 32px; --s-40: 40px; --s-48: 48px; --s-64: 64px;

  --r-sm: 6px; --r: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 999px;
  --radius: 8px;

  --sidebar-w: 248px;
  --topbar-h: 56px;
  --quotebar-h: 38px;
  --content-max: 1160px;

  --z-base: 1; --z-sticky: 20; --z-dropdown: 30; --z-overlay: 40; --z-toast: 60;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur: 150ms;
}

/* ---------- DUNKEL ---------- */
:root[data-theme="dark"] {
  --bg:            #0A0D13;
  --bg-deep:       #0D1118;
  --panel:         #12161F;
  --panel-raised:  #1A1F2A;

  --line:          #212734;
  --line-strong:   #2E3542;
  --line-soft:     #191E28;

  --ink:           #E7E9EE;
  --ink-dim:       #98A0AE;
  --ink-faint:     #656D7C;

  --accent:        #4C8DFF;
  --accent-deep:   #3B7DEE;
  --accent-ink:    #06101F;
  --ok:            #3FBE7E;
  --ok-deep:       #33A56B;
  --danger:        #F0726A;
  --danger-deep:   #D95C54;
  --warn:          #E0A43B;

  --accent-wash:   rgba(76, 141, 255, 0.13);
  --ok-wash:       rgba(63, 190, 126, 0.13);
  --danger-wash:   rgba(240, 114, 106, 0.13);

  --cat-anrufe:      #3987E5;
  --cat-erreicht:    #199E70;
  --cat-termine:     #D95926;
  --cat-abschluesse: #C98500;

  --out-termin:  #3FBE7E;
  --out-wv:      #3987E5;
  --out-kein:    #E0A43B;
  --out-nie:     #F0726A;
  --out-weg:     #7B8494;
  --out-tot:     #9188CC;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow:    0 2px 8px rgba(0, 0, 0, 0.42);
  --shadow-md: 0 12px 34px -8px rgba(0, 0, 0, 0.58);
  --shadow-lg: 0 28px 64px -12px rgba(0, 0, 0, 0.68);

  --scrim: rgba(2, 4, 8, 0.62);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0A0D13;
    --bg-deep:       #0D1118;
    --panel:         #12161F;
    --panel-raised:  #1A1F2A;
    --line:          #212734;
    --line-strong:   #2E3542;
    --line-soft:     #191E28;
    --ink:           #E7E9EE;
    --ink-dim:       #98A0AE;
    --ink-faint:     #656D7C;
    --accent:        #4C8DFF;
    --accent-deep:   #3B7DEE;
    --accent-ink:    #06101F;
    --ok:            #3FBE7E;
    --ok-deep:       #33A56B;
    --danger:        #F0726A;
    --danger-deep:   #D95C54;
    --warn:          #E0A43B;
    --accent-wash:   rgba(76, 141, 255, 0.13);
    --ok-wash:       rgba(63, 190, 126, 0.13);
    --danger-wash:   rgba(240, 114, 106, 0.13);
    --cat-anrufe:      #3987E5;
    --cat-erreicht:    #199E70;
    --cat-termine:     #D95926;
    --cat-abschluesse: #C98500;
    --out-termin:  #3FBE7E;
    --out-wv:      #3987E5;
    --out-kein:    #E0A43B;
    --out-nie:     #F0726A;
    --out-weg:     #7B8494;
    --out-tot:     #9188CC;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow:    0 2px 8px rgba(0, 0, 0, 0.42);
    --shadow-md: 0 12px 34px -8px rgba(0, 0, 0, 0.58);
    --shadow-lg: 0 28px 64px -12px rgba(0, 0, 0, 0.68);
    --scrim: rgba(2, 4, 8, 0.62);
  }
}

/* ============================================================
   Reset / Basis
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Kein horizontales Wegschieben der Seite (clip statt hidden → position:sticky bleibt heil). */
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-14);
  line-height: 1.5;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}

h1, h2, h3, h4, p, figure { margin: 0; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; color: var(--ink); }
h1 { font-size: var(--fs-24); line-height: 1.2; }

button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
code, kbd, samp { font-family: var(--font-mono); }
kbd { display: inline-block; min-width: 1.4em; padding: 1px 5px; font-size: .85em; line-height: 1.4; text-align: center;
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--bg-deep); color: var(--ink-dim); }

::selection { background: var(--accent-wash); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border: 3px solid var(--bg); border-radius: var(--r-full); }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.mono { font-family: var(--font-mono); font-feature-settings: 'tnum'; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Eckmarken der alten Blaupause — abgeschaltet */
.corners { position: relative; }
.corners > .cm { display: none; }