/*! CSS Used from: Embedded */
scale-notification,scale-icon-alert-help,scale-tooltip,scale-telekom-footer-content,scale-telekom-footer,scale-telekom-header,scale-icon-action-checkmark,scale-text-field,scale-switch,scale-button {
    visibility: hidden;
}

.hydrated {
    visibility: inherit;
}

/*! CSS Used from: Embedded */
.scale-telekom-footer {
    --font-size: var(--telekom-typography-font-size-caption);
    --font-color: var(--telekom-color-text-and-icon-white-standard);
    --font-large: var(--telekom-text-style-ui);
    --background-footer: var(--telekom-color-ui-black);
    --background-footer-minimal: var(--telekom-color-background-canvas);
    --_nav-items-bottom-margin: var(--telekom-spacing-composition-space-08);
    --_nav-items-spacing: var(--telekom-spacing-composition-space-05);
}

.scale-telekom-footer :where(ul),.scale-telekom-footer[type='minimal'] :where(ul) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--_nav-items-spacing);
    padding: 0;
    margin: 0;
    width: 100%;
    color: var(--font-color);
    list-style: none;
}

.scale-telekom-footer[type='minimal'] scale-telekom-footer-content {
    --background-footer: var(--background-footer-minimal);
    --_font-color: var(--telekom-color-text-and-icon-additional);
    --_display-logo: none;
    --_navigation-container-padding: var(--telekom-spacing-composition-space-06) 0 var(--telekom-spacing-composition-space-06) 0;
    --_nav-items-bottom-margin: 0;
}

.scale-telekom-footer :where(a,span),.scale-telekom-footer[type='minimal'] :where(a,span) {
    display: flex;
    justify-content: center;
    font-size: var(--font-size);
    color: var(--font-color);
    line-height: 140%;
    text-decoration: none;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 2px;
}

.scale-telekom-footer[type='minimal'] :where(a,span) {
    color: var(--telekom-color-text-and-icon-standard);
}

.scale-telekom-footer[type='minimal'] :where(ul) {
    margin-bottom: 0;
}

.scale-telekom-footer[type='minimal'] a:hover {
    color: var(--telekom-color-text-and-icon-primary-hovered);
}

.scale-telekom-footer[type='minimal'] a:active {
    color: var(--telekom-color-text-and-icon-primary-pressed);
}

.scale-telekom-footer :where(a:hover) {
    border-radius: 0;
    border-bottom: 1px solid var(--font-color);
}

.scale-telekom-footer :where(a:active) {
    color: var(--telekom-color-text-and-icon-white-additional);
    border-bottom: 1px solid var(--telekom-color-text-and-icon-white-additional);
}

@media screen and (min-width: 640px) {
    .scale-telekom-footer :where(ul),.scale-telekom-footer[type='minimal'] :where(ul) {
        display:flex;
        flex-direction: row;
        align-items: center;
        list-style: none;
        column-gap: var(--_nav-items-spacing);
        row-gap: var(--telekom-spacing-composition-space-03);
    }
}

@media screen and (min-width: 1040px) {
    .scale-telekom-footer :where(ul),.scale-telekom-footer[type='minimal'] :where(ul) {
        --_nav-items-spacing:var(--telekom-spacing-composition-space-08);
        row-gap: var(--telekom-spacing-composition-space-04);
    }

    .scale-telekom-footer :where(a,span) {
        font: var(--font-large);
    }
}

@media screen and (min-width: 1296px) {
    .scale-telekom-footer :where(ul),.scale-telekom-footer[type='minimal'] :where(ul) {
        --_nav-items-spacing:var(--telekom-spacing-composition-space-14);
    }
}

/*! CSS Used from: Embedded */
scale-text-field {
    --transition: all var(--telekom-motion-duration-transition) var(--telekom-motion-easing-standard);
    --radius: var(--telekom-radius-standard);
    --border: var(--telekom-spacing-composition-space-01) solid var(--telekom-color-ui-border-standard);
    --border-error: var(--telekom-spacing-composition-space-02) solid var(--telekom-color-functional-danger-standard);
    --border-success: var(--telekom-spacing-composition-space-02) solid var(--telekom-color-functional-success-standard);
    --border-warning: var(--telekom-spacing-composition-space-02) solid var(--telekom-color-functional-warning-standard);
    --border-color-hover: var(--telekom-color-ui-border-hovered);
    --border-color-focus: var(--telekom-color-ui-border-hovered);
    --border-color-disabled: var(--telekom-color-ui-border-disabled);
    --background-color-hover: var(--telekom-color-ui-state-fill-hovered);
    --background-color-disabled: none;
    --focus-outline: var(--telekom-line-weight-highlight) solid var(--telekom-color-functional-focus-standard);
    --height: 44px;
    --spacing-x: var(--telekom-spacing-composition-space-05);
    --color-disabled: var(--telekom-color-text-and-icon-disabled);
    --background-disabled: none;
    --border-color-readonly: var(--telekom-color-ui-border-disabled);
    --background-readonly: var(--telekom-color-ui-disabled);
    --font-weight-meta: var(--telekom-line-weight-bold);
    --font-size-meta: var(--telekom-typography-font-size-small);
    --line-height-meta: var(--telekom-typography-line-spacing-standard);
    --spacing-y-meta: var(--telekom-spacing-composition-space-03);
    --color-meta: var(--telekom-color-text-and-icon-standard);
    --color-meta-error: var(--telekom-color-text-and-icon-functional-danger);
    --spacing-control: 1.125rem calc(2rem - var(--telekom-spacing-composition-space-01)) 0.25rem calc(0.75rem - var(--telekom-spacing-composition-space-01));
    --transition-control: var(--transition);
    --background-control: var(--telekom-color-ui-state-fill-standard);
    --margin-bottom-control: var(--telekom-spacing-composition-space-03);
    --transition-counter: var(--transition);
    --color-counter-error: var(--color-meta-error);
    --font-size-helper-text: var(--telekom-typography-font-size-small);
    --line-height-helper-text: 1.35;
    --font-weight-helper-text: var(--telekom-typography-font-weight-bold);
    --color-helper-text: var( --telekom-color-text-and-icon-functional-informational );
    --color-helper-text-error: var(--color-meta-error);
    --color-helper-text-success: var( --telekom-color-text-and-icon-functional-success );
    --color-helper-text-warning: var( --telekom-color-text-and-icon-functional-warning );
    --color-helper-text-neutral: var(--telekom-color-text-and-icon-additional);
    --helper-text-icon-size: 11px;
    --transition-placeholder: var(--transition);
    --color-placeholder: var(--telekom-color-text-and-icon-additional);
    --color-label: var(--telekom-color-text-and-icon-additional);
    --color-label-readonly: var(--telekom-color-text-and-icon-standard);
    --z-index-label: var(--scl-z-index-10);
    --transition-label: var(--transition);
}

