@charset "utf-8";
@import url("https://use.typekit.net/elf1gmk.css");
/* CSS Document */
:root {
  --textFarbe: #FCFCF9;
  --bgFarbe: #25b9cd;
  --weiss: #fcfcf9;
  --highlightFarbe: #B43236;
  --violett: #b40071;
  --titelFont: museo-sans, sans-serif;
  --textFont: museo-sans, sans-serif;
}
* {box-sizing: border-box; }
.clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px; }
body { font-size:140%; }
body, html, #outerContainer { margin:0; padding:0; width:100%; height:100%; font-family: var(--textFont); font-weight:300; color:var(--textFarbe); background: var(--bgFarbe); overflow:auto; }
h1, h2, h3, h4 {font-weight: 300; }
#container { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }

.videoOnly { width:70%; height:auto; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }
.intro { background-image: url('../../bg.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-color: transparent; }
.intro h1 { font-weight: 800; font-size: 450%; margin:0; text-transform: uppercase;}
.intro h1:nth-of-type(3) { margin:0 0 20px 0;}
.intro .videoOnly { width:50%; height:auto; margin:20px auto 0 auto; position: static; transform:none; }
.intro .impressum { display: block; position:absolute; left:1%; bottom:0; line-height: 40px; padding:0 1% 0 0; color:#000; text-decoration: none; font-size: 80%; }
.embed-container { position: relative; padding-bottom: 56.25%; overflow: hidden; width: 100%; height: auto; }
.embed-container iframe, .embed-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
audio { width:100%; }

.textBild { width:80%; max-width:700px; height:auto; margin:80px auto 0 auto; padding-bottom:40px; }
/*
.textBild .text { width:45%; float:left; margin-bottom:40px; }
.textBild .bild { width:45%; float:right; font-size: 80%; }
*/
.textBild .text, .textBild .bild { width:100%; float:none; }
.textBild .bild img { width:100%; height:auto; }

.mittig {  margin:40px auto 0 auto; }
.absolutMittig { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.auswahlButton, .weiterButton { display:block; width:100%; max-width:400px; border:2px solid var(--violett); background-color: var(--violett); line-height: 50px; margin:30px auto; text-align: center; color:var(--textFarbe); text-decoration: none; cursor:pointer; opacity: 1;}
.weiterButton { cursor:auto; opacity:0.3; }
.weiterButton.aktiv { cursor:pointer; opacity:1; }
.intro .weiterButton { margin-bottom:50px; }

/*HOCHKANT*/
@media screen and (max-aspect-ratio: 16/16) {
	.textBild .text, .textBild .bild { width:100%; float:none; }
}

/*QUER*/

@media screen and (max-width:800px) and (min-aspect-ratio: 16/16) {
	.textBild .text, .textBild .bild { width:100%; float:none; }
}

/*REST*/
@media screen and (max-width:1920px) {
	.intro h1 { font-size:340%; }
}
@media screen and (max-width:1400px) {
	.intro .videoOnly { width:70%; }
}
@media screen and (max-width:1100px) {
	.intro h1 { font-size:260%; }
}

@media screen and (max-width:800px) {
	.videoOnly, .intro .videoOnly { width:90%; }
	body { font-size:120%; }
	.intro h1 { font-size:260%; }
}
@media screen and (max-width:520px) {
	.intro h1 { font-size:160%; }
}