@charset "UTF-8";

@font-face {
  font-family: 'Segment';
  src: url('../Fonts/segment.ttf');
}

html, body { 
  width: 100%; 
  min-height: 100%; 
  height: auto;
  margin:0; 
  padding:0; 
  clear:both;
  box-sizing:border-box;
  overscroll-behavior: none;
  max-width: 100vw;
  overflow-x: hidden;
}
body * { box-sizing:border-box }

.Content{ 
  margin-left: auto; 
  margin-right: auto; 
  max-width: 99%;
  position:relative;
}

.u-image {
  background-repeat:no-repeat;
  background-color: transparent;
  background-position: center center;
}


img { padding:0px; margin:0px; border:0px; }
figure { 
  position: relative; 
  margin:0px; 
  padding:0px; 
  max-height: 100%; 
  overflow:hidden; 
}

figure img {
  display:block;
  object-fit:cover;
  width: calc(100%); 
  height: calc(100%); 
}

address { font-style:normal; }

a {
  color: #666;
  text-decoration: none;
  cursor:pointer;
}

p { padding: 0px; margin-top: 0px; }
h1, .u-h1, 
h2, .u-h2, 
h3, .u-h3, 
h4, .u-h4, 
h5, .u-h5 { 
  display:block;
  padding: 0px; 
  margin: 0px 0px 8px 0px; 
  color:#000; 
}
h1,.u-h1 { font-size: 48px; }
h2,.u-h2 { font-size: 32px; }
h3,.u-h3 { font-size: 24px; }
h4,.u-h4 { font-size: 20px; }

