/* Erzeugt von design/erzeugen.py aus design/tokens.json. Nicht von Hand ändern.
   Hell ist der Grund; dunkel folgt dem System, außer die App ist fest auf hell gestellt (data-aussehen am
   html-Element, gesetzt in app.js wie „Darstellung“ in der Mac-App). */

:root {
  color-scheme: light;
  --ist-dunkel: 0;
  --grund: #F2F0EA;
  --flaeche: #F7F6F2;
  --flaeche2: #E9E6DE;
  --flaeche3: #EEEBE4;
  --linie: rgba(11, 11, 13, 0.1);
  --text: #0B0B0D;
  --text2: #46464C;
  --text3: #8A8990;
  --akzent: #2B36FF;
  --akzent-text: #2B36FF;
  --auf-akzent: #F2F0EA;
  --signal: #E8401A;
  --lime: #6E8A00;
  --gut: #2E8B4A;
  --gelb: #B98A16;
  --tuerkis: #2A9C89;
  --lila: #7E5BEF;
  --himmel: #2C86C9;
  --rolle-tinte: #0B0B0D;
  --schatten-leise: rgba(0, 0, 0, 0.08);
  --schatten-knopf: rgba(0, 0, 0, 0.12);
  --schatten-karte: rgba(0, 0, 0, 0.18);
  --schatten-dialog: rgba(0, 0, 0, 0.3);
  --schatten-abdunkeln: rgba(0, 0, 0, 0.45);
  --k-blau: #6C8CFF;
  --k-tuerkis: #3CC8B4;
  --k-lila: #B78CFF;
  --k-gold: #F2B84B;
  --k-orange: #FF8A3D;
  --k-gruen: #6FCF7F;
  --k-himmel: #56B6F2;
  --k-gelb: #F2C94C;
  --k-grau: #9AA0AE;
  --k-rot: #FF5A5F;
  --k-rosa: #FF7AB6;
  --k-aufnahme: #E5484D;
  --k-weiss: #FFFFFF;
  --rolle-kobalt: #2B36FF;
  --rolle-kobalt-schrift: #F2F0EA;
  --rolle-signal: #FF4D23;
  --rolle-signal-schrift: #0B0B0D;
  --rolle-lime: #DCFF3E;
  --rolle-lime-schrift: #0B0B0D;
  --rolle-papier: #E9E6DE;
  --rolle-papier-schrift: #0B0B0D;
  --rolle-tinte-schrift: #F2F0EA;
  --r-klein: 6px;
  --r-knopf: 7px;
  --r-zeile: 8px;
  --r-chefin: 10px;
  --r-karte: 12px;
  --r-feld: 14px;
  --r-dock: 16px;
  --r-blatt: 18px;
  --r-pille: 999px;
  --r-avatar-anteil: 32%;
  --a-xxs: 2px;
  --a-xs: 4px;
  --a-s: 7px;
  --a-m: 10px;
  --a-l: 14px;
  --a-xl: 20px;
  --a-xxl: 32px;
  --m-seitenleiste: 252px;
  --m-seitenleiste-rand: 10px;
  --m-logo-oben: 44px;
  --m-logo-oben-web: 24px;
  --m-logo-seite: 20px;
  --m-logo-unten: 22px;
  --m-eintrag-x: 10px;
  --m-eintrag-y: 7px;
  --m-eintrag-luecke: 10px;
  --m-symbol-spalte: 18px;
  --m-symbol: 16px;
  --m-chefin-avatar: 34px;
  --m-chefin-y: 9px;
  --m-chefin-luecke: 11px;
  --m-abschnitt-oben: 14px;
  --m-abschnitt-unten: 4px;
  --m-fuss-x: 14px;
  --m-fuss-y: 10px;
  --m-symbol-knopf: 28px;
  --m-verbindung-punkt: 6px;
  --m-zaehler-min: 18px;
  --m-kopf-hoehe: 104px;
  --m-kopf-oben: 16px;
  --m-kopf-web: 88px;
  --m-kopf-x: 32px;
  --m-spalte: 316px;
  --m-spalte-x: 22px;
  --s-titel-groesse: 30px; --s-titel-gewicht: 380; --s-titel-laufweite: -0.9px;
  --s-untertitel-groesse: 20px; --s-untertitel-gewicht: 420; --s-untertitel-laufweite: -0.4px;
  --s-text-groesse: 15px; --s-text-gewicht: 400; --s-text-laufweite: -0.1px;
  --s-label-groesse: 12.5px; --s-label-gewicht: 580; --s-label-laufweite: -0.05px;
  --s-hud-groesse: 10.5px; --s-hud-gewicht: 560; --s-hud-laufweite: 1.1px;
  --s-seiten-titel-groesse: 19px; --s-seiten-titel-gewicht: 560; --s-seiten-titel-laufweite: -0.3px;
  --s-unterzeile-groesse: 12.5px; --s-unterzeile-gewicht: 460; --s-unterzeile-laufweite: 0px;
  --s-spalten-abschnitt-groesse: 9.5px; --s-spalten-abschnitt-gewicht: 640; --s-spalten-abschnitt-laufweite: 1.1px;
  --s-wortmarke-groesse: 18px; --s-wortmarke-gewicht: 640; --s-wortmarke-laufweite: -0.63px;
  --s-firma-groesse: 12px; --s-firma-gewicht: 460; --s-firma-laufweite: 0px;
  --s-chefin-name-groesse: 15px; --s-chefin-name-gewicht: 600; --s-chefin-name-laufweite: 0px;
  --s-chefin-status-groesse: 12px; --s-chefin-status-gewicht: 440; --s-chefin-status-laufweite: 0px;
  --s-eintrag-groesse: 13.5px; --s-eintrag-gewicht: 480; --s-eintrag-laufweite: 0px;
  --s-eintrag-aktiv-groesse: 13.5px; --s-eintrag-aktiv-gewicht: 580; --s-eintrag-aktiv-laufweite: 0px;
  --s-nebenchat-groesse: 13.5px; --s-nebenchat-gewicht: 460; --s-nebenchat-laufweite: 0px;
  --s-zaehler-groesse: 11px; --s-zaehler-gewicht: 620; --s-zaehler-laufweite: 0px;
  --s-fuss-groesse: 11.5px; --s-fuss-gewicht: 500; --s-fuss-laufweite: 0px;
  --s-leer-groesse: 12px; --s-leer-gewicht: 420; --s-leer-laufweite: 0px;
  --s-chip-groesse: 11.5px; --s-chip-gewicht: 540; --s-chip-laufweite: 0px;
  --s-knopf-groesse: 13px; --s-knopf-gewicht: 580; --s-knopf-laufweite: 0px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-aussehen="hell"]) {
    color-scheme: dark;
    --ist-dunkel: 1;
    --grund: #0B0B0D;
    --flaeche: #111114;
    --flaeche2: #1A1A1F;
    --flaeche3: #16161A;
    --linie: rgba(242, 240, 234, 0.08);
    --text: #F2F0EA;
    --text2: rgba(242, 240, 234, 0.66);
    --text3: rgba(242, 240, 234, 0.4);
    --akzent: #2B36FF;
    --akzent-text: #8C93FF;
    --auf-akzent: #F2F0EA;
    --signal: #FF4D23;
    --lime: #DCFF3E;
    --gut: #7BD88F;
    --gelb: #E0A82E;
    --tuerkis: #3CB4A0;
    --lila: #B78CFF;
    --himmel: #56B6F2;
    --rolle-tinte: #2A2A30;
    --schatten-leise: rgba(0, 0, 0, 0.35);
    --schatten-knopf: rgba(0, 0, 0, 0.3);
    --schatten-karte: rgba(0, 0, 0, 0.3);
    --schatten-dialog: rgba(0, 0, 0, 0.45);
    --schatten-abdunkeln: rgba(0, 0, 0, 0.55);
  }
}
:root[data-aussehen="dunkel"] {
  color-scheme: dark;
  --ist-dunkel: 1;
  --grund: #0B0B0D;
  --flaeche: #111114;
  --flaeche2: #1A1A1F;
  --flaeche3: #16161A;
  --linie: rgba(242, 240, 234, 0.08);
  --text: #F2F0EA;
  --text2: rgba(242, 240, 234, 0.66);
  --text3: rgba(242, 240, 234, 0.4);
  --akzent: #2B36FF;
  --akzent-text: #8C93FF;
  --auf-akzent: #F2F0EA;
  --signal: #FF4D23;
  --lime: #DCFF3E;
  --gut: #7BD88F;
  --gelb: #E0A82E;
  --tuerkis: #3CB4A0;
  --lila: #B78CFF;
  --himmel: #56B6F2;
  --rolle-tinte: #2A2A30;
  --schatten-leise: rgba(0, 0, 0, 0.35);
  --schatten-knopf: rgba(0, 0, 0, 0.3);
  --schatten-karte: rgba(0, 0, 0, 0.3);
  --schatten-dialog: rgba(0, 0, 0, 0.45);
  --schatten-abdunkeln: rgba(0, 0, 0, 0.55);
}

