.account-switch {
  min-width: 0;
  position: relative;
}
.account-switch scale-button.account-switch__button {
  display: flex;
  --border-width-secondary: 0;
  --height: 40px;
  --min-height: 40px;
  --radius: 20px;
  --spacing-x-icon-only: 0;
}
.account-switch scale-button.account-switch__button.pressed {
  border-radius: 20px;
  --radius: 20px;
  --background-secondary: var(--telekom-color-ui-state-fill-pressed);
  --border-secondary: var(--telekom-color-ui-border-pressed);
}
.account-switch scale-button.account-switch__button::part(base) {
  padding-block: 0;
}
.account-switch .account-switch__item {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-width: 230px;
  padding-right: 8px;
}
.account-switch .account-switch__item img {
  height: 40px;
}
.account-switch__menu {
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 8px 32px 0 rgba(0, 0, 0, 0.1);
  display: none;
  min-width: 230px;
  margin-top: 4px;
  padding: 8px 0;
  position: absolute;
  width: 100%;
  z-index: 10;
}
.account-switch__menu scale-button.account-switch__menu-button {
  --border-width-secondary: 0;
  --height: 40px;
  --min-height: 40px;
  --min-width: 100%;
  --radius: 0;
  --spacing-x-left: 12px;
  --spacing-x-right: 12px;
  display: block;
  height: 40px;
}
.account-switch__menu scale-button::part(base) {
  justify-content: left;
}
.account-switch__menu[opened] {
  display: block;
}
#notification-container scale-notification::part(base) {
  margin-bottom: 32px;
}
#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;
  }
}
input::-ms-reveal,
input::-ms-clear {
  display: none;
}
.hidden {
  display: none;
}
.btn-link {
  background: none !important;
  border: none;
  color: #007faf;
  cursor: pointer;
  font: inherit;
  padding: 0 !important;
}
.btn-link:hover {
  text-decoration: underline;
}
.btn-link-without-underline {
  background: none !important;
  border: none;
  color: #007faf;
  cursor: pointer;
  font: inherit;
  padding: 0 !important;
}
.btn-link-without-underline-2 {
  background: none !important;
  border: none;
  color: #007faf;
  cursor: pointer;
  font: inherit;
  padding: 0 !important;
  display: flex;
  align-items: center;
}
.btn-hidden {
  width: 0;
  height: 0;
  position: absolute;
  top: -99999px;
  left: -99999px;
  z-index: -999;
}
.choose-account-option {
  align-items: center;
  display: flex;
  gap: 16px;
  padding: 8px;
}
.consent-headline {
  display: flex;
}
.consent-headline-text {
  flex-grow: 1;
  align-content: center;
}
.consent-headline-icon {
  width: 80px;
}
.consent-image {
  max-width: 80px;
  max-height: 80px;
}
.consent-databloc-detailheadline {
  font-weight: bold;
}
.ppid-content {
  line-height: 140%;
}
.select-option-auth-field {
  padding: 16px;
  gap: 16px;
  border-bottom: 1px solid #dfdfe1;
  display: flex;
  justify-content: space-between;
}
.select-option-field {
  align-items: center;
  border-bottom: 1px solid #efeff0;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 16px 8px 16px 8px;
}
.select-option-item-left {
  align-items: center;
  display: flex;
  pointer-events: none;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-all;
}
.select-option-item-right {
  margin-left: auto;
}
.select-option-button {
  display: flex;
  height: 56px;
  --width: 100%;
  --border-width-secondary: 0;
  border-bottom: 1px solid #dfdfe1;
}
.select-option-button:hover {
  color: var(--telekom-color-text-and-icon-link-hovered);
  text-decoration-color: currentColor;
  text-decoration-thickness: var(
    --telekom-line-weight-highlight,
    var(--telekom-line-weight-standard)
  );
}
.select-option-button-icon {
  margin-right: 16px;
  pointer-events: none;
}
.select-option-button-text-container {
  display: grid;
  text-align: start;
  pointer-events: none;
}
.select-option-button-text {
  pointer-events: none;
}
.select-option-button-item-right {
  margin-left: auto;
  pointer-events: none;
}
.button__link {
  align-items: center;
  background: none !important;
  border: none;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--telekom-typography-font-weight-regular);
  color: var(--telekom-color-text-and-icon-link-standard);
  padding: 0 !important;
  position: relative;
  display: inline-flex;
  text-decoration: underline;
  text-underline-offset: 0.1875em;
  text-underline-position: from-font;
  text-decoration-thickness: var(--telekom-line-weight-standard);
  text-decoration-color: var(--telekom-color-text-and-icon-link-standard);
}
.button__link:active {
  color: var(--telekom-color-text-and-icon-link-active);
  text-decoration-color: currentColor;
  text-decoration-thickness: var(
    var(--telekom-line-weight-highlight),
    var(--telekom-line-weight-standard)
  );
}
.button__link:focus,
.button__link:focus-visible {
  color: var(--telekom-color-text-and-icon-link-standard);
  text-decoration-color: transparent;
  text-decoration-thickness: var(0, var(--telekom-line-weight-standard));
  outline: var(--telekom-line-weight-highlight) solid
    var(--telekom-color-functional-focus-standard);
  outline-offset: var(--telekom-spacing-composition-space-01);
  border-radius: var(--telekom-radius-small);
}
.button__link:hover {
  color: var(--telekom-color-text-and-icon-link-hovered);
  text-decoration-color: currentColor;
  text-decoration-thickness: var(
    --telekom-line-weight-highlight,
    var(--telekom-line-weight-standard)
  );
}
.display-hidden {
  display: none !important;
  visibility: hidden !important;
}
.visually-hidden {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-speak-numeral-digits {
  speak-numeral: digits;
}
.text-speak-numeral-continiuous {
  speak-numeral: continuous;
}
.flex-gap-12 {
  display: flex;
  gap: 12px;
}
.center-flex-pointer_events_none {
  display: flex;
  align-items: center;
  pointer-events: none;
}
.text-normal {
  font-weight: var(--telekom-typography-font-weight-regular);
}
.dontKnow {
  margin-top: 16px;
  padding-bottom: 8px;
}
.button-full-width {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.offset-bottom-3 {
  margin-bottom: 24px;
}
.offset-top-3 {
  margin-top: 24px;
}
.offset-top-3-5 {
  margin-top: 28px !important;
}
.offset-bottom-4 {
  margin-bottom: 32px;
}
.offset-top-4 {
  margin-top: 32px !important;
}
.offset-top-6 {
  margin-top: 48px !important;
}
.offset-bottom-1 {
  margin-bottom: 8px !important;
}
.offset-bottom-0-5 {
  margin-bottom: 4px;
}
.offset-bottom-2 {
  margin-bottom: 16px;
}
.offset-top-2 {
  margin-top: 16px;
}
.offset-top-1 {
  margin-top: 8px;
}
.offset-top-0 {
  margin-top: 0;
}
.offset-left-1 {
  margin-left: 8px !important;
}
.offset-right-1 {
  margin-right: 8px !important;
}
.padding-1 {
  padding: 8px 0 8px 0;
}
.padding-bottom-1 {
  padding-bottom: 8px;
}
.padding-right-0-5 {
  padding-right: 4px;
}
hr {
  margin-top: 8px;
  margin-bottom: 8px;
  border: 0;
  border-top: 1px solid #efeff0;
}
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;
}
scale-button.pressed {
  border-radius: 4px;
  background-color: var(--telekom-color-ui-state-fill-pressed);
  border-color: var(--telekom-color-ui-border-pressed);
}
.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-header::part(fixed-wrapper) {
  background-color: unset;
  box-shadow: none;
}
scale-telekom-header::part(body) {
  display: none;
}
.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%;
  }
}
.overlay {
  top: 0;
  left: 0;
  width: 100%;
  bottom: 0;
  display: none;
  z-index: 100;
  position: fixed;
  background: var(
    --telekom-color-background-backdrop,
    rgba(108, 108, 108, 0.7)
  );
  box-sizing: border-box;
}
.overlay--visible {
  display: block;
}
scale-notification.global-info-box::part(heading) {
  margin-top: 16px;
}
scale-notification.global-info-box::part(body) {
  margin-top: 0;
}
scale-notification.global-info-box h4 {
  margin: 0 0 8px 0;
}
.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__header--with-account-switch {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 24px;
  text-align: inherit;
}
.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__actions button.button__link {
  align-items: center;
  background: none !important;
  border: none;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--telekom-typography-font-weight-regular);
  color: var(--telekom-color-text-and-icon-link-standard);
  padding: 0 !important;
  position: relative;
  display: inline-flex;
  text-decoration: underline;
  text-underline-offset: 0.1875em;
  text-underline-position: from-font;
  text-decoration-thickness: var(--telekom-line-weight-standard);
  text-decoration-color: var(--telekom-color-text-and-icon-link-standard);
}
.login-box__actions button.button__link:active {
  color: var(--telekom-color-text-and-icon-link-active);
  text-decoration-color: currentColor;
  text-decoration-thickness: var(
    var(--telekom-line-weight-highlight),
    var(--telekom-line-weight-standard)
  );
}
.login-box__actions button.button__link:focus,
.login-box__actions button.button__link:focus-visible {
  color: var(--telekom-color-text-and-icon-link-standard);
  text-decoration-color: transparent;
  text-decoration-thickness: var(0, var(--telekom-line-weight-standard));
  outline: var(--telekom-line-weight-highlight) solid
    var(--telekom-color-functional-focus-standard);
  outline-offset: var(--telekom-spacing-composition-space-01);
  border-radius: var(--telekom-radius-small);
}
.login-box__actions button.button__link:hover {
  color: var(--telekom-color-text-and-icon-link-hovered);
  text-decoration-color: currentColor;
  text-decoration-thickness: var(
    --telekom-line-weight-highlight,
    var(--telekom-line-weight-standard)
  );
}
.login-box__actions-no-next-button {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 32px;
}
.login-box__actions-no-next-button scale-button {
  --width: 100%;
}
.login-box__actions-no-next-button button.button__link {
  align-items: center;
  background: none !important;
  border: none;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--telekom-typography-font-weight-regular);
  color: var(--telekom-color-text-and-icon-link-standard);
  padding: 0 !important;
  position: relative;
  display: inline-flex;
  text-decoration: underline;
  text-underline-offset: 0.1875em;
  text-underline-position: from-font;
  text-decoration-thickness: var(--telekom-line-weight-standard);
  text-decoration-color: var(--telekom-color-text-and-icon-link-standard);
}
.login-box__actions-no-next-button button.button__link:active {
  color: var(--telekom-color-text-and-icon-link-active);
  text-decoration-color: currentColor;
  text-decoration-thickness: var(
    var(--telekom-line-weight-highlight),
    var(--telekom-line-weight-standard)
  );
}
.login-box__actions-no-next-button button.button__link:focus,
.login-box__actions-no-next-button button.button__link:focus-visible {
  color: var(--telekom-color-text-and-icon-link-standard);
  text-decoration-color: transparent;
  text-decoration-thickness: var(0, var(--telekom-line-weight-standard));
  outline: var(--telekom-line-weight-highlight) solid
    var(--telekom-color-functional-focus-standard);
  outline-offset: var(--telekom-spacing-composition-space-01);
  border-radius: var(--telekom-radius-small);
}
.login-box__actions-no-next-button button.button__link:hover {
  color: var(--telekom-color-text-and-icon-link-hovered);
  text-decoration-color: currentColor;
  text-decoration-thickness: var(
    --telekom-line-weight-highlight,
    var(--telekom-line-weight-standard)
  );
}
.login-box .spinner {
  align-items: center;
  display: none;
  height: 340px;
  justify-content: center;
}
@media screen and (max-width: 639px) {
  .login-box .spinner {
    height: 320px;
  }
}
.login-box--spinner form {
  display: none;
}
.login-box--spinner .spinner {
  display: flex;
}
.login-box scale-notification.scale-notification--info::part(base) {
  margin-top: 8px;
  padding: 0 16px;
}
.login-box scale-notification.scale-notification--info::part(icon) {
  display: none;
}
.login-box scale-notification.scale-notification--info::part(heading) {
  margin-top: 16px;
}
.login-box scale-notification.scale-notification--info::part(body) {
  margin-top: 0;
  margin-bottom: 0;
}
.login-box scale-notification.scale-notification--info div img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.login-box scale-notification.scale-notification--info h4 {
  margin: 0;
}
.login-box
  scale-notification.scale-notification--success-align-middle::part(base) {
  align-items: center;
  margin-top: 16px;
  margin-bottom: 16px;
}
.login-box
  scale-notification.scale-notification--success-align-middle::part(body) {
  margin-top: 12px;
  margin-bottom: 12px;
}
.login-box
  scale-notification.scale-notification--success-align-middle::part(text) {
  margin-top: 0;
}
.login-box
  scale-notification.scale-notification--success-align-middle::part(icon) {
  display: inline-flex;
  align-items: center;
}
.login-box
  scale-notification.scale-notification--success-align-top::part(text) {
  margin-top: 8px;
}
.login-box
  scale-notification.scale-notification--success-align-top::part(body) {
  margin-top: 8px;
  margin-bottom: 12px;
}
.login-box
  scale-notification.scale-notification--success-align-top::part(base) {
  margin-top: 16px;
  margin-bottom: 16px;
}
.login-box scale-notification.scale-notification--warning::part(base) {
  margin-top: 8px;
}
.login-box scale-notification.scale-notification--warning::part(body) {
  margin-top: 0;
  margin-bottom: 0;
}
.login-box scale-notification.scale-notification--warning::part(text) {
  padding: 8px 12px 12px 0;
}
.login-box scale-notification.scale-notification--warning h4 {
  margin: 0;
}
.login-box scale-icon-action-refresh.refresh-icon {
  width: 18px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
}
.login-box scale-list-item.squared::part(base):before {
  border-radius: 0;
}
.login-box scale-list.squared-small scale-list-item::part(base) {
  padding-left: var(--telekom-spacing-composition-space-06);
}
.login-box scale-list.squared-small scale-list-item::part(no-marker) {
  padding-left: 0;
}
.login-box scale-list.squared-small scale-list-item::part(base):before {
  border-radius: 0;
  transform: scale(0.33);
}
.login-box .error-heading {
  align-items: center;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.login-box .error-heading .alert-icon {
  display: inline-flex;
  align-items: center;
}
.login-box .error-heading .alert-icon svg {
  width: 44px;
  height: 44px;
}
.login-box .error-heading .textelement {
  margin-top: 3px;
  align-self: flex-start;
}
.login-box #service-tiles {
  height: 104px;
  margin-bottom: 16px;
  text-align: center;
}
.login-box #service-tiles .tile {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  color: #383838;
  cursor: pointer;
  display: table;
  float: left;
  height: 100%;
  text-decoration: none;
  vertical-align: middle;
  width: 33.33333333%;
}
.login-box #service-tiles .tile:hover {
  background-color: var(--telekom-color-background-surface-subtle);
}
.login-box #service-tiles .tile:not(:last-child) {
  border-right: none;
}
.login-box #service-tiles .tile .tile-content {
  display: table-cell;
  vertical-align: middle;
}
.login-box #service-tiles .tile .tile-content img {
  box-sizing: content-box;
  height: 52px;
  padding: 8px;
  padding: 12px;
  width: 52px;
}
.login-box #service-tiles .tile .tile-content p {
  padding: 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;
  }
}