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 */

/* montserrat-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: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('../../files/fonts/montserrat-v30-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../../files/fonts/montserrat-v30-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* montserrat-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: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../../files/fonts/montserrat-v30-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../../files/fonts/montserrat-v30-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* montserrat-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: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('../../files/fonts/montserrat-v30-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../../files/fonts/montserrat-v30-latin-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* montserrat-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: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('../../files/fonts/montserrat-v30-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../../files/fonts/montserrat-v30-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* montserrat-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: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('../../files/fonts/montserrat-v30-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../../files/fonts/montserrat-v30-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* montserrat-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: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: url('../../files/fonts/montserrat-v30-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../../files/fonts/montserrat-v30-latin-800.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* montserrat-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: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: url('../../files/fonts/montserrat-v30-latin-900.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../../files/fonts/montserrat-v30-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:'Montserrat', sans-serif;
font-weight:400;
background-color:#000;
color:#252525;
}




html {
	scroll-behavior: smooth;
}
html, body {

}
.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 .hintergrund-kontakt img {
	opacity:0;
	transition: opacity 5s ease;
}

body.preload-section12 .hintergrund .hintergrund-kontakt img,
body.section12 .hintergrund .hintergrund-kontakt img{
	opacity: 1;
}

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




body.loaded .opener {

}

.mask-wrapper {
	position:relative;
	height: 7vh;
	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: 7vh;
	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%;

}

/* kann das weg?*/
.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;
}


.intro-phase-1 .mask-wrapper {
	position:relative;
	height: 7vh;
	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;
}







.intro-phase-2 .hearts .first-letter,
.intro-phase-2 .and .first-letter,
.intro-phase-2 .minds .first-letter{
 transition: opacity 0.1s 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;
}


@media (min-width: 740px) {
	.opener {
		font-size: 10vh;
	}
	body.loaded .mask-box {
	height: 10vh;
	}
	.mask-wrapper {
	height: 10vh;
	}
	.intro-phase-1 .mask-wrapper {
	height: 10vh;
	}
	
}


@media (min-width: 1200px) {
	.opener {
		font-size: 14vh;
	}
	body.loaded .mask-box {
	height: 14vh;
	}
	.mask-wrapper {
	height: 14vh;
	}
	.intro-phase-1 .mask-wrapper {
	height: 14vh;
	}
	
	
}


/* 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: 740px) {
  .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: 740px) {
	#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;
	}




.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: 90px;  
  height: 90px; 
  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 Langtexte */
.center-container {
  position: relative;
  margin: 0 auto;
  /*transform: translateY(var(--scrollY, 0px));*/
  max-width: 90%;
  width: 80%;
  text-align: left;
  pointer-events: none;
    font-size: 1.1rem;
  transition: transform 0.2s ease-out;
line-height:130%;
	color:#ffffff;
	opacity:1;
	font-weight: 600;
}


.center-container .large,
.last-center-container .large {
	font-size:1.5rem;
	font-weight:900;
	line-height:110%;
}

.last-center-container .absatz {
	height: 0.75em;
}

.center-container a,
.last-center-container a {
	color:#ffffff;
	text-decoration: none;
}





/* Ausnahme letzter Abschnitt */
.last-center-container {
position: fixed;
	bottom:30%;
    left: 0;
    max-width: 100%;
    width: 100%;
    text-align: center;
    pointer-events: none;
    font-size: 1rem;
    transition: transform 0.2s ease-out;
    line-height: 150%;
    color: #ffffff;
    opacity: 0.7;
    font-weight: 600;
    visibility: hidden;
}

@media (min-width: 740px) {
	.last-center-container {
		    font-size: 1.2rem;
		
	}
}
@media (min-width: 830px) {
	.last-center-container {
		    font-size: 1.2rem;
	}
}
@media (min-width: 992px) {
	.last-center-container {
		    font-size: 1.2rem;
		line-height: 130%;
	}
}
@media (min-width: 1200px) {
	.last-center-container {
		    font-size: 1.4rem;
	}
}

body.preload-section12 .last-center-container,
body.section12 .last-center-container {
	visibility:visible;
}

.last-center-container .langtext-wrapper{
	width:100%;
}

.logo-markentechnik {
	background-image: url("../../files/images/logo-markentechnik.png");
	background-repeat: no-repeat;
	background-size: contain;
	width: 70%;
	aspect-ratio:4 / 1;
	margin: 0 auto;
	margin-bottom:30px;
}


@media (min-width: 740px) {
	
	.center-container {
		font-size: 1.55rem;
		/*left: 10%;*/
	}
	
	/*#centerContainer2.center-container,
	#centerContainer4.center-container,
	#centerContainer6.center-container{
		right:10%;
	}*/
	.center-container .large,
	.last-center-container .large {
		font-size:2.2rem;
	}
	
	.logo-markentechnik {
		width:50%;
	}
	
}	 

	  
@media (min-width: 830px) {

	.logo-markentechnik {
		width:40%;
	}
}


@media (min-width: 992px) {
	.logo-markentechnik {
		width:30%;
	}
}
	  