.s-titel { font-size: var(--s-titel-groesse); font-weight: var(--s-titel-gewicht); letter-spacing: var(--s-titel-laufweite); }
.s-untertitel { font-size: var(--s-untertitel-groesse); font-weight: var(--s-untertitel-gewicht); letter-spacing: var(--s-untertitel-laufweite); }
.s-text { font-size: var(--s-text-groesse); font-weight: var(--s-text-gewicht); letter-spacing: var(--s-text-laufweite); }
.s-label { font-size: var(--s-label-groesse); font-weight: var(--s-label-gewicht); letter-spacing: var(--s-label-laufweite); }
.s-hud { font-size: var(--s-hud-groesse); font-weight: var(--s-hud-gewicht); letter-spacing: var(--s-hud-laufweite); text-transform: uppercase; }
.s-seiten-titel { font-size: var(--s-seiten-titel-groesse); font-weight: var(--s-seiten-titel-gewicht); letter-spacing: var(--s-seiten-titel-laufweite); }
.s-unterzeile { font-size: var(--s-unterzeile-groesse); font-weight: var(--s-unterzeile-gewicht); letter-spacing: var(--s-unterzeile-laufweite); }
.s-spalten-abschnitt { font-size: var(--s-spalten-abschnitt-groesse); font-weight: var(--s-spalten-abschnitt-gewicht); letter-spacing: var(--s-spalten-abschnitt-laufweite); font-stretch: 120%; text-transform: uppercase; }
.s-wortmarke { font-size: var(--s-wortmarke-groesse); font-weight: var(--s-wortmarke-gewicht); letter-spacing: var(--s-wortmarke-laufweite); }
.s-firma { font-size: var(--s-firma-groesse); font-weight: var(--s-firma-gewicht); letter-spacing: var(--s-firma-laufweite); }
.s-chefin-name { font-size: var(--s-chefin-name-groesse); font-weight: var(--s-chefin-name-gewicht); letter-spacing: var(--s-chefin-name-laufweite); }
.s-chefin-status { font-size: var(--s-chefin-status-groesse); font-weight: var(--s-chefin-status-gewicht); letter-spacing: var(--s-chefin-status-laufweite); }
.s-eintrag { font-size: var(--s-eintrag-groesse); font-weight: var(--s-eintrag-gewicht); letter-spacing: var(--s-eintrag-laufweite); }
.s-eintrag-aktiv { font-size: var(--s-eintrag-aktiv-groesse); font-weight: var(--s-eintrag-aktiv-gewicht); letter-spacing: var(--s-eintrag-aktiv-laufweite); }
.s-nebenchat { font-size: var(--s-nebenchat-groesse); font-weight: var(--s-nebenchat-gewicht); letter-spacing: var(--s-nebenchat-laufweite); }
.s-zaehler { font-size: var(--s-zaehler-groesse); font-weight: var(--s-zaehler-gewicht); letter-spacing: var(--s-zaehler-laufweite); }
.s-fuss { font-size: var(--s-fuss-groesse); font-weight: var(--s-fuss-gewicht); letter-spacing: var(--s-fuss-laufweite); }
.s-leer { font-size: var(--s-leer-groesse); font-weight: var(--s-leer-gewicht); letter-spacing: var(--s-leer-laufweite); }
.s-chip { font-size: var(--s-chip-groesse); font-weight: var(--s-chip-gewicht); letter-spacing: var(--s-chip-laufweite); }
.s-knopf { font-size: var(--s-knopf-groesse); font-weight: var(--s-knopf-gewicht); letter-spacing: var(--s-knopf-laufweite); }