.text-field {
    position: relative;
}

.text-field .text-field__control {
    width: 100%;
    height: var(--height);
    margin: 0;
    display: flex;
    outline: none;
    padding: var(--spacing-control);
    z-index: 1;
    box-sizing: border-box;
    transition: var(--transition-control);
    font: var(--telekom-text-style-body);
    border-radius: var(--radius);
    border: var(--border);
    background-color: var(--background-control);
    color: var(--color-meta);
}

.text-field:not(.text-field--disabled):not(.text-field--readonly) .text-field__control:hover {
    border-color: var(--border-color-hover);
    background-color: var(--background-color-hover);
}

.text-field:not(.text-field--disabled):not(.text-field--readonly) .text-field__control:focus {
    border-color: var(--border-color-focus);
    outline: var(--focus-outline);
    outline-offset: 1px;
}

.text-field:not(.text-field--disabled) .text-field__control:focus::placeholder {
    color: var(--color-placeholder);
}

.text-field .text-field__control::placeholder,.text-field ::placeholder {
    color: transparent;
    transition: var(--transition-placeholder);
}

.text-field__label {
    top: 0;
    left: 0;
    color: var(--color-label);
    display: flex;
    z-index: var(--z-index-label);
    position: absolute;
    transition: var(--transition-label);
    pointer-events: none;
    font: var(--telekom-text-style-ui);
    transform: translate(var(--spacing-x), 0.875rem);
}

/*! CSS Used from: Embedded */
scale-switch {
    --width: 42px;
    --height: 24px;
    --offset: 2px;
    --radius: 1em;
    --transition-duration: var(--telekom-motion-duration-immediate);
    --transition-easing: var(--telekom-motion-easing-standard);
    --shadow-thumb: 0 0 2px 0 rgba(0, 0, 0, 0.24), 0 2px 4px 0 rgba(0, 0, 0, 0.24), 0 4px 12px 0 rgba(0, 0, 0, 0.26);
    --spacing-x-label: var(--telekom-spacing-composition-space-04);
    --font-label: var(--telekom-text-style-ui);
    --font-io-text: var(--telekom-text-style-small-bold);
    --color-label: var(--telekom-color-text-and-icon-standard);
}