@media (min-width: 1200px) {
  .center-container {
	width: 80%;
  }
	.center-container .large,
	.last-center-container .large {
		line-height:110%;
	}
}



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

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



    .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 {
		animation: fadeInAndDim 1s forwards;
      transform: translateY(0);
		transition: all 0.6s ease;
    }

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


@keyframes fadeInAndDim {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.7;
  }
}
@keyframes fadeOut {
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 0.7;
  }
}


body .opener {
	opacity:1;
}
body.startcontent .opener {
	opacity:0;
}
body .section1 {
	/*height:600vh;*/
	/*background-color:#994F5030; /*development*/
	opacity:1;
	transition: opacity 0.5s linear;
}
body .section2,
body .section3,
body .section4,
body .section5,
body .section6,
body .section10,
body .section11,
body .section12{
	/*background-color:#ffffff30; /*development*/
	opacity:0;
	transition: opacity 0.5s linear;
	/*height:600vh;*/
}

/* extra Höhe für 2. Teil Über uns*/
body .section10 {
	/*height:400vh;*/
}



/* Puffer zwischen Kacheln und Text danach */
body .section8 {
	/*height:200vh;*/
}

body.preload-section1 .section1,
body.section1 .section1,
body.section1-back .section1{
	opacity:1;
}
/* 2 verschwindet beim zurückscrollen*/
body.section1-back .section2 {
	opacity:0;
}

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

/* 3 verschwindet beim zurückscrollen*/
body.section2-back .section3 {
	opacity:0;
}

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

/* 4 verschwindet beim zurückscrollen*/
body.section3-back .section4 {
	opacity:0;
}

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

/* 5 verschwindet beim zurückscrollen*/
body.section4-back .section5 {
	opacity:0;
}

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

/* 6 verschwindet beim zurückscrollen*/
body.section5-back .section6 {
	opacity:0;
}

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

/* 8 verschwindet beim zurückscrollen*/
body.section7-back .section8 {
	opacity:0;
}

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

/* 9 verschwindet beim zurückscrollen*/
body.section8-back .section9 {
	opacity:0;
}

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

/* 10 verschwindet beim zurückscrollen*/
body.section9-back .section10 {
	opacity:0;
}

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

/* 11 verschwindet beim zurückscrollen*/
body.section10-back .section11 {
	opacity:0;
}

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

/* 12 verschwindet beim zurückscrollen*/
body.section11-back .section12 {
	opacity:0;
}

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



.zwischenblock1 {
	height:500px;
	display:block;
}
.zwischenblock2 {
	height:1000px;
	display:block;
}

/* vor logos*/
.zwischenblock3 {
	height:300vh;
	display:block;
}

@media (min-width: 740px) {
	.zwischenblock3 {
	height:150vh;
}
}
@media (min-width: 830px) {
	.zwischenblock3 {
	height:100px;
}
}

/*nach logos*/
.zwischenblock4 {
	height:1550vh;
	display:block;
}
@media (min-width: 740px) {
	.zwischenblock4 {
	height:600vh;
}
}

@media (min-width: 830px) {
	.zwischenblock4 {
	height:300vh;
}
}

@media (min-width: 992px) {
	.zwischenblock4 {
	height:700vh;
}
}


/*block über Teil2 von Über uns*/
.zwischenblock5 {
	height:500px;
	display:block;
}


.preload-section1,
.preload-section2,
.preload-section3,
.preload-section4,
.preload-section5,
.preload-section6,
.preload-section7,
.preload-section9,
.preload-section10,
.preload-section11,
.preload-section12{
	display:block;
	height:300px;
	width:100%;
	/*background-color:#000;*//*development*/
}




/* --------------- KACHELN -----------------*/

.grid-wrapper {
	width: 100vw;
    /*height: 100vh;*/
    position: relative;
    /*top: 40vh;
    bottom: 0;
	z-index:50;
	transform: translateY(var(--scrollY));*/
	margin-top:300px;
	margin-bottom:300px;
	transition: margin-top 1s ease;
	transition-delay: 0.5s;
}


body.kachelstart .grid-wrapper {
	margin-top:50px;
}
.section7{
	/*height:300vh;*/
	
	
}
.grid, .tile, .card-content, .card-inner {
  box-sizing: border-box;
}
 .grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: 200px;
      gap: 10px;
      margin: 0 auto;
	 width: calc(100% - 30px);
      
      margin-top: 5vh;

      position: relative;
 }


@media (min-width: 740px){

	 .grid {
    	grid-template-columns: repeat(12, 1fr);
		grid-auto-rows: 40vh;
    	width: 80%;
		gap: 10px;
		 
 	}
	 
} 

@media (min-width: 740px) and (orientation: portrait){

	 .grid {
    	grid-template-columns: repeat(12, 1fr);
		grid-auto-rows: 25vh;
    	width: 80%;
		gap: 10px;
		 
 	}
	 
}



 @media (min-width: 992px) {

	 .grid {
		grid-auto-rows: 40vh;
		gap: 10px;
		 
 	}
	 
}
 @media (min-width: 1200px) and (min-height: 800px), (min-width: 1400px) and (min-height: 700px){

	 .grid {
		grid-auto-rows: 35vh;
		gap: 20px;
		 
 	}
	.zwischenblock5 {
	height:100px;
	display:block;
	}
	 
}



