@font-face {
  font-family: "Geist";
  src: url("/static/fonts/geist-sans.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/static/fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --plane: #0b0c0b;
  --s1: #131512;
  --s2: #1a1d19;
  --s3: #232722;
  --s4: #2c312a;
  --glas: rgba(19, 21, 18, 0.8);
  --glas-stark: rgba(15, 17, 14, 0.92);
  --schleier: rgba(5, 6, 5, 0.62);

  --linie: rgba(214, 232, 196, 0.085);
  --linie-2: rgba(214, 232, 196, 0.14);
  --linie-3: rgba(214, 232, 196, 0.24);
  --raster: rgba(214, 232, 196, 0.055);

  --ink-1: #eef1ea;
  --ink-2: #b8beb2;
  --ink-3: #8f968a;
  --ink-4: #646b60;

  --akzent: #c8f03c;
  --akzent-hoch: #dbff6a;
  --akzent-tief: #a9d11d;
  --akzent-ink: #0b0c0b;
  --akzent-text: #c8f03c;
  --akzent-weich: rgba(200, 240, 60, 0.12);
  --akzent-glut: rgba(200, 240, 60, 0.38);
  --fokus-ring: 0 0 0 2px var(--plane), 0 0 0 4px var(--akzent);

  --gut: #4fd162;
  --gut-weich: rgba(79, 209, 98, 0.13);
  --warn: #fab219;
  --warn-weich: rgba(250, 178, 25, 0.13);
  --ernst: #f0895f;
  --ernst-weich: rgba(240, 137, 95, 0.13);
  --krit: #ff6f63;
  --krit-weich: rgba(255, 111, 99, 0.13);
  --krit-fuell: #d03b3b;
  --info: #79b8ff;
  --info-weich: rgba(121, 184, 255, 0.13);

  --status-gut: #0ca30c;
  --status-warn: #fab219;
  --status-ernst: #ec835a;
  --status-krit: #d03b3b;

  --serie-1: #3987e5;
  --serie-2: #d95926;
  --serie-3: #199e70;
  --serie-4: #c98500;
  --serie-5: #d55181;
  --serie-6: #008300;
  --serie-7: #9085e9;
  --serie-8: #e66767;
  --diagramm-raster: #262a24;
  --diagramm-achse: #3a4037;

  --schrift: "Geist", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --t-2xs: 10.5px;
  --t-xs: 11.5px;
  --t-s: 12.5px;
  --t-m: 13.5px;
  --t-basis: 14.5px;
  --t-l: 16px;
  --t-xl: 19px;
  --t-2xl: 24px;
  --t-3xl: 32px;
  --t-held: 56px;

  --a-1: 4px;
  --a-2: 8px;
  --a-3: 12px;
  --a-4: 16px;
  --a-5: 20px;
  --a-6: 24px;
  --a-7: 32px;
  --a-8: 40px;
  --a-9: 56px;

  --r-xs: 4px;
  --r-s: 7px;
  --r-m: 10px;
  --r-l: 14px;
  --r-xl: 20px;
  --r-voll: 999px;

  --sch-0: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  --sch-1: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 1px 2px rgba(0, 0, 0, 0.45);
  --sch-2: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 30px -14px rgba(0, 0, 0, 0.75);
  --sch-pop: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 28px 70px -24px rgba(0, 0, 0, 0.85), 0 10px 24px -12px rgba(0, 0, 0, 0.7);

  --d-schnell: 120ms;
  --d-mittel: 200ms;
  --d-lang: 340ms;
  --e-aus: cubic-bezier(0.16, 1, 0.3, 1);
  --e-ein-aus: cubic-bezier(0.65, 0, 0.35, 1);
  --e-feder: cubic-bezier(0.34, 1.56, 0.64, 1);

  --rail-b: 72px;
  --nav-b: 268px;
  --kopf-h: 60px;
  --inhalt-max: 1320px;
  --z-kopf: 50;
  --z-nav: 60;
  --z-schleier: 200;
  --z-schublade: 300;
  --z-dialog: 400;
  --z-palette: 450;
  --z-toast: 500;
  --z-tipp: 600;
}

:root[data-theme="hell"] {
  color-scheme: light;

  --plane: #eef0eb;
  --s1: #fbfbf8;
  --s2: #f3f4ef;
  --s3: #e8eae3;
  --s4: #dcdfd6;
  --glas: rgba(251, 251, 248, 0.82);
  --glas-stark: rgba(251, 251, 248, 0.94);
  --schleier: rgba(30, 34, 28, 0.32);

  --linie: rgba(28, 34, 22, 0.09);
  --linie-2: rgba(28, 34, 22, 0.15);
  --linie-3: rgba(28, 34, 22, 0.26);
  --raster: rgba(28, 34, 22, 0.06);

  --ink-1: #10120e;
  --ink-2: #454b40;
  --ink-3: #62695c;
  --ink-4: #8b9184;

  --akzent: #c8f03c;
  --akzent-hoch: #d9fb63;
  --akzent-tief: #b5df27;
  --akzent-ink: #10120e;
  --akzent-text: #3d6b00;
  --akzent-weich: rgba(122, 170, 10, 0.12);
  --akzent-glut: rgba(150, 200, 20, 0.35);
  --fokus-ring: 0 0 0 2px #10120e, 0 0 0 5px rgba(200, 240, 60, 0.9);

  --gut: #16722a;
  --gut-weich: rgba(22, 114, 42, 0.1);
  --warn: #8a5a00;
  --warn-weich: rgba(200, 140, 0, 0.12);
  --ernst: #a8451b;
  --ernst-weich: rgba(168, 69, 27, 0.1);
  --krit: #bc2a2a;
  --krit-weich: rgba(188, 42, 42, 0.09);
  --krit-fuell: #c62f2f;
  --info: #1f63c2;
  --info-weich: rgba(31, 99, 194, 0.1);

  --serie-1: #2a78d6;
  --serie-2: #eb6834;
  --serie-3: #1baf7a;
  --serie-4: #eda100;
  --serie-5: #e87ba4;
  --serie-6: #008300;
  --serie-7: #6250d6;
  --serie-8: #e34948;
  --diagramm-raster: #e3e5dd;
  --diagramm-achse: #c3c6bb;

  --sch-0: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --sch-1: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 2px rgba(20, 24, 16, 0.08);
  --sch-2: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 12px 30px -16px rgba(20, 24, 16, 0.25);
  --sch-pop: 0 30px 70px -26px rgba(20, 24, 16, 0.35), 0 10px 24px -12px rgba(20, 24, 16, 0.2);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-schnell: 1ms;
    --d-mittel: 1ms;
    --d-lang: 1ms;
  }
}