.switch {
    --_background: var(--telekom-color-ui-faint);
    --_color-thumb: var(--telekom-color-ui-white, #fff);
    --_overlay-background: transparent;
    display: inline-block;
    position: relative;
}

.switch__control {
    position: absolute;
    margin: 0;
    top: 0;
    width: var(--width);
    height: var(--height);
    opacity: 0;
}

.switch__wrapper {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.switch__toggle {
    position: relative;
    width: var(--width);
    height: var(--height);
    background: var(--_background);
    border-radius: var(--radius);
    transition-property: background;
    transition-duration: var(--transition-duration);
    transition-timing-function: var(--transition-easing);
}

.switch__toggle--overlay {
    position: absolute;
    width: var(--width);
    height: var(--height);
    border-radius: var(--radius);
    background: var(--_overlay-background);
}

.switch:hover {
    --_overlay-background: var(--telekom-color-ui-state-fill-hovered);
}

.switch:active {
    --_overlay-background: var(--telekom-color-ui-state-fill-pressed);
}

.switch--checked {
    --_background: var(--telekom-color-primary-standard);
}

.switch--checked:hover {
    --_background: var(--telekom-color-primary-hovered);
}

.switch--checked:active {
    --_background: var(--telekom-color-primary-pressed);
}

.switch__thumb {
    --_size: calc(var(--height) - var(--offset) * 2);
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    width: var(--_size);
    height: var(--_size);
    aspect-ratio: 1 / 1;
    background: var(--_color-thumb);
    border-radius: 50%;
    box-shadow: var(--shadow-thumb);
    margin: var(--offset);
    transition-property: margin, width, height, background, color;
    transition-duration: var(--transition-duration);
    transition-timing-function: var(--transition-easing);
    color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.04);
    display: inline-block;
}

.switch--checked .switch__thumb {
    margin-left: 1em;
    margin-inline-start:calc(var(--width) - var(--height) + var(--offset));}

.switch__io-text {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: var(--height);
    margin-left: calc(50% - var(--offset));
    font: var(--font-io-text);
    line-height: var(--telekom-typography-line-spacing-none);
}

.switch--checked .switch__io-text {
    margin-left: var(--offset);
    color: var(--telekom-color-text-and-icon-white-standard);
}

.switch__label-text {
    font: var(--font-label);
    margin-inline-start:var(--spacing-x-label);color: var(--color-label);
}

@media screen and (forced-colors: active), (-ms-high-contrast: active) {
    .switch__toggle {
        border: 1px solid;
    }

    scale-icon-action-checkmark {
        visibility: hidden!important;
    }
}

/*! CSS Used from: Embedded */
@media screen and (forced-colors: active), (-ms-high-contrast: active) {
    .scale-icon {
        color: white;
        stroke: white;
    }
}

/*! CSS Used from: Embedded */
@media screen and (forced-colors: active), (-ms-high-contrast: active) {
    .scale-icon {
        color: white;
        stroke: white;
    }
}

/*! CSS Used from: https://accounts.login.idm.telekom.com/static/scale/scale-components/scale-components.css */
:root {
    font-family: 'TeleNeoWeb', sans-serif;
}

:root {
    --scl-spacing-1: 0.0625rem;
    --scl-spacing-2: 0.125rem;
    --scl-spacing-4: 0.25rem;
    --scl-spacing-8: 0.5rem;
    --scl-spacing-12: 0.75rem;
    --scl-spacing-16: 1rem;
    --scl-spacing-24: 1.5rem;
    --scl-spacing-32: 2rem;
    --scl-spacing-40: 2.5rem;
    --scl-spacing-48: 3rem;
    --scl-spacing-64: 4rem;
    --scl-spacing-80: 5rem;
    --scl-font-family-sans: TeleNeoWeb, sans-serif;
    --scl-font-family-mono: monospace;
    --scl-font-size-10: 0.625rem;
    --scl-font-size-12: 0.75rem;
    --scl-font-size-14: 0.875rem;
    --scl-font-size-16: 1rem;
    --scl-font-size-20: 1.25rem;
    --scl-font-size-24: 1.5rem;
    --scl-font-size-32: 2rem;
    --scl-font-size-40: 2.5rem;
    --scl-font-size-56: 3.5rem;
    --scl-font-weight-thin: 200;
    --scl-font-weight-regular: 400;
    --scl-font-weight-medium: 500;
    --scl-font-weight-bold: 700;
    --scl-font-weight-extrabold: 800;
    --scl-font-line-height-114: 114%;
    --scl-font-line-height-120: 120%;
    --scl-font-line-height-125: 125%;
    --scl-font-line-height-133: 133%;
    --scl-font-line-height-150: 150%;
    --scl-font-line-height-160: 160%;
    --scl-font-variant-body-family: TeleNeoWeb, sans-serif;
    --scl-font-variant-body-size: 1rem;
    --scl-font-variant-body-weight: 500;
    --scl-font-variant-body-line-height: 150%;
    --scl-font-variant-body-letter-spacing: normal;
    --scl-font-variant-body-short-family: TeleNeoWeb, sans-serif;
    --scl-font-variant-body-short-size: 1rem;
    --scl-font-variant-body-short-weight: 500;
    --scl-font-variant-body-short-line-height: 125%;
    --scl-font-variant-body-short-letter-spacing: normal;
    --scl-font-variant-body-large-family: TeleNeoWeb, sans-serif;
    --scl-font-variant-body-large-size: 1.25rem;
    --scl-font-variant-body-large-weight: 500;
    --scl-font-variant-body-large-line-height: 160%;
    --scl-font-variant-body-large-letter-spacing: normal;
    --scl-font-variant-smaller-family: TeleNeoWeb, sans-serif;
    --scl-font-variant-smaller-size: 0.75rem;
    --scl-font-variant-smaller-weight: 500;
    --scl-font-variant-smaller-line-height: 125%;
    --scl-font-variant-smaller-letter-spacing: normal;
    --scl-font-variant-label-family: TeleNeoWeb, sans-serif;
    --scl-font-variant-label-size: 0.75rem;
    --scl-font-variant-label-weight: 500;
    --scl-font-variant-label-line-height: 120%;
    --scl-font-variant-label-letter-spacing: normal;
    --scl-font-variant-caption-family: TeleNeoWeb, sans-serif;
    --scl-font-variant-caption-size: 0.75rem;
    --scl-font-variant-caption-weight: 500;
    --scl-font-variant-caption-line-height: 133%;
    --scl-font-variant-caption-letter-spacing: normal;
    --scl-font-variant-heading-6-family: TeleNeoWeb, sans-serif;
    --scl-font-variant-heading-6-size: 1rem;
    --scl-font-variant-heading-6-weight: 700;
    --scl-font-variant-heading-6-line-height: 150%;
    --scl-font-variant-heading-6-letter-spacing: normal;
    --scl-font-variant-heading-5-family: TeleNeoWeb, sans-serif;
    --scl-font-variant-heading-5-size: 1.25rem;
    --scl-font-variant-heading-5-weight: 800;
    --scl-font-variant-heading-5-line-height: 125%;
    --scl-font-variant-heading-5-letter-spacing: normal;
    --scl-font-variant-heading-4-family: TeleNeoWeb, sans-serif;
    --scl-font-variant-heading-4-size: 1.5rem;
    --scl-font-variant-heading-4-weight: 800;
    --scl-font-variant-heading-4-line-height: 133%;
    --scl-font-variant-heading-4-letter-spacing: normal;
    --scl-font-variant-heading-3-family: TeleNeoWeb, sans-serif;
    --scl-font-variant-heading-3-size: 2rem;
    --scl-font-variant-heading-3-weight: 800;
    --scl-font-variant-heading-3-line-height: 125%;
    --scl-font-variant-heading-3-letter-spacing: normal;
    --scl-font-variant-heading-2-family: TeleNeoWeb, sans-serif;
    --scl-font-variant-heading-2-size: 2.5rem;
    --scl-font-variant-heading-2-weight: 800;
    --scl-font-variant-heading-2-line-height: 120%;
    --scl-font-variant-heading-2-letter-spacing: normal;
    --scl-font-variant-heading-1-family: TeleNeoWeb, sans-serif;
    --scl-font-variant-heading-1-size: 3.5rem;
    --scl-font-variant-heading-1-weight: 800;
    --scl-font-variant-heading-1-line-height: 114%;
    --scl-font-variant-heading-1-letter-spacing: normal;
    --scl-color-primary: hsl(329.20000000000005, 100%, 44.3%);
    --scl-color-black: hsl(0, 0%, 0%);
    --scl-color-white: hsl(0, 0%, 100%);
    --scl-color-grey-0: hsl(0, 0%, 94.9%);
    --scl-color-grey-10: hsl(0, 0%, 89.8%);
    --scl-color-grey-20: hsl(0, 0%, 80%);
    --scl-color-grey-30: hsl(0, 0%, 69.8%);
    --scl-color-grey-40: hsl(0, 0%, 60%);
    --scl-color-grey-50: hsl(0, 0%, 49.8%);
    --scl-color-grey-60: hsl(0, 0%, 40%);
    --scl-color-grey-70: hsl(0, 0%, 29.8%);
    --scl-color-grey-80: hsl(0, 0%, 20%);
    --scl-color-grey-90: hsl(0, 0%, 9.8%);
    --scl-color-grey-100: hsl(0, 0%, 0%);
    --scl-color-orange-0: hsl(54.39999999999998, 100%, 93.7%);
    --scl-color-orange-10: hsl(48.39999999999998, 100%, 88.8%);
    --scl-color-orange-20: hsl(43.69999999999999, 100%, 84.1%);
    --scl-color-orange-30: hsl(38.69999999999999, 100%, 79.6%);
    --scl-color-orange-40: hsl(33.5, 100%, 75.1%);
    --scl-color-orange-50: hsl(29, 100%, 70.8%);
    --scl-color-orange-60: hsl(24.80000000000001, 96.5%, 66.1%);
    --scl-color-orange-70: hsl(17.30000000000001, 71.4%, 56.1%);
    --scl-color-orange-80: hsl(17.30000000000001, 72.3%, 39.6%);
    --scl-color-orange-90: hsl(17.30000000000001, 88.8%, 31.4%);
    --scl-color-orange-100: hsl(11.399999999999977, 86.6%, 26.3%);
    --scl-color-red-0: hsl(353.79999999999995, 100%, 88.6%);
    --scl-color-red-10: hsl(351.5, 100%, 83.3%);
    --scl-color-red-20: hsl(350.4, 98.1%, 78.8%);
    --scl-color-red-30: hsl(350.6, 91%, 73.9%);
    --scl-color-red-40: hsl(350.4, 85.1%, 68.4%);
    --scl-color-red-50: hsl(350.29999999999995, 82.8%, 63.5%);
    --scl-color-red-60: hsl(351.20000000000005, 82.6%, 59.4%);
    --scl-color-red-70: hsl(349.70000000000005, 69%, 50.6%);
    --scl-color-red-80: hsl(348.9, 74.9%, 43.7%);
    --scl-color-red-90: hsl(347.1, 84%, 36.9%);
    --scl-color-red-100: hsl(345.9, 100%, 30%);
    --scl-color-blue-0: hsl(190.20000000000005, 100%, 92%);
    --scl-color-blue-10: hsl(196.20000000000005, 100%, 85.5%);
    --scl-color-blue-20: hsl(200.89999999999998, 100%, 79.2%);
    --scl-color-blue-30: hsl(206, 100%, 73.3%);
    --scl-color-blue-40: hsl(210.70000000000005, 100%, 67.5%);
    --scl-color-blue-50: hsl(215.60000000000002, 100%, 62%);
    --scl-color-blue-60: hsl(220, 100%, 56.5%);
    --scl-color-blue-70: hsl(227.39999999999998, 89%, 46.3%);
    --scl-color-blue-80: hsl(236.5, 100%, 37.5%);
    --scl-color-blue-90: hsl(241.10000000000002, 100%, 31.2%);
    --scl-color-blue-100: hsl(249.39999999999998, 100%, 25.1%);
    --scl-color-teal-0: hsl(176.10000000000002, 63.3%, 90.4%);
    --scl-color-teal-10: hsl(178.89999999999998, 60%, 82.4%);
    --scl-color-teal-20: hsl(180, 58.5%, 74.5%);
    --scl-color-teal-30: hsl(181.20000000000005, 57.6%, 66.7%);
    --scl-color-teal-40: hsl(182.10000000000002, 55.2%, 58.8%);
    --scl-color-teal-50: hsl(183.60000000000002, 53.8%, 50.8%);
    --scl-color-teal-60: hsl(184.79999999999995, 68.9%, 42.9%);
    --scl-color-teal-70: hsl(182.89999999999998, 80.1%, 35.5%);
    --scl-color-teal-80: hsl(180.5, 91.5%, 27.8%);
    --scl-color-teal-90: hsl(178.89999999999998, 100%, 20.6%);
    --scl-color-teal-100: hsl(176.5, 100%, 16.9%);
    --scl-color-green-0: hsl(78.30000000000001, 59%, 92.4%);
    --scl-color-green-10: hsl(82.5, 55.6%, 85.9%);
    --scl-color-green-20: hsl(86.30000000000001, 55.3%, 79.8%);
    --scl-color-green-30: hsl(90.39999999999998, 52.6%, 73.5%);
    --scl-color-green-40: hsl(95.30000000000001, 50.9%, 67.3%);
    --scl-color-green-50: hsl(98.80000000000001, 49.7%, 61%);
    --scl-color-green-60: hsl(103.19999999999999, 48.1%, 54.7%);
    --scl-color-green-70: hsl(111.5, 46.1%, 48%);
    --scl-color-green-80: hsl(120, 52.4%, 41.2%);
    --scl-color-green-90: hsl(127.60000000000002, 58.9%, 34.3%);
    --scl-color-green-100: hsl(136.3, 65.7%, 27.5%);
    --scl-color-clay-0: hsl(15.800000000000011, 42.2%, 91.2%);
    --scl-color-clay-10: hsl(19.399999999999977, 46.3%, 86.9%);
    --scl-color-clay-20: hsl(20.899999999999977, 49.4%, 82.9%);
    --scl-color-clay-30: hsl(21.899999999999977, 48.1%, 78.8%);
    --scl-color-clay-40: hsl(22.30000000000001, 48.4%, 74.9%);
    --scl-color-clay-50: hsl(22.80000000000001, 48.3%, 71.2%);
    --scl-color-clay-60: hsl(25.100000000000023, 46.7%, 66.9%);
    --scl-color-clay-70: hsl(22.899999999999977, 35.8%, 58.4%);
    --scl-color-clay-80: hsl(21.399999999999977, 27.6%, 50.2%);
    --scl-color-clay-90: hsl(18.899999999999977, 26.8%, 41.8%);
    --scl-color-clay-100: hsl(18.600000000000023, 24.7%, 33.3%);
    --scl-color-rose-0: hsl(338.79999999999995, 48.6%, 93.1%);
    --scl-color-rose-10: hsl(341.4, 46%, 87.6%);
    --scl-color-rose-20: hsl(341.4, 45.7%, 82%);
    --scl-color-rose-30: hsl(341.9, 43.8%, 76.3%);
    --scl-color-rose-40: hsl(343.79999999999995, 42.3%, 70.8%);
    --scl-color-rose-50: hsl(346, 41.2%, 65.3%);
    --scl-color-rose-60: hsl(346.79999999999995, 39.8%, 59.6%);
    --scl-color-rose-70: hsl(344.79999999999995, 31.5%, 49.2%);
    --scl-color-rose-80: hsl(342.9, 35.4%, 38.8%);
    --scl-color-rose-90: hsl(340.29999999999995, 40.3%, 28.2%);
    --scl-color-rose-100: hsl(338.4, 44.6%, 22%);
    --scl-color-lilac-0: hsl(307.5, 33.3%, 95.3%);
    --scl-color-lilac-10: hsl(310, 27.3%, 91.4%);
    --scl-color-lilac-20: hsl(310.6, 28.8%, 88.4%);
    --scl-color-lilac-30: hsl(310, 30.8%, 84.7%);
    --scl-color-lilac-40: hsl(300, 28.2%, 77.1%);
    --scl-color-lilac-50: hsl(293.6, 30.7%, 70%);
    --scl-color-lilac-60: hsl(292.9, 30.9%, 62.5%);
    --scl-color-lilac-70: hsl(292.79999999999995, 24.4%, 53.3%);
    --scl-color-lilac-80: hsl(293.20000000000005, 23.8%, 43.7%);
    --scl-color-lilac-90: hsl(291.79999999999995, 29.1%, 34.3%);
    --scl-color-lilac-100: hsl(291.1, 37%, 24.9%);
    --scl-color-pigeon-0: hsl(226.20000000000005, 41.9%, 93.9%);
    --scl-color-pigeon-10: hsl(227.5, 42.9%, 89%);
    --scl-color-pigeon-20: hsl(227.60000000000002, 41.5%, 83.9%);
    --scl-color-pigeon-30: hsl(228.60000000000002, 38.9%, 78.8%);
    --scl-color-pigeon-40: hsl(230.60000000000002, 38.3%, 73.9%);
    --scl-color-pigeon-50: hsl(230.79999999999995, 37.1%, 68.8%);
    --scl-color-pigeon-60: hsl(232.70000000000005, 35.9%, 63.9%);
    --scl-color-pigeon-70: hsl(239.10000000000002, 29.8%, 55.9%);
    --scl-color-pigeon-80: hsl(244.60000000000002, 26.5%, 48%);
    --scl-color-pigeon-90: hsl(251.60000000000002, 30.4%, 40%);
    --scl-color-pigeon-100: hsl(257.5, 33.7%, 32%);
    --scl-color-neptune-0: hsl(176, 29.4%, 90%);
    --scl-color-neptune-10: hsl(180, 31.6%, 85.1%);
    --scl-color-neptune-20: hsl(178.29999999999995, 34.7%, 80.2%);
    --scl-color-neptune-30: hsl(180, 34.4%, 74.9%);
    --scl-color-neptune-40: hsl(182.29999999999995, 34.6%, 70%);
    --scl-color-neptune-50: hsl(184, 33.7%, 65.1%);
    --scl-color-neptune-60: hsl(184.39999999999998, 33.3%, 60%);
    --scl-color-neptune-70: hsl(182.70000000000005, 27.5%, 52.9%);
    --scl-color-neptune-80: hsl(180, 25.3%, 45.7%);
    --scl-color-neptune-90: hsl(178.79999999999995, 24.9%, 38.6%);
    --scl-color-neptune-100: hsl(178.20000000000005, 21.2%, 31.4%);
    --scl-color-olive-0: hsl(95, 33.3%, 92.9%);
    --scl-color-olive-10: hsl(96, 30.3%, 87.1%);
    --scl-color-olive-20: hsl(98.60000000000002, 29.8%, 81.6%);
    --scl-color-olive-30: hsl(100, 29%, 75.7%);
    --scl-color-olive-40: hsl(101.89999999999998, 28.1%, 70%);
    --scl-color-olive-50: hsl(103.19999999999999, 27.5%, 64.3%);
    --scl-color-olive-60: hsl(103.89999999999998, 26.4%, 58.4%);
    --scl-color-olive-70: hsl(102.19999999999999, 22%, 48.2%);
    --scl-color-olive-80: hsl(100, 24.7%, 38%);
    --scl-color-olive-90: hsl(97.5, 28.2%, 27.8%);
    --scl-color-olive-100: hsl(97.69999999999999, 32.7%, 21%);
    --scl-color-primary-hover: hsl(329.29999999999995, 95.2%, 50.6%);
    --scl-color-primary-active: hsl(329.29999999999995, 100%, 39.8%);
    --scl-color-focus: hsl(215.60000000000002, 100%, 62%);
    --scl-color-text-standard: hsl(0, 0%, 9.8%);
    --scl-color-text-additional: hsl(0, 0%, 40%);
    --scl-color-text-link: hsl(227.39999999999998, 89%, 46.3%);
    --scl-color-text-link-hover: hsl(236.5, 100%, 37.5%);
    --scl-color-text-link-active: hsl(220, 100%, 56.5%);
    --scl-color-text-link-visited: hsl(227.39999999999998, 89%, 46.3%);
    --scl-color-text-info: hsl(227.39999999999998, 89%, 46.3%);
    --scl-color-text-disabled: hsl(0, 0%, 49.8%);
    --scl-color-text-success: hsl(136.3, 65.7%, 27.5%);
    --scl-color-text-error: hsl(349.70000000000005, 69%, 50.6%);
    --scl-color-background-standard: hsl(0, 0%, 100%);
    --scl-color-background-light: hsl(0, 0%, 94.9%);
    --scl-color-background-darker: hsl(0, 0%, 80%);
    --scl-color-background-overlay: hsla(0, 0%, 42.4%, 0.7);
    --scl-color-background-disabled: hsl(0, 0%, 80%);
    --scl-color-background-success: hsl(136.3, 65.7%, 27.5%);
    --scl-color-background-error: hsl(349.70000000000005, 69%, 50.6%);
    --scl-color-functional-red: hsl(349.70000000000005, 69%, 50.6%);
    --scl-color-functional-green: hsl(136.3, 65.7%, 27.5%);
    --scl-color-functional-blue: hsl(227.39999999999998, 89%, 46.3%);
    --scl-shadow-level-0: 0px 2px 8px 0px hsla(0, 0%, 0%, 0.1), 0px 1px 2px 0px hsla(0, 0%, 0%, 0.1);
    --scl-shadow-level-1: 0px 4px 16px 0px hsla(0, 0%, 0%, 0.1), 0px 2px 4px 0px hsla(0, 0%, 0%, 0.1);
    --scl-shadow-level-2: 0px 8px 32px 0px hsla(0, 0%, 0%, 0.1), 0px 4px 8px 0px hsla(0, 0%, 0%, 0.1);
    --scl-shadow-level-3: 0px 12px 48px 0px hsla(0, 0%, 0%, 0.1), 0px 6px 12px 0px hsla(0, 0%, 0%, 0.1);
    --scl-shadow-level-4: 0px 16px 64px 0px hsla(0, 0%, 0%, 0.1), 0px 8px 16px 0px hsla(0, 0%, 0%, 0.1);
    --scl-shadow-level-5: 0px 20px 80px 0px hsla(0, 0%, 0%, 0.1), 0px 10px 20px 0px hsla(0, 0%, 0%, 0.1);
    --scl-shadow-level-1-hover: 0px 6px 24px 0px hsla(0, 0%, 0%, 0.1), 0px 3px 6px 0px hsla(0, 0%, 0%, 0.1);
    --scl-shadow-level-1-active: 0px 2px 8px 0px hsla(0, 0%, 0%, 0.1), 0px 1px 2px 0px hsla(0, 0%, 0%, 0.1);
    --scl-shadow-level-2-hover: 0px 10px 40px 0px hsla(0, 0%, 0%, 0.1), 0px 5px 10px 0px hsla(0, 0%, 0%, 0.1);
    --scl-shadow-level-2-active: 0px 6px 24px 0px hsla(0, 0%, 0%, 0.1), 0px 3px 6px 0px hsla(0, 0%, 0%, 0.1);
    --scl-shadow-level-3-hover: 0px 14px 56px 0px hsla(0, 0%, 0%, 0.1), 0px 7px 14px 0px hsla(0, 0%, 0%, 0.1);
    --scl-shadow-level-3-active: 0px 10px 40px 0px hsla(0, 0%, 0%, 0.1), 0px 5px 10px 0px hsla(0, 0%, 0%, 0.1);
    --scl-shadow-level-4-hover: 0px 18px 72px 0px hsla(0, 0%, 0%, 0.1), 0px 9px 18px 0px hsla(0, 0%, 0%, 0.1);
    --scl-shadow-level-4-active: 0px 14px 56px 0px hsla(0, 0%, 0%, 0.1), 0px 7px 14px 0px hsla(0, 0%, 0%, 0.1);
    --scl-shadow-level-5-hover: 0px 22px 88px 0px hsla(0, 0%, 0%, 0.1), 0px 11px 22px 0px hsla(0, 0%, 0%, 0.1);
    --scl-shadow-level-5-active: 0px 18px 72px 0px hsla(0, 0%, 0%, 0.1), 0px 9px 18px 0px hsla(0, 0%, 0%, 0.1);
    --scl-radius-1: 1px;
    --scl-radius-2: 2px;
    --scl-radius-4: 4px;
    --scl-radius-8: 8px;
    --scl-radius-12: 12px;
    --scl-opacity-50: 0.5;
    --scl-motion-duration-immediate: 100ms;
    --scl-motion-duration-fast: 200ms;
    --scl-motion-duration-slower: 600ms;
    --scl-motion-duration-deliberate: 800ms;
    --scl-motion-easing-standard: cubic-bezier(0.42, 0, 0.58, 1);
    --scl-motion-easing-enter: cubic-bezier(0.39, 0.575, 0.565, 1);
    --scl-z-index-10: 10;
    --scl-z-index-20: 20;
    --scl-z-index-30: 30;
    --scl-z-index-40: 40;
    --scl-z-index-50: 50;
    --scl-z-index-60: 60;
    --scl-z-index-70: 70;
}

: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;
}

