:root {
  --telekom-color-text-and-icon-standard: #000000;
  --telekom-color-text-and-icon-additional: hsla(0, 0%, 0%, 0.65);
  --telekom-color-text-and-icon-disabled: hsla(0, 0%, 0%, 0.4);
  --telekom-color-text-and-icon-link-standard: #2238df;
  --telekom-color-text-and-icon-link-hovered: #0819bd;
  --telekom-color-text-and-icon-link-visited: #6c3bdb;
  --telekom-color-text-and-icon-link-active: #000d99;
  --telekom-color-text-and-icon-primary-standard: #e20074;
  --telekom-color-text-and-icon-primary-hovered: #c00063;
  --telekom-color-text-and-icon-primary-pressed: #9e0051;
  --telekom-color-text-and-icon-inverted-standard: #ffffff;
  --telekom-color-text-and-icon-inverted-additional: hsla(0, 0%, 100%, 0.65);
  --telekom-color-text-and-icon-white-standard: #ffffff;
  --telekom-color-text-and-icon-white-additional: hsla(0, 0%, 100%, 0.65);
  --telekom-color-text-and-icon-black-standard: #000000;
  --telekom-color-text-and-icon-black-additional: hsla(0, 0%, 0%, 0.65);
  --telekom-color-text-and-icon-functional-informational: #2238df;
  --telekom-color-text-and-icon-functional-success: #008653;
  --telekom-color-text-and-icon-functional-danger: #d91308;
  --telekom-color-text-and-icon-functional-warning: #b63d00;
  --telekom-color-text-and-icon-on-subtle-informational: #2238df;
  --telekom-color-text-and-icon-on-subtle-success: #00774b;
  --telekom-color-text-and-icon-on-subtle-danger: #c30a03;
  --telekom-color-text-and-icon-on-subtle-warning: #b63d00;
  --telekom-color-text-and-icon-on-subtle-violet: #6c3bdb;
  --telekom-color-text-and-icon-on-subtle-blue: #2238df;
  --telekom-color-text-and-icon-on-subtle-cyan: #00738A;
  --telekom-color-text-and-icon-on-subtle-teal: #177364;
  --telekom-color-text-and-icon-on-subtle-green: #00774b;
  --telekom-color-text-and-icon-on-subtle-olive: #557317;
  --telekom-color-text-and-icon-on-subtle-brown: #82581c;
  --telekom-color-text-and-icon-on-subtle-yellow: #AC5600;
  --telekom-color-text-and-icon-on-subtle-orange: #b63d00;
  --telekom-color-text-and-icon-on-subtle-red: #c30a03;
  --telekom-color-background-canvas: #ffffff;
  --telekom-color-background-canvas-subtle: #fbfbfb;
  --telekom-color-background-backdrop: hsla(0, 0%, 0%, 0.5);
  --telekom-color-background-surface: #ffffff;
  --telekom-color-background-surface-subtle: #efeff0;
  --telekom-color-background-surface-highlight: #242426;
  --telekom-color-primary-standard: #e20074;
  --telekom-color-primary-hovered: #c00063;
  --telekom-color-primary-pressed: #9e0051;
  --telekom-color-ui-base: #ffffff;
  --telekom-color-ui-subtle: #efeff0;
  --telekom-color-ui-faint: #dfdfe1;
  --telekom-color-ui-regular: #929296;
  --telekom-color-ui-strong: #747478;
  --telekom-color-ui-extra-strong: #242426;
  --telekom-color-ui-white: #ffffff;
  --telekom-color-ui-black: #000000;
  --telekom-color-ui-disabled: #d0d0d2;
  --telekom-color-ui-border-standard: hsla(0, 0%, 0%, 0.44);
  --telekom-color-ui-border-hovered: hsla(0, 0%, 0%, 0.71);
  --telekom-color-ui-border-pressed: hsla(0, 0%, 0%, 0.71);
  --telekom-color-ui-border-disabled: hsla(0, 0%, 0%, 0.14);
  --telekom-color-ui-state-fill-standard: hsla(0, 0%, 0%, 0);
  --telekom-color-ui-state-fill-hovered: hsla(0, 0%, 0%, 0.07);
  --telekom-color-ui-state-fill-pressed: hsla(0, 0%, 0%, 0.21);
  --telekom-color-ui-state-fill-hovered-inverted: hsla(0, 0%, 100%, 0.14);
  --telekom-color-ui-state-fill-pressed-inverted: hsla(0, 0%, 100%, 0.21);
  --telekom-color-functional-focus-standard: #2238df;
  --telekom-color-functional-focus-inverted: #7d94f9;
  --telekom-color-functional-focus-on-dark-background: #7d94f9;
  --telekom-color-functional-focus-on-light-background: #2238df;
  --telekom-color-functional-informational-standard: #2238df;
  --telekom-color-functional-informational-hovered: #1326cf;
  --telekom-color-functional-informational-pressed: #0819bd;
  --telekom-color-functional-informational-subtle: #d3d7f9;
  --telekom-color-functional-success-standard: #00b367;
  --telekom-color-functional-success-hovered: #00a461;
  --telekom-color-functional-success-pressed: #00955a;
  --telekom-color-functional-success-subtle: #ccf0e1;
  --telekom-color-functional-danger-standard: #e82010;
  --telekom-color-functional-danger-hovered: #d91308;
  --telekom-color-functional-danger-pressed: #c30a03;
  --telekom-color-functional-danger-subtle: #fad2cf;
  --telekom-color-functional-warning-standard: #f97012;
  --telekom-color-functional-warning-hovered: #f46409;
  --telekom-color-functional-warning-pressed: #e65703;
  --telekom-color-functional-warning-subtle: #fee2d0;
  --telekom-color-additional-violet-0: #e2d9ff;
  --telekom-color-additional-violet-100: #c8b5fd;
  --telekom-color-additional-violet-200: #af93fb;
  --telekom-color-additional-violet-300: #9a75f8;
  --telekom-color-additional-violet-400: #885df2;
  --telekom-color-additional-violet-500: #794ae9;
  --telekom-color-additional-violet-600: #6c3bdb;
  --telekom-color-additional-violet-700: #5e2ec6;
  --telekom-color-additional-violet-800: #5024ab;
  --telekom-color-additional-violet-900: #411c8c;
  --telekom-color-additional-violet-subtle: #e4dbfb;
  --telekom-color-additional-blue-0: #d9e2ff;
  --telekom-color-additional-blue-100: #aabcfd;
  --telekom-color-additional-blue-200: #7d94f9;
  --telekom-color-additional-blue-300: #576ff3;
  --telekom-color-additional-blue-400: #3950ea;
  --telekom-color-additional-blue-500: #2238df;
  --telekom-color-additional-blue-600: #1326cf;
  --telekom-color-additional-blue-700: #0819bd;
  --telekom-color-additional-blue-800: #0311ab;
  --telekom-color-additional-blue-900: #000d99;
  --telekom-color-additional-blue-subtle: #d3d7f9;
  --telekom-color-additional-cyan-0: #d9fcff;
  --telekom-color-additional-cyan-100: #a4ecf4;
  --telekom-color-additional-cyan-200: #75dbe8;
  --telekom-color-additional-cyan-300: #4fcadd;
  --telekom-color-additional-cyan-400: #33bbd2;
  --telekom-color-additional-cyan-500: #1eadc6;
  --telekom-color-additional-cyan-600: #11a0bb;
  --telekom-color-additional-cyan-700: #0894b0;
  --telekom-color-additional-cyan-800: #038aa4;
  --telekom-color-additional-cyan-900: #008099;
  --telekom-color-additional-cyan-subtle: #d2eff4;
  --telekom-color-additional-teal-0: #d9fff2;
  --telekom-color-additional-teal-100: #acf1dc;
  --telekom-color-additional-teal-200: #85e3ca;
  --telekom-color-additional-teal-300: #65d5ba;
  --telekom-color-additional-teal-400: #4cc6ac;
  --telekom-color-additional-teal-500: #3ab89f;
  --telekom-color-additional-teal-600: #2eaa93;
  --telekom-color-additional-teal-700: #259c87;
  --telekom-color-additional-teal-800: #1e8e7b;
  --telekom-color-additional-teal-900: #19806f;
  --telekom-color-additional-teal-subtle: #d8f1ec;
  --telekom-color-additional-green-0: #dbffed;
  --telekom-color-additional-green-100: #8ff0c1;
  --telekom-color-additional-green-200: #4ee19c;
  --telekom-color-additional-green-300: #1bd27f;
  --telekom-color-additional-green-400: #00c26d;
  --telekom-color-additional-green-500: #00b367;
  --telekom-color-additional-green-600: #00a461;
  --telekom-color-additional-green-700: #00955a;
  --telekom-color-additional-green-800: #008653;
  --telekom-color-additional-green-900: #00774b;
  --telekom-color-additional-green-subtle: #ccf0e1;
  --telekom-color-additional-olive-0: #f2ffd9;
  --telekom-color-additional-olive-100: #daf1ac;
  --telekom-color-additional-olive-200: #c3e385;
  --telekom-color-additional-olive-300: #afd565;
  --telekom-color-additional-olive-400: #9ec64c;
  --telekom-color-additional-olive-500: #8eb83a;
  --telekom-color-additional-olive-600: #81aa2e;
  --telekom-color-additional-olive-700: #749c25;
  --telekom-color-additional-olive-800: #688e1e;
  --telekom-color-additional-olive-900: #5e8019;
  --telekom-color-additional-olive-subtle: #e8f1d8;
  --telekom-color-additional-brown-0: #ffefd9;
  --telekom-color-additional-brown-100: #efd3ab;
  --telekom-color-additional-brown-200: #e0b983;
  --telekom-color-additional-brown-300: #d0a363;
  --telekom-color-additional-brown-400: #c18f4a;
  --telekom-color-additional-brown-500: #b17f38;
  --telekom-color-additional-brown-600: #a2702b;
  --telekom-color-additional-brown-700: #926322;
  --telekom-color-additional-brown-800: #82581c;
  --telekom-color-additional-brown-900: #734d17;
  --telekom-color-additional-brown-subtle: #efe5d7;
  --telekom-color-additional-yellow-0: #fffcd9;
  --telekom-color-additional-yellow-100: #fcf1aa;
  --telekom-color-additional-yellow-200: #f9e47e;
  --telekom-color-additional-yellow-300: #f7d358;
  --telekom-color-additional-yellow-400: #f4c23b;
  --telekom-color-additional-yellow-500: #f1b125;
  --telekom-color-additional-yellow-600: #eea015;
  --telekom-color-additional-yellow-700: #eb900b;
  --telekom-color-additional-yellow-800: #e88104;
  --telekom-color-additional-yellow-900: #e67300;
  --telekom-color-additional-yellow-subtle: #fcefd3;
  --telekom-color-additional-orange-0: #ffe6cc;
  --telekom-color-additional-orange-100: #ffc48e;
  --telekom-color-additional-orange-200: #fea75b;
  --telekom-color-additional-orange-300: #fd9038;
  --telekom-color-additional-orange-400: #fc7e21;
  --telekom-color-additional-orange-500: #f97012;
  --telekom-color-additional-orange-600: #f46409;
  --telekom-color-additional-orange-700: #e65703;
  --telekom-color-additional-orange-800: #cd4901;
  --telekom-color-additional-orange-900: #b63d00;
  --telekom-color-additional-orange-subtle: #fee2d0;
  --telekom-color-additional-red-0: #ffcabf;
  --telekom-color-additional-red-100: #fd9684;
  --telekom-color-additional-red-200: #fb6a55;
  --telekom-color-additional-red-300: #f84934;
  --telekom-color-additional-red-400: #f2321e;
  --telekom-color-additional-red-500: #e82010;
  --telekom-color-additional-red-600: #d91308;
  --telekom-color-additional-red-700: #c30a03;
  --telekom-color-additional-red-800: #a70401;
  --telekom-color-additional-red-900: #870000;
  --telekom-color-additional-red-subtle: #fad2cf;
  --telekom-radius-none: 0rem;
  --telekom-radius-extra-small: 0.125rem;
  --telekom-radius-small: 0.25rem;
  --telekom-radius-medium-small: 0.375rem;
  --telekom-radius-standard: 0.5rem;
  --telekom-radius-large: 0.75rem;
  --telekom-radius-pill: 62.4375rem;
  --telekom-radius-circle: 50%;
  --telekom-size-icon-extra-small: 0.75rem;
  --telekom-size-icon-small: 1rem;
  --telekom-size-icon-medium: 1.25rem;
  --telekom-size-icon-large: 1.5rem;
  --telekom-size-icon-extra-large: 3rem;
  --telekom-size-form-element-height-small: 2rem;
  --telekom-size-form-element-height-standard: 2.75rem;
  --telekom-size-generic-size-01: 0.25rem;
  --telekom-size-generic-size-02: 0.375rem;
  --telekom-size-generic-size-03: 0.5rem;
  --telekom-size-generic-size-04: 0.75rem;
  --telekom-size-generic-size-05: 1rem;
  --telekom-size-generic-size-06: 1.25rem;
  --telekom-size-generic-size-07: 1.5rem;
  --telekom-size-generic-size-08: 1.75rem;
  --telekom-size-generic-size-09: 2rem;
  --telekom-size-generic-size-10: 2.25rem;
  --telekom-size-generic-size-11: 2.5rem;
  --telekom-size-generic-size-12: 2.75rem;
  --telekom-size-generic-size-13: 3rem;
  --telekom-size-generic-size-14: 3.25rem;
  --telekom-size-generic-size-15: 3.5rem;
  --telekom-size-generic-size-16: 4rem;
  --telekom-size-generic-size-17: 4.5rem;
  --telekom-size-generic-size-18: 5rem;
  --telekom-size-generic-size-19: 6rem;
  --telekom-size-generic-size-20: 8rem;
  --telekom-size-generic-size-21: 12rem;
  --telekom-size-generic-size-22: 16rem;
  --telekom-size-generic-size-23: 20rem;
  --telekom-size-generic-size-24: 28rem;
  --telekom-size-generic-size-25: 36rem;
  --telekom-line-weight-standard: 0.0625rem;
  --telekom-line-weight-highlight: 0.125rem;
  --telekom-line-weight-bold: 0.25rem;
  --telekom-motion-duration-instant: 0ms;
  --telekom-motion-duration-immediate: 100ms;
  --telekom-motion-duration-transition: 200ms;
  --telekom-motion-duration-animation: 600ms;
  --telekom-motion-duration-animation-deliberate: 800ms;
  --telekom-motion-easing-standard: cubic-bezier(0.4,0,0.6,1);
  --telekom-motion-easing-enter: cubic-bezier(0.4,0.6,0.6,1);
  --telekom-motion-easing-leave: cubic-bezier(0.4,0,1,1);
  --telekom-opacity-invisible: 0;
  --telekom-opacity-transparent: 0.35;
  --telekom-opacity-semi-transparent: 0.5;
  --telekom-opacity-translucent: 0.75;
  --telekom-opacity-semi-translucent: 0.85;
  --telekom-opacity-solid: 1;
  --telekom-shadow-raised-standard: 0px 8px 32px 0px hsla(0, 0%, 0%, 0.1), 0px 4px 8px 0px hsla(0, 0%, 0%, 0.1);
  --telekom-shadow-raised-hover: 0px 16px 64px 0px hsla(0, 0%, 0%, 0.1), 0px 8px 16px 0px hsla(0, 0%, 0%, 0.1);
  --telekom-shadow-raised-pressed: 0px 4px 16px 0px hsla(0, 0%, 0%, 0.1), 0px 2px 4px 0px hsla(0, 0%, 0%, 0.1);
  --telekom-shadow-floating-standard: 0px 12px 48px 0px hsla(0, 0%, 0%, 0.1), 0px 6px 12px 0px hsla(0, 0%, 0%, 0.1);
  --telekom-shadow-floating-hover: 0px 24px 96px 0px hsla(0, 0%, 0%, 0.1), 0px 12px 24px 0px hsla(0, 0%, 0%, 0.1);
  --telekom-shadow-floating-pressed: 0px 8px 32px 0px hsla(0, 0%, 0%, 0.1), 0px 4px 8px 0px hsla(0, 0%, 0%, 0.1);
  --telekom-shadow-top: 0px 16px 64px 0px hsla(0, 0%, 0%, 0.1), 0px 8px 16px 0px hsla(0, 0%, 0%, 0.1);
  --telekom-shadow-overlay: 0px 24px 96px 0px hsla(0, 0%, 0%, 0.1), 0px 12px 24px 0px hsla(0, 0%, 0%, 0.1);
  --telekom-shadow-intense: 0px 0px 2px 0px hsla(0, 0%, 0%, 0.24), 0px 2px 4px 0px hsla(0, 0%, 0%, 0.24), 0px 4px 12px 0px hsla(0, 0%, 0%, 0.26);
  --telekom-shadow-app-bar-top-raised: 0px 1px 0px 0px hsla(0, 0%, 0%, 0.05), 0px 2px 8px 0px hsla(0, 0%, 0%, 0.05);
  --telekom-shadow-app-bar-top-flat: 0px 1px 0px 0px hsla(0, 0%, 0%, 0.1);
  --telekom-shadow-app-bar-bottom-raised: 0px -1px 0px 0px hsla(0, 0%, 0%, 0.05), 0px -2px 8px 0px hsla(0, 0%, 0%, 0.05);
  --telekom-shadow-app-bar-bottom-flat: 0px -1px 0px 0px hsla(0, 0%, 0%, 0.1);
  --telekom-spacing-composition-space-00: 0rem;
  --telekom-spacing-composition-space-01: 0.0625rem;
  --telekom-spacing-composition-space-02: 0.125rem;
  --telekom-spacing-composition-space-03: 0.25rem;
  --telekom-spacing-composition-space-04: 0.5rem;
  --telekom-spacing-composition-space-05: 0.75rem;
  --telekom-spacing-composition-space-06: 1rem;
  --telekom-spacing-composition-space-07: 1.25rem;
  --telekom-spacing-composition-space-08: 1.5rem;
  --telekom-spacing-composition-space-09: 1.75rem;
  --telekom-spacing-composition-space-10: 2rem;
  --telekom-spacing-composition-space-11: 2.25rem;
  --telekom-spacing-composition-space-12: 2.5rem;
  --telekom-spacing-composition-space-13: 2.75rem;
  --telekom-spacing-composition-space-14: 3rem;
  --telekom-spacing-composition-space-15: 3.25rem;
  --telekom-spacing-composition-space-16: 3.5rem;
  --telekom-spacing-composition-space-17: 4rem;
  --telekom-spacing-composition-space-18: 4.5rem;
  --telekom-spacing-composition-space-19: 5rem;
  --telekom-spacing-composition-space-20: 5.5rem;
  --telekom-spacing-composition-space-21: 6rem;
  --telekom-spacing-baseline-space-00: 0rem;
  --telekom-spacing-baseline-space-01: 0.25rem;
  --telekom-spacing-baseline-space-02: 0.5rem;
  --telekom-spacing-baseline-space-03: 0.75rem;
  --telekom-spacing-baseline-space-04: 1rem;
  --telekom-spacing-baseline-space-05: 1.5rem;
  --telekom-spacing-baseline-space-06: 2rem;
  --telekom-spacing-baseline-space-07: 3rem;
  --telekom-spacing-baseline-space-08: 4rem;
  --telekom-spacing-baseline-space-09: 6rem;
  --telekom-spacing-baseline-space-10: 8rem;
  --telekom-spacing-baseline-space-11: 12rem;
  --telekom-spacing-baseline-space-12: 16rem;
  --telekom-spacing-baseline-space-13: 24rem;
  --telekom-spacing-baseline-space-14: 32rem;
  --telekom-spacing-baseline-space-15: 64rem;
  --telekom-text-style-badge: 400 0.625rem/1.2 TeleNeoWeb, sans-serif;
  --telekom-text-style-small: 500 0.75rem/1.35 TeleNeoWeb, sans-serif;
  --telekom-text-style-small-bold: 700 0.75rem/1.35 TeleNeoWeb, sans-serif;
  --telekom-text-style-caption: 400 0.875rem/1.4 TeleNeoWeb, sans-serif;
  --telekom-text-style-caption-bold: 700 0.875rem/1.4 TeleNeoWeb, sans-serif;
  --telekom-text-style-body: 400 1rem/1.4 TeleNeoWeb, sans-serif;
  --telekom-text-style-body-bold: 700 1rem/1.4 TeleNeoWeb, sans-serif;
  --telekom-text-style-ui: 500 1rem/1 TeleNeoWeb, sans-serif;
  --telekom-text-style-ui-bold: 700 1rem/1 TeleNeoWeb, sans-serif;
  --telekom-text-style-lead-text: 400 1.25rem/1.4 TeleNeoWeb, sans-serif;
  --telekom-text-style-heading-6: 700 1rem/1.4 TeleNeoWeb, sans-serif;
  --telekom-text-style-heading-5: 800 1.25rem/1.4 TeleNeoWeb, sans-serif;
  --telekom-text-style-heading-4: 800 1.5rem/1.35 TeleNeoWeb, sans-serif;
  --telekom-text-style-heading-3: 800 2rem/1.25 TeleNeoWeb, sans-serif;
  --telekom-text-style-heading-2: 800 2.625rem/1.15 TeleNeoWeb, sans-serif;
  --telekom-text-style-heading-1: 800 3.375rem/1.2 TeleNeoWeb, sans-serif;
  --telekom-text-style-title-2: 800 4.25rem/1.15 TeleNeoWeb, sans-serif;
  --telekom-text-style-title-1: 800 4.75rem/1.15 TeleNeoWeb, sans-serif;
  --telekom-typography-font-size-badge: 0.625rem;
  --telekom-typography-font-size-small: 0.75rem;
  --telekom-typography-font-size-caption: 0.875rem;
  --telekom-typography-font-size-body: 1rem;
  --telekom-typography-font-size-callout: 1.25rem;
  --telekom-typography-font-size-headline-3: 1.5rem;
  --telekom-typography-font-size-headline-2: 2rem;
  --telekom-typography-font-size-headline-1: 2.625rem;
  --telekom-typography-font-size-title-3: 3.375rem;
  --telekom-typography-font-size-title-2: 4.25rem;
  --telekom-typography-font-size-title-1: 4.75rem;
  --telekom-typography-font-family-sans: TeleNeoWeb, sans-serif;
  --telekom-typography-font-family-mono: monospace;
  --telekom-typography-font-weight-thin: 200;
  --telekom-typography-font-weight-regular: 400;
  --telekom-typography-font-weight-medium: 500;
  --telekom-typography-font-weight-bold: 700;
  --telekom-typography-font-weight-extra-bold: 800;
  --telekom-typography-font-weight-ultra: 900;
  --telekom-typography-line-spacing-none: 1;
  --telekom-typography-line-spacing-extra-tight: 1.15;
  --telekom-typography-line-spacing-tight: 1.25;
  --telekom-typography-line-spacing-moderate: 1.35;
  --telekom-typography-line-spacing-standard: 1.4;
  --telekom-typography-line-spacing-loose: 1.5;
  --telekom-typography-letter-spacing-standard: 0;
}