.tile {
      display: flex;
      color: white;
      font-weight: bold;
      border-radius: 6px;
      cursor: pointer;
      transition: transform 30.5s ease, background-color 0.3s ease;
      position: relative;
		opacity:1;
}


body .tile{
/*visibility: hidden;*/
opacity: 1;
transition: opacity 1s ease, left 1s ease, right 1s ease;

}

body.section7 .tile,
body.section7-back .tile{
	visibility: visible;
	opacity: 1;
}

 @media (min-width: 1200px) and (min-height: 800px), (min-width: 1400px) and (min-height: 700px){
/* reinfliegen von den Seiten */
	 
	.section7 {
	/*height:700vh;*/
	 }
	 
	body .tile{
	visibility: visible;
	opacity: 1;
	}
	 
	

	 body.preload-section7 tile,
	 body.section7-back tile,
	  body.section7 tile{
		 visibility: visible;
		  opacity:1;
	 }
	body.section7 .tile{
	visibility:visible;
	opacity:1;
	}
	/*body .tile.k1{
		left:-100vw;
			transition-delay:1s;
		
	}
	body.section7 .tile.k1,
	body.section7-back .tile.k1{
		left:0;
	}
	body .tile.k2{
		right:-100vw;
		transition-delay:1.25s;
		
	}
	body.section7 .tile.k2,
	body.section7-back .tile.k2{
		right:0;
		transition-delay:0.5s;
	}
	body .tile.k3{
		left:-100vw;
	transition-delay:0.25;
	}
	body.section7 .tile.k3,
	body.section7-back .tile.k3{
		left:0;
		transition-delay:1s;
	}

	body .tile.k4{
		left:-100vw;
		transition-delay:0.5s;
	}
	body.section7 .tile.k4,
	body.section7-back .tile.k4{
		left:0;
		transition-delay:0.75s;
	}

	body .tile.k5{
		right:-100vw;
		
	}
	body.section7 .tile.k5,
	body.section7-back .tile.k5{
		right:0;
		transition-delay:1.5s;
	}*/
}
/* reinfliegen ende*/


.card-titel {
	color:#fff;
	text-transform: uppercase;
	font-size:0.85rem;
	font-weight:600;
	padding-left: 20px;
	padding-top: 20px;
	line-height: 110%;
}
	  
.card-content {
	/*position: absolute;
    left: 20px;
    right: 20px;
    top: 70px;*/
	color:#000;
	/*transition: all 3.5s ease;*/
	/*overflow:hidden;*/
}
	 
.card-content h2{
	font-size: 1.1rem;
    color: #fff;
    font-weight: 900;
    margin: 0;
    padding-left: 20px;
    padding-top: 12px;
    padding-right: 5px;
}
/* Für erwzungenen Umbruch in Kachel1 */
.k1 .card-content h2 span{
		display:block;
}


@media (min-width: 740px) {
	
	.card-titel {
		font-size: 0.7rem;
		padding-left: 2.5vw;
		padding-top: 4vh;
		line-height: 110%
	}

	.card-content h2{
		font-size: 1.4rem;
		margin: inherit;
		padding-left: 2.5vw;
		padding-right: 10px;
	}

	
}

@media (min-width: 992px) {
	
	.card-titel {
		font-size:1.0vw;
		padding-left: 2.5vw;
		padding-top: 4vh;
		line-height: inherit;
	}

	.card-content h2{
		font-size: 1.9vw;
		margin: inherit;
		padding-left: 2.5vw;
	}
		/* Für erwzungenen Umbruch*/
	.card-content h2 span{
		display:block;
	}
	
}



.tile.active .card-content h2 {
	display:none;
}


	  
.card-copy {
	color:#cbdbfc;
	font-weight:600;
	/*font-size: 0.95rem;*/ /*wird dynamisch durch javascript gesetzt*/
	line-height:120%;
	/*transition: all 3.5s ease;*/
	padding-left:20px;
	padding-top: 2.5vh;
	/*padding-top:50vh;*/
	width: 90%;
	
}
.card-copy p{
	opacity:0;
}


.card-copy p {
	margin-bottom:12px;
}


	  
.tile.active .card-copy {
	padding-top:20px;
}
.tile.active .card-copy p{
	opacity:1;
	/*transition: padding 1s ease, opacity 3s ease;*/
	transition: opacity 0.5s ease;
}


/* Grid-Spaltenverteilung im Zwölfer-System */
.k1 { grid-column: span 2; }      
.k2, .k3, .k4, .k5 { grid-column: span 1; } 


