/**
  Styles fuer das linke Service-Menue (Kontakt, Kontrast, Vorlesen, ...)
*/

@media (min-width : 992px) {
  #servicebarleft.collapse {
    display: inherit;
  }

  .accessible {
    position   : fixed;
    left       : 0;
    display    : block !important;
    transition : all 0.3s cubic-bezier(0.05, 0.5, 0.3, 1);
    z-index: 1;
  }

  .accessible-tile {
    display    : block;
    position   : relative;
    color      : white;
    text-align : center
  }

  .contrast-mode .accessible-tile {
    color : white;
  }

  .accessible-tile-icon {
    font-size : 1.15rem
  }

  .accessible-tile-name {
    font-size       : 1.15rem;
    line-height     : 1.1;
    hyphens         : auto;
    -ms-hyphens     : auto;
    -moz-hyphens    : auto;
    -webkit-hyphens : auto;
  }

  .accessible {
    transform : translateY(-50%);
    top       : 50%;
    width     : 3.9rem;
    padding   : 2.25rem 100px 2.25rem 0
  }

  .accessible-tile {
    text-align       : center;
    width            : 3.9rem;
    height           : 4.8rem;
    transition       : background-color 0.15s ease;
    background-color : var(--rot);
  }

  .contrast-mode .accessible-tile {
    background-color : black;
  }

  .accessible-tile-name {
    font-size : 0.75rem
  }

  .accessible-tile.as-gloomy {
    background-color : var(--dunkelrot);
  }

  .contrast-mode .accessible-tile.as-gloomy {
    background-color : black;
  }

  .accessible-tile:hover, .accessible-tile:focus {
    color            : white !important;
    background-color : var(--dunkelrot);
  }

  .contrast-mode .accessible-tile:hover, .contrast-mode .accessible-tile:focus {
    background-color : var(--grau);
  }

  .accessible-tile:after {
    content       : "";
    position      : absolute;
    bottom        : 0;
    left          : 9%;
    width         : 82%;
    border-bottom : 1px solid var(--dunkelrot);
  }

  .contrast-mode .accessible-tile:after {
    border-bottom : 1px solid white
  }

  li:last-of-type .accessible-tile:after {
    display : none
  }

  .accessible-toggler {
    display : none
  }

  .accessible .abs-center-sidebar-bp {
    position  : absolute;
    top       : 50%;
    left      : 25%;
    transform : translate(-15%, -50%);
    display   : inline-block;
    max-width : 90%;
  }

  /* (IE 11 kennt kein media hover oder focus-within) and (hover: hover) */
  .accessible:hover {
    transform         : translate(10%, -50%) scale(1.2) !important
  }
  .accessible:focus-within {
    transform         : translate(10%, -50%) scale(1.2) !important
  }

  body.is-scrolled .accessible {
    transform         : translate(-57%, -50%)
  }
}

@media (min-width : 1440px) {
  body.is-scrolled .accessible {
    transform         : translate(-60%, -50%)
  }
}

@media (max-width : 991px) {

  .accessible {
    transform : none;
  }

  ul#accessible-sidebar {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .accessible-tile {
    display: block;
    padding: 0.2rem;
    margin-bottom : 0.5rem;
    border-bottom: 1px solid transparent;
    font-size: 1.2rem;
  }

  .accessible-tile-name, .accessible-tile-icon {
    display: inline-block;
  }

  .accessible-tile-icon {
    padding-top : 0.2rem;
    line-height  : 1.7;
    margin-right : 0.75rem
  }

  a.accessible-tile:hover, a.accessible-tile:focus {
    border-bottom: 1px solid var(--rot);
  }

  .contrast-mode a.accessible-tile {
    border-bottom-color: black;
  }
}