@charset "utf-8";
/* CSS Document */
:root {
  --textFarbe: #FCFCF9;
  --bgFarbe: #152742;
  --weiss: #fcfcf9;
  --highlightFarbe: #B43236;
  --titelFont: 'TT-Commons';
  --textFont: 'TT-Commons';
}
* {box-sizing: border-box; }
#response { position: relative; }
#response { font-family: var(--textFont); font-weight: 600; color:var(--textFarbe); font-size: 16px; line-height: 20px; overflow:hidden; user-select:none; background-size: contain; background-repeat: no-repeat; background-position: center center; letter-spacing: 1.15px; }
#response { width:100%; height:auto; opacity:1; aspect-ratio:16/9; max-width:1280px; position: relative; margin:0 auto; container-type: inline-size; }
.vContainer { background-color: #152742; width:100%; height:auto; aspect-ratio:16/9; max-width:1280px; }
#response > div:first-child { width:100%; height:100%; }
.fltrt { display:block; float:right; margin:0 0 60px 60px; }
.fltrt img { width:100%; height:auto; }
h1, h2, h3, h4, h5 { color:var(--gold); font-family:var(--titelFont); text-transform: uppercase; font-weight:600; }
.countdown { display:none; position:fixed; background-color:#000; color:#fff; top:0px; right:0px; padding:10px; z-index:4000; }
.pageLink, .abs, #back { position:absolute; background-size: auto; background-repeat: no-repeat; background-position: center center; }
.pageLink, .language, #back { cursor:pointer; }
/*
#cz { top:88px; left:1622px; background-image: url('../img/CZ.png'); }
#de { top:88px; left:1701px; background-image: url('../img/DE.png'); }
#back { left:131px; top:926px; width:105px; height:105px; background-image: url('../img/back.png'); }
*/
.deShow { text-transform:uppercase; }

.touchTheScreen { position:absolute; top: 62.6%; left: 70%; width: calc((352 / 1920) * 100%); height: calc((298 / 1080) * 100%); transform: matrix(0.98, -0.19, 0.19, 0.98, 0, 0); text-align: center;}
.touchTheScreen .deShow { font-size: 1.46cqw; line-height: 2.1cqw; margin-top:0.94cqw; }
.touchTheScreen .enShow { font-size: 1.20cqw; line-height: 1.72cqw; }
.touchTheScreen img { transform:rotateZ(11deg); width: 6.04cqw; height: 8.07cqw; }
.titel { position:absolute; top: 9.63cqw; left: 14.22cqw; width: 75.93cqw; height: 24.84cqw; transform: matrix(0.98, -0.19, 0.19, 0.98, 0, 0); font-weight: 700; }
.titel .deShow { font-size: 5.2cqw; line-height:5.5cqw; letter-spacing: 5px; }
.titel .enShow { font-size:3.64cqw; line-height:3.91cqw; letter-spacing: 3.5px; margin-top:20px; }
.impressumButton, .xButton { position:absolute; z-index: 100; right:0; top:0; background-repeat: no-repeat; background-position: left bottom; background-size: contain; width:5.73cqw; height:8.33cqw; }
.impressumText { position: absolute; top: 27.1cqw; left: 57.2cqw; width: 40cqw; font-size: 1.26cqw; line-height: 1.42cqw; font-weight: 300; }
.iTitel { font-weight:700; margin-bottom:1.04cqw; }
.iWhat { font-weight:700; color:var(--highlightFarbe); margin-top:1.04cqw; }
p { margin:20px 0 0 0; }

.enSelect { position:absolute; top: 26.98cqw;left: 62.91cqw; width: 20.62cqw; height: 25.83cqw; font-size: 2.6cqw; line-height: 3.65cqw; padding:9.89cqw 0 0 6.25cqw; letter-spacing: 0px; background-size: contain; }
.deSelect { position:absolute; top: 22.71cqw; left: 78.38cqw; width: 16.46cqw; height: 24.27cqw; font-size: 2.6cqw; line-height: 3.65cqw; padding:9.06cqw 0 0 3.85cqw; letter-spacing: 0px; background-size: contain; }
.enSelect > div, .deSelect > div { transform: matrix(0.98, -0.19, 0.19, 0.98, 0, 0); }

.anzeigeVideo { position:absolute; left:0; top:-30px; }
.themenVideo { left:970px; top:322px; }
video { width:1920px; height:1080px; }
.themenVideo video { width:810px; height:456px; }
.videoControls { position: absolute; bottom:-30px; left:0px; height:60px; width:100%; background-color: var(--bgFarbe); }
.themenVideo .videoControls { top:470px; left:0px; }
.playPauseContainer { width:90px; height:60px; position: absolute; left:0px; top:0px; z-index: 100; background-repeat: no-repeat;  background-size: 26px 30px; background-position: 40px center; filter: drop-shadow(0px 2px 2px #00000069); }
.playPauseContainer.pause { }
.progressContainer { width:1370px; height:60px; position: absolute; left:100px; top:0px; z-index: 100; }
.progressBar { width:1370px; height:8px; background-color:var(--highlightFarbe); position: absolute; left:100px; top:26px; z-index: 0; transform:skew(-20deg); }
.progressBullet { width:40px; height:40px; background-color:var(--textFarbe); border-radius: 20px; position: absolute; left:-20px; top:-17.5px; z-index: 0; transition: none !important; /*transition: left .1s linear !important;*/ filter: drop-shadow(0px 2px 2px #00000069); }
.progressLine { width:0; height:8px; background-color:var(--weiss); position: absolute; left:0px; top:0px; z-index: 0; transition: none !important; /*transition: left .1s linear !important;*/ }
.timeContainer { width:100px; height:60px; position: absolute; top:0px; left:1493px; font-size:20px; }
.timeContainer div { float:right; width:90px; line-height: 60px; font-size: 28px; margin:0px 0 0 0; }
.timeContainer div.currentTime { margin-left:5%; }
.timeContainer div.totalTime {  margin-left:8px; }
.hiddenControl { display:none; }
.volume { width:87px; min-height:60px; position:absolute; left:1583px; bottom:0; }
.volumeButton { position:absolute; left:0; bottom:0; width:100%; height:60px; background-size: auto 30px; background-repeat: no-repeat; background-position: center center; }
.volumeBar { position: absolute; left:0; bottom:60px; width:100%; height:180px; background-color: var(--bgFarbe); }
.volumeFloor { pointer-events: none; position: absolute; left:50%; bottom:0; width:50%; height:90%; background-color: #4c4c4b; transform:translate(-50%, 0); }
.volumeMiddle { pointer-events: none; position: absolute; left:50%; bottom:0; width:50%; height:90%; background-color: var(--weiss); transform:translate(-50%, 0); }
.volumeBarOverlay { pointer-events: none; position: absolute; left:0; bottom:0; width:100%; height:100%; }
.untertitel { width:87px; min-height:60px; position:absolute; left:1670px; bottom:0; }
.untertitelButton { position:absolute; left:0; bottom:0; width:100%; height:60px; background-size: auto 30px; background-repeat: no-repeat; background-position: center center; }
.untertitelBar { position: absolute; left:0; bottom:60px; width:250px; height:180px; background-color: var(--bgFarbe); font-size:28px; font-weight: 400; }
.utTitel { padding:32px 0 0 41px; margin-bottom:10px; }
.utOnOff { width:100%; background-size: 20px 20px; line-height: 50px; background-repeat: no-repeat; background-position: 41px center; padding:0 0 0 80px; }
.languageBox { position:absolute; left:91.5cqw; bottom:0; width:8.49cqw; height:3.12cqw; line-height: 3.12cqw; font-size: 1.56cqw; text-align: center; }
.languageBox .language { display:inline-block; width:.365cqw; opacity:0.3; letter-spacing: 1.5px; }
.languageBox .language.aktiv { opacity:1; }
.languageBox span { opacity:0.3; }
.filmNeuStarten { position:absolute; z-index: 100; left:0px; top:30px; width:110px; height:140px; background-position: 30px 30px; background-repeat: no-repeat;}
#back { position:absolute; z-index: 100; left:0px; top:1.56cqw; width:5.73cqw; height:7.29cqw; background-position: 1.56cqw 1.56cqw; background-repeat: no-repeat; background-size: 4.17cqw 5.73cqw; }

.swiper-container { position:absolute; top:250px; left:50%; transform:translate(-50%, 0); width:1400px; height:800px; text-align: center;}
.swiper-container a { display:block; position: relative; width:100%; height:85%; }
.swiper-container img { object-fit: contain; object-position: center center; display: block; width:100%; height:100%; }
/*.swiper-container img { display: block; width:auto; height:80%; position:relative; left:50%; top:50%; transform:translate(-50%, -50%); }*/
.swiper-slide .textBild { text-align: left; padding:0 100px; position: relative; top:50%; transform:translate(0, -50%);}
.swiper-slide .textBild a { position:static; width:auto; height:auto; }
.swiper-slide .textBild img { width:100%; height:auto; }
.swiper-slide .anzeigeVideo { position:static; }
.swiper-slide video { margin-top:30px; }
.swiper-slide .videoControls { width:1088px; left:156px; }