table { border-collapse:collapse; border: 1px solid #000; }

.clearfix:after { 
  content: " "; 
  clear: both; 
  display: block; 
  visibility: hidden; 
  height: 0px;
}

/* BORDERS ------------------------------------- */

.Static-border { top:0px; left:0px; }
.Static-logo {
  top: 0.5vw;
  left: calc( 50% - 3.5vw );
  width: 7vw;
  height: 9.5vw;
}

.Static-logo > img { width: 100%; height: 100%; }

.Border { 
  background-repeat:no-repeat;
  background-size: 100% auto;
  background-position: top left;
}

body > video{
  pointer-events:none;
  height:auto;
  object-position: 0 0;
}

.OnePager section { 
  background-color: #fff; 
  
  -webkit-box-shadow: inset -3px -3px 10px -1px rgba(69,69,69,0.63);
  -moz-box-shadow: inset -3px -3px 10px -1px rgba(69,69,69,0.63);
  box-shadow: inset -3px -3px 10px -1px rgba(69,69,69,0.63);
}

.u-padTopBorder { padding-top: 20vh }
.u-marginTopBorder { margin-top: 20vh }

/* NAVIGATION ------------------------------- */

.Navigation { 
  z-index:9999;
  background-color: rgba(255,255,255,1);
  top: -20vh;
  left: 0px;
  transition: top .8s ease-in-out, height .8s ease-in-out, transform .5s linear;
  overflow:hidden;
  width: 100vw;
  height: 0px;
  transform: skew(0deg, -2deg);
}

.Navigation ul { 
  list-style-type:none; 
  padding: 0px;
  margin: 0px 0px 0px 0px;
}
.Navigation nav > ul ul { margin-left: 16px }
.Navigation li { padding: 4px 0px 4px 0px }
.Navigation.Active {
  top: 0px;
  height: 100vh;
  transform: skew(0deg, 0deg);
}

.Navigation-toggle { 
  z-index: 999998;
  top: 4.6vw;
  right: 8vw;
  width: 60px;
  height: 60px;
  
  background-color:#000;
  border: 2px solid #fff;
  border-radius: 60px;
  overflow:hidden;
  transition: background-color 1s;
}

.Navigation-toggle.Active {
  background-color: #AAA;
}
.Navigation-toggle:before,
.Navigation-toggle span,
.Navigation-toggle:after { 
  content:" "; 
  display:block; 
  width:50%;
  height:2px; 
  background-color:#fff;
  margin-left: 25%;
  transition: transform .8s, opacity .5s;
}

.Navigation-toggle.Active:before {
  transform: translate(0px, 9px) rotate(45deg);
}

.Navigation-toggle.Active span {
  opacity:0;
}

.Navigation-toggle.Active:after {
  transform: translate(0px, -9px) rotate(-45deg);
}

.Navigation-toggle:before { margin-top: 31% }
.Navigation-toggle:after, 
.Navigation-toggle span { margin-top: 12.5% }

.Anchors { 
  width: 32px; 
  left: 90%; 
  margin-top: 14vh; 
  height: 70vh; 
  z-index:9000 
}
.Anchors a { 
  height: 25px;
  width: 25px;
  color: #fff;
  font-size: 25px;
  transition: color .5s;
  
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

.Anchors a::before {
  content: '\25BA';
  transform:rotate(90deg);
}

.Anchors a.Active { color:#aaa; }

/* BREADCRUMB ----------------------------------- */

.Breadcrumb {
  text-transform:uppercase;
  transform:translate(12vw, 14vh);
  z-index: 9999;
}
.Breadcrumb span { 
  display:inline-block; 
  width: 20px; 
  height: .6em;
  border-bottom: 1px solid #aaa;
  margin: 0px 3px 0px 3px;
}
.Breadcrumb a {
  color: #333;
  font-weight:bold;
}

/* BUTTONS ----------------------------------- */

.Button { 
  display: inline-block; 
  background-color: transparent;
  color: #000;
  text-align:center;
  cursor:pointer;
  border: 2px solid #666;
}

.Button-line {
  display: inline-block;
  padding: 8px;
  border:0px;
  background-color: transparent;
  position:relative;
  cursor:pointer;
}

.Button-line:before, .Button-line:after {
  content:" ";
  display: block;
  position: absolute;
  width: calc(80%);
  height: 1px;
  top: calc( 50% );
  border-style: solid;
  border-color: #888;
  border-width: 1px 0px 1px 0px;
}

.Button-line:before { left: calc(-90%) }
.Button-line:after { right: calc(-90%) }

.Button-contour,
.u-outline {
  border: 2px solid #888 !important;
}

.Button-play { 
  width: 50px; 
  height: 50px; 
  border-radius: 48px; 
  font-size:27px;
  text-align:center;
  line-height: 40px;
  color: #888;
  background-color: #fff;
  border: 2px solid #888;
  transition: background-color .5s, border-color .5s, color .5s;
  margin:0;
  padding:0;
  clear:both;
  position:relative;
}
.Button-play:hover { 
  background-color: #eee; 
  border-color: #aaa;
  color: #000;
}
.Button-play:before {
  content: '\25BA';
  display:block;
  position: absolute;
  top:4px;
  left:3px;
  width: 100%;
  height: 100%;
  line-height:40px;
}

.Button-play.Correct {
  background-color: #0a0;
}

.Toggle { 
  width: 4.5%;
  height: 65%;
  background-color: transparent;
  background-image: url(/fileadmin/Redaktion/Overlays/knob.svg);
  background-repeat:no-repeat;
  background-size: 100% auto;
  background-position: center center;
  border: 1px solid #aaa;
  border-radius: 8px;
  overflow: hidden;
  
  margin: 2.4% 0 0 0.5%;
  transition: background-color .3s;
  cursor:pointer;
}

.Toggle.Active {
  /*background-image: url(/fileadmin/Redaktion/Overlays/knob_on.svg);*/
  background-color: rgb(255,211,145);
}

.Toggle-horizontal {
  color: #555;
  position:relative;
  width: 11.14vw;
  font-size: 20px;
  background-color: #fff;
  
  text-align:center;
  font-family: Verdana, sans-serif;
  
  border-image-slice: 12 12 12 12;
  border-image-width: 12px 12px 12px 12px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
  border-image-source: url(/fileadmin/Redaktion/Overlays/button_border.svg);
  cursor:pointer;
}

.Toggle-horizontal.Active {
  background-color: #666;
  color: #FFF;
}

.Video { 
  top:0px; 
  left: 0px;
  border:4px inset #888;
  overflow:hidden
}
.Closeable > div { background-color: rgba(255,255,255,.7); }

.Stage { background-color: black }
.Stage .YTPlayer { 
  margin-left: calc( 100% / 12 ); 
  margin-right: calc( 100% / 12 );
}
.Curtain {
  transition: top .5s 0s;
  top: 0;
  
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,5b5b5b+100 */
  background: rgb(255,255,255); /* Old browsers */
  background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(91,91,91,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(91,91,91,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(91,91,91,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#5b5b5b',GradientType=0 ); /* IE6-9 */
}
.Curtain-open { 
  transition: top .5s .5s; 
  top: -80vh;
}

/* Startseite */
main section:first-child .Closeable { top: 50vh; }

.Slides .Slide { max-height: 100% }
.Blog-preview .Slide > div:first-child { height: calc( 100% - 70px ); }
.Blog-preview .Subheader { height: 3em }

.Post-previewSlider .bx-wrapper .bx-prev { left: 0px }
.Post-previewSlider .bx-wrapper .bx-next { right: 0px }

.Song .Part .Cover {
  transition:opacity 1s;
  opacity:1;
  pointer-events:none;
}
.Song .Part { width: 200px; height: 200px; }
.Song .Part:hover .Cover { opacity:0; }

.Slider .Slide { height: 100%; }

.Banner-inline a {
  background-repeat:no-repeat;
  background-size: contain;
  background-position: center center;
}


.Affiliate-grid a { border: 1px solid black }

/* SUPPORTS ------------------------------------------- */

@supports(-webkit-mask: url("")){
  .Masked {
    -webkit-mask-size: 100% auto;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-origin: border-box;
    -webkit-mask-position-y: 0px;
  }
}

@supports (object-fit: cover) {
	.Static-border > video { 
    height:100vh;
    object-fit:cover;
  }
  .Togglebar .Masked {
    height: 100%;
    object-fit:cover;
  }
  .Loose-border > video { 
    height:100%;
    object-fit:cover;
  }
}
@supports (object-fit: cover) and (-ms-ime-align:auto) {
  .Static-border > video{height:auto}
  .Togglebar .Masked {height: auto}
}

/* MOBILE */
@media (min-width:1200px){ 
  .Content{width:80vw;} 
}
@media (max-width:1280px){ 
  .Content{width:80vw;} 
  .Toggle-horizontal { width: 14.5vw; font-size: 16px }
}
@media (max-width:900px){ 
  .Content{width:90vw;} 
  h1,.u-h1 { font-size:32px } 
  h2,.u-h2 { font-size:28px }
  h3,.u-h3 { font-size:24px }
  h4,.u-h4 { font-size:20px }
  
}
@media (max-width:600px){ 
  .Content{ width:90vw } 
  .Breadcrumb { font-size: 10px; }
  .Breadcrumb span { width: 10px; }
  .Navigation-toggle { left: 8vw }
  main section:first-child .Closeable { top: 20vh }
  .Toggle-horizontal { font-size: 10px; margin-bottom: 11% } 
  .Song { align-content: flex-start }
  .Song .Part { width: 80px; height: 80px; }
  .Song .Part-topText, .Song .Part-bottomText {
    font-size: 8px;
  }
  .Button-play { width: 48px; height: 48px; line-height: 44px; }
}