.slide-chooser {
    display: none;
    align-items: center;
    width: 100%;
    max-width: 365px;
    height: 59px;
    position: relative;
    overflow: hidden;
    margin: 0px auto;
    border-bottom: 3px solid black;
    z-index: 5;
}

.slide-chooser:nth-child(2n) {
  transform: scaleX(-1);
}

.slide-chooser-inner {
    display: flex;
    align-items: flex-end;
    width: fit-content;
    height: 100%;
    column-gap: 60px;
    position: absolute;
    top: 3px;
}

.year {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: fit-content;
    position: relative;
    cursor: pointer;
    padding-bottom: 7px;
}

.slides .dates {
  display: flex;
  justify-content: center;
  width: fit-content;
  position: absolute;
  top: 2%;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 30;
}

.slides .dates .date {
  display: none;
}

.slider .slides .dates .date.chosen {
  display: block;
}

.slider .slides .date p {
  font-family: 'oxygen-regular';
  font-size: 12px;
}

.year p {
    font-family: 'framboisier', Verdana, sans-serif;
    font-size: 29px;
    width: fit-content;
    margin: 0;
}

.year.chosen p {
    font-size: 40px;
    position: relative;
    bottom: 4px;
}

.year:after {
    content: url('../images/triangle.svg');
    width: 8.64px;
    height: 10.01px;
    margin-top: -10px;
    position: absolute;
    bottom: 7px;
}

.year.chosen:after {
  content: url('../images/triangle-big.svg');
  width: 15px;
  height: 16px;
  margin-top: -8px;
  bottom: 2px;
}

@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;
}

figure {
    margin: 0;
}

.slider {
    width: 100%;
    min-height: 513px;
    position: relative;
    background-color: transparent !important;
    background-image: url('../images/station6/bildergalerie/slider-bg-375.svg');
    background-position: center;
    background-repeat: no-repeat;
}

.slider .slides {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100% !important;
    min-height: inherit;
    position: relative;
}

.slider .slider-controls {
    position: absolute;
    top: 466px;
    bottom: unset;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 349px;
    z-index: 10;
}

