body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}
header,footer,nav,section,aside,main,article,figure,figcaption{display:block}body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,ol,ul,li,dl,dt,dd,figure,table,th,td,form,fieldset,legend,input,textarea{margin:0;padding:0}table{border-spacing:0;border-collapse:collapse}caption,th,td{text-align:left;text-align:start;vertical-align:top}abbr,acronym{font-variant:normal;border-bottom:1px dotted #666;cursor:help}blockquote,q{quotes:none}fieldset,img,iframe{border:0}ul{list-style-type:none}sup{vertical-align:text-top}sub{vertical-align:text-bottom}del{text-decoration:line-through}ins{text-decoration:none}body{font:12px/1 "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;color:#000}input,button,textarea,select{font-family:inherit;font-size:99%;font-weight:inherit}pre,code{font-family:Monaco,monospace}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}h1{font-size:1.8333em}h2{font-size:1.6667em}h3{font-size:1.5em}h4{font-size:1.3333em}table{font-size:inherit}caption,th{font-weight:700}a{color:#00f}h1,h2,h3,h4,h5,h6{margin-top:1em}h1,h2,h3,h4,h5,h6,p,pre,blockquote,table,ol,ul,form{margin-bottom:12px}
@charset "UTF-8";
/* CSS Document */

/* roboto-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 200;
  src: url('../../files/fonts/roboto-v48-latin-200.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../../files/fonts/roboto-v48-latin-200.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../../files/fonts/roboto-v48-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../../files/fonts/roboto-v48-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../../files/fonts/roboto-v48-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../../files/fonts/roboto-v48-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../../files/fonts/roboto-v48-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../../files/fonts/roboto-v48-latin-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  src: url('../../files/fonts/roboto-v48-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../../files/fonts/roboto-v48-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../../files/fonts/roboto-v48-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../../files/fonts/roboto-v48-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 800;
  src: url('../../files/fonts/roboto-v48-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../../files/fonts/roboto-v48-latin-800.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: url('../../files/fonts/roboto-v48-latin-900.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../../files/fonts/roboto-v48-latin-900.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
@charset "UTF-8";
/* CSS Document */

body{
font-size:18px;
text-rendering:optimizelegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family:'Roboto', sans-serif;
font-weight:400;
background-color:#fff;
color:#252525;
}

html {
	scroll-behavior: smooth;
}
html, body {
	min-height:100%;
}
.hintergrund {
	    width: 100%;
    height: 100vh;
}

.hintergrund .innerbox,
.hintergrund figure,
.hintergrund img{
	max-width:inherit;
	height:100vh;
}
.hintergrund img{
	position:fixed;
}

.hintergrund .sonnenaufgang3{
	position: absolute;
    z-index: -1;
}
.hintergrund .sonnenaufgang3 {
	opacity:1;
	transition: opacity 5s ease;
}
.hintergrund .innerbox {
	align-items:center;
}
.opener {
	width:100%;
	height: 100vh;
	display: flex;
     justify-content: center;
     align-items: center;
	font-weight: 900;
	font-size: 10vh;
	text-transform: uppercase;
	color:rgba(255, 255, 255, 0.7);
	opacity: 1;
	transition-delay: 5s;
  transition: opacity 5s ease;
	position:fixed;
	margin-left:10%;
	line-height:100%;
}

body.loaded .opener {

}

.mask-wrapper {
	position:relative;
	height: 10vh;
	transition: all 0.5s ease-in-out;
	transition-delay: 1s;
}

.mask-box {
	overflow:hidden;
	height:0;
	position:absolute;
	bottom:0;
	opacity:0;
}
body.loaded .mask-box {
	transition: all 1s ease-in-out;
	height: 10vh;
	opacity:1;
}

.opener .item {
	display:inline-flex;
}


.mask-wrapper {
	/*align-items:baseline;
	background-color:aqua;*/
	
}



.opener .mask-box.winning {
	transition-delay: 0s;
	
}
.opener .mask-box.hearts {
	transition-delay: 0.2s;
}
.opener .mask-box.and {
	transition-delay: 0.4s;
}
.opener .mask-box.minds {
	transition-delay: 0.6s;
}


.opener .rte {
	position:relative;
	width:100%;

}


	.mask-appear{position: relative;display: inline-block;}
	.mask-appear-wrapper{display: block;position: relative;overflow: hidden;white-space: nowrap;z-index: 1;}
	.mask-appear-inner{display: block;transition: transform 1s 0s;will-change: transform;}

	.mask-appear.hidden .mask-appear-inner{transform: translateY(100%);transition: all 0s 0s;} 


.rest {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.first-letter {
	display:inline-flex;
}
.extra-letters {
	display:inline-flex;
	/*position:absolute;*/
	opacity:0;
	/*letter-spacing: -20vw;*/
	
	width:0;
	filter: blur(5px);
	 transition: opacity 0.5s ease-in-out, filter 0.5s ease-in-out, width 0s linear;
	/*transition: all 0.5s;*/
}

.intro-phase-2 .extra-letters {
	display:inline-flex;
	/*position:absolute;*/
	opacity:1;
	/*letter-spacing: 0vw;*/
	
	width:200px;
	filter: blur(0);
	transition-delay: 1.5s, 1.5s, 1.5s;
	
}


/* Wenn ein Elternelement die Klasse intro-phase-2 hat, wird .rest ausgeblendet */

.rest {
	
}

.intro-phase-2 .winning .rest {
  opacity: 0;
}
.intro-phase-2 .hearts .rest {
  opacity: 0;
	transition-delay: 0.2s;
}
.intro-phase-2 .and .rest {
  opacity: 0;
	transition-delay: 0.4s;
}
.intro-phase-2 .minds .rest {
  opacity: 0;
	transition-delay: 0.6s;
}

.intro-phase-2 .mask-wrapper {
	height:0;
}

.intro-phase-2 .mask-box.winning {
	overflow:visible;
}
/*.opener {
	transition: font-size 0.5s linear;
}

.intro-phase-2 .opener {
	font-size:15vh;
	transition-delay:3s;
}*/

.intro-phase-1 .mask-wrapper {
	position:relative;
	height: 10vh;
	transition: all 0.5s ease-in-out;
	transition-delay: 0s;
}

.intro-phase-1 .winning .rest {
  opacity: 1;
	transition-delay: 0.5s;
}
.intro-phase-1 .hearts .rest {
  opacity: 1;
	transition-delay: 0.7s;
}
.intro-phase-1 .and .rest {
  opacity: 1;
	transition-delay: 0.9s;
}
.intro-phase-1 .minds .rest {
  opacity: 1;
	transition-delay: 1.1s;
}

/* beim hochscrollen*/





.intro-phase-2 .hearts .first-letter,
.intro-phase-2 .and .first-letter,
.intro-phase-2 .minds .first-letter{
 transition: opacity 0.5s ease-in-out, filter 0.5s ease-in-out;
}

.intro-phase-2 .hearts .first-letter,
.intro-phase-2 .and .first-letter,
.intro-phase-2 .minds .first-letter{
  opacity: 0;
filter: blur(5px);
transition-delay: 1.3s;
}




/* Für Elemente mit Hintergrund über die volle Breite und Inhalt zentriert */
/* hierfür wurde der neue Wrapper "innerbox" eingesetzt*/
  
.innerbox,  .inner-innerbox {
margin: 0 auto;
display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
width:100%;
}
/* weiterer neuer Wrapper fuer extra Fullscreen-Bildhintergründe im Artikel*/
.extra-wrapper {
	width:100%;
}
/*mind. sm*/
@media (min-width: 576px) {
  .innerbox, .inner-innerbox {
    max-width: 540px;
  }
}

/*mind. md*/
@media (min-width: 768px) {
  .innerbox,  .inner-innerbox {
    max-width: 720px;
  }
}

/*mind. lg*/
@media (min-width: 992px) {
  .innerbox,  .inner-innerbox {
    max-width: 960px;
  }
}
/*mind. xl*/
@media (min-width: 1200px) {
	.innerbox,  .inner-innerbox {
    	max-width: 1140px;
	}
}


/* Für Elemente, deren Inhalte nicht geboxt sein sollen sondern die über die ganze Breite gehen sollen */
/* die row muss die klasse "row-full" erhalten*/

.row-full .innerbox{
	width:inherit;
	max-width:inherit;
}
.row.row-full {
	display:block;

}

#container {
	font-size:1.0rem;
	line-height:150%;
	}
@media (min-width: 768px) {
	#container {
	font-size:1.15rem;
	line-height:150%;
	}
}

