:root[data-gestaltung="arbeitsplatz"]{
  --thema-ton:247;
  --thema-satt:0.12;
  --thema-verlauf-satt:0.187;
  --thema-1:oklch(.40 calc(var(--thema-satt) * .85) var(--thema-ton));
  --thema-2:oklch(.47 var(--thema-satt) var(--thema-ton));
  --thema-3:oklch(.53 var(--thema-satt) var(--thema-ton));
  --thema-4:oklch(.60 calc(var(--thema-satt) * 1.1) var(--thema-ton));
  --thema-akzent:oklch(.50 var(--thema-satt) var(--thema-ton));
  --thema-flaeche:oklch(.955 calc(var(--thema-satt) * .22) var(--thema-ton));
  --thema-2d:oklch(.55 var(--thema-satt) var(--thema-ton));
  --thema-3d:oklch(.62 var(--thema-satt) var(--thema-ton));
  --thema-4d:oklch(.69 calc(var(--thema-satt) * 1.05) var(--thema-ton));
  --thema-knopf-d:oklch(.52 var(--thema-satt) var(--thema-ton));
  --thema-knopf-hover-d:oklch(.56 var(--thema-satt) var(--thema-ton));
  --thema-akzent-d:oklch(.667 calc(var(--thema-satt) * 1.14) var(--thema-ton));
  --thema-text-d:oklch(.80 calc(var(--thema-satt) * .7) var(--thema-ton));
  --thema-flaeche-d:oklch(.667 calc(var(--thema-satt) * 1.14) var(--thema-ton) / .16);
  --rahmen:oklch(0.968 0.004 265);
  --panel:oklch(0.985 0.003 265);
  --grund:oklch(0.985 0.003 265);
  --grund-tief:#e4e7ed;
  --flaeche:#ffffff;
  --flaeche-2:#fafbfc;
  --mulde:oklch(0.967 0.006 265);
  --hover:color-mix(in oklch,var(--thema-akzent) 5%,transparent);
  --linie:oklch(0.935 0.004 265);
  --linie-2:oklch(0.905 0.005 265);
  --strich:oklch(0.83 0.007 265);
  --kachel-rand:transparent;
  --ink:oklch(0.17 0.004 265);
  --ink-2:oklch(0.32 0.007 265);
  --ink-3:oklch(0.45 0.008 265);
  --blau-1:var(--thema-1);
  --blau-2:var(--thema-2);
  --blau-3:var(--thema-3);
  --blau-4:var(--thema-4);
  --blau-text:var(--thema-akzent);
  --blau-hell:var(--thema-flaeche);
  --gruen:#1faf5a;
  --gruen-text:#147a3c;
  --gruen-hell:#e6f5ec;
  --gelb:#e09b12;
  --gelb-text:#8a5a00;
  --gelb-hell:#fcf2dc;
  --rot:#e0484e;
  --rot-text:#a62828;
  --rot-hell:#fcedec;
  --sf:22,30,62;
  --schatten-klein:0 0 0 1px rgba(var(--sf),.06),0 1px 2px rgba(var(--sf),.05),0 3px 8px -4px rgba(var(--sf),.08);
  --schatten-karte:0 0 0 1px rgba(var(--sf),.045),0 1px 2px rgba(var(--sf),.04),0 8px 24px -8px rgba(var(--sf),.08),0 24px 56px -24px rgba(var(--sf),.1);
  --schatten-hoch:0 0 0 1px rgba(var(--sf),.05),0 2px 4px rgba(var(--sf),.04),0 14px 32px -12px rgba(var(--sf),.12),0 36px 72px -32px rgba(var(--sf),.13);
  --glanz:inset 0 1px 0 rgba(255,255,255,.95);
  --schleier:rgba(14,16,24,0.32);
  --buehne:#0b0c0e;
  --buehne-leiste:#15161a;
  --buehne-linie:rgba(255,255,255,0.09);
  --buehne-ink:#eceef2;
  --buehne-ink-2:#9a9da8;
  --buehne-blau:var(--thema-knopf-d);
  --buehne-blau-hover:var(--thema-knopf-hover-d);
  --primaer:var(--thema-akzent);
  --primaer-hell:var(--thema-4);
  --primaer-ton:var(--primaer);
  --primaer-text:var(--primaer);
  --kante:oklch(0.875 0.006 265);
  --schatten-klappe:12px 0 32px -14px rgba(22,30,62,.28);
  --pille-grund:var(--ink);
  --pille-ink:var(--grund);
  --los-grund:var(--mulde);
  --los-ink:var(--ink-2);
  --haupt:var(--thema-3);
  --haupt-hover:var(--thema-2);
  --haupt-verlauf:linear-gradient(100deg,oklch(.352 var(--thema-verlauf-satt) var(--thema-ton)),oklch(.55 var(--thema-verlauf-satt) var(--thema-ton)));
  --haupt-verlauf-hover:linear-gradient(100deg,oklch(.312 var(--thema-verlauf-satt) var(--thema-ton)),oklch(.50 var(--thema-verlauf-satt) var(--thema-ton)));
  --haupt-satin:var(--haupt-verlauf);
  --haupt-satin-hover:var(--haupt-verlauf-hover);
  --auf-haupt:#ffffff;
  --gefahr:#c8373d;
  --gefahr-hover:#b53036;
  --auf-gefahr:#ffffff;
  --gefahr-flaeche:var(--gefahr);
  --gefahr-flaeche-hover:var(--gefahr-hover);
  --gefahr-rand:transparent;
  --gefahr-schrift:var(--auf-gefahr);
  --agent:#7c4dff;
  --name-1:oklch(0.62 0.16 266);
  --name-2:oklch(0.6 0.15 168);
  --name-3:oklch(0.64 0.15 42);
  --name-4:oklch(0.58 0.17 320);
  --name-5:oklch(0.6 0.14 210);
  --name-6:oklch(0.62 0.15 98);
  --initialen-licht:0%;
  color-scheme:light;
}
:root[data-gestaltung="arbeitsplatz"][data-produktfarbe="krondesk"]{
  --thema-ton:247;
  --thema-satt:0.12;
  --thema-verlauf-satt:0.187;
  --haupt-satin:linear-gradient(100deg,oklch(.44 .12 calc(var(--thema-ton) + 2)),oklch(.51 .135 calc(var(--thema-ton) - 4)) 55%,oklch(.555 .125 calc(var(--thema-ton) - 8)));
  --haupt-satin-hover:linear-gradient(100deg,oklch(.40 .12 calc(var(--thema-ton) + 2)),oklch(.47 .135 calc(var(--thema-ton) - 4)) 55%,oklch(.515 .125 calc(var(--thema-ton) - 8)));
}
:root[data-gestaltung="arbeitsplatz"][data-produktfarbe="kronaccess"]{
  --thema-ton:51.3;
  --thema-satt:0.145;
  --thema-verlauf-satt:0.187;
  --haupt-satin:linear-gradient(100deg,#AC5F34,#F68330);
  --haupt-satin-hover:linear-gradient(100deg,#914F2A,#D06E27);
}
:root[data-gestaltung="arbeitsplatz"][data-produktfarbe="kronadmin"]{
  --thema-ton:266;
  --thema-satt:0.2;
  --thema-verlauf-satt:0.22;
  --haupt-satin:linear-gradient(100deg,#3B51BB,#4F6EF7);
  --haupt-satin-hover:linear-gradient(100deg,#30439D,#415CD0);
}
:root[data-gestaltung="arbeitsplatz"][data-produktfarbe="kronauth"]{
  --thema-ton:261.7;
  --thema-satt:0.186;
  --thema-verlauf-satt:0.205;
  --haupt-satin:linear-gradient(100deg,#1347AE,#145FE4);
  --haupt-satin-hover:linear-gradient(100deg,#0E3A92,#0F4FC0);
}
:root[data-gestaltung="arbeitsplatz"][data-produktfarbe="kronsupport"]{
  --thema-ton:29;
  --thema-satt:0.19;
  --thema-verlauf-satt:0.209;
  --gefahr-flaeche:var(--flaeche);
  --gefahr-flaeche-hover:var(--rot-hell);
  --gefahr-rand:var(--rot);
  --gefahr-schrift:var(--rot-text);
}
@media (prefers-color-scheme:dark){:root[data-gestaltung="arbeitsplatz"]:not([data-thema="hell"]){
  --rahmen:#111113;
  --panel:#18181a;
  --primaer-ton:var(--thema-akzent-d);
  --primaer-text:var(--thema-text-d);
  --kante:#3a3b41;
  --schatten-klappe:12px 0 32px -14px rgba(0,0,0,.7);
  --pille-grund:#2d2e33;
  --pille-ink:#f1f2f4;
  --los-grund:#2d2e33;
  --los-ink:#d9dadf;
  --haupt:var(--thema-knopf-d);
  --haupt-hover:var(--thema-knopf-hover-d);
  --haupt-verlauf:linear-gradient(100deg,oklch(.42 var(--thema-verlauf-satt) var(--thema-ton)),oklch(.55 var(--thema-verlauf-satt) var(--thema-ton)));
  --haupt-verlauf-hover:linear-gradient(100deg,oklch(.38 var(--thema-verlauf-satt) var(--thema-ton)),oklch(.50 var(--thema-verlauf-satt) var(--thema-ton)));
  --grund:#18181a;
  --grund-tief:#0e0e0f;
  --flaeche:#1e1f22;
  --flaeche-2:#232427;
  --mulde:#28292d;
  --hover:#2d2d30;
  --linie:#2a2a2e;
  --linie-2:#333337;
  --strich:#4d4f55;
  --kachel-rand:rgba(255,255,255,0.13);
  --ink:#f8f9f9;
  --ink-2:#cfd0d4;
  --ink-3:#a6a7ad;
  --blau-3:var(--thema-3d);
  --blau-4:var(--thema-4d);
  --blau-2:var(--thema-2d);
  --blau-text:var(--thema-text-d);
  --blau-hell:var(--thema-flaeche-d);
  --gruen:#4cc38a;
  --gruen-text:#6fd6a2;
  --gruen-hell:rgba(76,195,138,0.14);
  --gelb:#e8b44a;
  --gelb-text:#f0c46a;
  --gelb-hell:rgba(232,180,74,0.14);
  --rot:#ff6b6f;
  --rot-text:#ff9a9d;
  --rot-hell:rgba(255,107,111,0.13);
  --schatten-klein:0 0 0 1px rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.4);
  --schatten-karte:0 0 0 1px rgba(255,255,255,.06),0 12px 32px -16px rgba(0,0,0,.7);
  --schatten-hoch:0 0 0 1px rgba(255,255,255,.08),0 24px 56px -20px rgba(0,0,0,.8);
  --glanz:inset 0 1px 0 rgba(255,255,255,.05);
  --schleier:rgba(0,0,0,0.55);
  --initialen-licht:25%;
  color-scheme:dark;
}}
:root[data-gestaltung="arbeitsplatz"][data-thema="dunkel"]{
  --rahmen:#111113;
  --panel:#18181a;
  --primaer-ton:var(--thema-akzent-d);
  --primaer-text:var(--thema-text-d);
  --kante:#3a3b41;
  --schatten-klappe:12px 0 32px -14px rgba(0,0,0,.7);
  --pille-grund:#2d2e33;
  --pille-ink:#f1f2f4;
  --los-grund:#2d2e33;
  --los-ink:#d9dadf;
  --haupt:var(--thema-knopf-d);
  --haupt-hover:var(--thema-knopf-hover-d);
  --haupt-verlauf:linear-gradient(100deg,oklch(.42 var(--thema-verlauf-satt) var(--thema-ton)),oklch(.55 var(--thema-verlauf-satt) var(--thema-ton)));
  --haupt-verlauf-hover:linear-gradient(100deg,oklch(.38 var(--thema-verlauf-satt) var(--thema-ton)),oklch(.50 var(--thema-verlauf-satt) var(--thema-ton)));
  --grund:#18181a;
  --grund-tief:#0e0e0f;
  --flaeche:#1e1f22;
  --flaeche-2:#232427;
  --mulde:#28292d;
  --hover:#2d2d30;
  --linie:#2a2a2e;
  --linie-2:#333337;
  --strich:#4d4f55;
  --kachel-rand:rgba(255,255,255,0.13);
  --ink:#f8f9f9;
  --ink-2:#cfd0d4;
  --ink-3:#a6a7ad;
  --blau-3:var(--thema-3d);
  --blau-4:var(--thema-4d);
  --blau-2:var(--thema-2d);
  --blau-text:var(--thema-text-d);
  --blau-hell:var(--thema-flaeche-d);
  --gruen:#4cc38a;
  --gruen-text:#6fd6a2;
  --gruen-hell:rgba(76,195,138,0.14);
  --gelb:#e8b44a;
  --gelb-text:#f0c46a;
  --gelb-hell:rgba(232,180,74,0.14);
  --rot:#ff6b6f;
  --rot-text:#ff9a9d;
  --rot-hell:rgba(255,107,111,0.13);
  --schatten-klein:0 0 0 1px rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.4);
  --schatten-karte:0 0 0 1px rgba(255,255,255,.06),0 12px 32px -16px rgba(0,0,0,.7);
  --schatten-hoch:0 0 0 1px rgba(255,255,255,.08),0 24px 56px -20px rgba(0,0,0,.8);
  --glanz:inset 0 1px 0 rgba(255,255,255,.05);
  --schleier:rgba(0,0,0,0.55);
  --initialen-licht:25%;
  color-scheme:dark;
}
:root[data-gestaltung="arbeitsplatz"] [data-gestaltungsmodus="dunkel"]{
  --grund:#18181a;
  --flaeche:#1e1f22;
  --flaeche-2:#232427;
  --mulde:#28292d;
  --hover:#2d2d30;
  --linie:#2a2a2e;
  --linie-2:#333337;
  --strich:#4d4f55;
  --kante:#3a3b41;
  --ink:#f8f9f9;
  --ink-2:#cfd0d4;
  --ink-3:#a6a7ad;
  --blau-3:var(--thema-3d);
  --blau-4:var(--thema-4d);
  --blau-hell:var(--thema-flaeche-d);
  --blau-text:var(--thema-text-d);
  --primaer-text:var(--thema-text-d);
  --pille-grund:#2d2e33;
  --pille-ink:#f1f2f4;
  --haupt:var(--thema-knopf-d);
  --haupt-hover:var(--thema-knopf-hover-d);
  --haupt-verlauf:linear-gradient(180deg,var(--thema-knopf-d),var(--thema-2));
  --haupt-verlauf-hover:linear-gradient(180deg,var(--thema-knopf-hover-d),var(--thema-knopf-d));
  --schatten-klein:0 0 0 1px rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.4);
  --initialen-licht:25%;
  color-scheme:dark;
}