.slider .slider-controls .arrows {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.slider .slider-controls .arrows>div {
    width: 34px;
    height: 34px;
    cursor: pointer;
}

/* .slides .slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    width: fit-content;
    opacity: 0;
    transform: translate(-50%, -50%);
} */

.slides .slide p {
    font-family: 'oxygen-regular', Verdana, Geneva, Tahoma, sans-serif;
    font-size: 14.5px;
    font-weight: 400;
    /* max-width: 207px;*/
}

.slides .slide .slide-image {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 349px;
    height: 345px;
    background-color: #87755B;
}

.slides figure {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: 0;
}

.slides .slide .slide-image div {
  height: 100%;
}

.slides .slide .slide-image img {
    width: 100%;
    height: auto;
}

.slides .slide.faded-in {
    opacity: 1;
}

.slides .slide.to-fade-in {
    display: flex;
    animation: fader-in 0ms linear;
    opacity: 1;
}

.slides .slide.to-fade-out {
    animation: fader-out 0ms linear;
    opacity: 0;
}

.slider.with-years {
    min-height: 587px;
}

.slider.with-years .slider-inner .slide-chooser {
    display: flex !important;
    transform: scaleX(-1) !important;
}

.slider.with-years .slider-controls {
    bottom: -30px;
}

@media only screen and (min-width: 320px) {
    body {
        background-image: url('../images/overall-background.png');
        margin: 0;
    }

    .hide-at-768 {
        display: block;
    }

    .hide-at-1139 {
        display: none;
    }

    .show-at-1139 {
        display: none;
    }

    .page-cont {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 375px;
        background-color: white;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .slides .slide p {
        font-family: 'oxygen-regular', Verdana, sans-serif;
        font-weight: 600;
        width: fit-content;
        min-height: 74px;
        margin: 0;
    }

    .slider {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        min-height: 513px;
        position: relative;
        background-color: transparent !important;
        background-image: url('../images/station6/bildergalerie/slider-bg-375.svg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: auto 100%;
    }

    .slider .slider-inner {
        width: 100%;
        height: 431px;
        padding-top: 66px;
        position: relative;
    }

    .slider:nth-child(2n) {
      transform: scaleX(-1);
    }

    .slider .slides {
        display: flex;
        justify-content: center;
        width: 100%;
        height: 391px;
        position: relative;
        left: 0;
    }

    .slider:nth-child(2n) .slides {
      transform: scaleX(-1);
    }

    .slider .slider-controls {
        position: absolute;
        top: unset;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        width: 95%;
        z-index: 10;
    }

    .slider:nth-child(2n) .slider-controls {
      transform: scaleX(-1) translateX(50%);
    }

    .slider .slider-controls .arrows {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .slider .slider-controls .arrows>div {
        width: 34px;
        height: 34px;
        cursor: pointer;
    }

    video {
        width: 80vw !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
    }

    .fader {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .slides .slide {
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: 10px;
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: fit-content;
        opacity: 0;
        transform: translateY(-50%);
    }

    .slides .slide .frame-type-text {
        max-width: 250px;
        height: 76px;
    }

    .slides.only-text .frame-type-text {
        height: fit-content !important;
    }

    .slides.only-text .slide .slide-image {
        align-items: center;
    }

    .slides.only-text .slide .slide-image {
        background-color: #CEBCA0;
    }

    .slides .slide .frame-type-text p {
        font-family: 'oxygen-regular', Verdana, Geneva, Tahoma, sans-serif;
        font-size: 15px;
        font-weight: 400;
        text-align: center;
        vertical-align: sub;
    }

    .slides .slide .slide-image p {
      text-align: left;
    }

    .slides .slide .slide-image {
        display: flex;
        justify-content: center;
        width: 377px;
        height: 345px;
        background-color: #87755B;
    }

    .slides figure {
        height: 100%;
        margin: 0;
    }

    .slides .slide .slide-image div {
      height: 100%;
    }

    .slides .slide .slide-image img {
        width: auto;
        height: 100%;
    }

    .slides .slide.faded-in {
        opacity: 1;
    }

    .slides .slide.to-fade-in {
        display: flex;
        opacity: 1;
    }

    .slides.years .slide.to-fade-in {
        animation: fader-in 1000ms linear;
        opacity: 1;
    }

    .coesfelds-north .slides.years .slide.to-fade-in {
        animation: fader-in 3000ms linear;
        opacity: 1;
    }

    .slides .slide.to-fade-out {
        opacity: 0;
    }

    .slides.years .slide.to-fade-out {
        animation: fader-out 1000ms linear;
        opacity: 0;
    }

    .coesfelds-north .slides.years .slide.to-fade-out {
        animation: fader-out 3000ms linear;
        opacity: 0;
    }
}

@media only screen and (min-width: 768px) {
    .hide-at-768 {
        display: none;
    }

    .textblock {
        align-self: flex-start;
    }

    .hide-at-1139 {
        display: block;
    }

    .show-at-1139 {
        display: none;
    }

    .page-cont {
        width: 768px;
    }

    .textblock {
      width: 593px;
    }

    .audio-block {
        background-image: url('../images/station6/bildergalerie/bg-top-768.svg');
    }

    .slider {
        background-image: url('../images/station6/bildergalerie/slider-bg-1139.svg');
    }

    .slider {
        background-image: url('../images/station6/bildergalerie/slider-bg-1139.svg');
    }

    .slides .slide p {
        width: 248px;
        font-size: 15.5px;
    }

    /* .slides .slide .slide-image {
        display: flex;
        justify-content: center;
        width: calc(377px * 1.3);
        max-width: calc(377px * 1.3);
        height: calc(345px * 1.3);
        background-color: #87755B;
    } */

    .slides .slide .slide-image img {
        width: auto;
        height: 100%;
    }
}

@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 .headline-block {
      max-width: 587px;
    }

  .textblock {
    width: 730px;
  }
}

@keyframes fader-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fader-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}