@charset "UTF-8";
/* Pro Academy CRM — Design-Tokens „Keynote Navy" (Welle 2a, 01.10.2026).
   Quelle: docs/design/KEYNOTE_SPEC.md Abschnitt C. Alle Farbwerte nach WCAG 2.x nachgerechnet
   (scripts/keynote_kontrast.py: 174 Paare, 0 Verstöße). Die Kommentare nennen Kontraste.
   NUR hier werden Tokens definiert — static/css/app.css und alle Templates lesen sie nur über var(--…).
   Eingebunden in base.html VOR app.css: {{ asset_url('css/tokens.css') }}.
   Die Token-NAMEN bleiben (über 5.800 var()-Verweise in den Templates); geändert sind die Werte. */

:root {                                   /* HELL – warmes Papier, Navy führt */
  color-scheme: light;
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: var(--font-display); --ck-serif: var(--font-display);            /* Playfair raus */
  --bg: #F0EFEA; --bg-2: #F0EFEA;          /* Seite = Chrome; Sidebar/Topbar/Tab-Leiste trennt eine Haarlinie */
  --surface: #FFFFFF;                      /* 1,15 zu bg */
  --surface-2: #F2F1EC;                    /* Segment-Spur, Hover; gleicher warmer Ton (1,13 zu s1) */
  --surface-3: #FFFFFF;                    /* Blatt, Menü, Toast – immer mit --shadow-2 */
  --text: #16233F;                         /* 15,6 s1 · 13,6 bg */
  --text-muted: #4B5365;                   /* 7,7 s1 · 6,7 bg */
  --text-soft: #5E6573;                    /* 5,9 s1 · 5,1 bg – nur Platzhalter und Deko */
  --hairline: rgba(22,35,63,.12); --border: var(--hairline); --border-soft: rgba(22,35,63,.07); --border-strong: rgba(22,35,63,.20);
  --field-line: rgba(22,35,63,.50);        /* Feldrand 3,17 s1 · 3,05 bg */
  --navy: #16233F; --primary: #16233F; --on-primary: #FFFFFF;              /* 15,6 */
  --link: #2A4A8C;                         /* 8,6 s1 · 7,4 bg */
  --gold: #B8912F; --on-gold: #16233F;     /* 5,3 · Weiß auf Gold 2,95 = verboten */
  --gold-text: #7E5F18;                    /* 5,9 s1 · 5,2 bg · 4,7 auf gold-soft/bg */
  --gold-soft: rgba(184,145,47,.12); --gold-line: rgba(184,145,47,.45);
  --green: #1B7342; --amber: #9A5B00; --red: #C2362B; --on-status: #FFFFFF;   /* auf bg 5,1/4,7/4,7 · Weiß darauf 5,9/5,4/5,5 */
  --green-soft: #E8F1EC; --amber-soft: #F5EFE6; --red-soft: #F9EBEA;          /* Status darauf 5,1/4,75/4,7 */
  --select: rgba(22,35,63,.08);            /* aktive Kapsel: nur --text (11,7) oder --text-muted (5,8) darauf */
  --stage: #16233F; --on-stage: #FFFFFF; --stage-muted: #B4BDCE; --stage-gold: #D8B65A;  /* 15,6 / 8,25 / 8,0; --on-gold auf Stage-Gold 8,0 */
  --shadow-1: 0 1px 3px rgba(22,35,63,.08);
  --shadow-2: 0 16px 40px rgba(22,35,63,.12), 0 2px 8px rgba(22,35,63,.06);
  /* Aliase für Bestandsnamen (sonst undefiniert oder Regenbogen) */
  --blue: var(--link); --blue-soft: var(--select); --purple: var(--link); --purple-soft: var(--select);
  --orange: var(--amber); --orange-soft: var(--amber-soft); --gold-light: var(--gold); --navy-light: var(--navy);
  --cream: var(--surface-2); --cream-2: var(--surface-2); --text-2: var(--text-muted); --green-light: var(--green-soft);
  --ck-gold: var(--gold); --ck-gold-ink: var(--gold-text); --ease: var(--ease-out);
  --shadow-xs: none; --shadow-sm: none; --shadow-md: var(--shadow-1); --shadow-lg: var(--shadow-2);
  --shadow-xl: var(--shadow-2); --shadow-2xl: var(--shadow-2); --shadow-gold: none; --shadow-navy: none;
  /* alle --hero-*: flach (keine Verläufe, kein Leuchtschein) */
  --hero-bg: var(--surface); --hero-text: var(--text); --hero-glow: transparent; --hero-shadow: none;
  --hero-chip-bg: var(--surface-2); --hero-chip-text: var(--text-muted); --hero-chip-border: var(--hairline);
  --hero-cta-bg: var(--primary); --hero-cta-text: var(--on-primary); --hero-cta-shadow: none;
  --hero-progress-bg: var(--select); --hero-progress-fill: var(--primary);
  --hero-eyebrow-color: var(--text-muted); --hero-title-gradient: none;
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 20px; --radius-2xl: 20px; --radius-full: 999px;
  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms; --dur-chart: 500ms;
  --ease-out: cubic-bezier(.2,.8,.2,1); --ease-sheet: cubic-bezier(.32,.72,0,1);
  --w-read: 720px; --w-wide: 1080px;

  /* ── Bestand, Werte an die Typo-Skala / Bewegung aus C angeglichen ── */
  --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  /* Typo-Skala: Caption 12 · Footnote 13 · Callout 14 · Body 16 · Headline 17 · Title 22 · Kennzahl 28 · Large Title 34 · Hero 52 */
  --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 16px; --text-lg: 17px;
  --text-xl: 22px; --text-2xl: 28px; --text-3xl: 34px; --text-4xl: 52px;
  --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-loose: 1.7;
  --tracking-tighter: -0.035em; --tracking-tight: -0.016em; --tracking-normal: 0;
  --tracking-wide: 0.01em; --tracking-wider: 0.01em; --tracking-widest: 0.01em;   /* keine Sperrschrift mehr */
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 600;
  --weight-extrabold: 600; --weight-black: 700;                                   /* Gewichte 400/600, 700 nur Large Title */
  --shadow-inner: none;
  --motion-fast: 120ms cubic-bezier(.2,.8,.2,1); --motion-base: 200ms cubic-bezier(.2,.8,.2,1);
  --motion-slow: 320ms cubic-bezier(.2,.8,.2,1); --motion-spring: 320ms cubic-bezier(.32,.72,0,1);
  --motion-bounce: 320ms cubic-bezier(.32,.72,0,1); --ease-in-out: cubic-bezier(.4,0,.2,1);
  --color-success: var(--green); --color-success-soft: var(--green-soft);
  --color-warning: var(--amber); --color-warning-soft: var(--amber-soft);
  --color-error: var(--red); --color-error-soft: var(--red-soft);
  --color-info: var(--link); --color-info-soft: var(--select);
  --color-accent: var(--gold); --color-accent-soft: var(--gold-soft);
  --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 800; --z-modal: 1000; --z-toast: 1100; --z-max: 9999;
  /* Shell-Maße + Abdunklung hinter Blatt/Dialog (Spec D „Blatt": rgba(7,11,21,.4), ohne Blur).
     --tabbar-h = sichtbare Höhe der Handy-Leiste OHNE Safe Area (02.10.: 50 → 64, „kräftiger").
     Wer über der Leiste klebt, rechnet calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
     der Eintragen-Kreis ragt zusätzlich 16 px darüber. */
  --sidebar-w: 248px; --topbar-h: 60px; --tabbar-h: 64px;
  --scrim: rgba(7,11,21,.4);
  --shadow-bar: 0 -4px 20px rgba(22,35,63,.07);                              /* Handy-Leiste: weich nach oben */
  --shadow-fab: 0 8px 20px rgba(22,35,63,.24), 0 2px 6px rgba(22,35,63,.12); /* Eintragen-Kreis */
  /* Atmosphäre (06.10., Najib: „Hintergrund, nicht so trocken, Details"): Licht hinter dem CRM,
     Tiefe für Flächen. Rein dekorativ — Textkontraste unverändert (Flächen bleiben --surface). */
  --atmo-glow-a: rgba(184,145,47,.32);     /* warmes Gold-Licht oben rechts */
  --atmo-glow-b: rgba(42,74,140,.26);      /* kühles Navy oben links */
  --atmo-glow-c: rgba(42,74,140,.14);       /* Boden */
  --atmo-dot: rgba(22,35,63,.14);         /* Punktraster, oben ausgeblendet */
  --atmo-grain: .08;
  --elev-card: 0 0 0 1px rgba(22,35,63,.05), 0 1px 2px rgba(22,35,63,.04), 0 16px 32px -16px rgba(22,35,63,.22);
  --elev-hover: 0 0 0 1px rgba(22,35,63,.08), 0 2px 6px rgba(22,35,63,.06), 0 20px 40px -18px rgba(22,35,63,.26);
  --elev-btn: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(22,35,63,.18), 0 6px 14px -6px rgba(22,35,63,.35);
  --stage-glow: rgba(216,182,90,.38); --stage-glow-2: rgba(84,120,200,.45);
  --stage-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 28px 50px -28px rgba(22,35,63,.60);
  /* Lebendige Zahlen: Balken mit Verlauf + leichtem Schein, Ziel erreicht = Gold-Verlauf */
  --bar-h: linear-gradient(90deg, var(--navy), var(--link)); --bar-v: linear-gradient(180deg, var(--link), var(--navy));
  --bar-glow: 0 3px 10px -3px rgba(42,74,140,.55);
  --bar-gold: linear-gradient(90deg, var(--gold), #D8B65A); --bar-gold-glow: 0 0 14px rgba(216,182,90,.6);
  /* Navy-Kopfband hinter Topbar + großem Titel */
  --band: var(--stage); --band-glow: rgba(216,182,90,.30); --band-glow-2: rgba(84,120,200,.45);
}

/* DUNKEL – Navy-Bühne (C* 15–25 statt Graphit 3,4). Nur am Bildschirm: Druck nimmt immer die hellen Werte. */
@media screen {
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B1428; --bg-2: #0F1B33;          /* 1,07 */
  --surface: #15223F;                      /* Marken-Navy, 1,16 zu bg */
  --surface-2: #1D2C4D;                    /* 1,14 zu s1 */
  --surface-3: #26375C;                    /* Blatt, Menü, Toast, Bühne – 1,17 zu s2, ersetzt Schatten */
  --text: #F3F5F9;                         /* 14,4 s1 · 10,8 s3 */
  --text-muted: #B4BDCE;                   /* 8,3 s1 · 6,2 s3 */
  --text-soft: #98A6BD;                    /* 6,4 s1 · 4,8 s3 – auf allen Flächen ≥ 4,5 */
  --hairline: rgba(255,255,255,.09); --border: var(--hairline); --border-soft: rgba(255,255,255,.05); --border-strong: rgba(255,255,255,.16);
  --field-line: rgba(255,255,255,.44);     /* 4,5 zu s1 · 3,35 im Blatt */
  --navy: #31467A; --primary: #31467A; --on-primary: #FFFFFF;              /* 9,2 · Knopf zu s1 1,72, zu bg-2 1,87 */
  --link: #A9B8D8;                         /* 7,9 s1 · 5,9 s3 · C* 17,9 statt lavendel 28,8 */
  --gold: #D8B65A; --on-gold: #0A0F1C;     /* 9,8 */
  --gold-text: #DDBE66;                    /* 8,7 s1 · 6,5 s3 */
  --gold-soft: rgba(216,182,90,.14); --gold-line: rgba(216,182,90,.45);
  --green: #5CC08C; --amber: #F0A45C; --red: #F28A80; --on-status: #0A0F1C;   /* auf s3 5,3/5,7/4,9 · on-status 8,5/9,3/7,9 */
  --green-soft: #17332A; --amber-soft: #352B21; --red-soft: #3A2426;          /* Status darauf 6,1/6,7/6,0 – nicht mehr lila */
  --select: rgba(255,255,255,.08);         /* --text 12,6 · --text-muted 7,3 auf select/bg-2 */
  --stage: #26375C; --on-stage: #F3F5F9; --stage-muted: #B4BDCE; --stage-gold: #D8B65A;  /* 10,8 / 6,2 / 6,0 */
  --gold-light: var(--gold-text);
  --shadow-1: none; --shadow-2: 0 0 0 1px var(--hairline); --shadow-md: none; --shadow-lg: var(--shadow-2);
  --shadow-bar: none;                      /* dunkel trennt nur die Haarlinie */
  --shadow-fab: 0 0 0 1px var(--border-strong);   /* dunkel: Ring statt Schatten */
  --atmo-glow-a: rgba(216,182,90,.30); --atmo-glow-b: rgba(80,125,220,.50); --atmo-glow-c: rgba(70,110,200,.18);
  --atmo-dot: rgba(255,255,255,.08); --atmo-grain: .09;
  --elev-card: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(255,255,255,.06), 0 14px 30px -18px rgba(0,0,0,.6);
  --elev-hover: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px rgba(255,255,255,.12), 0 22px 44px -20px rgba(0,0,0,.7);
  --elev-btn: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(255,255,255,.06);
  --stage-glow: rgba(216,182,90,.26); --stage-glow-2: rgba(110,150,230,.34);
  --stage-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(255,255,255,.06), 0 28px 50px -28px rgba(0,0,0,.7);
  --bar-h: linear-gradient(90deg, var(--link), var(--text)); --bar-v: linear-gradient(180deg, var(--text), var(--link));
  --bar-glow: 0 0 12px -2px rgba(169,184,216,.45);
  --band: #1A2A4C; --band-glow: rgba(216,182,90,.20); --band-glow-2: rgba(110,150,230,.35);
  /* Ableitungen, die im Dunkeln anders laufen */
  --hero-progress-fill: var(--text);       /* Fortschritt dunkel = --text (10,9:1 zur Spur), erst bei 100 % Gold */
}
}