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:#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: 2s;*/
  transition: opacity 1s 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%;

}

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

*/


.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:#ffffff;
	opacity:1;
	font-weight: 600;
}


.center-container .large,
.last-center-container .large {
	font-size:1.4em;
	font-weight:900;
}

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

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



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

/* Ausnahme letzter Abschnitt */
.last-center-container {
position: fixed;
    top: 30%;
    left: 0;
    max-width: 100%;
    width: 100%;
    text-align: center;
    pointer-events: none;
    font-size: 3vh;
    transition: transform 0.2s ease-out;
    line-height: 130%;
    color: #ffffff;
    opacity: 0.7;
    font-weight: 600;
    visibility: hidden;
}
body.preload-section12 .last-center-container,
body.section12 .last-center-container {
	visibility:visible;
}


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

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


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

    .langtext-fragment {
      display: inline-flex;
      opacity: 0;
      transform: translateY(20px);
      transition: all 0.6s ease;
     /* 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 {
     /*opacity: 0.7;*/
		animation: fadeInAndDim 1s forwards;
      transform: translateY(0);
    }

    .langtext-fragment.first {
     /* opacity: 1 !important;*/
      transform: none;
    }
/*.langtext-fragment.first.visible {
animation: fadeInAndDim 1s forwards;
    }*/

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


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

/* 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;
	/*background-color:#ffffff80;*/ /*development*/
}
.zwischenblock2 {
	height:1000px;
	display:block;
	/*background-color:#ffffff80;*/ /*development*/
}
.zwischenblock3 {
	height:100px;
	display:block;
	/*background-color:#ffffff80;*/ /*development*/
}
.zwischenblock4 {
	height:950vh;
	display:block;
	/*background-color:#ffffff80;*/ /*development*/
}

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

.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: fixed;
    top: 50vh;
    bottom: 0;
	z-index:50;
	transform: translateY(var(--scrollY));
}
.section7{
	height:300vh;
	
}
.grid, .tile, .card-content, .card-inner {
  box-sizing: border-box;
}
 .grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-auto-rows: 30vh;
      gap: 20px;
      margin: 0 auto;
      width: 80%;
      margin-top: 5vh;

      position: relative;
    }



    .tile {
      display: flex;
      /*align-items: center;
      justify-content: center;*/
      color: white;
      font-weight: bold;
      border-radius: 6px;
      cursor: pointer;
      transition: transform 30.5s ease, background-color 0.3s ease;
      position: relative;
		opacity:1;
		/*visibility: hidden;*/
    }


body .tile{
transition: opacity 1s ease, left 1s ease, right 1s ease;

}
body.section7 .tile{
visibility:visible;
}

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;
	/*transition-delay:1.5s;*/
}
body.section7 .tile.k5,
body.section7-back .tile.k5{
	right:0;
	transition-delay:1.5s;
}
	  .card-titel {
		 color:#fff;
		  text-transform: uppercase;
		  font-size:1.0vw;
		  font-weight:600;
		  padding-left: 2.5vw;
    padding-top: 4vh;
	  }
	  .card-content {
		  position: absolute;
		  left: 2.5vw;
		  right:1.5vw;
		  top:8.0vh;
		  color:#000;
		  /*transition: all 3.5s ease;*/
		
		  overflow:hidden;
	  }
	  .card-content h2{
		 margin: 0 0 20px 0;;
		 font-size: 1.9vw;
		  color:#fff;
		  font-weight:900;
		
	  }


