.left-wing-container {
    display: flex;
    justify-content: flex-start;
    /* push content to the left */
}

.left-wing {
    text-align: left;
    /* aligns text/content to the left */
}

.login-box__header {
    margin-bottom: -7%;
}

.email-display {
    display: none;
    align-items: center;
    /* vertical centering */
    margin-bottom: 10px;
    font-weight: normal;
    color: #000000;
    font-size: 14px;
    gap: 8px;
    /* space between avatar and text */
    cursor: pointer;
    max-width: 250px;
    /* total width of the whole dropdown */
}

.avatar {
    width: 32px;
    /* fixed avatar size */
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    /* never shrink */
}

#emailText {
    /* flex: 1 1 auto; */
    /* text grows/shrinks */
    overflow: hidden;
    /* hides overflow */
    text-overflow: ellipsis;
    /* shows "..." if too long */
    white-space: nowrap;
    /* single line */
}

.email-display::after {
    content: " ▼";
    font-size: 12px;
    color: #000000;
    margin-left: 6px;
    flex-shrink: 0;
    /* arrow always visible */
}

.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)
}

.scale-telekom-footer[type='minimal'] :where(a:focus-visible) {
    outline: var(--telekom-line-weight-highlight) solid var(--telekom-color-functional-focus-standard);
    outline-offset: 1px
}

.scale-telekom-footer:not([type='minimal']) :where(a:focus-visible) {
    outline: var(--telekom-line-weight-highlight) solid var(--telekom-color-functional-focus-on-dark-background);
    outline-offset: 1px
}

.scale-telekom-footer:not([type='minimal']) scale-telekom-footer-extended-navigation-column :where(a:focus-visible) {
    outline: var(--telekom-line-weight-highlight) solid var(--telekom-color-functional-focus-standard);
    outline-offset: 1px
}

@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)
    }
}

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--hide-label .text-field__control {
    padding: 5px var(--telekom-spacing-composition-space-12) 5px calc(var(--spacing-x) - 1px)
}

.text-field--hide-label .text-field__label {
    visibility: hidden
}

.text-field.text-field--helper-text .text-field__control {
    margin-bottom: var(--margin-bottom-control)
}

.text-field .text-field__counter {
    display: flex;
    transition: var(--transition-counter);
    margin-left: auto;
    justify-content: flex-end;
    font: var(--telekom-text-style-small);
    color: var(--telekom-color-text-and-icon-standard)
}

.text-field scale-helper-text {
    --color-informational: var(--color-helper-text);
    --color-warning: var(--color-helper-text-warning);
    --color-danger: var(--color-helper-text-error);
    --color-success: var(--color-helper-text-success);
    --color-neutral: var(--color-helper-text-neutral);
    --font-size: var(--font-size-helper-text);
    --font-weight: var(--font-weight-helper-text);
    --line-height: var(--line-height-helper-text);
    --icon-size-helper-text: var(--helper-text-icon-size);
    font-weight: var(--telekom-typography-font-weight-bold);
    display: flex
}

.text-field .text-field__meta {
    display: flex;
    justify-content: space-between;
    margin-top: var(--spacing-y-meta);
    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)
}

.text-field--has-focus:not(.text-field--readonly) .text-field__label,
.animated .text-field__label {
    font: var(--telekom-text-style-small-bold);
    transform: translate(var(--spacing-x), calc(0.25rem + var(--telekom-spacing-composition-space-01)))
}

.text-field--variant-danger .text-field__control {
    border: var(--border-error)
}

.text-field--variant-success .text-field__control {
    border: var(--border-success)
}

.text-field--variant-warning .text-field__control {
    border: var(--border-warning)
}

.text-field--variant-danger:not(.text-field--disabled):not(.text-field--readonly) .text-field__control:hover,
.text-field--variant-danger:not(.text-field--disabled):not(.text-field--readonly) .text-field__control:focus {
    border-color: var(--telekom-color-functional-danger-hovered)
}

.text-field--variant-success:not(.text-field--disabled):not(.text-field--readonly) .text-field__control:hover,
.text-field--variant-success:not(.text-field--disabled):not(.text-field--readonly) .text-field__control:focus {
    border-color: var(--telekom-color-functional-success-hovered)
}

.text-field--variant-warning:not(.text-field--disabled):not(.text-field--readonly) .text-field__control:hover,
.text-field--variant-warning:not(.text-field--disabled):not(.text-field--readonly) .text-field__control:focus {
    border-color: var(--telekom-color-functional-warning-hovered)
}

.text-field--variant-danger .text-field__helper-text {
    color: var(--color-helper-text-error)
}

.text-field--variant-danger .text-field__counter {
    color: var(--color-counter-error)
}

.text-field--variant-success .text-field__helper-text {
    color: var(--color-helper-text-success)
}

.text-field--variant-success .text-field__counter {
    color: var(--telekom-color-text-and-icon-functional-success)
}

.text-field--variant-warning .text-field__helper-text {
    color: var(--color-helper-text-warning)
}

.text-field--variant-warning .text-field__counter {
    color: var(--telekom-color-text-and-icon-functional-warning)
}

.text-field--transparent .text-field__control {
    background-color: transparent
}

.text-field--readonly input,
.text-field--readonly .text-field__control {
    color: var(--color-label-readonly);
    border: none;
    background: var(--background-readonly)
}

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

.text-field--disabled label,
.text-field--disabled .text-field__label,
.text-field--disabled input,
.text-field--disabled .text-field__control,
.text-field--disabled .text-field__meta,
.text-field--disabled .text-field__counter,
.text-field--disabled .text-field__helper-text {
    cursor: not-allowed;
    border-color: var(--border-color-disabled);
    background-color: var(--background-color-disabled);
    color: var(--color-disabled);
    background: transparent
}