@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: #fc7e21;
        --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-mode="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;
    }
}

:root {
    --telekom-spacing-unit-base: 0.25rem;
    --telekom-spacing-unit-x0: calc(var(--telekom-spacing-unit-base) * 0);
    --telekom-spacing-unit-x025: calc(var(--telekom-spacing-unit-base) * 0.25);
    --telekom-spacing-unit-x05: calc(var(--telekom-spacing-unit-base) * 0.5);
    --telekom-spacing-unit-x1: calc(var(--telekom-spacing-unit-base) * 1);
    --telekom-spacing-unit-x2: calc(var(--telekom-spacing-unit-base) * 2);
    --telekom-spacing-unit-x3: calc(var(--telekom-spacing-unit-base) * 3);
    --telekom-spacing-unit-x4: calc(var(--telekom-spacing-unit-base) * 4);
    --telekom-spacing-unit-x5: calc(var(--telekom-spacing-unit-base) * 5);
    --telekom-spacing-unit-x6: calc(var(--telekom-spacing-unit-base) * 6);
    --telekom-spacing-unit-x7: calc(var(--telekom-spacing-unit-base) * 7);
    --telekom-spacing-unit-x8: calc(var(--telekom-spacing-unit-base) * 8);
    --telekom-spacing-unit-x9: calc(var(--telekom-spacing-unit-base) * 9);
    --telekom-spacing-unit-x10: calc(var(--telekom-spacing-unit-base) * 10);
    --telekom-spacing-unit-x11: calc(var(--telekom-spacing-unit-base) * 11);
    --telekom-spacing-unit-x12: calc(var(--telekom-spacing-unit-base) * 12);
    --telekom-spacing-unit-x13: calc(var(--telekom-spacing-unit-base) * 13);
    --telekom-spacing-unit-x14: calc(var(--telekom-spacing-unit-base) * 14);
    --telekom-spacing-unit-x15: calc(var(--telekom-spacing-unit-base) * 15);
    --telekom-spacing-unit-x16: calc(var(--telekom-spacing-unit-base) * 16);
    --telekom-spacing-unit-x17: calc(var(--telekom-spacing-unit-base) * 17);
    --telekom-spacing-unit-x18: calc(var(--telekom-spacing-unit-base) * 18);
    --telekom-spacing-unit-x19: calc(var(--telekom-spacing-unit-base) * 19);
    --telekom-spacing-unit-x20: calc(var(--telekom-spacing-unit-base) * 20);
}