.k2, .k5 {
	height:150px;
}
.k4 {
	top:-50px;
}


 @media (min-width: 740px) {

	.k1 { grid-column: span 7; }
    .k2 { grid-column: span 5; }

    .k3 { grid-column: span 4; }
    .k4 { grid-column: span 5; }
    .k5 { grid-column: span 3; }
	 
	.k2, .k5 {
		  height:inherit;
	}
	.k4 {
		  top:inherit;
	}
	 
	 
	.card-copy {
		/*font-size: 1rem;*/ /*wird dynamisch durch javascript gesetzt*/
		line-height:120%;
		padding-left: 2.5vw;
		padding-top: 2.5vh;
		/*padding-top:50vh;*/
		width: 80%;
	}
	.tile.active .card-copy {
	padding-top:20px;
}
	 
}


 @media (min-width: 992px) {
	 
	.card-copy {
		
		/*font-size: 1.1rem;*/ /*wird dynamisch durch javascript gesetzt*/
		line-height:120%;
		padding-left: 2.5vw;
		padding-top: 2.5vh;
		/*padding-top:50vh;*/
		width: 80%;
	}
	.tile.active .card-copy {
	padding-top:20px;
}
	 
}

 @media (min-width: 1200px) and (min-height: 800px), (min-width: 1400px) and (min-height: 700px){

	 
	 
	 .card-copy {
		 width:65%;
	 }
	
	 
}




.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0);
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  /*transition: opacity 0.3s ease, visibility 0.3s ease;*/
}

.overlay.visible {
  opacity: 1;
  visibility: visible;
}

.card-inner {
	position: absolute;
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    width: 100%;
    height: 100%;
	transition:all 0.5s ease;		
	inset: 0 0 0 0;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	overflow:hidden;
	
	background-image: url("../../files/images/kachel-pfeil.svg");
	background-size:40px;
	background-repeat: no-repeat;
	background-position: bottom right;
}
.active .card-inner {
	
	background-image: url(../../files/images/close.png);
    background-size: 17px;
    background-repeat: no-repeat;
	background-position: top 25px right 25px;
	
}


/* aktive Kacheln */

	.tile.k1.active .card-inner-1 {
    width: 100%;
    height: 80vh;
    top: 0;
	left: 0;
	background-color:#425170;
    z-index: 100;
  }
	.tile.k2.active .card-inner-2 {
    width: calc(200% + 10px);
    height: 80vh;
    top: calc(-200px - 10px);
	left: 0;
	background-color:#425170;
    z-index: 100;
  }
	.tile.k3.active .card-inner-3 {
    width: calc(200% + 10px);
    height: 80vh;
	background-color:#425170;
    z-index: 100;
	top: calc(-200px - 10px);
	left:calc(-100% - 10px);
  }
	.tile.k4.active .card-inner-4 {
     width: calc(200% + 10px);
    height: 80vh;
    top: calc(-350px - 20px);
	left: 0;
	background-color:#425170;
    z-index: 100;
  }
	.tile.k5.active .card-inner-5 {
    width: calc(200% + 10px);
    height: 80vh;
	background-color:#425170;
    z-index: 100;
	top: calc(-400px - 20px);
	left:calc(-100% - 10px);
  }


 @media (min-width: 740px) {
/* aktive Kacheln Tablet */
	  
	.tile.k1.active .card-inner-1 {
    width: 120%;
    height: 225%;
    top: -50px;
	left:-15px;
  }
	.tile.k2.active .card-inner-2 {
    width: 160%;
    height: 225%;
    top: -50px;
	left: calc(-60% + 15px);
  }
	.tile.k3.active .card-inner-3 {
    width: 200%;
    height: 250%;
    top: calc(-150% + 50px);
	left:-15px;
  }
	.tile.k4.active .card-inner-4 {
    width: 150%;
    height: 250%;
    top: calc(-150% + 50px);
	left:-25%;
  }
	.tile.k5.active .card-inner-5 {
    width: 250%;
    height: 250%;
	top: calc(-150% + 50px);
	left: calc(-150% + 15px);
  }
}


@media (min-width: 992px) {
/* aktive Kacheln Desktop */
	  
	.tile.k1.active .card-inner-1 {
    width: 120%;
    height: 150%;
    top: -50px;
	left:-15px;
  }
	.tile.k2.active .card-inner-2 {
    width: 160%;
    height: 180%;
    top: -50px;
	left: calc(-60% + 15px);
  }
	.tile.k3.active .card-inner-3 {
    width: 200%;
    height: 180%;
	top: calc(-80% + 50px);
	left:-15px;
  }
	.tile.k4.active .card-inner-4 {
    width: 150%;
    height: 180%;
	top: calc(-80% + 50px);
	left:-25%;
  }
	.tile.k5.active .card-inner-5 {
    width: 216%;
    height: 180%;
	top: calc(-80% + 50px);
	left: calc(-116% + 15px);
  }
}
	  

.kachel-headline{
	    font-size: 2.6em;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 900;
    text-align: center;
	opacity:0;
	transition: opacity 1s easy;
  }

body.preload-section7 .kachel-headline,
body.section7 .kachel-headline,
body.section7-back .kachel-headline{
	    opacity:1;
 }



/* ------ CSS für Logos ------- */

.logo-container {
	position: relative;

	display: grid;
	padding: 20px 15px;
	margin: 0 auto;
	box-sizing: border-box;
	transform: translateY(var(--scrollY));
	
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 540px) {
	.logo-container {
		grid-template-columns: repeat(4, 1fr);
		gap: 8px;
		width: 100%;
		padding-left: 100px;
		padding-right: 100px;
	}
}
@media (min-width: 740px) {
	.logo-container {
		gap: 12px;
	}
}