[data-themes*="dark"] {
  --telekom-color-text-and-icon-standard: #ffffff;
  --telekom-color-text-and-icon-additional: hsla(0, 0%, 100%, 0.65);
  --telekom-color-text-and-icon-disabled: hsla(0, 0%, 100%, 0.3);
  --telekom-color-text-and-icon-link-standard: #7d94f9;
  --telekom-color-text-and-icon-link-hovered: #aabcfd;
  --telekom-color-text-and-icon-link-visited: #9a75f8;
  --telekom-color-text-and-icon-link-active: #d9e2ff;
  --telekom-color-text-and-icon-primary-standard: #e20074;
  --telekom-color-text-and-icon-primary-hovered: #ec59a5;
  --telekom-color-text-and-icon-primary-pressed: #f080ba;
  --telekom-color-text-and-icon-inverted-standard: #000000;
  --telekom-color-text-and-icon-inverted-additional: hsla(0, 0%, 0%, 0.65);
  --telekom-color-text-and-icon-white-standard: #ffffff;
  --telekom-color-text-and-icon-white-additional: hsla(0, 0%, 100%, 0.65);
  --telekom-color-text-and-icon-black-standard: #000000;
  --telekom-color-text-and-icon-black-additional: hsla(0, 0%, 0%, 0.65);
  --telekom-color-text-and-icon-functional-informational: #7d94f9;
  --telekom-color-text-and-icon-functional-success: #00b367;
  --telekom-color-text-and-icon-functional-danger: #f84934;
  --telekom-color-text-and-icon-functional-warning: #f97012;
  --telekom-color-text-and-icon-on-subtle-informational: #7d94f9;
  --telekom-color-text-and-icon-on-subtle-success: #1bd27f;
  --telekom-color-text-and-icon-on-subtle-danger: #fb6a55;
  --telekom-color-text-and-icon-on-subtle-warning: #fd9038;
  --telekom-color-text-and-icon-on-subtle-violet: #af93fb;
  --telekom-color-text-and-icon-on-subtle-blue: #7d94f9;
  --telekom-color-text-and-icon-on-subtle-cyan: #33bbd2;
  --telekom-color-text-and-icon-on-subtle-teal: #4cc6ac;
  --telekom-color-text-and-icon-on-subtle-green: #1bd27f;
  --telekom-color-text-and-icon-on-subtle-olive: #9ec64c;
  --telekom-color-text-and-icon-on-subtle-brown: #d0a363;
  --telekom-color-text-and-icon-on-subtle-yellow: #f1b125;
  --telekom-color-text-and-icon-on-subtle-orange: #fd9038;
  --telekom-color-text-and-icon-on-subtle-red: #fb6a55;
  --telekom-color-background-canvas: #000000;
  --telekom-color-background-canvas-subtle: #0e0e0f;
  --telekom-color-background-backdrop: hsla(0, 0%, 0%, 0.65);
  --telekom-color-background-surface: #1c1c1e;
  --telekom-color-background-surface-subtle: #242426;
  --telekom-color-background-surface-highlight: #48484b;
  --telekom-color-primary-standard: #e20074;
  --telekom-color-primary-hovered: #c00063;
  --telekom-color-primary-pressed: #9e0051;
  --telekom-color-ui-base: #0e0e0f;
  --telekom-color-ui-subtle: #1c1c1e;
  --telekom-color-ui-faint: #39393c;
  --telekom-color-ui-regular: #656569;
  --telekom-color-ui-strong: #929296;
  --telekom-color-ui-extra-strong: #efeff0;
  --telekom-color-ui-white: #ffffff;
  --telekom-color-ui-black: #000000;
  --telekom-color-ui-disabled: #2b2b2d;
  --telekom-color-ui-border-standard: hsla(0, 0%, 100%, 0.4);
  --telekom-color-ui-border-hovered: hsla(0, 0%, 100%, 0.54);
  --telekom-color-ui-border-pressed: hsla(0, 0%, 100%, 0.94);
  --telekom-color-ui-border-disabled: hsla(0, 0%, 100%, 0.21);
  --telekom-color-ui-state-fill-standard: hsla(0, 0%, 100%, 0);
  --telekom-color-ui-state-fill-hovered: hsla(0, 0%, 100%, 0.14);
  --telekom-color-ui-state-fill-pressed: hsla(0, 0%, 100%, 0.27);
  --telekom-color-ui-state-fill-hovered-inverted: hsla(0, 0%, 0%, 0.07);
  --telekom-color-ui-state-fill-pressed-inverted: hsla(0, 0%, 0%, 0.21);
  --telekom-color-functional-focus-standard: #7d94f9;
  --telekom-color-functional-focus-inverted: #2238df;
  --telekom-color-functional-informational-standard: #2238df;
  --telekom-color-functional-informational-hovered: #3950ea;
  --telekom-color-functional-informational-pressed: #576ff3;
  --telekom-color-functional-informational-subtle: #131f7b;
  --telekom-color-functional-success-standard: #00b367;
  --telekom-color-functional-success-hovered: #00c26d;
  --telekom-color-functional-success-pressed: #1bd27f;
  --telekom-color-functional-success-subtle: #004829;
  --telekom-color-functional-danger-standard: #e82010;
  --telekom-color-functional-danger-hovered: #f2321e;
  --telekom-color-functional-danger-pressed: #f84934;
  --telekom-color-functional-danger-subtle: #5d0d06;
  --telekom-color-functional-warning-standard: #f97012;
  --telekom-color-functional-warning-hovered: #fd9038;
  --telekom-color-functional-warning-pressed: #fd9038;
  --telekom-color-functional-warning-subtle: #642d07;
  --telekom-color-additional-violet-subtle: #301e5d;
  --telekom-color-additional-blue-subtle: #131f7b;
  --telekom-color-additional-cyan-subtle: #0c454f;
  --telekom-color-additional-teal-subtle: #174a40;
  --telekom-color-additional-green-subtle: #004829;
  --telekom-color-additional-olive-subtle: #394a17;
  --telekom-color-additional-brown-subtle: #473316;
  --telekom-color-additional-yellow-subtle: #60470f;
  --telekom-color-additional-orange-subtle: #642d07;
  --telekom-color-additional-red-subtle: #5d0d06;
}