:root {
    --scl-grid-max-width: 1504px;
}

:root {
    --scl-z-index-10: 10;
    --scl-z-index-20: 20;
    --scl-z-index-30: 30;
    --scl-z-index-40: 40;
    --scl-z-index-50: 50;
    --scl-z-index-60: 60;
    --scl-z-index-70: 70;
    color-scheme: light dark;
}

.scl-toast-stack {
    position: fixed;
    top: var(--telekom-spacing-composition-space-06);
    inset-inline-end: var(--telekom-spacing-composition-space-06);
    z-index: var(--scl-z-index-70);
    z-index: 100;
    max-height: 100%;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: var(--telekom-spacing-composition-space-04);
}

[data-mode='light'] {
    color-scheme: light;
}

/*! CSS Used from: https://accounts.login.idm.telekom.com/static/scale/css/login-26.16.0.css */
#callback-tracking,#tealium-callback-tracking {
    border: none;
    height: 1px;
    left: 0;
    position: absolute;
    top: 0;
    width: 1px;
}

* {
    box-sizing: border-box;
}

body {
    background-attachment: fixed;
    background-color: var(--telekom-color-background-canvas);
    background-image: url(./bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--telekom-color-text-and-icon-standard);
    display: flex;
    flex-direction: column;
    margin: 0;
    min-height: 100vh;
}