h1,h2,h3,h4,h5,h6 {
	margin:0;
	font-weight:700;
	line-height:110%;
	}

h1 {
	font-size: 2.2rem;
	margin-top: 30px;
    margin-bottom: 15px;
}

h2 {
	font-size: 1.5rem;
    margin-top: 30px;
    margin-bottom: 6px;
	}
h3 {
	font-size: 1.9rem;
    margin-bottom: 6px;
	}
h4 {
	font-size: 1.8rem;
    margin-bottom: 12px;
	}
h5 {
	font-size: 1.0rem;
    margin-bottom: 12px;
	}
h6 {
	font-size: 1.0rem;
    margin-bottom: 12px;
	}


p {
	line-height: 150%;
	padding-top:100px;
	padding-bottom:100px;
	
}




.block1,
.block2,
.block3{
	height: 100vh;
	line-height:120%;
	position: relative
}

.block1 .innerbox,
.block2 .innerbox,
.block3 .innerbox{
	height: 100vh;
	display: flex;
     justify-content: center;
     align-items: center;
	font-weight: 700;
	font-size: 3rem;
}

.block1 {
	/*background-color: aqua;*/
	
}
.block2 {
/*	background-color:cadetblue;*/
}
.block3 {
	/*background-color:lavender;*/
}
.block1 .animation-content,
.block2 .animation-content,
.block3 .animation-content{
	
}
.block2 .animation-content{
	animation: fadein linear;
	animation-timeline: view();
	animation-range-start: 100px;
	animation-range-end: 100px;
	opacity: 0;
}