@media (prefers-color-scheme: dark) {
  :root {
    --telekom-color-text-and-icon-standard: #ffffff;
    --telekom-color-text-and-icon-additional: hsla(0, 0%, 100%, 0.65);
    --telekom-color-text-and-icon-disabled: hsla(0, 0%, 100%, 0.3);
    --telekom-color-text-and-icon-link-standard: #7d94f9;
    --telekom-color-text-and-icon-link-hovered: #aabcfd;
    --telekom-color-text-and-icon-link-visited: #9a75f8;
    --telekom-color-text-and-icon-link-active: #d9e2ff;
    --telekom-color-text-and-icon-primary-standard: #e20074;
    --telekom-color-text-and-icon-primary-hovered: #ec59a5;
    --telekom-color-text-and-icon-primary-pressed: #f080ba;
    --telekom-color-text-and-icon-inverted-standard: #000000;
    --telekom-color-text-and-icon-inverted-additional: hsla(0, 0%, 0%, 0.65);
    --telekom-color-text-and-icon-white-standard: #ffffff;
    --telekom-color-text-and-icon-white-additional: hsla(0, 0%, 100%, 0.65);
    --telekom-color-text-and-icon-black-standard: #000000;
    --telekom-color-text-and-icon-black-additional: hsla(0, 0%, 0%, 0.65);
    --telekom-color-text-and-icon-functional-informational: #7d94f9;
    --telekom-color-text-and-icon-functional-success: #00b367;
    --telekom-color-text-and-icon-functional-danger: #f84934;
    --telekom-color-text-and-icon-functional-warning: #f97012;
    --telekom-color-text-and-icon-on-subtle-informational: #7d94f9;
    --telekom-color-text-and-icon-on-subtle-success: #1bd27f;
    --telekom-color-text-and-icon-on-subtle-danger: #fb6a55;
    --telekom-color-text-and-icon-on-subtle-warning: #fd9038;
    --telekom-color-text-and-icon-on-subtle-violet: #af93fb;
    --telekom-color-text-and-icon-on-subtle-blue: #7d94f9;
    --telekom-color-text-and-icon-on-subtle-cyan: #33bbd2;
    --telekom-color-text-and-icon-on-subtle-teal: #4cc6ac;
    --telekom-color-text-and-icon-on-subtle-green: #1bd27f;
    --telekom-color-text-and-icon-on-subtle-olive: #9ec64c;
    --telekom-color-text-and-icon-on-subtle-brown: #d0a363;
    --telekom-color-text-and-icon-on-subtle-yellow: #f1b125;
    --telekom-color-text-and-icon-on-subtle-orange: #fd9038;
    --telekom-color-text-and-icon-on-subtle-red: #fb6a55;
    --telekom-color-background-canvas: #000000;
    --telekom-color-background-canvas-subtle: #0e0e0f;
    --telekom-color-background-backdrop: hsla(0, 0%, 0%, 0.65);
    --telekom-color-background-surface: #1c1c1e;
    --telekom-color-background-surface-subtle: #242426;
    --telekom-color-background-surface-highlight: #48484b;
    --telekom-color-primary-standard: #e20074;
    --telekom-color-primary-hovered: #c00063;
    --telekom-color-primary-pressed: #9e0051;
    --telekom-color-ui-base: #0e0e0f;
    --telekom-color-ui-subtle: #1c1c1e;
    --telekom-color-ui-faint: #39393c;
    --telekom-color-ui-regular: #656569;
    --telekom-color-ui-strong: #929296;
    --telekom-color-ui-extra-strong: #efeff0;
    --telekom-color-ui-white: #ffffff;
    --telekom-color-ui-black: #000000;
    --telekom-color-ui-disabled: #2b2b2d;
    --telekom-color-ui-border-standard: hsla(0, 0%, 100%, 0.4);
    --telekom-color-ui-border-hovered: hsla(0, 0%, 100%, 0.54);
    --telekom-color-ui-border-pressed: hsla(0, 0%, 100%, 0.94);
    --telekom-color-ui-border-disabled: hsla(0, 0%, 100%, 0.21);
    --telekom-color-ui-state-fill-standard: hsla(0, 0%, 100%, 0);
    --telekom-color-ui-state-fill-hovered: hsla(0, 0%, 100%, 0.14);
    --telekom-color-ui-state-fill-pressed: hsla(0, 0%, 100%, 0.27);
    --telekom-color-ui-state-fill-hovered-inverted: hsla(0, 0%, 0%, 0.07);
    --telekom-color-ui-state-fill-pressed-inverted: hsla(0, 0%, 0%, 0.21);
    --telekom-color-functional-focus-standard: #7d94f9;
    --telekom-color-functional-focus-inverted: #2238df;
    --telekom-color-functional-informational-standard: #2238df;
    --telekom-color-functional-informational-hovered: #3950ea;
    --telekom-color-functional-informational-pressed: #576ff3;
    --telekom-color-functional-informational-subtle: #131f7b;
    --telekom-color-functional-success-standard: #00b367;
    --telekom-color-functional-success-hovered: #00c26d;
    --telekom-color-functional-success-pressed: #1bd27f;
    --telekom-color-functional-success-subtle: #004829;
    --telekom-color-functional-danger-standard: #e82010;
    --telekom-color-functional-danger-hovered: #f2321e;
    --telekom-color-functional-danger-pressed: #f84934;
    --telekom-color-functional-danger-subtle: #5d0d06;
    --telekom-color-functional-warning-standard: #f97012;
    --telekom-color-functional-warning-hovered: #fd9038;
    --telekom-color-functional-warning-pressed: #fd9038;
    --telekom-color-functional-warning-subtle: #642d07;
    --telekom-color-additional-violet-subtle: #301e5d;
    --telekom-color-additional-blue-subtle: #131f7b;
    --telekom-color-additional-cyan-subtle: #0c454f;
    --telekom-color-additional-teal-subtle: #174a40;
    --telekom-color-additional-green-subtle: #004829;
    --telekom-color-additional-olive-subtle: #394a17;
    --telekom-color-additional-brown-subtle: #473316;
    --telekom-color-additional-yellow-subtle: #60470f;
    --telekom-color-additional-orange-subtle: #642d07;
    --telekom-color-additional-red-subtle: #5d0d06;
  }

  [data-themes*="light"] {
    --telekom-color-text-and-icon-standard: #000000;
    --telekom-color-text-and-icon-additional: hsla(0, 0%, 0%, 0.65);
    --telekom-color-text-and-icon-disabled: hsla(0, 0%, 0%, 0.4);
    --telekom-color-text-and-icon-link-standard: #2238df;
    --telekom-color-text-and-icon-link-hovered: #0819bd;
    --telekom-color-text-and-icon-link-visited: #6c3bdb;
    --telekom-color-text-and-icon-link-active: #000d99;
    --telekom-color-text-and-icon-primary-standard: #e20074;
    --telekom-color-text-and-icon-primary-hovered: #c00063;
    --telekom-color-text-and-icon-primary-pressed: #9e0051;
    --telekom-color-text-and-icon-inverted-standard: #ffffff;
    --telekom-color-text-and-icon-inverted-additional: hsla(0, 0%, 100%, 0.65);
    --telekom-color-text-and-icon-white-standard: #ffffff;
    --telekom-color-text-and-icon-white-additional: hsla(0, 0%, 100%, 0.65);
    --telekom-color-text-and-icon-black-standard: #000000;
    --telekom-color-text-and-icon-black-additional: hsla(0, 0%, 0%, 0.65);
    --telekom-color-text-and-icon-functional-informational: #2238df;
    --telekom-color-text-and-icon-functional-success: #008653;
    --telekom-color-text-and-icon-functional-danger: #d91308;
    --telekom-color-text-and-icon-functional-warning: #b63d00;
    --telekom-color-text-and-icon-on-subtle-informational: #2238df;
    --telekom-color-text-and-icon-on-subtle-success: #00774b;
    --telekom-color-text-and-icon-on-subtle-danger: #c30a03;
    --telekom-color-text-and-icon-on-subtle-warning: #b63d00;
    --telekom-color-text-and-icon-on-subtle-violet: #6c3bdb;
    --telekom-color-text-and-icon-on-subtle-blue: #2238df;
    --telekom-color-text-and-icon-on-subtle-cyan: #00738A;
    --telekom-color-text-and-icon-on-subtle-teal: #177364;
    --telekom-color-text-and-icon-on-subtle-green: #00774b;
    --telekom-color-text-and-icon-on-subtle-olive: #557317;
    --telekom-color-text-and-icon-on-subtle-brown: #82581c;
    --telekom-color-text-and-icon-on-subtle-yellow: #AC5600;
    --telekom-color-text-and-icon-on-subtle-orange: #b63d00;
    --telekom-color-text-and-icon-on-subtle-red: #c30a03;
    --telekom-color-background-canvas: #ffffff;
    --telekom-color-background-canvas-subtle: #fbfbfb;
    --telekom-color-background-backdrop: hsla(0, 0%, 0%, 0.5);
    --telekom-color-background-surface: #ffffff;
    --telekom-color-background-surface-subtle: #efeff0;
    --telekom-color-background-surface-highlight: #242426;
    --telekom-color-primary-standard: #e20074;
    --telekom-color-primary-hovered: #c00063;
    --telekom-color-primary-pressed: #9e0051;
    --telekom-color-ui-base: #ffffff;
    --telekom-color-ui-subtle: #efeff0;
    --telekom-color-ui-faint: #dfdfe1;
    --telekom-color-ui-regular: #929296;
    --telekom-color-ui-strong: #747478;
    --telekom-color-ui-extra-strong: #242426;
    --telekom-color-ui-white: #ffffff;
    --telekom-color-ui-black: #000000;
    --telekom-color-ui-disabled: #d0d0d2;
    --telekom-color-ui-border-standard: hsla(0, 0%, 0%, 0.44);
    --telekom-color-ui-border-hovered: hsla(0, 0%, 0%, 0.71);
    --telekom-color-ui-border-pressed: hsla(0, 0%, 0%, 0.71);
    --telekom-color-ui-border-disabled: hsla(0, 0%, 0%, 0.14);
    --telekom-color-ui-state-fill-standard: hsla(0, 0%, 0%, 0);
    --telekom-color-ui-state-fill-hovered: hsla(0, 0%, 0%, 0.07);
    --telekom-color-ui-state-fill-pressed: hsla(0, 0%, 0%, 0.21);
    --telekom-color-ui-state-fill-hovered-inverted: hsla(0, 0%, 100%, 0.14);
    --telekom-color-ui-state-fill-pressed-inverted: hsla(0, 0%, 100%, 0.21);
    --telekom-color-functional-focus-standard: #2238df;
    --telekom-color-functional-focus-inverted: #7d94f9;
    --telekom-color-functional-informational-standard: #2238df;
    --telekom-color-functional-informational-hovered: #1326cf;
    --telekom-color-functional-informational-pressed: #0819bd;
    --telekom-color-functional-informational-subtle: #d3d7f9;
    --telekom-color-functional-success-standard: #00b367;
    --telekom-color-functional-success-hovered: #00a461;
    --telekom-color-functional-success-pressed: #00955a;
    --telekom-color-functional-success-subtle: #ccf0e1;
    --telekom-color-functional-danger-standard: #e82010;
    --telekom-color-functional-danger-hovered: #d91308;
    --telekom-color-functional-danger-pressed: #c30a03;
    --telekom-color-functional-danger-subtle: #fad2cf;
    --telekom-color-functional-warning-standard: #f97012;
    --telekom-color-functional-warning-hovered: #f46409;
    --telekom-color-functional-warning-pressed: #e65703;
    --telekom-color-functional-warning-subtle: #fee2d0;
    --telekom-color-additional-violet-subtle: #e4dbfb;
    --telekom-color-additional-blue-subtle: #d3d7f9;
    --telekom-color-additional-cyan-subtle: #d2eff4;
    --telekom-color-additional-teal-subtle: #d8f1ec;
    --telekom-color-additional-green-subtle: #ccf0e1;
    --telekom-color-additional-olive-subtle: #e8f1d8;
    --telekom-color-additional-brown-subtle: #efe5d7;
    --telekom-color-additional-yellow-subtle: #fcefd3;
    --telekom-color-additional-orange-subtle: #fee2d0;
    --telekom-color-additional-red-subtle: #fad2cf;
  }
}