@font-face {
  font-family: "Exo 2";
  src: url("../fonts/Exo2-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Google Sans Code";
  src: url("../fonts/GoogleSansCode-Variable.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}

@font-face {
  font-family: "Exo 2 Segoe";
  src: local("Segoe UI"), local("SegoeUI");
  font-weight: 100 450;
  unicode-range: U+20-7E, U+A0-AC, U+AE-148, U+14A-17E, U+2010, U+2012-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+20AC;
  size-adjust: 102.1%;
  ascent-override: 97.85%;
  descent-override: 19.69%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Exo 2 Segoe";
  src: local("Segoe UI Semibold"), local("SegoeUI-Semibold");
  font-weight: 451 650;
  unicode-range: U+20-7E, U+A0-AC, U+AE-148, U+14A-17E, U+2010, U+2012-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+20AC;
  size-adjust: 100.7%;
  ascent-override: 99.21%;
  descent-override: 19.96%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Exo 2 Segoe";
  src: local("Segoe UI Bold"), local("SegoeUI-Bold");
  font-weight: 651 750;
  unicode-range: U+20-7E, U+A0-AC, U+AE-148, U+14A-17E, U+2010, U+2012-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+20AC;
  size-adjust: 99.5%;
  ascent-override: 100.40%;
  descent-override: 20.20%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Exo 2 Segoe";
  src: local("Segoe UI Black"), local("SegoeUI-Black");
  font-weight: 751 850;
  unicode-range: U+20-7E, U+A0-AC, U+AE-148, U+14A-17E, U+2010, U+2012-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+20AC;
  size-adjust: 97.7%;
  ascent-override: 102.25%;
  descent-override: 20.57%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Exo 2 Segoe";
  src: local("Segoe UI Black"), local("SegoeUI-Black");
  font-weight: 851 900;
  unicode-range: U+20-7E, U+A0-AC, U+AE-148, U+14A-17E, U+2010, U+2012-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+20AC;
  size-adjust: 99.4%;
  ascent-override: 100.50%;
  descent-override: 20.22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Exo 2 Roboto";
  src: local("Roboto"), local("Roboto-Regular");
  font-weight: 100 450;
  unicode-range: U+20-7E, U+A0-AC, U+AE-148, U+14A-17E, U+2010, U+2012-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+20AC;
  size-adjust: 101.9%;
  ascent-override: 98.04%;
  descent-override: 19.73%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Exo 2 Roboto";
  src: local("Roboto Medium"), local("Roboto-Medium");
  font-weight: 451 650;
  unicode-range: U+20-7E, U+A0-AC, U+AE-148, U+14A-17E, U+2010, U+2012-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+20AC;
  size-adjust: 102.5%;
  ascent-override: 97.46%;
  descent-override: 19.61%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Exo 2 Roboto";
  src: local("Roboto Bold"), local("Roboto-Bold");
  font-weight: 651 750;
  unicode-range: U+20-7E, U+A0-AC, U+AE-148, U+14A-17E, U+2010, U+2012-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+20AC;
  size-adjust: 104.2%;
  ascent-override: 95.87%;
  descent-override: 19.29%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Exo 2 Roboto";
  src: local("Roboto Black"), local("Roboto-Black");
  font-weight: 751 850;
  unicode-range: U+20-7E, U+A0-AC, U+AE-148, U+14A-17E, U+2010, U+2012-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+20AC;
  size-adjust: 105.8%;
  ascent-override: 94.42%;
  descent-override: 19.00%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Exo 2 Roboto";
  src: local("Roboto Black"), local("Roboto-Black");
  font-weight: 851 900;
  unicode-range: U+20-7E, U+A0-AC, U+AE-148, U+14A-17E, U+2010, U+2012-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+20AC;
  size-adjust: 107.7%;
  ascent-override: 92.76%;
  descent-override: 18.66%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Exo 2 Arial";
  src: local("Arial"), local("ArialMT");
  font-weight: 100 450;
  unicode-range: U+20-7E, U+A0-AC, U+AE-148, U+14A-17E, U+2010, U+2012-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+20AC;
  size-adjust: 100.5%;
  ascent-override: 99.40%;
  descent-override: 20.00%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Exo 2 Arial";
  src: local("Arial"), local("ArialMT");
  font-weight: 451 549;
  unicode-range: U+20-7E, U+A0-AC, U+AE-148, U+14A-17E, U+2010, U+2012-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+20AC;
  size-adjust: 101.3%;
  ascent-override: 98.62%;
  descent-override: 19.84%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Exo 2 Arial";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 550 750;
  unicode-range: U+20-7E, U+A0-AC, U+AE-148, U+14A-17E, U+2010, U+2012-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+20AC;
  size-adjust: 97.2%;
  ascent-override: 102.78%;
  descent-override: 20.68%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Exo 2 Arial";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 751 900;
  unicode-range: U+20-7E, U+A0-AC, U+AE-148, U+14A-17E, U+2010, U+2012-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+20AC;
  size-adjust: 102.4%;
  ascent-override: 97.56%;
  descent-override: 19.63%;
  line-gap-override: 0%;
}

:root {
  color-scheme: dark;

  --grund-0: #040812;
  --paper:   #0B111E;
  --paper-2: #101728;
  --paper-3: #1E2635;
  --rand:    #3A3F4D;
  --feld-rand: var(--ink-45);

  --ink:    #F4F6FB;
  --ink-70: #B6BDCC;
  --ink-45: #8B93A7;
  --rule:      rgba(244, 246, 251, .16);
  --rule-soft: rgba(244, 246, 251, .08);

  --violet:  #A458FF;
  --pink:    #FF006E;
  --tuerkis: #00C8FF;
  --orange:  #FF6E00;
  --gruen:   #B3FF00;
  --gold:    #FFD000;
  --fuchsia: #FF2BFF;

  --hell-violet:  #9729FF;
  --hell-pink:    #D8005C;
  --hell-tuerkis: #007699;
  --hell-orange:  #FD6F03;
  --hell-gruen:   #7DB400;
  --hell-gold:    #C5A000;
  --hell-fuchsia: #B000B0;

  --font-sans: "Exo 2", "Exo 2 Segoe", "Exo 2 Roboto", "Exo 2 Arial", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Google Sans Code", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --step: clamp(18px, 2.2vw, 26px);
  --radius: 2px;
  --wrap: 1280px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

body.hell {
  color-scheme: light;

  --grund-0: #FFFFFF;
  --paper:   #F3F1EC;
  --paper-2: #F9F8F5;
  --paper-3: #FDFCFA;
  --rand:    #86837C;
  --feld-rand: var(--rand);

  --ink:    #16181C;
  --ink-70: #494D56;
  --ink-45: #5C606A;
  --rule:      rgba(22, 24, 28, .16);
  --rule-soft: rgba(22, 24, 28, .08);

  --violet:  var(--hell-violet);
  --pink:    var(--hell-pink);
  --tuerkis: var(--hell-tuerkis);
  --orange:  var(--hell-orange);
  --gruen:   var(--hell-gruen);
  --gold:    var(--hell-gold);
  --fuchsia: var(--hell-fuchsia);
}

:root, body.hell {
  --auf-farbe:   var(--grund-0);
  --violet-auf:  var(--grund-0);
  --pink-auf:    var(--grund-0);
  --tuerkis-auf: var(--grund-0);
  --orange-auf:  var(--grund-0);
  --gruen-auf:   var(--grund-0);
  --gold-auf:    var(--grund-0);
  --fuchsia-auf: var(--grund-0);

  --violet-text:  var(--violet);
  --pink-text:    var(--pink);
  --tuerkis-text: var(--tuerkis);
  --orange-text:  var(--orange);
  --gruen-text:   var(--gruen);
  --gold-text:    var(--gold);
  --fuchsia-text: var(--fuchsia);

  --ok-text:   var(--gruen-text);
  --warn-text: var(--gold-text);
  --rot-text:  var(--pink-text);

  --hover-schrift: #FFFFFF;
  --hover-tiefe:   #000000;

  --violet-deep: var(--violet);
  --violet-tint: color-mix(in srgb, var(--violet) 14%, transparent);

  --siegel-leer: color-mix(in srgb, var(--ink) 8%, var(--paper));

  --schleier: color-mix(in srgb, var(--grund-0) 70%, transparent);

  --ok:   #3E9E2F;
  --warn: var(--gold);
  --rot:  #E5231B;

  --shadow-violet:  6px 6px 0 var(--violet);
  --shadow-pink:    6px 6px 0 var(--pink);
  --shadow-tuerkis: 6px 6px 0 var(--tuerkis);
}

body.hell {
  --orange-text: var(--ink);
  --gruen-text:  var(--ink);
  --gold-text:   var(--ink);
  --orange-auf:  var(--ink);
  --gruen-auf:   var(--ink);
  --gold-auf:    var(--ink);
}

@media print {
  :root {
    color-scheme: light;
    --grund-0: #FFFFFF;
    --paper: #FFFFFF;
    --paper-2: #FFFFFF;
    --paper-3: #FFFFFF;
    --rand: #999999;
    --ink: #000000;
    --ink-70: #333333;
    --ink-45: #555555;
    --rule: #BBBBBB;
    --rule-soft: #DDDDDD;

    --violet:  var(--hell-violet);
    --pink:    var(--hell-pink);
    --tuerkis: var(--hell-tuerkis);
    --orange:  var(--hell-orange);
    --gruen:   var(--hell-gruen);
    --gold:    var(--hell-gold);
    --fuchsia: var(--hell-fuchsia);
    --violet-tint: transparent;
    --shadow: none;
    --shadow-violet: none;
    --shadow-pink: none;
    --shadow-tuerkis: none;
  }
}