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

.accessibility-links {
  /*width     : 800px;*/
  /*max-width : 90%;*/
  font-size : 0.9rem;
  /*margin    : auto*/
}
/*
.accessibility-links a {
  margin-bottom : 0.5rem
}

.accessibility-links i {
  letter-spacing : 1px
}

@media (max-width : 360px) {
  .accessibility-links {
    max-width : 100%
  }
}
*/

.accessible {
  position           : fixed;
  left               : 0;
  /*display            : block;*/
  /*display            : block !important;*/
  transition         : all 0.3s cubic-bezier(0.05, 0.5, 0.3, 1);
  background-color: inherit;
  border: 0;
  min-width : inherit;
}


.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;
  /*padding-top : 5px;*/
  hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
}

/*.accessible-toggler {*/
/*  cursor: pointer;*/
/*  padding: 0.5rem;*/
/*}*/
/*.accessible-toggler:hover {*/
/*  text-decoration: none;*/
/*  border-bottom: 1px solid var(--color-link);*/
/*}*/

@media (min-width : 992px) {
  .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(--rot-d);
  }

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

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

  .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(--rot-d)
  }

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

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

  .accessible-toggler {
    display : none !important;
  }

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

@media (min-width : 992px) {
  .accessible {
    display            : block !important;
  }
  /* (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
  }
}

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

@media (max-width : 991px) {
  .accessible-tile {
    width         : 100%;
    max-width     : 95%;
    overflow      : hidden;
    text-overflow : ellipsis;
    margin-bottom : 0.5rem
  }

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

  .accessible-tile-name, .accessible-tile-icon {
    float : left;
  }
  .accessible-tile-icon {
    padding-top: 0.2rem;
  }

  .accessible a:hover, .accessible a:focus {
    color : white;
  }

  .contrast-mode .accessible a:hover, .contrast-mode .accessible a:focus {
    color : white
  }
}