@-webkit-keyframes sideopen {
  0% {
    -webkit-transform: translateX(-90px);
            transform: translateX(-90px);
    opacity: 0; }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    opacity: 1; } }

@keyframes sideopen {
  0% {
    -webkit-transform: translateX(-90px);
            transform: translateX(-90px);
    opacity: 0; }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    opacity: 1; } }

@-webkit-keyframes sideopen2 {
  0% {
    opacity: 0.3; }
  100% {
    opacity: 1; } }

@keyframes sideopen2 {
  0% {
    opacity: 0.3; }
  100% {
    opacity: 1; } }

@-webkit-keyframes sideclose {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    opacity: 1; }
  100% {
    -webkit-transform: translateX(-90px);
            transform: translateX(-90px);
    opacity: 0; } }

@keyframes sideclose {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    opacity: 1; }
  100% {
    -webkit-transform: translateX(-90px);
            transform: translateX(-90px);
    opacity: 0; } }

@-webkit-keyframes sideclose2 {
  0% {
    opacity: 1; }
  100% {
    opacity: 0;
    visibility: hidden; } }

@keyframes sideclose2 {
  0% {
    opacity: 1; }
  100% {
    opacity: 0;
    visibility: hidden; } }

.msb {
  position: relative;
  overflow: hidden;
  position: fixed;
  z-index: 110;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: none;
  -webkit-animation-timing-function: cubic-bezier(0.15, 0.015, 0.355, 1);
          animation-timing-function: cubic-bezier(0.15, 0.015, 0.355, 1); }
  .msb-container {
    position: absolute;
    z-index: 101;
    overflow-y: auto;
    background: white; /* #f9f9f9 Hintergrund ganze Nav-fläche */
    padding: 5px 10px 5px 10px; /* 10px 10px 10px 10px */
    -webkit-animation-timing-function: cubic-bezier(0.15, 0.015, 0.355, 1);
            animation-timing-function: cubic-bezier(0.15, 0.015, 0.355, 1);
    box-sizing: border-box; }
  .msb-close {
    width: 60px;
    height: 60px;
    border: 0;
    cursor: pointer;
    display: inline-block;
    float: right;
    -ms-touch-action: manipulation;
        touch-action: manipulation;
    outline: 0;
    font-size: 0;
    line-height: 0;
    margin: -10px -10px 0 0; }
    .msb-close:before {
      content: '';
      width: 40%;
      margin-top: 0;
      margin-left: auto;
      margin-right: auto;
      height: 2px; /* Abhängig/zusammenhängend: Zeilen 108, 121,122 */
      background-color: rgba(179,36,100); /* #000 Close-Icon, Strich "Slash" */
      display: block;
      -webkit-transform: rotate(-45deg);
              transform: rotate(-45deg);
      display: block;
      margin-top: 50%; }
    .msb-close:after {
      content: '';
      width: 40%;
      margin-top: 0;
      margin-left: auto;
      margin-right: auto;
      margin-top: -2px; /* Abhängig/zusammenhängend: Zeilen 108, 121,122 */
      height: 2px; /* Abhängig/zusammenhängend: Zeilen 108, 121,122 */
      background-color: rgba(179,36,100); /* #000 Close-Icon, Strich "Back-Slash" */
      display: block;
      -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
      display: block; }
    .msb-close:hover:before {
      width: 40%; }
    .msb-close:hover:after {
      width: 40%; }
  .msb-content {
    clear: both; }
    .msb-content > .msb-item:first-child, .msb-content > .msb-collapse-header:first-child {
      border-top: 0px solid rgba(68,28,117);} /* #e2dede Rahmenfarbe oberhalb erster Nav-Punkt */
    .msb-content > .msb-collapse {
      margin: 0 -10px; }
  .msb-item, .msb-collapse-header {
    display: block;
    text-align: left;
    margin: 0 -10px;
    padding: 0 20px;
	font-family: 'Heebo'; /* Font in Navigation */
    font-size: 1rem;
    line-height: 60px;
    height: 60px;
    overflow: hidden;
    text-decoration: none;
    -webkit-transition: all  200ms ease-out;
    transition: all  200ms ease-out;
    cursor: pointer;
    border-bottom: 1px solid rgba(68,28,117); /* #e2dede Rahmenfarbe zwischen Nav-punkten und unterhalb letzter Nav-Punkt */
	color:rgba(68,28,117); /* #555 Schriftfarbe Text Nav-Punkte, war 75/111/146 aus BG*/
    box-sizing: border-box;
    outline: 0; }
    .msb-item:visited, .msb-collapse-header:visited {
      text-decoration: none; }
    .msb-item:hover, .msb-collapse-header:hover {
      background-color: #ddd; } /* #ddd */
  .msb-collapse-items {
    padding-left: 0px; /* 20px Einzug links bei Untermenüs */
	background: #efefef; /* Hintergrundfarbe in Untermenüs hinzugefügt zur optischen Abgrenzung, auch Zeile 207 */
    display: none; 
    box-sizing: border-box; }
  .msb-collapse-header {
    margin: 0; }
  .msb-collapse-button {
    float: right;
    width: 60px;
    height: 60px;
    background: none; /* hinter +-Zeichen */
	border-bottom: solid rgba(75,111,146,1.0); 
	border-left: solid rgba(75,111,146,1.0); 
/*    border: solid rgba(75,111,146,1.0); /* #e2dede Rahmenfarbe bei + zu Untermenüs rgba(75,111,146,1.0) - ersetzt durch obige beide Zeilen */
    border-width: 0 0px 1px 1px;
    cursor: pointer;
    outline: 0;
    -webkit-transition: all  200ms ease-out;
    transition: all  200ms ease-out;
    box-sizing: border-box; }
    .msb-collapse-button:before {
      content: '';
      width: 15px;
      margin: 50% auto 0 auto;
      height: 1px;
      background: rgba(179,36,100); /* #333 Horizontale Line von (Minus) und (Plus)-Zeichen */
      display: block;
      -webkit-transition: all 300ms;
      transition: all 300ms; }
    .msb-collapse-button:after {
      content: '';
      width: 15px;
      margin: 0 auto;
      height: 1px;
      background: rgba(179,36,100); /* #333 Vertikale Line von (Minus) und (Plus)-Zeichen */
      display: block;
      -webkit-transform: translateY(-1px) rotate(-90deg);
              transform: translateY(-1px) rotate(-90deg);
      -webkit-transition: all 300ms;
      transition: all 300ms; }
    .msb-collapse-button:hover {
      background-color: #ddd; }
  .msb-collapse .msb-item, .msb-collapse .msb-collapse-header {
    margin: 0; }
  .msb-collapse--open > .msb-collapse-items {
    display: block; }
  .msb-collapse--open > .msb-collapse-button {
    background: #efefef; }
    .msb-collapse--open > .msb-collapse-button:before {
      -webkit-transform: rotate(-180deg);
              transform: rotate(-180deg); }
    .msb-collapse--open > .msb-collapse-button:after {
      -webkit-transform: translateY(-1px) rotate(-360deg);
              transform: translateY(-1px) rotate(-360deg);
      opacity: 0; }
  .msb--open {
    -webkit-animation-duration: 0.30s;
            animation-duration: 0.30s;
    -webkit-animation-name: sideopen2;
            animation-name: sideopen2;
    display: block; }
    .msb--open .msb-container {
      -webkit-animation-duration: 0.30s;
              animation-duration: 0.30s;
      -webkit-animation-name: sideopen;
              animation-name: sideopen;
      -webkit-animation-delay: 300ms;
              animation-delay: 300ms;
      opacity: 0;
      -webkit-animation-fill-mode: both;
              animation-fill-mode: both; }
  .msb--close {
    -webkit-animation-duration: 0.40s;
            animation-duration: 0.40s;
    -webkit-animation-duration: 0.60s;
            animation-duration: 0.60s;
    -webkit-animation-name: sideclose2;
            animation-name: sideclose2;
    display: block;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    pointer-events: none; }
    .msb--close .msb-container {
      -webkit-animation-name: sideclose;
              animation-name: sideclose;
      opacity: 0;
      -webkit-animation-duration: 0.1s;
              animation-duration: 0.1s; }
  .msb--left .msb-container {
    top: 0;
    left: 0px;
    width: 280px; /* 320px Breite Container */
    height: 100%; }
  .msb--right .msb-container {
    top: 0;
    right: 0px;
    width: 280px; /* 320px Breite Container */
    height: 100%; }
  .msb--top .msb-container {
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    max-height: 100%; }
  .msb--bottom .msb-container {
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    max-height: 100%; }
  .msb--full .msb-container {
    position: relative;
    position: static;
    width: 100%;
    height: 100%; }
  .msb--touch, .msb-close, .msb-collapse-button {
    cursor: pointer;
    -ms-touch-action: manipulation;
        touch-action: manipulation; }