/* Auftritt 4.0 – Design-Tokens (hell und dunkel)
   Eine Quelle für alle Farben, Schriften, Größen, Radien, Ebenen und Bewegungen der App.
   Graphit-Neutraltöne mit genau einem Akzent (Kobalt); Statusfarben sind vom Akzent getrennt,
   damit „angenommen“ (Grün) oder „wartet“ (Bernstein) nie mit einer Aktion verwechselt werden.
   Dunkel: über prefers-color-scheme oder <html data-theme="dark">; data-theme="light" erzwingt hell. */

:root{
  /* ---- Graphit (Neutraltöne) ---- */
  --n-0:#FFFFFF; --n-25:#FBFBFC; --n-50:#F6F7F9; --n-100:#EEF0F3; --n-150:#E8EBEF; --n-200:#E3E6EB;
  --n-300:#CDD2DA; --n-400:#9AA2AF; --n-500:#646C79; --n-600:#4B5361; --n-700:#343B47; --n-900:#12161D;

  /* ---- Kobalt (Akzent) ---- */
  --a-50:#EEF1FF; --a-100:#E1E7FF; --a-200:#C9D1FB; --a-500:#4C63F0; --a-600:#3B4FD8; --a-700:#2F3FB3; --a-900:#222C6E;

  /* ---- Flächen und Linien ---- */
  --bg:#F6F7F9;              /* Arbeitsfläche */
  --flaeche:#FFFFFF;         /* Karten, Tabellen */
  --erhoeht:#FFFFFF;         /* Menüs, Dialoge, Palette */
  --sanft:#F0F2F5;           /* Hover, Chip-Grund, gesperrte Felder */
  --sanft-2:#E9ECF0;         /* gedrückt, Skelett */
  --linie:#E3E6EB;           /* Trennlinien */
  --linie-leise:#EEF0F3;     /* Zeilentrenner in Tabellen */
  --feld:#CDD2DA;            /* Feldrahmen */
  --feld-hover:#9AA2AF;

  /* ---- Text ---- */
  --text:#12161D; --text-2:#4B5361; --text-3:#646C79; --text-4:#8A919D;

  /* ---- Akzent ---- */
  --akzent:#3B4FD8; --akzent-hover:#2F3FB3; --akzent-flaeche:#EEF1FF; --akzent-text:#FFFFFF;
  --akzent-tief:#222C6E; --akzent-diagramm:#4C63F0; --akzent-blass:#C9D1FB;

  /* ---- Status: Text / Punkt / Fläche ---- */
  --gut:#0A7A55; --gut-punkt:#12A06E; --gut-flaeche:#E9F8F1;
  --wartet:#A65A06; --wartet-punkt:#F2A20C; --wartet-flaeche:#FEF6E6;
  --fassen:#B9440F; --fassen-punkt:#F26B1D; --fassen-flaeche:#FDEEE6;
  --nein:#C2362B; --nein-punkt:#E5484D; --nein-flaeche:#FDECEA;
  --gesehen:#6438C9; --gesehen-punkt:#8B5CF6; --gesehen-flaeche:#F3EEFF;
  --raster:#EEF0F3;          /* Gitterlinien in Diagrammen */

  /* ---- Ebenen ---- */
  --e0:0 0 0 1px var(--linie);
  --e1:0 0 0 1px rgba(18,22,29,.06),0 1px 2px rgba(18,22,29,.04);
  --e2:0 0 0 1px rgba(18,22,29,.07),0 4px 12px -4px rgba(18,22,29,.10);
  --e3:0 0 0 1px rgba(18,22,29,.08),0 18px 40px -12px rgba(18,22,29,.22);
  --e4:0 0 0 1px rgba(18,22,29,.08),0 28px 64px -16px rgba(18,22,29,.32);
  --e-knopf:inset 0 1px 0 rgba(255,255,255,.16),0 1px 2px rgba(18,22,29,.14),0 0 0 1px var(--akzent-hover);
  --e-zweit:0 1px 2px rgba(18,22,29,.05),0 0 0 1px var(--feld);
  --schleier:rgba(11,14,19,.48);
  --fokus:0 0 0 2px var(--flaeche),0 0 0 4px rgba(76,99,240,.55);

  /* ---- Schrift ---- */
  --f-text:"Hanken Grotesk","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --f-anzeige:"Source Serif 4",Georgia,"Times New Roman",serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SF Mono","Cascadia Mono",Menlo,monospace;
  --t-xs:12px; --t-sm:13px; --t-base:14px; --t-md:15px; --t-lg:17px; --t-xl:22px; --t-2xl:28px; --t-3xl:36px; --t-display:44px;

  /* ---- Abstände (4er-Raster) ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px;

  /* ---- Radien ---- */
  --r-xs:6px; --r-sm:9px; --r-md:14px; --r-lg:20px; --r-full:999px;

  /* ---- Bewegung ---- */
  --dur-1:120ms; --dur-2:180ms; --dur-3:240ms; --dur-4:360ms;
  --aus:cubic-bezier(.2,.8,.2,1);        /* alles, was erscheint */
  --ein:cubic-bezier(.4,0,1,1);          /* alles, was verschwindet */
  --hin-her:cubic-bezier(.65,0,.35,1);   /* verschieben, umordnen */
  --expo:cubic-bezier(.16,1,.3,1);       /* Zahlen, Diagramme */
  --blatt:cubic-bezier(.32,.72,0,1);     /* Handy-Blatt */
  --feder:cubic-bezier(.34,1.4,.64,1);   /* nur Erfolgs-Haken */

  /* ---- Ebenen-Reihenfolge ---- */
  --z-leiste:20; --z-pop:40; --z-dialog:60; --z-toast:80; --z-palette:90;

  /* ---- Alte Namen (bis 3.4) – leiten auf die neuen um ---- */
  --ink:var(--text); --ink2:var(--text-2); --muted:var(--text-3); --line:var(--linie); --line2:var(--sanft);
  --card:var(--flaeche); --accent:var(--akzent); --accent-dark:var(--akzent-hover); --accent-soft:var(--akzent-flaeche);
  --ok:var(--gut); --ok-soft:var(--gut-flaeche); --warn:var(--wartet); --warn-soft:var(--wartet-flaeche);
  --bad:var(--nein); --bad-soft:var(--nein-flaeche); --achtung:var(--fassen); --achtung-soft:var(--fassen-flaeche);
  --symbol:var(--text-3); --r:var(--r-md); --r-klein:var(--r-sm); --shadow:var(--e1); --shadow-hoch:var(--e3);
  --papier:#EEF2F6; --tinte:#0D1B2A;
  --serif:var(--f-anzeige); --sans:var(--f-text); --mono:var(--f-mono);

  color-scheme:light;
}

