@media all {

  .ce-type-dw_hintpopup.ce-hintpopup-source {
    display: none;
  }

  .ce-hintpopup {
    --current-text-color: var(--color-white);
    --current-header-color: var(--color-white);
    --current-highlight-color: var(--color-white);
    --current-link-color: var(--color-white);
    --current-link-color-hover: var(--color-white);
    --ce-hintpopup-background: color-mix(in srgb, var(--color-orange) 88%, transparent);
    --ce-hintpopup-icon-size: 5rem;
    --ce-hintpopup-icon-opacity: 0.7;

    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10050;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    max-height: 85vh;
    padding: calc(var(--page-grid-padding) + 3.5rem) var(--page-grid-padding) var(--page-grid-padding);
    color: var(--color-white);
    background-color: var(--ce-hintpopup-background);
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
    transition: var(--transition-default);
    transition-property: opacity, visibility;

    &.is-visible {
      opacity: 1;
      visibility: visible;
    }

    & .ce-hintpopup-dialog {
      position: relative;
      display: flex;
      width: 100%;
      padding: 0;
      color: var(--color-white);
      background-color: transparent;
      box-shadow: none;
    }

    & .ce-hintpopup-close {
      position: absolute;
      top: var(--page-grid-padding);
      right: var(--page-grid-padding);
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      width: 2.75rem;
      height: 2.75rem;
      margin: 0;
      padding: 0;
      border: var(--border-width) solid var(--color-white);
      border-radius: 50%;
      background-color: transparent;
      opacity: 1;
      cursor: pointer;
      transition: var(--transition-default);
      transition-property: background-color;

      & img {
        display: block;
        width: 1rem;
        height: 1rem;
        object-fit: contain;
      }
    }

    & .ce-hintpopup-close:hover,
    & .ce-hintpopup-close:focus-visible {
      opacity: 1;
      background-color: color-mix(in srgb, var(--color-white) 15%, transparent);
      outline: none;
      box-shadow: none;
    }

    & .ce-hintpopup-inner {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: var(--element-gap);
      width: 100%;
      padding-inline: 0;
    }

    & .ce-hintpopup-text {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: var(--element-gap-text);
      color: var(--color-white);
      margin: 0;
      padding: 0;
      width: 100%;
      font-size: 0.875rem;

      & .ce-header :is(h1, h2, h3, h4, h5, h6, .paragraph) {
        color: var(--color-white);
      }

      & :is(a, a:visited) {
        color: var(--color-white);
      }

      & :is(a:hover, a:focus-visible) {
        color: var(--color-white);
      }

      & .ce-bodytext {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin: 0;
        padding: 0;
      }

      & .ce-header {
        margin: 0;
        padding: 0;
        width: 100%;
      }

      & .ce-bodytext :is(.table, figure.table, .contenttable-container) {
        --padding: 0;
        display: block;
        margin: 0;
        padding: 0;
        width: 100%;
        max-width: 100%;
      }

      & .ce-bodytext > .table {
        display: block;
        margin: 0;
        padding: 0;
        width: 100%;
        max-width: 100%;
      }

      & .ce-bodytext .contenttable-container {
        margin: 0;
        padding: 0;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
      }

      & :is(table.table, table.contenttable, .contenttable-container table, figure.table table) {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-collapse: collapse;
        border-spacing: 0;
        text-align: left;
      }

      & :is(table.table, table.contenttable, .contenttable-container table, figure.table table) > :not(caption) > * > * {
        min-width: 0;
        padding-block: var(--size-3);
        padding-inline: 0 var(--size-5);
        color: var(--color-white);
        text-align: left;
        vertical-align: top;
        background-color: transparent;
        box-shadow: none;
      }

      & :is(table.table, table.contenttable, .contenttable-container table, figure.table table) :is(tr > :first-child) {
        padding-inline-start: 0;
        width: auto;
      }

      & :is(table.table, table.contenttable, .contenttable-container table, figure.table table) :is(tr > :last-child) {
        padding-inline-end: 0;
      }

      & :is(table.table, table.contenttable, .contenttable-container table, figure.table table) :is(th, td):empty {
        display: none;
        padding: 0;
        border: 0;
      }

    }

    & .ce-hintpopup-icon {
      flex: 0 0 auto;
      order: -1;
      display: flex;
      align-items: center;
      justify-content: center;
      align-self: center;
      margin: 0;
      font-size: var(--ce-hintpopup-icon-size);
      line-height: 1;
      color: var(--color-white);
      opacity: var(--ce-hintpopup-icon-opacity);

      & .ce-media-file,
      & .ce-media-svg-mask {
        margin: 0;
        width: var(--ce-hintpopup-icon-size);
        height: var(--ce-hintpopup-icon-size);
      }

      & .svg-mask-icon {
        width: var(--ce-hintpopup-icon-size);
        height: var(--ce-hintpopup-icon-size);
        background-color: var(--color-white);
      }

      & .ce-media-svg-mask svg,
      & .ce-media-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: brightness(0) invert(1);
      }

    }

  }

}

@media (min-width: 48rem) {

  .ce-hintpopup {
    --ce-hintpopup-icon-size: 18rem;
    --ce-hintpopup-icon-offset-inline: calc(var(--page-grid-padding) + var(--size-8));

    align-items: flex-start;
    padding: calc(var(--page-grid-padding) + 3.5rem) var(--page-grid-padding) var(--page-grid-padding);
    overflow-y: auto;

    & .ce-hintpopup-dialog {
      padding-block: var(--element-padding);
      padding-inline: var(--size-10) var(--size-6);
    }

    & .ce-hintpopup-close {
      position: absolute;
    }

    & .ce-hintpopup-inner {
      flex-direction: row;
      align-items: center;
      gap: var(--element-gap-text);
    }

    & .ce-hintpopup-text {
      padding-inline-start: var(--size-6);
      font-size: inherit;
    }

    & .ce-hintpopup-text :is(table.table, table.contenttable, .contenttable-container table, figure.table table) > :not(caption) > * > * {
      padding-block: var(--size-1);
      padding-inline: 0 var(--size-2);
    }

    & .ce-hintpopup-text :is(table.table, table.contenttable, .contenttable-container table, figure.table table) :is(tr > :first-child) {
      padding-inline-start: 0;
    }

    & .ce-hintpopup-icon {
      order: 0;
      align-self: center;
      margin-inline-start: auto;
      margin-inline-end: var(--ce-hintpopup-icon-offset-inline);
    }

    & .ce-hintpopup-close {
      width: 3rem;
      height: 3rem;
    }

  }

}