@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/ebgaramond-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hankengrotesk-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("/fonts/dmmono-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --farbe-grund: #F6F6F7;
  --farbe-blatt: #FFFFFF;
  --farbe-flaeche: #EDEDEF;
  --farbe-linie: #E4E4E7;
  --farbe-linie-blatt: #E4E4E7;
  --farbe-gestrichelt: #6B6B76;
  --farbe-text: #18181B;
  --farbe-text-leise: #52525B;
  --farbe-leise: #6B6B76;
  --farbe-knopf: #18181B;
  --farbe-knopf-text: #FFFFFF;
  --farbe-gut: #17784A;
  --farbe-gut-hinter: #E7F4EC;
  --farbe-warn: #95560A;
  --farbe-warn-hinter: #FBF1DE;
  --farbe-signal-blau: #2A78D6;
  --farbe-signal-violett: #6250D6;
  --farbe-signal-magenta: #E87BA4;
  --farbe-signal-tuerkis: #0E9AB0;
  --farbe-dunkel: #18181B;
  --farbe-dunkel-text: #F4F4F5;
  --farbe-dunkel-leise: #A1A1AA;
  --farbe-linie-dunkel: #2E2E33;
  --farbe-glas: rgba(255, 255, 255, 0.72);
  --farbe-glas-dicht: rgba(255, 255, 255, 0.94);
  --farbe-glas-linie: #E4E4E7;

  --schatten-glas: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(24, 24, 27, 0.06), 0 12px 28px -14px rgba(24, 24, 27, 0.18);
  --schatten-glas-dicht: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 2px rgba(24, 24, 27, 0.08), 0 16px 32px -14px rgba(24, 24, 27, 0.26);
  --schatten-blatt: 0 1px 2px rgba(24, 24, 27, 0.05), 0 36px 60px -44px rgba(24, 24, 27, 0.28);

  --schrift-anzeige: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --schrift: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --schrift-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-0: 14px;
  --text-1: 16px;
  --text-2: 18px;
  --text-3: 22px;
  --text-4: 40px;
  --text-5: 80px;
  --text-5-innen: 64px;
  --text-5-schmal: 48px;
  --text-4-schmal: 32px;
  --text-mono: 12px;
  --zeile: 1.6;
  --zeile-eng: 1.04;

  --abstand-1: 4px;
  --abstand-2: 8px;
  --abstand-3: 16px;
  --abstand-4: 24px;
  --abstand-5: 40px;
  --abstand-6: 64px;
  --abstand-7: 96px;

  --radius-1: 14px;
  --radius-2: 999px;

  --breite-seite: 1160px;
  --breite-text: 62ch;
  --breite-lead: 520px;
  --hoehe-kopf: 76px;

  --dauer-1: 180ms;
  --dauer-2: 360ms;
  --dauer-3: 760ms;
  --dauer-atem: 5600ms;
  --dauer-fall: 1500ms;
  --dauer-zufluss: 3000ms;

  --zf-fall: -420px;
  --zf-gross: 2.2;
  --zf-dreh: 0deg;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-knall: cubic-bezier(0.12, 0.8, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --farbe-grund: #111113;
    --farbe-blatt: #18181B;
    --farbe-flaeche: #27272A;
    --farbe-linie: #2E2E33;
    --farbe-linie-blatt: #2E2E33;
    --farbe-gestrichelt: #8E8E99;
    --farbe-text: #F4F4F5;
    --farbe-text-leise: #A1A1AA;
    --farbe-leise: #8E8E99;
    --farbe-knopf: #F4F4F5;
    --farbe-knopf-text: #18181B;
    --farbe-gut: #4CC38A;
    --farbe-gut-hinter: #14281E;
    --farbe-warn: #E8A33D;
    --farbe-warn-hinter: #2B2210;
    --farbe-signal-blau: #3987E5;
    --farbe-signal-violett: #9085E9;
    --farbe-signal-magenta: #D55181;
    --farbe-signal-tuerkis: #25B0C8;
    --farbe-dunkel: #18181B;
    --farbe-dunkel-text: #F4F4F5;
    --farbe-dunkel-leise: #A1A1AA;
    --farbe-linie-dunkel: #3F3F46;
    --farbe-glas: rgba(24, 24, 27, 0.6);
    --farbe-glas-dicht: rgba(24, 24, 27, 0.94);
    --farbe-glas-linie: #2E2E33;

    --schatten-glas: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 28px -14px rgba(0, 0, 0, 0.7);
    --schatten-glas-dicht: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.6), 0 16px 32px -14px rgba(0, 0, 0, 0.8);
    --schatten-blatt: 0 1px 2px rgba(0, 0, 0, 0.5), 0 36px 60px -44px rgba(0, 0, 0, 0.8);
  }
}

:root[data-theme="dark"] {
  --farbe-grund: #111113;
  --farbe-blatt: #18181B;
  --farbe-flaeche: #27272A;
  --farbe-linie: #2E2E33;
  --farbe-linie-blatt: #2E2E33;
  --farbe-gestrichelt: #8E8E99;
  --farbe-text: #F4F4F5;
  --farbe-text-leise: #A1A1AA;
  --farbe-leise: #8E8E99;
  --farbe-knopf: #F4F4F5;
  --farbe-knopf-text: #18181B;
  --farbe-gut: #4CC38A;
  --farbe-gut-hinter: #14281E;
  --farbe-warn: #E8A33D;
  --farbe-warn-hinter: #2B2210;
  --farbe-signal-blau: #3987E5;
  --farbe-signal-violett: #9085E9;
  --farbe-signal-magenta: #D55181;
  --farbe-signal-tuerkis: #25B0C8;
  --farbe-dunkel: #18181B;
  --farbe-dunkel-text: #F4F4F5;
  --farbe-dunkel-leise: #A1A1AA;
  --farbe-linie-dunkel: #3F3F46;
  --farbe-glas: rgba(24, 24, 27, 0.6);
  --farbe-glas-dicht: rgba(24, 24, 27, 0.94);
  --farbe-glas-linie: #2E2E33;

  --schatten-glas: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 28px -14px rgba(0, 0, 0, 0.7);
  --schatten-glas-dicht: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.6), 0 16px 32px -14px rgba(0, 0, 0, 0.8);
  --schatten-blatt: 0 1px 2px rgba(0, 0, 0, 0.5), 0 36px 60px -44px rgba(0, 0, 0, 0.8);
}