@media screen and (max-width: 639px) {
    body {
        background-image:none;
    }
}

.btn-hidden {
    width: 0;
    height: 0;
    position: absolute;
    top: -99999px;
    left: -99999px;
    z-index: -999;
}

scale-button[size='icon-button-large'] {
    --radius: 4px;
    --min-height: 32px;
    --min-width: 32px;
    --width: 32px;
    --height: 32px;
    --border-width-secondary: 0;
}

scale-button[size='icon-button-medium'] {
    --radius: 4px;
    --min-height: 28px;
    --min-width: 28px;
    --width: 28px;
    --height: 28px;
    --border-width-secondary: 0;
}

.scl-toast-stack {
    max-width: 480px;
}

@media screen and (max-width: 639px) {
    .scl-toast-stack {
        max-width:288px;
        margin: 16px auto 0;
        position: inherit;
    }
}

.scale-telekom-footer[type='minimal'] scale-telekom-footer-content {
    --background-footer: none;
    --_font-color: var(--telekom-color-text-and-icon-white-standard);
}

@media screen and (max-width: 639px) {
    .scale-telekom-footer[type='minimal'] scale-telekom-footer-content {
        --_font-color:var(--telekom-color-text-and-icon-standard);
    }
}

.scale-telekom-footer[type='minimal'] :where(a,span) {
    color: var(--telekom-color-text-and-icon-white-standard);
}

