/* Automatisch aus brand/tokens.json erzeugt — nicht von Hand ändern. */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/schriften/anton-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/schriften/anton-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/schriften/space-mono-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/schriften/space-mono-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/schriften/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/schriften/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --hintergrund: #0A0A0A;
  --flaeche: #141414;
  --flaeche-hoch: #1F1F1F;
  --linie: #2E2E2E;
  --text: #F2EFE9;
  --text-leise: #A8A39A;
  --akzent: #FF4A00;
  --auf-akzent: #0A0A0A;
  --akzent-text: #FF4A00;
  --erfolg: #3FD17F;
  --warnung: #FFB020;
  --gefahr: #FF6B5E;
  --fokus: #FF4A00;
  --rahmen-eingabe: #6E6A63;
  --platte: #2A2A2A;
  --auf-platte: #F2EFE9;
  --e-grund: #131313;
  --e-grund-oben: #171717;
  --e-schiene: #0A0A0A;
  --e-schiene-hover: #111111;
  --e-schiene-druck: #060606;
  --e-modul-oben: #282828;
  --e-modul-unten: #1D1D1D;
  --e-taste-oben: #303030;
  --e-taste-unten: #1F1F1F;
  --e-schiene-rand: #000000;
  --e-schiene-trenner: #1C1C1C;
  --e-modul-rand: #050505;
  --e-taste-rand: #050505;
  --e-taste-sockel: #050505;
  --e-feld: #0A0A0A;
  --tab-aktiv: #0A0A0A;
  --led-aus: #2A2622;
  --led-ring: #000000;
  --led-ring-aus: #6E6A63;
  --e-schiene-schatten: inset 0 2px 8px rgb(0 0 0 / .85), 0 1px 0 rgb(255 255 255 / .05);
  --e-modul-schatten: inset 0 1px 0 rgb(255 255 255 / .10), inset 0 -1px 0 rgb(0 0 0 / .6), 0 8px 18px rgb(0 0 0 / .55);
  --e-taste-schatten: inset 0 1px 0 rgb(255 255 255 / .12), 0 3px 0 var(--e-taste-sockel), 0 5px 10px rgb(0 0 0 / .45);
  --e-taste-gedrueckt: inset 0 1px 0 rgb(255 255 255 / .06), 0 1px 0 var(--e-taste-sockel), 0 2px 4px rgb(0 0 0 / .45);
  --e-taste-weg: 2px;
  --e-taste-sockel-hoehe: 3px;
  --e-haupt-schatten: inset 0 1px 0 rgb(255 255 255 / .35), 0 3px 0 var(--haupt-sockel), 0 5px 12px rgb(0 0 0 / .45);
  --e-haupt-gedrueckt: inset 0 1px 0 rgb(255 255 255 / .2), 0 1px 0 var(--haupt-sockel), 0 2px 4px rgb(0 0 0 / .45);
  --e-feld-schatten: inset 0 2px 4px rgb(0 0 0 / .7);
  --e-display-schatten: inset 0 2px 8px rgb(0 0 0 / .9), inset 0 0 0 1px var(--display-rand), 0 1px 0 rgb(255 255 255 / .06);
  --e-leiste-schatten: inset 0 1px 0 rgb(255 255 255 / .10), 0 10px 24px rgb(0 0 0 / .6);
  --e-grund-buerste: repeating-linear-gradient(90deg, rgb(255 255 255 / .012) 0 1px, transparent 1px 4px);
  --display-glow: 0 0 8px rgb(255 74 0 / .65);
  --glow: 1;
  --korn-staerke: .05;
  --font-label: var(--font-mono);
  --label-gewicht: 700;
  --label-sperrung: .12em;
  --font-zahl: var(--font-mono);
  --zahl-gewicht: 700;
  --rubrik-grund: transparent;
  --rubrik-text: var(--text-leise);
  --rubrik-innen: 0;
  --rubrik-linie: var(--e-schiene-trenner);
  --rubrik-breite: auto;
  --e-display: #070A08;
  --display-rand: #1D2A20;
  --display-text: #FF6A2B;
  --display-leise: #A9785F;
  --display-hell: #F2EFE9;
  --display-warn: #FFB020;
  --display-fehler: #FF6B5E;
  --display-ok: #3FD17F;
  --haupt-oben: #FF6A2B;
  --haupt-unten: #FF4A00;
  --haupt-rand: #A52C00;
  --haupt-sockel: #8A2800;
  --auf-haupt: #0A0A0A;
  --led-ok: #3FD17F;
  --led-ok-licht: #C9FFE0;
  --led-ok-tief: #1C6B40;
  --led-warn: #FFB020;
  --led-warn-licht: #FFE6B0;
  --led-warn-tief: #8A5A00;
  --led-fehler: #FF6B5E;
  --led-fehler-licht: #FFD0CB;
  --led-fehler-tief: #A3271E;
  --led-aktiv: #FF4A00;
  --led-aktiv-licht: #FFD2B8;
  --led-aktiv-tief: #A52C00;
  --a-0: 2px;
  --a-1: 4px;
  --a-2: 8px;
  --a-3: 12px;
  --a-4: 16px;
  --a-5: 24px;
  --a-6: 32px;
  --a-7: 48px;
  --r-klein: 2px;
  --r: 4px;
  --r-taste: 6px;
  --r-modul: 8px;
  --dauer-druck: 80ms;
  --dauer-kurz: 120ms;
  --dauer-mittel: 200ms;
  --dauer-lang: 280ms;
  --kurve-standard: cubic-bezier(.2, 0, 0, 1);
  --kurve-raus: cubic-bezier(0, 0, .2, 1);
  --fokus-breite: 3px;
  --fokus-abstand: 3px;
  --t-titel: 2.5rem;
  --t-titel-detail: 2rem;
  --t-modul: 1.75rem;
  --t-display: 2.75rem;
  --t-kennzahl: 1.125rem;
  --t-rubrik: .75rem;
  --t-label: .75rem;
  --t-label-platte: .6875rem;
  --t-haupt: 1rem;
  --t-neben: .875rem;
  --t-text: 1rem;
  --t-knopf: 1rem;
  --t-knopf-klein: .875rem;
  --t-knopf-haupt: 1.125rem;
  --t-feldlabel: .9375rem;
  --t-zeit: 1rem;
  --t-song: 1.125rem;
  --t-tab: .75rem;
  --font-anzeige: "Anton", Impact, "Arial Narrow", sans-serif;
  --font-mono: "Space Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-text: "Inter", ui-sans-serif, system-ui, sans-serif;
  --radius: 4px;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    --hintergrund: #F2EFE9;
    --flaeche: #FFFFFF;
    --flaeche-hoch: #E8E4DC;
    --linie: #CFC9BE;
    --text: #0A0A0A;
    --text-leise: #57534C;
    --akzent: #FF4A00;
    --auf-akzent: #0A0A0A;
    --akzent-text: #B83700;
    --erfolg: #186B3C;
    --warnung: #8A5A00;
    --gefahr: #B3261E;
    --fokus: #B83700;
    --rahmen-eingabe: #857F75;
    --platte: #0A0A0A;
    --auf-platte: #F2EFE9;
    --e-grund: #F2EFE9;
    --e-grund-oben: #F8F6F2;
    --e-schiene: #E9E5DD;
    --e-schiene-hover: #E2DDD3;
    --e-schiene-druck: #DAD4C9;
    --e-modul-oben: #FFFFFF;
    --e-modul-unten: #F7F5F0;
    --e-taste-oben: #FFFFFF;
    --e-taste-unten: #FAF8F4;
    --e-schiene-rand: #CFC9BE;
    --e-schiene-trenner: #DCD7CE;
    --e-modul-rand: #CFC9BE;
    --e-taste-rand: #857F75;
    --e-taste-sockel: #A39C90;
    --e-feld: #FFFFFF;
    --tab-aktiv: #E9E5DD;
    --led-aus: #D6D1C7;
    --led-ring: #0A0A0A;
    --led-ring-aus: #857F75;
    --e-schiene-schatten: inset 0 1px 3px rgb(60 50 40 / .18), 0 1px 0 rgb(255 255 255 / .9);
    --e-modul-schatten: inset 0 1px 0 rgb(255 255 255 / 1), 0 1px 0 rgb(60 50 40 / .06), 0 6px 14px rgb(60 50 40 / .10);
    --e-taste-schatten: inset 0 1px 0 rgb(255 255 255 / 1), 0 2px 0 var(--e-taste-sockel), 0 3px 6px rgb(60 50 40 / .14);
    --e-taste-gedrueckt: inset 0 1px 2px rgb(60 50 40 / .18);
    --e-taste-weg: 1px;
    --e-taste-sockel-hoehe: 2px;
    --e-haupt-schatten: inset 0 1px 0 rgb(255 255 255 / .35), 0 2px 0 var(--haupt-sockel), 0 3px 8px rgb(60 50 40 / .18);
    --e-haupt-gedrueckt: inset 0 1px 2px rgb(0 0 0 / .2);
    --e-feld-schatten: inset 0 1px 2px rgb(60 50 40 / .12);
    --e-display-schatten: inset 0 1px 3px rgb(0 0 0 / .6), 0 1px 0 rgb(255 255 255 / 1);
    --e-leiste-schatten: inset 0 1px 0 rgb(255 255 255 / 1), 0 8px 20px rgb(60 50 40 / .14);
    --e-grund-buerste: none;
    --display-glow: none;
    --glow: 0;
    --korn-staerke: 0;
    --font-label: var(--font-text);
    --label-gewicht: 600;
    --label-sperrung: .04em;
    --font-zahl: var(--font-text);
    --zahl-gewicht: 700;
    --rubrik-grund: var(--platte);
    --rubrik-text: var(--auf-platte);
    --rubrik-innen: 2px 8px;
    --rubrik-linie: transparent;
    --rubrik-breite: fit-content;
    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --hintergrund: #F2EFE9;
  --flaeche: #FFFFFF;
  --flaeche-hoch: #E8E4DC;
  --linie: #CFC9BE;
  --text: #0A0A0A;
  --text-leise: #57534C;
  --akzent: #FF4A00;
  --auf-akzent: #0A0A0A;
  --akzent-text: #B83700;
  --erfolg: #186B3C;
  --warnung: #8A5A00;
  --gefahr: #B3261E;
  --fokus: #B83700;
  --rahmen-eingabe: #857F75;
  --platte: #0A0A0A;
  --auf-platte: #F2EFE9;
  --e-grund: #F2EFE9;
  --e-grund-oben: #F8F6F2;
  --e-schiene: #E9E5DD;
  --e-schiene-hover: #E2DDD3;
  --e-schiene-druck: #DAD4C9;
  --e-modul-oben: #FFFFFF;
  --e-modul-unten: #F7F5F0;
  --e-taste-oben: #FFFFFF;
  --e-taste-unten: #FAF8F4;
  --e-schiene-rand: #CFC9BE;
  --e-schiene-trenner: #DCD7CE;
  --e-modul-rand: #CFC9BE;
  --e-taste-rand: #857F75;
  --e-taste-sockel: #A39C90;
  --e-feld: #FFFFFF;
  --tab-aktiv: #E9E5DD;
  --led-aus: #D6D1C7;
  --led-ring: #0A0A0A;
  --led-ring-aus: #857F75;
  --e-schiene-schatten: inset 0 1px 3px rgb(60 50 40 / .18), 0 1px 0 rgb(255 255 255 / .9);
  --e-modul-schatten: inset 0 1px 0 rgb(255 255 255 / 1), 0 1px 0 rgb(60 50 40 / .06), 0 6px 14px rgb(60 50 40 / .10);
  --e-taste-schatten: inset 0 1px 0 rgb(255 255 255 / 1), 0 2px 0 var(--e-taste-sockel), 0 3px 6px rgb(60 50 40 / .14);
  --e-taste-gedrueckt: inset 0 1px 2px rgb(60 50 40 / .18);
  --e-taste-weg: 1px;
  --e-taste-sockel-hoehe: 2px;
  --e-haupt-schatten: inset 0 1px 0 rgb(255 255 255 / .35), 0 2px 0 var(--haupt-sockel), 0 3px 8px rgb(60 50 40 / .18);
  --e-haupt-gedrueckt: inset 0 1px 2px rgb(0 0 0 / .2);
  --e-feld-schatten: inset 0 1px 2px rgb(60 50 40 / .12);
  --e-display-schatten: inset 0 1px 3px rgb(0 0 0 / .6), 0 1px 0 rgb(255 255 255 / 1);
  --e-leiste-schatten: inset 0 1px 0 rgb(255 255 255 / 1), 0 8px 20px rgb(60 50 40 / .14);
  --e-grund-buerste: none;
  --display-glow: none;
  --glow: 0;
  --korn-staerke: 0;
  --font-label: var(--font-text);
  --label-gewicht: 600;
  --label-sperrung: .04em;
  --font-zahl: var(--font-text);
  --zahl-gewicht: 700;
  --rubrik-grund: var(--platte);
  --rubrik-text: var(--auf-platte);
  --rubrik-innen: 2px 8px;
  --rubrik-linie: transparent;
  --rubrik-breite: fit-content;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --hintergrund: #0A0A0A;
  --flaeche: #141414;
  --flaeche-hoch: #1F1F1F;
  --linie: #2E2E2E;
  --text: #F2EFE9;
  --text-leise: #A8A39A;
  --akzent: #FF4A00;
  --auf-akzent: #0A0A0A;
  --akzent-text: #FF4A00;
  --erfolg: #3FD17F;
  --warnung: #FFB020;
  --gefahr: #FF6B5E;
  --fokus: #FF4A00;
  --rahmen-eingabe: #6E6A63;
  --platte: #2A2A2A;
  --auf-platte: #F2EFE9;
  --e-grund: #131313;
  --e-grund-oben: #171717;
  --e-schiene: #0A0A0A;
  --e-schiene-hover: #111111;
  --e-schiene-druck: #060606;
  --e-modul-oben: #282828;
  --e-modul-unten: #1D1D1D;
  --e-taste-oben: #303030;
  --e-taste-unten: #1F1F1F;
  --e-schiene-rand: #000000;
  --e-schiene-trenner: #1C1C1C;
  --e-modul-rand: #050505;
  --e-taste-rand: #050505;
  --e-taste-sockel: #050505;
  --e-feld: #0A0A0A;
  --tab-aktiv: #0A0A0A;
  --led-aus: #2A2622;
  --led-ring: #000000;
  --led-ring-aus: #6E6A63;
  --e-schiene-schatten: inset 0 2px 8px rgb(0 0 0 / .85), 0 1px 0 rgb(255 255 255 / .05);
  --e-modul-schatten: inset 0 1px 0 rgb(255 255 255 / .10), inset 0 -1px 0 rgb(0 0 0 / .6), 0 8px 18px rgb(0 0 0 / .55);
  --e-taste-schatten: inset 0 1px 0 rgb(255 255 255 / .12), 0 3px 0 var(--e-taste-sockel), 0 5px 10px rgb(0 0 0 / .45);
  --e-taste-gedrueckt: inset 0 1px 0 rgb(255 255 255 / .06), 0 1px 0 var(--e-taste-sockel), 0 2px 4px rgb(0 0 0 / .45);
  --e-taste-weg: 2px;
  --e-taste-sockel-hoehe: 3px;
  --e-haupt-schatten: inset 0 1px 0 rgb(255 255 255 / .35), 0 3px 0 var(--haupt-sockel), 0 5px 12px rgb(0 0 0 / .45);
  --e-haupt-gedrueckt: inset 0 1px 0 rgb(255 255 255 / .2), 0 1px 0 var(--haupt-sockel), 0 2px 4px rgb(0 0 0 / .45);
  --e-feld-schatten: inset 0 2px 4px rgb(0 0 0 / .7);
  --e-display-schatten: inset 0 2px 8px rgb(0 0 0 / .9), inset 0 0 0 1px var(--display-rand), 0 1px 0 rgb(255 255 255 / .06);
  --e-leiste-schatten: inset 0 1px 0 rgb(255 255 255 / .10), 0 10px 24px rgb(0 0 0 / .6);
  --e-grund-buerste: repeating-linear-gradient(90deg, rgb(255 255 255 / .012) 0 1px, transparent 1px 4px);
  --display-glow: 0 0 8px rgb(255 74 0 / .65);
  --glow: 1;
  --korn-staerke: .05;
  --font-label: var(--font-mono);
  --label-gewicht: 700;
  --label-sperrung: .12em;
  --font-zahl: var(--font-mono);
  --zahl-gewicht: 700;
  --rubrik-grund: transparent;
  --rubrik-text: var(--text-leise);
  --rubrik-innen: 0;
  --rubrik-linie: var(--e-schiene-trenner);
  --rubrik-breite: auto;
  color-scheme: dark;
}

@media (min-width: 900px) {
  :root {
    --t-titel: 3.5rem;
    --t-titel-detail: 2.75rem;
    --t-modul: 2.25rem;
    --t-display: 3.5rem;
    --t-kennzahl: 1.375rem;
    --t-label: .8125rem;
    --t-label-platte: .75rem;
    --t-haupt: 1.0625rem;
    --t-neben: .9375rem;
    --t-song: 1.25rem;
    --t-tab: .9375rem;
  }
}