[tooltip] {
    position: relative;
  }




  .noTouch [tooltip]::after {
    content: attr(tooltip);   /* liest das [tootltip] Attribut aus */
    min-width: 3em;
    max-width: 21em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    padding: 0.5em;
    -webkit-box-shadow: 0.1em 0.1em 0.2em rgba(var(--boxShadow));
    -moz-box-shadow: 0.1em 0.1em 0.2em rgba(var(--boxShadow));
    box-shadow: 0.1em 0.1em 0.2em rgba(var(--boxShadow));
    background: rgb(var(--colUIBack04));
    border-radius: 0.5em;
    border: solid transparent;
    border-color: rgb(var(--colUIText04));
    border-width: 1px 0 0 1px;
    color: rgb(var(--colUIText03));
    z-index: 1000;
    font-size: 0.8em;
    line-height: 1;
    letter-spacing: 0.1em;
    user-select: none;
    pointer-events: none;
    position: absolute;
    display: none;
    opacity: 0;
  }

  /* Make the tooltips respond to hover */
  .noTouch [tooltip]:hover::after {
    display: block;
  }

  /* don't show empty tooltips */
  [tooltip='']::after {
    display: none !important;
  }

  /* FLOW: To Top OR none at all */

  [tooltip]:not([flow])::after,
  [tooltip][flow^="top"]::after {
    bottom: 110%;
    left: 50%;
    transform: translate(-50%, -.5em);
  }

  /* FLOW: To Bottom */

  [tooltip][flow^="bottom"]::after {
    top: 110%;
    left: 50%;
    transform: translate(-50%, .5em);
  }

  /* FLOW: To Left */
  [tooltip][flow^="left"]::after {
    top: 50%;
    right: 110%;
    transform: translate(-.5em, -50%);
  }

  /* FLOW: To right */
  [tooltip][flow^="right"]::after {
    top: 50%;
    left: 110%;
    transform: translate(.5em, -50%);
  }

  /* KEYFRAMES */
  @keyframes tooltips-vert {
    to {
      opacity: .9;
      transform: translate(-50%, 0);
    }
  }

  @keyframes tooltips-horz {
    to {
      opacity: .9;
      transform: translate(0, -50%);
    }
  }

  /* FX All The Things */
  [tooltip]:not([flow]):hover::after,
  [tooltip][flow^="top"]:hover::after,
  [tooltip][flow^="bottom"]:hover::after {
    animation: tooltips-vert 200ms ease-out forwards;
  }

  [tooltip][flow^="left"]:hover::after,
  [tooltip][flow^="right"]:hover::after {
    animation: tooltips-horz 200ms ease-out forwards;
  }

@media (orientation: portrait){

    [tooltip][flow^="right"].button__sideBar::after,
    [tooltip][flow^="right"].button__mainMenu::after {
        top: 110%;
        left: 110%;
        right: unset;
        bottom: unset;
        transform: translate(-50%, 0.5em);
      }

    [tooltip][flow^="left"].button__sideBar::after,
    [tooltip][flow^="left"].button__mainMenu::after {
        top: unset;
        left: 50%;
        right: unset;
        bottom: 110%;
        transform: translate(-50%, -0.5em);
      }

        [tooltip][flow^="right"]:hover::after,
        [tooltip][flow^="left"]:hover::after {
            animation: tooltips-vert 200ms ease-out forwards;
        }

        [tooltip][flow^="bottom"]:hover::after,
        [tooltip][flow^="top"]:hover::after {
            animation: tooltips-horz 200ms ease-out forwards;
        }
}

/* @media (min-width: 100em) and (orientation: landscape){

    [tooltip][flow^="bottom"]::after {
        left: var(--naviSizeDesk);
      }
}


  @media (pointer: coarse){
    [tooltip]:hover::after {
        display: none !important;
    }
  } */