@font-face {
    font-family: 'framboisier';
    src: url('../fonts/framboisier-bold.ttf');
}
 
@font-face {
    font-family: 'oxygen-regular';
    src: url('../fonts/oxygen-regular.ttf');
}
 
* {
  user-select: none;
}
 
button.play-reading, button.pause-reading {
    background: transparent;
    border: none;
}
 
figure {
    margin: 0;
}
 
.textblock ul li, .textblock ol li {
  font-family: 'oxygen-regular';
}
 
.textblock button.play img, .textblock button.pause img {
  width: 100%;
  min-width: 31px;
}
 
.disNone {
  display: none !important;
}
 
.imagedescription p {
  font-size: 15px !important;
}
 
.image-and-text-combined {
  display: flex;
  align-self: flex-start;
  flex-wrap: wrap;
  min-width: 100%;
  padding: 0 30px;
}
 
.image-and-text-combined .textblock:first-child {
  width: 315px;
  padding: 0;
}
 
.image-and-text-combined .textblock .imagedescription {
  width: 238px;
}
 
.textblock.with-blue-text span {
  color: #00CEFF;
}

.textblock.impressum {
  align-self: center;
  width: fit-content;
}

.textblock.impressum h2 {
  font-family: 'oxygen-regular';
  font-size: 16px;
}

.textblock.impressum .text-to-be-read {
  display: flex;
  flex-wrap: wrap;
}

.textblock.impressum .text-to-be-read > p {
  width: 150px;
}

.textblock.impressum a {
  color: black;
}

.lightbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5000;
}


.lightbox img {
  width: 95vw;
  max-width: 600px;
  height: auto;
}

.lightbox img.close-lightbox {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 20px;
  height: auto;
}

@media only screen and (min-width: 320px) {
    body {
        background-image: url('../images/overall-background.png');
        margin: 0;
    }
 
    .go-back p {
      color: black;
      font-weight: normal;
    }
 
    .go-back img {
        width: 22.18px;
        height: auto;
    }
 
    .hide-at-768 {
        display: block;
    }
 
    .hide-at-1139 {
        display: none;
    }
 
    .show-at-768 {
        display: none !important;
    }
 
    .show-at-1139 {
        display: none;
    }
 
    .page-cont {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 320px;
        background-color: white;
        margin: 0 auto;
        box-sizing: border-box;
        overflow-x: hidden;
    }
 
    p {
        font-family: 'oxygen-regular', Verdana, sans-serif;
        font-weight: 600;
        width: fit-content;
        margin: 0;
    }
 
    .audio-block .headline-block {
      width: 100%;
      max-width: 326px;
    }
 
    .audio-block h1 {
        font-family: 'framboisier', Verdana, sans-serif;
        font-size: 20px;
        margin: 0;
        font-weight: 400;
        text-transform: uppercase;
    }
 
    .audio-block {
        display: flex;
        flex-direction: column;
        justify-content: center;
        row-gap: 10px;
        width: 100%;
        height: 238px;
        background-color: white;
        background-image: url('../images/station6/bildergalerie/bg-top.svg');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-top: 20px;
    }
 
    .audio-block.white {
        justify-content: flex-start;
        position: relative;
        z-index: 5;
        background-image: url('../images/station6/bildergalerie/bg-top-white.svg');
        background-color: transparent;
        row-gap: 0px;
        padding-top: 18px;
        box-sizing: border-box;
    }

    .audio-block.white .player {
        row-gap: 0px;
    }
 
    .audio-block.player-opened {
      background-color: #B59A76;
    }
 
    .audio .audio-block p {
        font-family: 'oxygen-regular', Verdana, sans-serif;
        font-size: 13px;
        font-weight: 400;
    }
 
    .audio-block .go-back {
        display: flex;
        column-gap: 9px;
        width: fit-content;
        margin-left: 30px;
        text-decoration: none;
        white-space: nowrap;
    }
 
    .audio-block .player {
        display: flex;
        flex-direction: column;
        row-gap: 10px;
        padding: 0 30px;
    }
 
    .audio-block .audio-toggle {
        display: flex;
        align-items: center;
        column-gap: 10px;
        width: fit-content;
        margin-top: 4px;
    }
 
    .audio-block .audio-toggle p {
        font-weight: 400;
        text-transform: uppercase;
    }
 
    video {
        width: 80vw !important;
        max-width: 100%;
        height: auto !important;
        aspect-ratio: 16 / 9;
    }
 
    .fader {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
 
    .textblock {
        display: flex;
        flex-direction: column;
        row-gap: 15px;
        align-self: flex-start;
        padding: 0 30px;
        margin-top: 29px;
        margin-right: 0px;
        margin-bottom: 18px;
        margin-left: 0px;
        width: 100%;
        box-sizing: border-box;
    }

    .textblock.video-page-image img {
        width: 100% !important;
    }
 
    h2, .textblock h2 {
        font-family: 'oxygen-regular', Verdana, sans-serif;
        font-size: 20.5px;
        text-transform: uppercase;
        margin-top: 0;
        margin-bottom: -3px;
        font-weight: normal;
    }
 
    .textblock .audiofile-player h2 {
        max-width: 300px;
        margin-bottom: 0.83em !important;
        font-family: 'oxygen-regular';
        font-size: 16pt;
        line-height: 28px;
        text-align: center;
    }
 
    .textblock p {
        font-family: 'oxygen-regular';
        font-weight: 400;
        font-size: 18px;
        line-height: 22px;
    }
 
    .textblock.poem p {
        font-size: 15px;
    }
 
    #threejs-container {
        width: 100% !important;
        height: fit-content !important;
        aspect-ratio: 4 / 3;
    }
 
    #threejs-container canvas {
        width: 100% !important;
        height: auto !important;
    }
 
    .textblock .imagedescription {
      width: 100%;
      box-sizing: border-box;
    }
 
    .textblock img {
      width: 100%;
      height: auto;
    }
 
    .image-and-text-combined .textblock:last-child {
      width: calc(100% - 30px);
      padding: 0 30px 0 0;
    }

    .textblock.impressum {
      width: 100%;
      row-gap: 5px;
    }

    .textblock.impressum .text-to-be-read {
      flex-direction: column;
      row-gap: 5px;
    }

    .textblock.impressum .text-to-be-read > p {
      width: fit-content;
    }

    .textblock.impressum a {
      font-family: 'oxygen-regular';
      fontsize: 18px;
      font-weight: normal;
    }

    .textblock.directions {
      margin-top: 15px;
    }

    .textblock.directions p {
      font-size: 14px;
    }
}
 