@media (min-width: 830px) {
  .logo-container {
	grid-template-columns: repeat(6, 1fr);
	gap: 8px;
	width: 80%;
	
	padding-left: 0;
    padding-right: 0;
  }
}

@media (min-width: 1200px) {
  .logo-container {
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;

    width: 60vw;
    padding-left: 0;
    padding-right: 0;
  }
}

@media (min-width: 1400px) {
 .logo-container {
	gap: 16px;
  }
}


.logo {
  background-color: rgba(255, 255, 255, 0.1);
 border-radius: 15px;
backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s ease,
    transform 1.0s ease;
	background-repeat:no-repeat;
	background-position: center center;
	background-size: 80%;
}

.logo1 { background-image: url("../../files/images/logos/logo1.png"); }
.logo2 { background-image: url("../../files/images/logos/logo2.png"); }
.logo3 { background-image: url("../../files/images/logos/logo3.png"); }
.logo4 { background-image: url("../../files/images/logos/logo4.png"); }
.logo5 { background-image: url("../../files/images/logos/logo5.png"); }
.logo6 { background-image: url("../../files/images/logos/logo6.png"); }
.logo7 { background-image: url("../../files/images/logos/logo7.png"); }
.logo8 { background-image: url("../../files/images/logos/logo8.png"); }
.logo9 { background-image: url("../../files/images/logos/logo9.png"); }
.logo10 { background-image: url("../../files/images/logos/logo10.png"); }
.logo11 { background-image: url("../../files/images/logos/logo11.png"); }
.logo12 { background-image: url("../../files/images/logos/logo12.png"); }
.logo13 { background-image: url("../../files/images/logos/logo13.png"); }
.logo14 { background-image: url("../../files/images/logos/logo14.png"); }
.logo15 { background-image: url("../../files/images/logos/logo15.png"); }
.logo16 { background-image: url("../../files/images/logos/logo16.png"); }
.logo17 { background-image: url("../../files/images/logos/logo17.png"); }
.logo18 { background-image: url("../../files/images/logos/logo18.png"); }
.logo19 { background-image: url("../../files/images/logos/logo19.png"); }
.logo20 { background-image: url("../../files/images/logos/logo20.png"); }
.logo21 { background-image: url("../../files/images/logos/logo21.png"); }
.logo22 { background-image: url("../../files/images/logos/logo22.png"); }
.logo23 { background-image: url("../../files/images/logos/logo23.png"); }
.logo24 { background-image: url("../../files/images/logos/logo24.png"); }
.logo25 { background-image: url("../../files/images/logos/logo25.png"); }
.logo26 { background-image: url("../../files/images/logos/logo26.png"); }
.logo27 { background-image: url("../../files/images/logos/logo27.png"); }
.logo28 { background-image: url("../../files/images/logos/logo28.png"); }
.logo29 { background-image: url("../../files/images/logos/logo29.png"); }
.logo30 { background-image: url("../../files/images/logos/logo30.png"); }
.logo31 { background-image: url("../../files/images/logos/logo31.png"); }
.logo32 { background-image: url("../../files/images/logos/logo32.png"); }
.logo33 { background-image: url("../../files/images/logos/logo33.png"); }
.logo34 { background-image: url("../../files/images/logos/logo34.png"); }
.logo35 { background-image: url("../../files/images/logos/logo35.png"); }
.logo36 { background-image: url("../../files/images/logos/logo36.png"); }
.logo37 { background-image: url("../../files/images/logos/logo37.png"); }
.logo38 { background-image: url("../../files/images/logos/logo38.png"); }
.logo39 { background-image: url("../../files/images/logos/logo39.png"); }
.logo40 { background-image: url("../../files/images/logos/logo40.png"); }
.logo41 { background-image: url("../../files/images/logos/logo41.png"); }
.logo42 { background-image: url("../../files/images/logos/logo42.png"); }


.logo.active {
  opacity: 1;
  transform: translateY(0);
}


/* -------------- Über uns --------------*/

.ueber-uns {
	text-align:center;
    width: 90%;
    font-size: 1.1rem;
	margin: 0 auto;
	margin-top:50px;
}

.ueber-uns .langtext-fragment {
	font-size:1.1rem;
}
.ueber-uns .langtext-fragment.large {
	font-size:1.5rem;
}

@media (min-width: 740px) {
	.ueber-uns {
		
		width: 70%;
		font-size: 1.55rem;
	}
	.ueber-uns .langtext-fragment {
	font-size:1.55rem;
	}
	.ueber-uns .langtext-fragment.large {
	font-size:2.2rem;
	}
}

@media (min-width: 1200px) {
	.ueber-uns {
   
    width: 50%;
    
}

.ueber-uns .langtext-fragment {

}
.ueber-uns .langtext-fragment.large {

}
}



/* -------- Kontakt-Icons am Rand ---------*/

.kontakt-phone {
position:fixed;
	right:20px;
	bottom:600px;
	z-index:200;
	opacity:0;
	visibility: hidden;
	transition: all 1s ease;
	transition-delay: 1s;
}

body.kontakt .kontakt-phone{
	visibility: visible;
	opacity:0.7;
	bottom:150px;
}


