/* touch color images */
@media (hover: none) {
	.tile .bgs .bs{
	}
}

@media screen and (max-width: 1500px) {
	.detail .bigtext{
		column-count:2;
	}
}

@media screen and (max-width: 1200px) {
   
    .grid{
      	 grid-template-columns: repeat(3, 1fr);
    }
	.grid.mw1{
		grid-template-columns: repeat(1, 1fr) !important;
	}
	.grid.mw2{
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.grid.mw3{
		grid-template-columns: repeat(3, 1fr) !important;	
	}
	.grid.mw4{
		grid-template-columns: repeat(4, 1fr) !important;	
	}
    
     /* flex */
	
	.flex.mw1 > div{
		flex:0 0 100%;
	}
	.flex.mw2 > div{
		flex:0 0 50%;
	}
	.flex.mw3 > div{
        flex:0 0 33.3%;	
    }
	.flex.mw4 > div{
		flex:0 0 25%;
	}
	
	.detail .bigtext{
		column-count:2;
	}
	.detail .section_w50{
		width:66%;
	}
}

@media screen and (max-width: 1024px) {
   
    .grid{
      	 grid-template-columns: repeat(2, 1fr);
    }
	.grid.mw1{
		grid-template-columns: repeat(1, 1fr) !important;
	}
	.grid.mw2{
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.grid.mw3{
		grid-template-columns: repeat(2, 1fr) !important;	
	}
	.grid.mw4{
		grid-template-columns: repeat(2, 1fr) !important;	
	}
    
     /* flex */
	
	.flex.mw1 > div{
		flex:0 0 100%;
	}
	.flex.mw2 > div{
		flex:0 0 50%;
	}
	.flex.mw3 > div{
        flex:0 0 33.3%;	
    }
	.flex.mw4 > div{
		flex:0 0 25%;
	}
    .detail .section_w100{
		width:100%;
	}
	.detail .section_w75{
		width:100%;
	}
    .detail .section_w50{
        width:100%;
    }
	/* text */
	.detail-text{
		width:75%;
	}
    .page-text h3{
		padding-bottom:12px;
	}
	.detail .bigtext{
		column-count:2;
	}
    
	/* media */
	.detail .medias.section_w100{
		width:100%;
	}
	.detail .medias.section_w75{
		width:100%;
	}
    
    /* data */
    .detail .data{
		column-count: 1;
		column-gap: 0px;
	}
	/*
}

/*ipad hochformat */

@media screen and (max-width: 768px) {
    
	.content-item h3{
		font-size: 48px;
		padding:48px 0px 44px;
	}
    /* limitlines */
    .detail .bigtext{
		column-count:1;
	}
    
	.limitlines{
		position: relative;
		padding:8px 0px;
		margin-bottom:1rem;
	}
	.limitlines > div{
		position: relative;
		margin-bottom:24px !important;
		max-height:78px;
		overflow: hidden;
		transition: all 0.3s;
		margin-bottom:0px !important;
	}
	.limitlines.on > div{
		position: relative;
	}
	
	.limitlines.big > div{
		max-height:117px;	
	}
	.limitlines.on > div{
		max-height:2000px;	
		padding-bottom:0px;
	}
	.limitlines.more:after{
		position: absolute;
		bottom:0px;
		left:0px;
		width:100%;
		height:24px;
		background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%);
		content:'';
	}
	.limitlines.on.more:after{
		display: none;
	}
	.limitlines .plus{
        display: block !important;
		position: absolute;
		right:auto;
		left:0px;
		bottom:-24px;
		width:60px;
		height:24px;
		cursor:pointer;
		text-align: left;
		z-index: 200;
        hyphens: none;
	}
	.limitlines.on .plus{
		display: block;
	}
	.limitlines .plus span{
		border-bottom:1px solid black;	
	}

}

/* mobiles */
@media screen and (max-width: 600px) {
	.mobilehide{
		display: block;
	}
	.navigation .nav{
		width:100%;
	}
	
    .grid{
      	grid-template-columns: repeat(1, 1fr);
		margin:0px 0px;
    }
    
    /* navigation */
    
	.topbarx a{
		width:48px;
		height:48px;
		top:8px;
		right:-4px;
		font-size:48px !important;
		line-height:48px !important;
	}
	.topbarx a.burger{
        display: block;	
		width:48px;
		height:48px;
		top:8px;
		right:4px;
		font-size:48px;
		line-height:48px;
		padding:0px;
	}
    
    .topbarx a.back{
		top:4px;
        left:6px;
		background-size:100%;
    }
    .navigation a.back{
        left:-60px;
    }
	.nav{
		width:48px;
		height:48px;
		top:8px;
		right:8px;
	}
    .navi a{
        font-size:48px;
	}
    
    section{
		padding: 0px;
    }
	.detail .section_w50{
		width:100%;
	}
	
	
    
    /* home images */
    .home, .mm.fullscreen{
		height: 85vh;
	}
	.mm .logo{
		line-height: 85vh;
	}
    
    /* tiles */
	.tile{
		margin-bottom:0px;
	}
	.tile .bgs{
		margin:0px;
	}

	/* text tiles */
	.tile.news, .tile.topic, .tile.team{
		margin:0px !important;
		padding:0px 8px;
		min-height:77px;
	}
	.tile .tiletext{
        padding:8px 0px;
		border-top:1px solid var(--color-dimmed-40);
    }
	.tile.project .tiletext{
		padding:8px;
	}
	.tilelink:last-child .tiletext{
		border-bottom:1px solid var(--color-dimmed-40);
	}
	.tilelink.highlight:last-child{
		border-bottom:0px solid black;
	}
	
	/* comp */
	.tile.comp .bgs{
		border-width:0px;
	}

	.tile .date, .tile .title{
		text-align: center;
	}
	.tile .bgs .ft span{
        font-size: 48px;
		padding:8px 8px 4px 8px !important;
	}
   
    
	section h2{
		padding: 48px 8px 48px;
		font-size:48px;
		line-height:1;
        hyphens: auto;
		hyphenate-limit-chars: 8 4 4;
	} 
	section .credits{
		margin:-60px 15% 0px;
	}
	
	/* DETAIL*/
	.detail.project .pagetitle h2{
		font-size:48px;
		line-height:1.1;
	}
	.detail-text{
		width:100%;
		margin-left:0%;
	}
	.sectiontext{
		width:100%;
	}
	.detail .content{
		padding:60px 0px 20px;
	}
	.detail .pagetitle{
		padding:0px !important;
	}
	.detail .pagetitle > div{
		padding:0px !important;
	}
    .detail section:last-child{
        margin-bottom:0px;
    }
	.detail h3{
		font-size:48px;
		line-height: 1;
        padding:48px 8px 44px;
		width:100% !important;
	}
    .detail h3.left{
        padding-bottom:6px;
    }
    .medias h4{
		font-size:24px;
		padding:16px 0px 16px;
	}
	
	/* drtail medias */
	.detail .medias.section_w75{
		width:100%;
	}
	.detail .bigtext{
		column-count:unset;
		column-gap:0px;
        padding:0px 8px;
	}
    
    .detail .mediatext{
        padding: 0px 8px;
    }
    .detail .mediatext i{
		width:16px;
		height:16px;
		padding:1px 0px;
	}
    .detail .sectiontext{
		padding:0px 8px;
	}
	.detail .detail-text{
        padding:0px 8px;
    }
	.detail .text-data{
		padding:0px;
	}
	
	#detail .slideshow{
		height: 100vw;
	}
	
	#detail .slideshow > div{
		background-size:cover; 
	}
    
	.detail table .year{
		width:100px;
	}
    
	.detail .data{
        padding:0px 8px;
    }
	
	.detail .medias.w1 .img.space{
		padding:0px;
	}
    
    
	#idaktuell .tile h4 > div{
		display: block;
		text-align: left;
	}
	
	#idkontakt h2{
		font-size:48px;
		line-height: 1;
	}
	
	#idkontakt a:after{
		bottom:3px;
	}
	.content-item{
		padding-top:0px;
		padding-bottom:0px;
	}
	.content-item.news .text{
		width:100%;
	}
	.content-item.news .links{
		width:100%;
	}
	.content-item table tr, .content-item table td{
		display:block;
		
	}
	.content-item table .year{
		text-align:left;
		color:var(--color-dimmed-40);
	}
	.content-item .medias{
		grid-template-columns:1fr;
	}
	.content-item .medias > div:only-child{
		width:100%;
	}

	/* limitlines */
	
	.limitlines{
		position: relative;
		margin-bottom:1rem;
	}
	.limitlines > div{
		position: relative;
		max-height:86px;
		overflow: hidden;
		transition: all 0.3s;
		margin-bottom:0 !important;
	}
	.limitlines.on > div{
		position: relative;
	}
	
	.limitlines.big > div{
		max-height:117px;	
	}
	.limitlines.on > div{
		max-height:2000px;	
		padding-bottom:0px;
	}
	.limitlines.more:after{
		position: absolute;
		bottom:0px;
		left:0px;
		width:100%;
		height:24px;
		background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%);
		content:'';
	}
	.limitlines.on.more:after{
		display: none;
	}
	.limitlines .plus{
		position: absolute;
		right:auto;
		left:8px;
		bottom:-24px;
		width:60px;
		height:24px;
		cursor:pointer;
		text-align: left;
		z-index: 200;
	}
	.limitlines.on .plus{
		display: block;
	}
	.limitlines .plus span{
		border-bottom:1px solid black;	
		
	}
	
	/* grids */
	.grid a{
		margin-bottom:0px;
	}
	.grid.sw1{
		grid-template-columns: repeat(1, 1fr) !important;
	}
	.grid.sw2{
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.grid.sw3{
		grid-template-columns: repeat(3, 1fr) !important;	
	}
	.grid.sw4{
		grid-template-columns: repeat(4, 1fr) !important;	
	}
    
    /* flex */
	.flex.sw1{
		margin:0px;
	}
	.flex.sw1 > div{
		flex:0 0 100%;
		padding:0px;
	}
	.flex.sw2 > div{
		flex:0 0 50%;
	}
	.flex.sw3 > div{
        flex:0 0 33.3%;	
    }
	.flex.sw4 > div{
		flex:0 0 25%;
	}
	
}