@media only screen and (min-width: 375px) {
    .audio-block h1 {
        font-size: 29px;
        line-height: 31px;
    }
  
    .page-cont{
        width: 375px;
    }
}
 
@media only screen and (min-width: 768px) {
    .show-at-768 {
        display: flex !important;
    }
    .hide-at-768 {
        display: none;
    }
 
    .hide-at-375 {
        display: block;
    }
 
    .textblock {
        align-self: flex-start;
        margin-left: 0px;
    }
 
    .textblock.show-at-768 {
        flex-direction: row;
        align-items: flex-end;
        column-gap: 20px;
    }
 
    .page-cont {
        width: 768px;
    }
 
    .textblock {
      width: calc(100% - 29px);
    }
 
    .textblock img {
        width: calc(100%/3);
        min-width: 550px;
        height: auto;
    }
 
    .textblock .imagedescription {
      width: 100%;
      max-width: 550px;
    }
 
    .textblock.poem p {
        font-size: 15.5px;
    }
 
    .audio-block {
        background-image: url('../images/station6/bildergalerie/bg-top-768.svg');
    }
 
    .audio-block.white {
        justify-content: center;
        background-image: url('../images/station6/bildergalerie/bg-top-768-white.svg');
        row-gap: 10px;
        padding-top: 0;
        box-sizing: unset;
    }

    .audio-block.white .player {
        row-gap: 10px;
    }
 
    .textblock .audiofile-player h2 {
        max-width: 100%;
    }
 
    .image-and-text-combined .textblock:last-child {
      width: 425px;
      padding: 0 30px;
    }

    .textblock.impressum .text-to-be-read {
      flex-direction: row;
    }

    .textblock.impressum .text-to-be-read > p {
      width: 150px;
    }

    .textblock.slightly-smaller img {
      min-width: 380px;
    }
}
 
@media only screen and (min-width: 1139px) {    
    .page-cont {
        width: 1139px;
    }
 
    .hide-at-1139 {
        display: none;
    }
 
    .show-at-1139 {
        display: block;
    }
 
    .audio-block {
        background-image: url('../images/station6/bildergalerie/bg-top-1139.svg');
    }
 
    .audio-block.white {
        background-image: url('../images/station6/bildergalerie/bg-top-1139-white.svg');
    }
 
    .audio-block .headline-block {
      max-width: 587px;
    }
 
    .textblock {
      width: 773px;
    }
 
    .textblock p {
      font-size: 18px;
    }
}
 
@keyframes fader-in {
    0% {
        opacity: 0;
    }
 
    100% {
        opacity: 1;
    }
}
 
@keyframes fader-out {
    0% {
        opacity: 1;
    }
 
    100% {
        opacity: 0;
    }
}