.layout{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

.layout.sub{
	gap:0;
}

/**************************LOGIN***********************/
div.login{
	width:calc(100% + 8rem);
	margin:-2rem 0 0 -4rem;
	height:0;
	padding-bottom: calc(9 / 40 * (100% + 8rem));
	position: relative;
	margin-bottom: 8rem;
	box-shadow: 0.3rem 0.3rem 2rem rgba(0,0,0,0.4);
	overflow: hidden;
}

div.login video{
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}


div.login div.loginForm{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	backdrop-filter: blur(2rem);
	-webkit-backdrop-filter: blur(2rem);
	width:100%;
	height:100%;
	display: flex;
	justify-content: center;
	transition: ease-in-out .2s all;

}
div.login form {
	align-self: start;
	margin-top: -1.5rem;
}

div.login div.loginForm form {
	align-self: center;
}

/**************************BOX***********************/
div.collection{
	margin-bottom:10rem;
}

div.box{
	padding:2rem 2rem 6rem 2rem;
	position: relative;
}

/**************************SATRT***********************/
.collection.start .twoTwelfths{
	flex-basis: 14%;
	width:14%;
}

.device {
	width:100%;
	margin: 0 auto;
	border: .5rem solid var(--darkGrey);
	border-radius: 2rem;
	background: var(--lightGrey);
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
	position: relative;
	aspect-ratio: 9 / 18.87;
	overflow: hidden;
}
.deviceContainer{
	position: relative;

	&.desktop{
		transform: translateX(-4rem);
	}
}
.deviceContainer.desktop .device{
	aspect-ratio: 16 / 10;
	border-radius: 1rem;
}

.deviceContainer.desktop:after{
	content:'';
	background: var(--darkGrey);
	position: absolute;
	top:100%;
	height:3rem;
	width:.5rem ;
	left:calc(50% - .25rem);
}

.deviceContainer.desktop:before{
	content:'';
	background: var(--darkGrey);
	position: absolute;
	top:calc(100% + 3rem);
	width:10rem;
	height:.5rem;
	border-radius: .5rem;
	left:calc(50% - 5rem);
}

.device-container .swiper {
	touch-action: pan-y;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	overflow: hidden;
	list-style: none;
	padding: 0;
	z-index: 1;
	display: block;
}

.swiper-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.swiper-slide {
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
	transition: ease-in-out .4s opacity;
}

.swiper-slide div {
	opacity: 0;
}


.swiper-slide img{
	max-width: 100%;
	height: auto;
}





/**************************ANGEBOT***********************/
div.collection.angebot div.box{
	overflow: hidden;

	&:afterXX{
		content:'';
		border:.2rem solid  var(--highlight);
		width:40rem;
		height:40rem;
		transform: rotate(-45deg);
		position: absolute;
		top: -9rem;
		left: -5rem;
		z-index: -1;
	}
}



div.collection.angebot .gallery{
	position: relative;
	aspect-ratio: 16/9;
	box-shadow: 0.3rem 0.3rem 5rem rgba(0,0,0,0.1);
	overflow:hidden;
	margin-left: -4rem;
	width:calc(100% + 4rem);
}

div.collection.angebot .gallery div{
	width: 100%;
	height: 100%;
	background-size: cover;
	position: absolute;
	transition: ease-in-out 1s opacity;
}

div.collection.angebot .gallery div + div {
	opacity: 0;
}


/**************************PROJEKT***********************/
div.collection.projekt .sixTwelfths div.oneHalf,
div.collection.projekt .sixTwelfths div.oneThird{
	flex-basis:100%;
	width:100%;
}

div.collection.projekt .sixTwelfths div.collection{
	padding:1.5rem 2rem;
	background:var(--middleGrey);
	margin-bottom: 0;
	box-shadow: 0.3rem 0.3rem 5rem rgba(0,0,0,0.1);
}

div.collection.projekt .sixTwelfths:nth-child(4){
	margin-top: 3rem;
}

div.collection.projekt .image{
	background-size: cover;
	background-position: center center;
	width:calc(100% + 4rem);
	margin:-1.5rem 0 3rem -2rem;
	height: 10rem;
}


/**************************TEAM***********************/
div.collection.team img{
	width:100%;
	aspect-ratio: 1;
	border-radius: 50%;
	border:.2rem solid var(--highlight);
}


div.collection.team .collection > .layout,
div.collection.faqItem > .layout{
	padding:2rem;
	margin-bottom: 2.5rem;
	gap: 0;
	box-shadow: 0.3rem 0.3rem 5rem rgba(0,0,0,0.1);
	transition: all ease-in-out .5s;
}

div.collection.team .collection > .layout .threeTwelfths:nth-child(2){
	flex-basis: 30%;
	width:30%;
	justify-content: center;
}
/*
div.collection.team .collection > .layout > .sixTwelfths:first-child{
	align-self: center;
}*/

div.collection.team .nineTwelfths{
	display:flex;
}

div.collection.team .nineTwelfths h2{
	margin-bottom: 0;
	align-self: center;
}
div.collection.team .collection > .layout > .sixTwelfths:first-child .layout:first-child{
	transition: all ease-in-out .5s;
}
div.collection.team .collection > .layout:not(.open) > .sixTwelfths:first-child .layout:first-child{
	margin-bottom: -1.5rem;
}

div.collection.team .collection > .layout > .sixTwelfths:first-child .layout:first-child img{
	z-index: 1;
	position: relative;
}
/*
div.collection.team .collection > .layout > .sixTwelfths:first-child .layout:last-child img{
   width:80%;
   margin-left: 10%;
}

div.collection.team .collection > .layout > .sixTwelfths:first-child .layout:last-child h2{
   font-size: 1.2rem;
} */

div.collection.team .collection > .layout > div.sixTwelfths:last-child > .layout > div{
	cursor: pointer;
	transition: all ease-in-out .5s;
	max-height: 10rem;
}
div.collection.team .collection > .layout > div.sixTwelfths:last-child >.layout.open > div{
	max-height: 50rem;
}

div.collection.team .collection > .layout > div.sixTwelfths:last-child > .layout > div{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-clamp: 6;
	-webkit-line-clamp: 6;
	transition: all ease-in-out .5s;
	text-overflow: ellipsis;
	white-space: initial;

}


div.collection.team .collection > .layout > div.sixTwelfths:last-child > .layout.open > div{
	line-clamp: 1000;
	-webkit-line-clamp: 1000;
}

div.collection.team .collection > .layout > div.sixTwelfths:last-child > .layout > span{
	cursor: pointer;
	font-size: .8rem;
}

/**************************TEAM***********************/


div.collection.faqItem{
	margin-bottom: 2rem;
}

div.collection.faqItem .fourTwelfths{
	width:31%;
	flex:0 0 31%;
}

[data-label='imprint']  .twelveTwelfths{
	column-gap: 3rem;
	column-count:3;
}

[data-label='imprint'] div.box{
	padding:0;
}

[data-label='faq'] div.box{
	padding:0;
}

[data-label='kontakt'] div.box{
	padding:0;
}