.Togglebar { 
  background-repeat:no-repeat;
  background-size: auto 100%;
  background-position: center center;
}

.Togglebar-display { 
  width: 25%; 
  padding: 0px 6px 0px 6px; 
}

.Togglebar.Music {
  height: calc( 11vw * 1.02 );
  bottom: 0px;
  background-image: url(/fileadmin/Redaktion/Overlays/togglebar_overlay.svg);
}

.Togglebar.Music .Masked {
  mask: url(/fileadmin/Redaktion/Overlays/togglebar_mask.svg);
  mask-size: auto 100%;
  mask-repeat: no-repeat;
  mask-position-y: 0px;
  mask-position-x: center;
  mask-origin: border-box;
  -webkit-mask: url(/fileadmin/Redaktion/Overlays/togglebar_mask.svg);
  -webkit-mask-size: auto 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position-y: 0px;
  -webkit-mask-position-x: center;
  -webkit-mask-origin: border-box;
}

.Marquee {
  width: 100%; 
  max-width: 100vw; /* iOS braucht das */
  white-space: nowrap;
  overflow: hidden;
}

.Marquee span {
  display: inline-block;
  margin-right: 5px;
}
.Marquee span::after {
  right: 0px;
  content: "-";
  display: inline-block;
  width: 20px;
  text-align:center
}

.Marquee span:first-child {
  animation: marquee 10s linear infinite;
}

.Marquee span:nth-child(2) {
  animation: marquee2 10s linear infinite;
  animation-delay: 5s;
}

.Marquee span:nth-child(2)::after {
  width: 30px;
}

@keyframes marquee {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes marquee2 {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-200%);
  }
}
.Togglebar.Music .Marquee,
.Togglebar.Blog .Marquee {
  font-family:Segment; 
  font-size: 38px;
  white-space:nowrap;
  padding: 8px;
  vertical-align:center;
}

.Togglebar.Blog {
  height: calc( 16.65vw );
  background-image: url(/fileadmin/Redaktion/Overlays/togglebar2_overlay.svg);
}

.Togglebar.Blog .Masked {
  mask: url(/fileadmin/Redaktion/Overlays/togglebar2_mask.svg);
  mask-size: 100% auto;
  mask-origin: border-box;
  -webkit-mask: url(/fileadmin/Redaktion/Overlays/togglebar2_mask.svg);
  -webkit-mask-size: 100% auto;
  -webkit-mask-origin: border-box;
}

.Togglebar.Blog .Toggle-horizontal {
  margin-top: 4%;
  margin-left: 1.73vw;
  line-height: 3.5vw;
}

.Togglebar.Blog .Togglebar-display {
  width: 29.5%;
  margin-top: 3.9%;
  margin-left: calc( 1.73vw + 8px );
  margin-right: 0.3%;
  height: 3.3vw;
}

.Togglebar.Article {
  height: 14.4vw;
  background-image: url(/fileadmin/Redaktion/Overlays/togglebar3_overlay.svg);
  background-size: calc(100% - 1px);
}

.Togglebar.Article .Toggle-horizontal {
  margin-top: 13%;
  margin-bottom: 13%;
  width: 18%;
  line-height: 4vw;
}

.Togglebar.Article button {}

.Togglebar.Article .Togglebar-display {
  width: 40%;
  margin-top: 5%;
  margin-bottom: 5%;
  height: 72%;
}

.Togglebar.Article .Masked {
  mask: url(/fileadmin/Redaktion/Overlays/togglebar3_mask.svg);
  mask-size: 100% auto;
  mask-origin: border-box;
  mask-repeat:no-repeat;
  -webkit-mask: url(/fileadmin/Redaktion/Overlays/togglebar3_mask.svg);
  -webkit-mask-size: 100% auto;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-origin: border-box;
  -webkit-mask-position-y: 50%;
}

.Togglebar.Videolist {
  height: 14.4vw;
  background-image: url(/fileadmin/Redaktion/Overlays/togglebar4_overlay.svg);
  background-size: calc(100% - 1px);
  border: 1px solid black;
}

.Togglebar > div {
  margin: 0px auto 0px auto;
  width: 79vw;
}

.Togglebar.Article > div,
.Togglebar.Videolist > div {
  width: auto; 
  height:100%;
}

.Togglebar-info {
  margin-top: -5%;
}

@media(max-width:1280px){ 
  .Togglebar.Music { height: 14vw; }
  .Togglebar.Blog { height: 21vw; }
  .Togglebar.Blog .Togglebar-display { margin-top: 5.1%; margin-right: 0.7% }
  .Togglebar.Blog .Toggle-horizontal { margin-top: 4.3% }
  .Togglebar.Article { height: 23vw;  }
  .Togglebar.Videolist { height: 23vw;  }
  .Togglebar > div { width: 99vw; }
  .Togglebar.Article .Toggle-horizontal {}
  .Togglebar.Article .Togglebar-display {}
}
@media(max-width:600px){ 
  .Togglebar.Music { 
    height: 15vh; 
    bottom: 5vh;
    background-size: auto 100%;
    background-position: 30% center;
  }
  .Togglebar.Music .Togglebar-display {
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 5vh;
    background-color: #bae6b8;
  }
  .Togglebar .Marquee { font-size: 24px; }
  .Togglebar-info { margin-top: -10% }
  .Togglebar.Article { height: 150px; }
  
  .Togglebar.Music .Toggle {
    width: 13%;
    height: 80%;
  }
  
  .Togglebar.Music .Masked {
    mask-size: auto 100%;
    mask-position-x: 30%;
    -webkit-mask-size: auto 100%;
    -webkit-mask-position-x: 30%;
  }
  
  .Togglebar.Videolist { height: 30vh }
  .Togglebar.Blog { background-color: #fff; }
}