.tile.active .card-content h2 {
	display:none;
}
/* Für erwzungenen Umbruch im Desktop */
	  .card-content h2 span{
		 display:block;
	  }
	  
	  .card-copy {
		  color:#cbdbfc;
		  font-weight:600;
		  font-size:1.4vw;
		  line-height:120%;
		  /*transition: all 3.5s ease;*/
		  opacity:0;
		  padding-left: 2.5vw;
		  padding-top: 2.5vh;
		  padding-top:50vh;
		  width: 75%;
	  }

	  
	  /*.tile.active .card-content {
		  top:10%;
		  transition: all 3.5s ease;
	  }*/
	  
	  .tile.active .card-copy {
 		opacity:1;
		 /* transition: all 3.5s ease;*/
		  padding-top:2.5vw;
		  transition: padding 1s ease, opacity 5s ease;
	  }

    .tile.active {
      /* Optional: Styles für aktive Kachel */
    }

    /* Grid-Spaltenverteilung im Zwölfer-System */
    .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; }

    .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;
      /*align-items: center;
      justify-content: center;*/
     
      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;
    }



	  
	.tile.k1.active .card-inner-1 {
    width: 150%;
    height: 150%;
    top: -50px;
	left:-15px;
    /*background-color: #ffffff80;*/
	background-color:#425170;
    z-index: 100;
  }
	.tile.k2.active .card-inner-2 {
    width: 150%;
    height: 150%;
    top: -50px;
	left: calc(-50% + 15px);
    /*background-color: #ffffff80;*/
	background-color:#425170;
    z-index: 100;
  }
	.tile.k3.active .card-inner-3 {
    width: 216%;
    height: 160%;
    /*background-color: #ffffff80;*/
	background-color:#425170;
    z-index: 100;
	top: calc(-60% + 50px);
	left:-15px;
  }
	.tile.k4.active .card-inner-4 {
    width: 150%;
    height: 150%;
    /*background-color: #ffffff80;*/
	background-color:#425170;
    z-index: 100;
	top: calc(-50% + 50px);
	left:-25%;
  }
	.tile.k5.active .card-inner-5 {
    width: 216%;
    height: 160%;
    /*background-color: #ffffff80;*/
	background-color:#425170;
    z-index: 100;
	top: calc(-60% + 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;
 }
	  
    /* Mobile Layout */
  @media (max-width: 991px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    width: calc(100% - 30px);
  }

  .k1 { grid-column: span 2; }         /* volle Breite */
  .k2, .k3, .k4, .k5 { grid-column: span 1; }  /* halbe Breite */

	  .card-content h2{
		 margin: 0 0 20px 0;
		  font-size:1.1rem;
		
	  }
	  
	   .card-content {
		  top:50%;
	  }
	  .card-copy {
		  
		  font-size:1.1rem;
	
	  }
  	.tile.k1.active .card-inner-1 {
    width:100%;
    height: 70vh;
    top: 0;
	left:0;
    background-color: #ffffff80;
    z-index: 100;
  }
	.tile.k2.active .card-inner-2 {
   width:200%;
    height: 70vh;
    top: -200px;
	left:0;
    background-color: #ffffff80;
    z-index: 100;
  }
	.tile.k3.active .card-inner-3 {
    width:200%;
    height: 70vh;
    top: -200px;
	left:-100%;
    background-color: #ffffff80;
    z-index: 100;
  }
	.tile.k4.active .card-inner-4 {
  width:200%;
    height: 70vh;
    top: -400px;
	left:0;
    background-color: #ffffff80;
    z-index: 100;
  }
	.tile.k5.active .card-inner-5 {
    width:200%;
    height: 70vh;
    top: -400px;
	left:-100%;
    background-color: #ffffff80;
    z-index: 100;
  }
	  
/* k2 und k5 soll 75% weniger hoch sein, k4 dafür 25% nach oben rutschen */
	  
	  .k2, .k5 {
		  height:75%;
	  }
	  .k4 {
		  top:-25%;
	  }
	  
}




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

.logo-container {

  position: fixed;
  top: 70vh;
  left: 20vw;
	
  display: grid;
  gap: 16px;
  padding: 20px 15px;
  margin: 0 auto;
  grid-template-columns: repeat(6, 1fr);
  max-width: 60vw;
  box-sizing: border-box;
  width: 60vw;
transform: translateY(var(--scrollY));
}

/* Tablet & kleiner */
@media (max-width: 959px) {
  .logo-container {
    width: 100%;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Smartphone */
@media (max-width: 767px) {
  .logo-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Desktop */
@media (min-width: 960px) {
  .logo-container {
    width: 60vw;
    padding-left: 0;
    padding-right: 0;
  }
}

.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(10px);
  transition:
    opacity 1.5s ease,
    transform 0.5s 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;
    right: 25%;
    left: 25%;
    width: 50%;
    font-size: 3vh;
}

.ueber-uns .langtext-fragment {
	font-size:3vh;
}
.ueber-uns .langtext-fragment.large {
	font-size:1.4em;
}

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

.kontakt-phone {
position:fixed;
	right:50px;
	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:300px;
}
.kontakt-phone a{
	display:block;
	width:70px;
	height:70px;
	background-image: url("../../files/images/icon-phone.png");
	background-size: contain;
	background-repeat: no-repeat;
}

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

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

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{
	display:none;
}

.footerlinks {
	position: fixed;
    bottom: 50px;
    z-index: 300;
    width: 100%;
    text-align: center;
	visibility: hidden;
}
body.section12 .footerlinks,
body.preload-section12 .footerlinks {
	visibility: visible;
}
.footerlinks div {
	display: inline-block;
}
.footerlinks a {
     display: block;
    color: #425170;
    text-decoration: none;
    margin-right: 10px;
    margin-left: 10px;
    background-color: #fff;
    opacity: 0.7;
    padding: 2px 10px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
}


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

.textseite .hintergrund {
	position: absolute;
	top:0;
	z-index: -1;
}
.textlayout {
	background-color: rgb(255, 255, 255, 0.7);
    padding: 100px;
    margin-top: 70px;
    margin-bottom: 100px;
    border-radius: 15px;
	color:#26324c;
	line-height: 130%;
}
.textlayout a {
	color:#26324c;
}
.textlayout h1 {
	font-weight: 900;
	margin-top:0;
	color:#425170;
}
.textlayout strong {
	font-weight: 600;
	
}
.textlayout p {
	font-size:1rem;
}
.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;
	
}