/* Dunkel – Systemeinstellung, solange nicht ausdrücklich „hell“ gewählt ist */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --n-0:#0B0D12; --n-25:#101319; --n-50:#151922; --n-100:#1B2029; --n-150:#20262F; --n-200:#252B36;
    --n-300:#333A47; --n-400:#5A6272; --n-500:#8A92A1; --n-600:#AEB5C2; --n-700:#CDD2DB; --n-900:#ECEEF2;
    --a-50:rgba(142,155,255,.10); --a-100:rgba(142,155,255,.16); --a-200:#2E3A80; --a-500:#7C8CFF; --a-600:#8E9BFF; --a-700:#A6B1FF; --a-900:#DCE1FF;
    --bg:#0B0D12; --flaeche:#12151C; --erhoeht:#181C25; --sanft:#1B202A; --sanft-2:#232935;
    --linie:rgba(255,255,255,.08); --linie-leise:rgba(255,255,255,.05); --feld:rgba(255,255,255,.16); --feld-hover:rgba(255,255,255,.28);
    --text:#ECEEF2; --text-2:#A9B0BD; --text-3:#8A92A1; --text-4:#6B7383;
    --akzent:#8E9BFF; --akzent-hover:#A6B1FF; --akzent-flaeche:rgba(142,155,255,.12); --akzent-text:#0B0D12;
    --akzent-tief:#DCE1FF; --akzent-diagramm:#8E9BFF; --akzent-blass:rgba(142,155,255,.30);
    --gut:#3DD9A0; --gut-punkt:#3DD9A0; --gut-flaeche:rgba(61,217,160,.12);
    --wartet:#F2B45A; --wartet-punkt:#F2B45A; --wartet-flaeche:rgba(242,180,90,.12);
    --fassen:#F28A5A; --fassen-punkt:#F28A5A; --fassen-flaeche:rgba(242,138,90,.12);
    --nein:#F2766B; --nein-punkt:#F2766B; --nein-flaeche:rgba(242,118,107,.12);
    --gesehen:#B79CFF; --gesehen-punkt:#B79CFF; --gesehen-flaeche:rgba(183,156,255,.12);
    --raster:rgba(255,255,255,.06);
    --e0:0 0 0 1px var(--linie);
    --e1:0 0 0 1px rgba(255,255,255,.07);
    --e2:0 0 0 1px rgba(255,255,255,.09),0 6px 16px -6px rgba(0,0,0,.5);
    --e3:0 0 0 1px rgba(255,255,255,.10),0 24px 48px -12px rgba(0,0,0,.7);
    --e4:0 0 0 1px rgba(255,255,255,.11),0 32px 72px -16px rgba(0,0,0,.75);
    --e-knopf:inset 0 1px 0 rgba(255,255,255,.25),0 0 0 1px var(--akzent);
    --e-zweit:0 0 0 1px var(--feld);
    --schleier:rgba(0,0,0,.6);
    --fokus:0 0 0 2px var(--bg),0 0 0 4px rgba(142,155,255,.65);
    --papier:#0B0D12; --tinte:#181C25;
    color-scheme:dark;
  }
}
/* Dunkel – ausdrücklich gewählt (Kontomenü) */
:root[data-theme="dark"]{
  --n-0:#0B0D12; --n-25:#101319; --n-50:#151922; --n-100:#1B2029; --n-150:#20262F; --n-200:#252B36;
  --n-300:#333A47; --n-400:#5A6272; --n-500:#8A92A1; --n-600:#AEB5C2; --n-700:#CDD2DB; --n-900:#ECEEF2;
  --a-50:rgba(142,155,255,.10); --a-100:rgba(142,155,255,.16); --a-200:#2E3A80; --a-500:#7C8CFF; --a-600:#8E9BFF; --a-700:#A6B1FF; --a-900:#DCE1FF;
  --bg:#0B0D12; --flaeche:#12151C; --erhoeht:#181C25; --sanft:#1B202A; --sanft-2:#232935;
  --linie:rgba(255,255,255,.08); --linie-leise:rgba(255,255,255,.05); --feld:rgba(255,255,255,.16); --feld-hover:rgba(255,255,255,.28);
  --text:#ECEEF2; --text-2:#A9B0BD; --text-3:#8A92A1; --text-4:#6B7383;
  --akzent:#8E9BFF; --akzent-hover:#A6B1FF; --akzent-flaeche:rgba(142,155,255,.12); --akzent-text:#0B0D12;
  --akzent-tief:#DCE1FF; --akzent-diagramm:#8E9BFF; --akzent-blass:rgba(142,155,255,.30);
  --gut:#3DD9A0; --gut-punkt:#3DD9A0; --gut-flaeche:rgba(61,217,160,.12);
  --wartet:#F2B45A; --wartet-punkt:#F2B45A; --wartet-flaeche:rgba(242,180,90,.12);
  --fassen:#F28A5A; --fassen-punkt:#F28A5A; --fassen-flaeche:rgba(242,138,90,.12);
  --nein:#F2766B; --nein-punkt:#F2766B; --nein-flaeche:rgba(242,118,107,.12);
  --gesehen:#B79CFF; --gesehen-punkt:#B79CFF; --gesehen-flaeche:rgba(183,156,255,.12);
  --raster:rgba(255,255,255,.06);
  --e0:0 0 0 1px var(--linie);
  --e1:0 0 0 1px rgba(255,255,255,.07);
  --e2:0 0 0 1px rgba(255,255,255,.09),0 6px 16px -6px rgba(0,0,0,.5);
  --e3:0 0 0 1px rgba(255,255,255,.10),0 24px 48px -12px rgba(0,0,0,.7);
  --e4:0 0 0 1px rgba(255,255,255,.11),0 32px 72px -16px rgba(0,0,0,.75);
  --e-knopf:inset 0 1px 0 rgba(255,255,255,.25),0 0 0 1px var(--akzent);
  --e-zweit:0 0 0 1px var(--feld);
  --schleier:rgba(0,0,0,.6);
  --fokus:0 0 0 2px var(--bg),0 0 0 4px rgba(142,155,255,.65);
  --papier:#0B0D12; --tinte:#181C25;
  color-scheme:dark;
}

/* Wer am Rechner „weniger Bewegung“ eingestellt hat, bekommt keine. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;
    animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}