@media screen and (max-width: 639px) {
    .scale-telekom-footer[type='minimal'] :where(a,span) {
        color:var(--telekom-color-text-and-icon-standard);
    }
}

.content {
    flex: 1;
}

@media screen and (min-width: 1680px) {
    .content {
        max-width:1504px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
}

.login-box {
    background-color: var(--telekom-color-background-canvas);
    border-radius: 16px;
    padding: 32px;
}

.login-box h1 {
    font: var(--telekom-text-style-heading-3);
    margin: 0;
}

.login-box__header {
    line-height: 40px;
    text-align: right;
}

.login-box__header scale-icon-alert-help {
    vertical-align: middle;
}

.login-box__text-field {
    margin-top: 24px;
    position: relative;
}

.login-box__text-field scale-button {
    top: 6px;
    position: absolute;
    right: 8px;
}

.login-box__switch {
    margin: 16px 0;
}

.login-box__switch scale-switch {
    vertical-align: middle;
}

.login-box__switch scale-button {
    margin-left: 8px;
    vertical-align: middle;
}

.login-box__actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
}

.login-box__actions scale-button {
    --width: 100%;
}

.login-box scale-notification.scale-notification--info h4 {
    margin: 0;
}

@media screen and (max-width: 639px) {
    .login-box {
        border-radius:0;
        margin: 16px auto;
        padding: 16px;
        min-width: 320px;
        max-width: 448px;
    }
}