.kontakt-phone a{
	display:block;
	width:50px;
	height:50px;
	background-image: url("../../files/images/icon-phone.png");
	background-size: contain;
	background-repeat: no-repeat;
}

.kontakt-mail {
	position:fixed;
	right:20px;
	bottom:600px;
	z-index:200;
	opacity:0;
	visibility: hidden;
	transition: all 1s ease;
}
body.kontakt .kontakt-mail{
	visibility: visible;
	opacity:0.7;
	bottom:80px;
}

.kontakt-mail a{
	display:block;
	width:50px;
	height:50px;
	background-image: url("../../files/images/icon-mail2.png");
	background-size: contain;
	background-repeat: no-repeat;
}

/*nicht zeigen bei den Kacheln*/
body.section7 .kontakt-phone,
body.section7-back .kontakt-phone,
body.section7 .kontakt-mail,
body.section7-back .kontakt-mail{
	display:none;
}

@media (min-width: 992px) {
	.scrollup {
  	width: 120px;  
  	height: 120px;
	}
	.kontakt-phone a,
	.kontakt-mail a{
		width:70px;
		height: 70px;
	}
	.kontakt-phone,
	.kontakt-mail{
		right:50px;
		
	}
	body.kontakt .kontakt-mail{
	bottom:200px;
	}
	body.kontakt .kontakt-phone{
	bottom:300px;
	}
	
	body.section7 .kontakt-phone,
	body.section7-back .kontakt-phone,
	body.section7 .kontakt-mail,
	body.section7-back .kontakt-mail{
	display:inherit;
	}
	.card-inner {
		background-size:60px;
	}
	tile.active .card-inner {
		background-size:22px;
	}
}



body.section12 .kontakt-phone,
body.preload-section12 .kontakt-phone,
body.section12 .kontakt-mail,
body.preload-section12 .kontakt-mail,
body.section12 .scrollup,
body.preload-section12 .scrollup,
body:not(.startcontent) .kontakt-phone,
body:not(.startcontent) .kontakt-mail{
	display:none;
}