.text-field--disabled.animated label.text-field__label {
    color: var(--color-disabled)
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none
}

input[type='number'] {
    -moz-appearance: textfield
}

input[type='datetime-local']::-webkit-calendar-picker-indicator,
input[type='time']::-webkit-calendar-picker-indicator,
input[type='date']::-webkit-calendar-picker-indicator,
input[type='week']::-webkit-calendar-picker-indicator,
input[type='month']::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 12px
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    color-scheme: dark
}

@media screen and (forced-colors: active),
(-ms-high-contrast: active) {

    .text-field--readonly input,
    .text-field--readonly .text-field__control {
        border: 1px solid
    }
}

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)
}

[data-platform='android'] .switch__toggle--overlay {
    display: none
}

.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)
}

[data-platform='android'] .switch.switch--checked {
    --_background: var(--telekom-color-primary-standard);
    --_color-thumb: var(--telekom-color-ui-white)
}

[data-platform='android'] .switch {
    --_color-thumb: var(--telekom-color-ui-strong)
}

[data-platform='android'] .switch:hover {
    --_background: var(--telekom-color-ui-faint)
}

[data-platform='android'] .switch:active {
    --_background: var(--telekom-color-ui-faint)
}

[data-platform='android'] .switch:hover {
    --_color-thumb: var(--telekom-color-ui-extra-strong)
}

[data-platform='android'] .switch:active {
    --_color-thumb: var(--telekom-color-ui-extra-strong)
}

[data-platform='android'] .switch--checked:active,
[data-platform='android'] .switch--checked:hover {
    --_color-thumb: var(--telekom-color-ui-white)
}

[data-platform='android'] .switch--checked:hover,
.switch--checked:hover {
    --_background: var(--telekom-color-primary-hovered)
}

[data-platform='android'] .switch--checked:active,
.switch--checked:active {
    --_background: var(--telekom-color-primary-pressed)
}

[data-platform='android'] .switch--disabled {
    --_background: var(--telekom-color-ui-faint);
    --_color-thumb: var(--telekom-color-ui-border-disabled)
}

[data-platform='android'] .switch--disabled:hover {
    --_color-thumb: var(--telekom-color-ui-border-disabled);
    --_background: var(--telekom-color-ui-faint)
}

[data-platform='android'] .switch--checked.switch--disabled:hover {
    --_background: var(--telekom-color-ui-border-disabled);
    --_color-thumb: var(--telekom-color-ui-faint)
}

.switch--disabled,
.switch--disabled:hover,
.switch--disabled:active {
    --_background: var(--telekom-color-ui-disabled);
    --_color-thumb: var(--telekom-color-ui-faint);
    --_overlay-background: transparent
}

.switch--checked .switch--disabled,
.switch--checked .switch--disabled:hover,
.switch--checked .switch--disabled:active {
    --_background: var(--telekom-color-ui-faint);
    --_color-thumb: var(--telekom-color-ui-disabled);
    box-shadow: var(--telekom-shadow-raised-standard);
    --_overlay-background: transparent
}

[data-platform='android'] .switch--disabled.switch--checked {
    --_background: var(--telekom-color-ui-border-disabled);
    --_color-thumb: var(--telekom-color-ui-faint)
}

.switch--disabled .switch__wrapper {
    cursor: not-allowed
}

.switch--disabled .switch__thumb {
    box-shadow: var(--telekom-shadow-raised-standard)
}

.switch--size-large {
    --width: 56px;
    --height: 32px
}

.switch--focus-visible-not-supported :focus~.switch__toggle,
:focus-visible~.switch__toggle {
    outline: var(--telekom-spacing-composition-space-02) solid var(--telekom-color-functional-focus-standard);
    outline-offset: var(--telekom-spacing-composition-space-01)
}

.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--size-large .switch__io-text {
    margin-top: 1px;
    font: var(--telekom-text-style-caption-bold)
}

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

.switch--disabled .switch__io-text {
    color: var(--telekom-color-text-and-icon-disabled)
}

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

[data-platform='android'] scale-switch {
    --width: 56px;
    --height: 32px;
    --offset: 7px
}

[data-platform='android'] .switch__thumb {
    width: 18px;
    height: 18px
}

[data-platform='android'] scale-switch:not([disabled]):active .switch__thumb {
    width: 28px;
    height: 28px;
    --offset: 2px
}

[data-platform='android'] .switch--checked .switch__thumb {
    width: 24px;
    height: 24px;
    --offset: 4px
}

[data-platform='android'] .switch__thumb {
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: none
}

scale-switch scale-icon-action-success {
    display: none !important
}

[data-platform='android'] .switch--checked scale-icon-action-success {
    position: absolute;
    display: inline-block !important;
    margin-top: 2px;
    margin-left: 1px
}

[data-platform='android'] .switch--checked .switch__thumb {
    color: var(--_background)
}

[data-platform='android'] .switch__io-text {
    display: none
}

[data-platform='android'] .switch--checked .switch__thumb {
    color: var(--telekom-color-primary-standard)
}

[data-platform='android'] .switch--disabled .switch__thumb {
    color: var(--telekom-color-ui-strong)
}

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

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

scale-icon {
    --display: inline-flex;
    --transition: all var(--telekom-motion-duration-transition) var(--telekom-motion-easing-standard);
    display: var(--display)
}

scale-icon path {
    transition: var(--transition)
}

@media screen and (forced-colors: active),
(-ms-high-contrast: active) {

    scale-icon svg,
    .scale-icon {
        color: white;
        stroke: white
    }
}