/* Scrollup-Pfeil -----------------------------*/
.scrollup {
  position: fixed;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%) translateY(0); /* horizontal zentriert + Ausgangsy */
  width: 120px;  /* doppelt so breit */
  height: 120px; /* doppelt so hoch */
  opacity: 0;
  transition: opacity 2s ease;
  cursor: pointer;
  user-select: none;
}

.scrollup.visible {
  opacity: 0.5;
}

@keyframes slideUpAndReset {
  0%   { transform: translateX(-50%) translateY(0); opacity: 0.5; }
  40%  { transform: translateX(-50%) translateY(-10px); opacity: 0.5; }
  50%  { opacity: 0; }
  60%  { transform: translateX(-50%) translateY(10px); opacity: 0; }
  80%  { opacity: 0.5; }
  100% { transform: translateX(-50%) translateY(0); opacity: 0.5; }
}

.scrollup.animating {
  animation: slideUpAndReset 3s ease-in-out infinite;
}
.scrollup img {
  width: 100%;
  height: 100%;
}


/* Scrollup-Pfeil Ende -----------------------------*/



/* Für ersten Langtext */
.center-container {
  position: fixed;
  top: 40%; /* leicht unter Mitte starten */
  left: 10%; /* feste horizontale Position */
  transform: translateY(var(--scrollY, 0px));
  max-width: 90%;
  width: 85%;
  text-align: left;
  pointer-events: none;
  font-size: 3vh;
  transition: transform 0.2s ease-out;
line-height:130%;
	color:#fff;
}

.center-container .large {
	font-size:1.4em;
}

#centerContainer2.center-container{
	left:auto;
	right:10%;
	text-align:right;
}


	  @media (min-width: 1200px) {
		  .center-container {
			  width: 60%;
		
		  }
		  
	  }
	 

	  
@media (min-width: 992px) {
  .center-container {
    font-size: 3vh;
  }
}
	  
@media (min-width: 1200px) {
  .center-container {
    font-size: 4vh;
  }
}


    .langtext-wrapper {
      display: inline-block;
   
      pointer-events: auto;
      max-width: 100%;
    }

    .langtext-fragment {
      display: inline-block;
      opacity: 0;
      transform: translateY(20px);
      transition: all 0.6s ease;
     /* white-space: nowrap;*/
    }
@media (min-width: 1200px) {
	  .langtext-fragment {
      white-space: nowrap;
    }
	  }

    .langtext-fragment.first {
      opacity: 1;
      transform: none;
    }

    .langtext-fragment.absatz {
      display: inline-block;
      width: 100%;
      text-align: left;
	display:block;
		height:0.75em;
    }
	  .langtext-fragment.umbruch {
      display: inline-block;
      width: 100%;
      text-align: left;
		  display:block;
		  height:0;
    }

    .langtext-fragment.visible {
      opacity: 1;
      transform: translateY(0);
    }


body .opener {
	opacity:1;
}
body.szene1 .opener {
	opacity:0;
}
body .langtext1,
body .langtext2,
body .langtext3{
	/*background-color:#ffffff30;*/ /*development*/
	opacity:0;
	transition: opacity 0.5s linear;
	height:300vh;
}

body.preload-langtext1 .langtext1,
body.langtext1 .langtext1,
body.langtext1-back .langtext1{
	opacity:1;
}

body.preload-langtext2 .langtext2,
body.langtext2 .langtext2,
body.langtext2-back .langtext2{
	opacity:1;
}

body.preload-langtext3 .langtext3,
body.langtext3 .langtext3,
body.langtext3-back .langtext3{
	opacity:1;
}

.zwischenblock1 {
	height:500px;
	display:block;
	/*background-color:#ffffff80;*/ /*development*/
}
.zwischenblock2 {
	height:1000px;
	display:block;
	/*background-color:#ffffff80;*/ /*development*/
}

.preload-langtext1,
.preload-langtext2,
.preload-langtext3{
	display:block;
	height:300px;
	width:100%;
	/*background-color:#000;*//*development*/
}