@media screen and (min-width: 640px) and (max-width: 1039px) {
    .login-box {
        margin:16px auto;
        width: 448px;
    }
}

@media screen and (min-width: 1040px) and (max-width: 1295px) {
    .login-box {
        margin-left:auto;
        margin-right: auto;
        margin-top: 16px;
        width: 480px;
    }
}

@media screen and (min-width: 1296px) and (max-width: 1679px) {
    .login-box {
        margin-left:auto;
        margin-right: auto;
        margin-top: 16px;
        width: 528px;
    }
}

@media screen and (min-width: 1680px) {
    .login-box {
        margin-left:auto;
        margin-right: auto;
        margin-top: 16px;
        width: 544px;
    }
}

/*! CSS Used fontfaces */
@font-face {
    font-family: 'TeleNeoWeb';
    font-weight: 900;
    font-style: normal;
    src: url('./TeleNeoWeb-Ultra.eot');
    src: url('./TeleNeoWeb-Ultra.woff') format('woff'), url('./TeleNeoWeb-Ultra.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'TeleNeoWeb';
    font-weight: 900;
    font-style: italic;
    src: url('./TeleNeoWeb-UltraItalic.eot');
    src: url('./TeleNeoWeb-UltraItalic.woff') format('woff'), url('./TeleNeoWeb-UltraItalic.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'TeleNeoWeb';
    font-weight: 800;
    font-style: normal;
    src: url('./TeleNeoWeb-ExtraBold.eot');
    src: url('./TeleNeoWeb-ExtraBold.woff') format('woff'), url('./TeleNeoWeb-ExtraBold.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'TeleNeoWeb';
    font-weight: 800;
    font-style: italic;
    src: url('./TeleNeoWeb-ExtraBoldItalic.eot');
    src: url('./TeleNeoWeb-ExtraBoldItalic.woff') format('woff'), url('./TeleNeoWeb-ExtraBoldItalic.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'TeleNeoWeb';
    font-weight: 700;
    font-style: normal;
    src: url('./TeleNeoWeb-Bold.eot');
    src: url('./TeleNeoWeb-Bold.woff') format('woff'), url('./TeleNeoWeb-Bold.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'TeleNeoWeb';
    font-weight: 700;
    font-style: italic;
    src: url('./TeleNeoWeb-BoldItalic.eot');
    src: url('./TeleNeoWeb-BoldItalic.woff') format('woff'), url('./TeleNeoWeb-BoldItalic.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'TeleNeoWeb';
    font-weight: 500;
    font-style: normal;
    src: url('./TeleNeoWeb-Medium.eot');
    src: url('./TeleNeoWeb-Medium.woff') format('woff'), url('./TeleNeoWeb-Medium.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'TeleNeoWeb';
    font-weight: 500;
    font-style: italic;
    src: url('./TeleNeoWeb-MediumItalic.eot');
    src: url('./TeleNeoWeb-MediumItalic.woff') format('woff'), url('./TeleNeoWeb-MediumItalic.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'TeleNeoWeb';
    font-weight: 400;
    font-style: normal;
    src: url('./TeleNeoWeb-Regular.eot');
    src: url('./TeleNeoWeb-Regular.woff') format('woff'), url('./TeleNeoWeb-Regular.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'TeleNeoWeb';
    font-weight: 400;
    font-style: italic;
    src: url('./TeleNeoWeb-RegularItalic.eot');
    src: url('./TeleNeoWeb-RegularItalic.woff') format('woff'), url('./TeleNeoWeb-RegularItalic.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'TeleNeoWeb';
    font-weight: 200;
    font-style: normal;
    src: url('./TeleNeoWeb-Thin.eot');
    src: url('./TeleNeoWeb-Thin.woff') format('woff'), url('./TeleNeoWeb-Thin.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'TeleNeoWeb';
    font-weight: 200;
    font-style: italic;
    src: url('./TeleNeoWeb-ThinItalic.eot');
    src: url('./TeleNeoWeb-ThinItalic.woff') format('woff'), url('./TeleNeoWeb-ThinItalic.woff2') format('woff2');
    font-display: swap;
}

/*! CSS Used from: Embedded */
scale-telekom-header {
    visibility: hidden;
}

.hydrated {
    visibility: inherit;
}

/*! CSS Used from: https://accounts.login.idm.telekom.com/static/scale/css/login-26.16.0.css */
* {
    box-sizing: border-box;
}