@charset "utf-8";
/* CSS Document */
/*
* {box-sizing: border-box; }
body, html { position: relative; }
body { font-family: 'Barlow'; font-weight: 400; color:#fff; font-size: 20px; line-height: 24px; overflow:hidden; user-select:none; }
.countdown { display:none !important; position:fixed; background-color:#000; color:#fff; bottom:0px; left:0px; padding:10px; z-index:4000; }
*/
#response h1, #response h2, #response h3, #response h4, #response h5 { font-family: 'Barlow Condensed'; font-weight:600; text-transform: uppercase; margin:0px; color:#fff; }

.stationstitel { font-size:100px; line-height: 80px; color:#fff; }
.stationstitel span { font-size:80px; }
.start { position:absolute; z-index: 0; top:50%; left:50%; transform:translate(-50%, -60%); }
.start p { width:487px; margin-left:3px; margin-top:1em; }
.startButton { position:absolute; z-index: 0; bottom:10%; left:50%; transform:translate(-50%, 0%); width:240px; line-height: 50px; text-align: center; background-color: #FFFFFF; font-size:30px; text-transform: uppercase; font-family: 'Barlow Condensed'; color:#F7A600; }
.impressumButton { display: none; cursor: auto; position:absolute; z-index: 20; top:0px; left:1702px; padding:39px 0 0 20px; width:218px; height:110px; color:#FFFFFF; font-size:30px; line-height: 36px; text-transform: uppercase; font-family: 'Barlow Condensed'; /*background-image:url('../img/bild-maximieren.png'); background-repeat: no-repeat; background-position: 180px 20px;*/ transition: all .5s ease-in-out; }
.impPlus { filter: drop-shadow(0px 2px 2px #00000069); position:absolute; top:57px; left:156px; }
.line { position: absolute; height: 5px; width: 50px; background: #fff; display: block; transition: all .5s ease-in-out; transform-origin: center; }
.line.vert { transform: rotate(90deg); }
.impressumButton .line { top:0px; left:0px; width:26px; height:3px; }
.bildPlus .line { top:45px; right:25px; transition: all 1s ease-in-out; }
.impressumButton.offen { color:#000; transition: all .5s ease-in-out; }
.impressumButton.offen .line { background: #000; }
.impressumButton.offen .line.vert { transform: rotate(0deg); }
.impressumContainer { display: none; background: #fff; color:#000; width:480px; height:1080px; position:absolute; z-index: 0; top:0px; right:-480px; transition: all .5s ease-in-out; padding:201px 64px 0 64px; font-size: 20px; line-height: 24px; }
.impressumContainer div { font-family: 'Barlow Condensed'; text-transform: uppercase; font-size: 25px; line-height: 30px; margin:8px 0 40px 0; }
.impressumContainer.offen { right:0px; transition: all .5s ease-in-out; }
.impressumContainer p { margin:10px 0 0 0; }

.weiterFull { cursor: pointer; position:absolute; z-index: 10; top:0; left:0; width:100%; height:100%; outline:none; }

.swiper-container { width: 100%; height: 100%; }
.swiper-slide { text-align: center; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; overflow:hidden; }
.swiper-button-next, .swiper-button-prev { width:calc(var(--swiper-navigation-size)/ 44 * 200); height:200px; justify-content:flex-start; top:calc(50% - 100px); outline:none; cursor: auto; filter: drop-shadow(0px 2px 2px #00000069); }
.swiper-button-next { justify-content: flex-end; }
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: .15; }

.quellenangabe { position:absolute; z-index: 10; bottom:40px; left:0px; padding:2px 37px 5px 37px; }
.bildPlus { cursor:auto; position:absolute; z-index: 10; top:0px; left:746px; width:200px; height:200px; transition: all 1s ease-in-out; filter: drop-shadow(0px 2px 2px #00000069); }
.bildFull .bildPlus { top:0px; left:1720px; transition: all 1s ease-in-out; }
.bildFull .bildPlus .line.hor { transform: rotate(45deg); }
.bildFull .bildPlus .line.vert { transform: rotate(135deg); }
.swiperBild { position:absolute; z-index: 0; }
.textContainer { position:absolute; z-index: 10; top:0px; left:946px; width:974px; height:1080px; background: #ffffff; padding:392px 0 0 171px; color:#000; text-align: left; transition: all 1s ease-in-out; }
.bildFull .textContainer { left:1920px; transition: all 1s ease-in-out; }
.textContainer p, .textContainer h1 { width: 487px; }
.textContainer h1 { font-size: 50px; line-height: 60px; }
.hide.swiper-button-next { right:-200px; transition: all .5s ease-in-out; }
.hide.swiper-button-prev { left:-200px; transition: all .5s ease-in-out; }
.swiper-button-next { transition: all 1s ease-in-out; cursor: pointer; }
.swiper-button-prev { transition: all 1s ease-in-out; cursor: pointer; }


/* barlow-condensed-600 - latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  src: local('Barlow Condensed SemiBold'), local('BarlowCondensed-SemiBold'),
       url('../fonts/barlow-condensed-v4-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/barlow-condensed-v4-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* barlow-300 - latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 300;
  src: local('Barlow Light'), local('Barlow-Light'),
       url('../fonts/barlow-v4-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/barlow-v4-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* barlow-regular - latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  src: local('Barlow Regular'), local('Barlow-Regular'),
       url('../fonts/barlow-v4-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/barlow-v4-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* barlow-500 - latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  src: local('Barlow Medium'), local('Barlow-Medium'),
       url('../fonts/barlow-v4-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/barlow-v4-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* barlow-600 - latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  src: local('Barlow SemiBold'), local('Barlow-SemiBold'),
       url('../fonts/barlow-v4-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/barlow-v4-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


.countdown { display: block; }
/*html, .quellenangabe { background-color: #F7A600; }*/
.startButton { color:#F7A600; }
.textStadtrecht { width:1127px; }
.textStadtrecht h1 { font-size: 3.3vh; line-height: 3.9vh; text-align: left; display: grid; grid-template-columns: 25px auto; position: relative; left:0px; }
.swiper-slide .textStadtrecht h1:nth-of-type(2) { margin-top:40px; }
.textStadtrecht p { font-size: 1.8vh; line-height: 2.1vh; text-align: left; }
.swiper-button-next { top:auto; right:auto; bottom:0px; left:calc(50% - 40px); }
.swiper-button-prev { top:12px; right:auto; bottom:auto; left:calc(50% - 40px); }
.swiper-button-next, .swiper-button-prev { width:80px; height:80px; transform-origin: center; transform: rotate(90deg); justify-content: center; }
.status { display:none; position: fixed; left:0; top:0; background-color: #fff; color:#000; padding:20px; }
/*
.para { position:relative; left:-60px; }
.paraText { position:relative; left:-29.34px; }
*/
.swiper-slide { color:#f8b326; transition:all 0.5s ease-in-out; padding:0 2%; }
.swiper-slide.swiper-slide-active { color:#ffffff; transition:all 0.5s ease-in-out; }
audio { display:none; }

#response { width:100%; height:90vh; position:relative; background-color: #F7A600; font-family: 'Barlow'; font-weight: 400; color:#fff; font-size: 20px; line-height: 24px; }

/*Hochkant*/
@media screen and (max-width:1200px) and (max-aspect-ratio: 16/16) {

}
/*4:3*/
@media screen and (max-width:1200px) and (min-aspect-ratio: 11/9) {

}
/*16:10*/
@media screen and (max-width:1200px) and (min-aspect-ratio: 16/10) {

}
/*16:9*/
@media screen and (max-width:1200px) and (min-aspect-ratio: 15/9) {

}
/*Breakpoints*/
@media screen and (max-width:1200px) {
	.start { width:96%; }
	.start p { width:100%; }
	.stationstitel { font-size: 80px; line-height: 60px; }
}
@media screen and (max-width:992px) {

}
@media screen and (max-width:768px) {

}