@font-face {
  font-family: "TitilliumWeb";
  src: url("TitilliumWeb-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: "TitilliumWeb";
  src: url("TitilliumWeb-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
}

@font-face {
  font-family: "TitilliumWeb";
  src: url("TitilliumWeb-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
}

* {
  box-sizing: border-box;
  margin: 0; padding: 0;
  max-width: 100%;
  transition: all 0.2s ease-in-out;
  /*border: 1px dashed red;*/
  line-height: 115%;
}

body {
  position: relative;
  width: 100%; min-height: 100%;
  margin: 0; padding: 1em;
  background: url('burst3.png') no-repeat top;
  background-color: #95d5e7;
  color: #222;
  font-family: TitilliumWeb, sans-serif;
  font-size: 12pt;
}

a {
  color: #662d60;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.0625em;
}
a:hover {
  color: #FFF;
  text-shadow: -1px 0 #662d60, 0 1px #662d60, 1px 0 #662d60, 0 -1px #662d60;
}

h1 {
  font-weight: 600;
  font-size: 1.75em;
  color: #95d5e7;
  text-shadow: -1px 0 #1f7088, 0 1px #1f7088, 1px 0 #1f7088, 0 -1px #1f7088;
  text-decoration: none;
  margin-bottom: .625em;
}
h2 {
  font-size: 1em;
  font-weight: bold;
  margin-top: 1em;
}

strong, b {
  font-weight: bold;
  color: #000;
}

/* ---------------------------------------------------------------------- */
a.page, a.extern {
  display: inline-block;
  width: 32%;
  margin: 0;
  vertical-align: middle;
}
a.extern:nth-of-type(3n+1),
a.page:nth-of-type(3n+1) {text-align: left;}
a.extern:nth-of-type(3n+2),
a.page:nth-of-type(3n+2) {text-align: center;}
a.extern:nth-of-type(3n+3),
a.page:nth-of-type(3n+3) {text-align: right;}

a.page {
  color: #51585a;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  font-size: 2em;
}
a.page:hover {text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white, 0px 0px 30px #bf8dc5, 0px 0px 30px #bf8dc5;}
a.extern {
  font-weight: 600;
  font-size: 1.5em;
}

/* ---------------------------------------------------------------------- */
video {
  position: relative;
  display: block;
  margin: 1em auto;
  width: 100%; min-height: 216px;
  border: 1px solid #888;
  background-color: #662d60;
  box-shadow: 0px 0px 12px #aaa;
  z-index: 2;
  height: 56%;
  object-fit: contain;
}
video:before {
  content: ''; position: absolute;
  top: 0; bottom: 0; left:0; right:0;
  width: 100%; z-index: 1;
}
a.videonav {
  display: inline-block;
  position: absolute;
  font-weight: bold;
  color: #fff;
  text-shadow: -1px 0 #51585a, 0 1px #51585a, 1px 0 #51585a, 0 -1px #51585a;
  font-size: 3.25em;
  width: 15%;
  z-index: 0;
}
a.videonav:hover {
  color: #bf8dc5;
  text-shadow: -1px 0 #662d60, 0 1px #662d60, 1px 0 #662d60, 0 -1px #662d60;
}
a.videonav:nth-of-type(7){ right: 80%; text-align: left; }
a.videonav:nth-of-type(8){ left:  80%; text-align: right; }


.videoref {
  font-weight: bold;
  margin-left: .25em;
}
a.videoref:nth-of-type(9) { margin-left: 3.75em;}
span.videoref {
  margin-left: 4em;
  color: #000;
}
a.videoref:nth-of-type(9):after,
a.videoref:nth-of-type(11):after {
  white-space: pre;
  content: '\0A';
}

/* ---------------------------------------------------------------------- */
.report {
  margin: 1em auto;
  width: 100%;
  padding: 2em;
}
.subscription, .contact, .impressum {
  position: relative;
  padding: 1em 2em;
  z-index: 1;
  margin-bottom: 1em;
}


/* ---------------------------------------------------------------------- */
.report h1, .report h1 + h2 {
    clear: none;
  display: inline-block;
}
.report h1 {
  margin-bottom: 0;
  margin-right: .5em;
}
.report h1 + h2 {
  color: #FFF;
  font-size: 1.75em;
  text-shadow: -1px 0 #51585a, 0 1px #51585a, 1px 0 #51585a, 0 -1px #51585a;
  margin-top: 0;
  margin-bottom: .625em;
}
.report p:first-of-type {
  font-weight: 600;
  font-size: 1.25em;
  color: #555;
}

.subscription a:nth-of-type(2n) {
  margin-left: .5em;
}
.subscription a:nth-of-type(2n):after {
  white-space: pre;
  content: '\0A';
}

.impressum a {
  font-weight: 600;
  font-size: .875em;
  color: #fff;
  text-shadow: -1px 0 #51585a, 0 1px #51585a, 1px 0 #51585a, 0 -1px #51585a;
}

/* ---------------------------------------------------------------------- */
@media(max-width: 799px){
  .report, .subscription, .contact, .impressum {
    background-color: #c6d1d5;
    border: 1px solid #aaa;
    box-shadow: 0px -5px 25px -5px #aaa;
  }
}
@media(min-width: 480px){
  video { width: 80%;}
  a.videonav { margin-top: -5em;}

  .subscription, .contact, .impressum {
    display: inline-block;
    width: 49%;
  }
  .subscription { float: left; width: 50%;}
  .contact, .impressum { margin-left: 1%;}
}
@media(min-width: 800px){
  a.page, a.extern {width: 16%;}
  a.extern:nth-of-type(3n+1),
  a.page:nth-of-type(3n+1) {text-align: right;}
  a.extern:nth-of-type(3n+2),
  a.page:nth-of-type(3n+2) {text-align: center;}
  a.extern:nth-of-type(3n+3),
  a.page:nth-of-type(3n+3) {text-align: left;}

  video { width: 56%; min-width: 640px; min-height: 360px; }
  a.videonav { width: 32%; min-width: 380px;}
  a.videonav:nth-of-type(7){ right: 50%; }
  a.videonav:nth-of-type(8){ left:  50%; }

  a.videoref:nth-of-type(9) { display: inline-block; margin-left: 15%;}
  a.videoref:nth-of-type(9):after,
  a.videoref:nth-of-type(11):after { content: none; }
  span.videoref {margin-left: 1em;}


  .report {
    position: absolute;
    left: 0; right: 0;
    width: 70%; min-width: 770px;
    margin: 1em auto;
    padding: 2em; padding-right: 25%;
    min-height: 28em;

    background-color: #c6d1d5;
    border: 1px solid #aaa;
    box-shadow: 0px -5px 25px -5px #aaa;
  }
  .report:after {
    content: "";
    position: absolute;
    bottom: -2em;
  }
  .subscription, .contact, .impressum {
    display: block;
    width: 35%; min-width: 385px;
    margin: 0; margin-left: 50%;
    padding: 0 1em 0;
  }
  .subscription {
    float: none;
    margin-top: 3em;
  }
  .subscription:before {
    content: '';
    display: block; float: left;
    margin: 0 0 0 50%; height: 26em;
  }
  .impressum { padding-top: 1em; }
}