.footerlinks {
	position: fixed;
    bottom: 50px;
    z-index: 300;
    width: 80%;
	left:10%;
	opacity:0.7;
	visibility: hidden;
}
.footer-bg {
	background-image: url(../../files/images/bottom.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
    position: absolute;
    bottom: 0;
    height: 400px;
    left: 0;
    width: 100%;
	z-index: 1;
}
body.section12 .footerlinks,
body.preload-section12 .footerlinks {
	visibility: visible;
}
.footerlinks div {
	display: inline-block;
}
.footerlinks a {
     display: block;
    color: #fff;
    opacity: 0.7;
    padding: 2px 10px;
    font-size: 0.85rem;
    font-weight: 500;
	background-color: #0f1a2e;
    border-radius: 50px;
    padding: 2px 21px;
}
.impressumlink {
	left:0;
	position:absolute;
}
.datenschutzlink {
	right:0;
	position:absolute;
}

@media (min-width: 740px) {
	.footerlinks {
	position: fixed;
    bottom: 80px;
    width: 80%;
	left:10%;
}
	.footerlinks a {
    padding: 2px 10px;
    font-size: 0.9rem;
}
}

@media (min-width: 830px) {
	.footerlinks {
	position: fixed;
    bottom: 80px;
    width: 80%;
	left:10%;
}
	.footerlinks a {
    padding: 2px 10px;
    font-size: 1rem;
}
}

@media (min-width: 992px) {
	.footerlinks {
	position: fixed;
    bottom: 80px;
    width: 80%;
	left:10%;
}
	.footerlinks a {
    padding: 2px 10px;
    font-size: 1rem;
}
}

/* ---------- Layout für Datenschutz und Impressum ------ */

.textseite .hintergrund {
	position: fixed;
	top:0;
	z-index: -1;
}
.textlayout {
	background-color: rgb(255, 255, 255, 0.7);
    padding: 50px 15px;
    border-radius: 15px;
    color: #26324c;
    line-height: 130%;
    margin: 50px 15px;
	font-size:1.0rem;
	
}
.textlayout a {
	color:#26324c;
}
.textlayout h1 {
	font-weight: 900;
	margin-top:0;
	color:#425170;
}
.textlayout strong {
	font-weight: 600;
	
}
.textlayout p {
	font-size:0.9rem;
}
.textlayout h2 {
	font-size:1.3rem;
	font-weight: 900;
	margin-bottom:10px;
}
.textlayout h3 {
	font-size:1.3rem;
	font-weight: 500;
	    margin-bottom: 12px;
	margin-top:20px;
}
.textlayout h4 {
	font-size:1.0rem;
	font-weight: 500;
	    margin-top: 12px;
	
}


@media (min-width: 740px) {
.textlayout {
	
    padding: 70px 30px;
 

    margin: 50px 15px;
	font-size:1.0rem;
	
}

	.textlayout p {
	font-size:1rem;
	}
}

@media (min-width: 992px) {
		.textlayout {
		padding: 100px;
		margin-top: 70px;
		margin-bottom: 100px;
		border-radius: 15px;
	}
	.textlayout p {
	font-size:1rem;
	}
}



/* ----------- Finetuning besondere Viewports ---------- */
/*sehr flache viewports*/
@media (min-aspect-ratio: 2/1) {
	.center-container {
		/*top:60%;*/
	}
	body .section10 {
		height:700vh
	}
	.zwischenblock4 {
        height: 1000vh;
    }
}


/*sehr flache viewports / Smartphone (Landscape)*/
@media (min-aspect-ratio: 2/1) and (max-height:440px),
(orientation: landscape)
and (max-height: 480px)
and (max-width: 1000px){
	.center-container {
		/*top:80%;*/
		width:60%;
		font-size:1.1rem;
		
	}
	.center-container .large,
	.last-center-container .large {
		font-size:1.5rem;
	}
	
	
	/* aufgrund des Formats wird das Grid wie im Desktop dargestellt, nicht wie im Portrait. */
	.grid {
    	grid-template-columns: repeat(12, 1fr);
		grid-auto-rows: 40vh;
    	width: 80%;
		gap: 10px;
		 
 	}
	
	.k1 { grid-column: span 7; }
    .k2 { grid-column: span 5; }

    .k3 { grid-column: span 4; }
    .k4 { grid-column: span 5; }
    .k5 { grid-column: span 3; }
	 
	.k2, .k5 {
		  height:inherit;
	}
	.k4 {
		  top:inherit;
	}
	
	
	.card-content h2 {
        font-size: 1.2rem;
    }
	
	.tile.k1.active .card-inner-1 {
    width: calc(170% + 10px);
    height: 90vh;
    top: 0;
	left: 0;
	background-color:#425170;
    z-index: 100;
  }
	.tile.k2.active .card-inner-2 {
    width: calc(243% + 10px);
    height: 90vh;
    top: 0;
	left: calc(-141% - 10px);
	background-color:#425170;
    z-index: 100;
  }
	.tile.k3.active .card-inner-3 {
        width: calc(305% + 10px);
        height: 90vh;
        background-color: #425170;
        z-index: 100;
        top: calc(-100% - 10px);
        left: 0;
  }
	.tile.k4.active .card-inner-4 {
     width: calc(245% + 10px);
        height: 90vh;
        top: calc(-100% - 10px);
        left: calc(-80% - 10px);
        background-color: #425170;
        z-index: 100;
  }
	.tile.k5.active .card-inner-5 {
   width: calc(410% + 10px);
        height: 90vh;
        background-color: #425170;
        z-index: 100;
        top: calc(-100% - 10px);
        left: calc(-312% - 10px);
  }
	   .card-copy {
        /*font-size: 0.9rem;*/ /*wird dynamisch durch javascript gesetzt*/
        line-height: 110%;
        padding-left: 2.5vw;
        padding-top: 2.5vh;
        /*padding-top: 50vh;*/
        width: 90%;
    }
	
	.ueber-uns {
		right: 25%;
        left: 25%;
        width: 50%;
		font-size: 1.1rem;
	}
	.ueber-uns .langtext-fragment {
	font-size:1.1rem;
	}
	.ueber-uns .langtext-fragment.large {
	font-size:1.5rem;
	}
	
	
	/* Typo-Bug in der activen Kachel, daher wird hier die Opacity-Transition entfernt */
	
	.card-copy p{
	opacity:0;
	}
	.tile.active .card-copy p{
	opacity:1;
	transition: none;
	}
	
	
	
	body .section1,
	body .section2,
	body .section3,
	body .section4,
	body .section5,
	body .section6,
	body .section9,
	body .section10,
	body .section11,
	body .section12{
	/*height:800vh;*/
	}

	body .section10 {
		height:1300vh
	}
	body .section11 {
		height:1300vh
	}
	.zwischenblock4 {
        height: 1000vh;
    }
	.logo-container {
	grid-template-columns: repeat(6, 1fr);
	gap: 8px;
	width: 80%;
	
	
	padding-left: 0;
    padding-right: 0;
  	}
	.last-center-container {
		top:inherit;
		bottom:20%;
	}
	
	/*block über Teil2 von Über uns*/
.zwischenblock5 {
	height:1500px;
	display:block;
}

}

/* bunte welt */

.color-layer {
	    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
	mix-blend-mode: soft-light;
	/*mix-blend-mode: normal;*/


}
/*
body.section1 .section1 .color-layer,
body.section1-back .section1 .color-layer{
	background-color: #0057ff20;
	opacity:1;
	transition: opacity 1.5s ease;
}
body.section1.preload-section2 .section1 .color-layer {
	background-color: #0057ff20;
	opacity:0;
	transition: opacity 1.5s ease;
}
*/
/*body:not(.section3) .color-layer-3 .color-layer{
	opacity:0;
	transition: opacity 3s ease-in-out;
}
body.section3 .color-layer-3 .color-layer{
	background-color: rgba(75,190,47,0.50);
	opacity:1;
	transition: opacity 3s ease-in-out;
}*/

/* Basisregel: Transition immer aktiv */
.color-layer1 {
    transition: opacity 2s ease-in-out;
	background-color:#61a0e6;
	opacity: 0;
}
.color-layer2 {
    transition: opacity 2s ease-in-out;
	background-color:#cb8f5a;
	opacity: 0;
}
.color-layer3 {
    transition: opacity 2s ease-in-out;
	background-color:#618990;
	opacity: 0;
}
.color-layer5 {
    transition: opacity 2s ease-in-out;
	background-color:#9a786c;
	opacity: 0;
}
.color-layer6 {
    transition: opacity 2s ease-in-out;
	background-color:#408eba;
	opacity: 0;
}
.color-layer8 {
    transition: opacity 2s ease-in-out;
	background-color:#1c5576;
	opacity: 0;
}
.color-layer9 {
    transition: opacity 2s ease-in-out;
	background-color:#1c5576;
	opacity: 0;
}
.color-layer10 {
    transition: opacity 2s ease-in-out;
	background-color:#1c5576;
	opacity: 0;
}
.color-layer11 {
    transition: opacity 2s ease-in-out;
	background-color:#215a78;
	opacity: 0;
}

/* Sichtbar, wenn body.section3 vorhanden */

/*
body.section1 .color-layer1,
body.section1-back .color-layer1,
body.section2 .color-layer2,
body.section2-back .color-layer2,
body.section3 .color-layer3,
body.section3-back .color-layer3,
body.section4 .color-layer4,
body.section4-back .color-layer4,
body.section5 .color-layer5,
body.section5-back .color-layer5,
body.section6 .color-layer6,
body.section6-back .color-layer6,
body.section7 .color-layer7,
body.section7-back .color-layer7,
body.section8 .color-layer8,
body.section8-back .color-layer8,
body.section9 .color-layer9,
body.section9-back .color-layer9,
body.section10 .color-layer10,
body.section10-back .color-layer10,
body.section11 .color-layer11,
body.section11-back .color-layer11{
    opacity: 1;
}
*/

/* Unsichtbar, wenn body.section3 fehlt */
/*body.section2 .color-layer1 {
    opacity: 0;
}
body.section3 .color-layer2 {
    opacity: 0;
}
body.section4 .color-layer3 {
    opacity: 0;
}
body.section6 .color-layer5 {
    opacity: 0;
}

body.section7 .color-layer6 {
    opacity: 0;
}
*/

body.startcontent .color-layer11 {
	opacity:1;
}

body.startcontent.kachelstart .color-layer11 {
	opacity:0;
}
body.startcontent.kachelstart .color-layer5 {
	opacity:1;
}
body.startcontent.ueberunsstart .color-layer5 {
	opacity:0;
}
body.startcontent.ueberunsstart .color-layer3 {
	opacity:1;
}
body.startcontent.logostart .color-layer3 {
	opacity:0;
}
/*body.startcontent.section7 .color-layer10 {
	opacity:1;
}*/


/*
body.section3.preload-section4 .color-layer-3 .color-layer {
	background-color: #00FFC920;
	opacity:0;
	transition: opacity 1.5s ease;
}*/





/*
body .section1,
body .section2,
body .section3,
body .section4,
body .section5,
body .section6,
body .section9,
body .section10,
body .section11,
body .section12{

}

body .section1 {
	background-color: #0057ff20;
	mix-blend-mode: normal;
}
body .section2 {
	background-color: #ffa20020;
	mix-blend-mode: normal;
}
body .section3 {
	background-color: #00fff010;
	mix-blend-mode: normal;
}
body .section4 {
	background-color: #9d2aff20;
	mix-blend-mode: normal;
}
body .section5 {
	background-color: #0057ff20;
	mix-blend-mode: normal;
}

body .section6 {
	background-color: #47845120;
	mix-blend-mode: normal;
}
body .section8 {
	background-color: #0057ff20;
	mix-blend-mode: normal;
}
body .section9 {
	background-color: #00318f20;
	mix-blend-mode: normal;
}
body .section10 {
	background-color: #0057ff20;
	mix-blend-mode: normal;
}
body .section11 {
	background-color: #9d2aff20;
	mix-blend-mode: normal;
}
*/


.section-fragment {

  
	opacity: 0;
display: inline-flex;
  transform: translateY(50px);
  transition: transform 0.6s ease, opacity 0.6s ease;
	
}

.section-fragment.large {

  
	opacity: 0;
display: inline-flex;
  transform: translateY(-50px);
  transition: transform 0.6s ease, opacity 0.6s ease;
	
}



.section-fragment.visible {
	
		/*animation: fadeInAndDimNew 1s forwards;*/
opacity:0.8;
      transform: translateY(0);

		transition: transform 1.5s ease, opacity 0.6s ease;
}



@keyframes fadeInAndDimNew {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.7;
  }
}
@keyframes fadeOutNew {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
  }
}

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


.textblock {

display:block;
margin-bottom:15vh;
	
}



.ueber-uns .textblock {
	/*margin-bottom:0vh;*/
	padding:0;
	
}

.textblock2,
.textblock4,
.textblock6{
	text-align:right;
}

@media (min-width: 992px) {
	.textblock {
	padding-right: 30%;
	}
	
	.textblock2,
	.textblock4,
	.textblock6{
	padding-left:30%;
	padding-right: inherit;
	}
}

.startscroll, .stopscroll {
	display:block;
	/*background-color:#f00;*/
	height:100px;
	margin-top:100vh;
}